:root {
  --bg: #141312;
  --panel: #1b1918;
  --text: #f3eee8;
  --muted: #b9aea3;
  --line: rgba(255,255,255,.14);
  --accent: #d48661;
  --accent-2: #9f586e;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Noto Sans JP", sans-serif;
  line-height: 1.7;
  letter-spacing: .01em;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 70px);
  background: linear-gradient(to bottom, rgba(10,9,9,.82), rgba(10,9,9,0));
  backdrop-filter: blur(4px);
}
.brand { display:flex; align-items:center; gap:12px; font-size:15px; letter-spacing:.08em; }
.brand-mark {
  display:grid; place-items:center; width:31px; height:31px;
  border:1px solid rgba(255,255,255,.45); border-radius:50%;
  font-family:"Playfair Display",serif; font-size:16px;
}
.header-actions { display:flex; align-items:center; gap:24px; }
nav { display:flex; gap:24px; font-size:13px; color:#ddd4cc; }
.lang-toggle {
  border:1px solid var(--line); background:rgba(0,0,0,.16); color:var(--text);
  padding:8px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px;
}
.hero {
  min-height: 96vh;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  padding: 150px clamp(24px, 7vw, 100px) 90px;
  background-image: url("hero-vespercommons.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero::after {
  content:""; position:absolute; inset:auto -8% -34% auto; width:58vw; height:58vw;
  border-radius:50%; background:radial-gradient(circle, rgba(211,125,91,.16), transparent 64%);
}
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,18,.78) 0%, rgba(6,10,18,.28) 45%, rgba(6,10,18,.12) 72%, rgba(6,10,18,.22) 100%); }
.hero-content { position:relative; z-index:2; max-width:900px; }
.eyebrow,.section-label { text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--accent); }
h1,h2,.statement { font-family:"Playfair Display","Noto Sans JP",serif; font-weight:500; }
h1 { font-size:clamp(54px, 10vw, 126px); line-height:.95; margin:12px 0 24px; letter-spacing:-.035em; }
.hero-copy { max-width:700px; color:#ddd2c8; font-size:clamp(18px,2.2vw,29px); line-height:1.55; }
.cta { display:inline-block; margin-top:30px; border-bottom:1px solid var(--accent); padding-bottom:4px; font-size:14px; }
.hero-image-note { position:absolute; right:36px; bottom:28px; z-index:2; color:rgba(255,255,255,.28); font-size:11px; letter-spacing:.08em; }
.section { max-width:var(--max); margin:0 auto; padding:120px 32px; }
.about-grid,.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
h2 { font-size:clamp(36px,5vw,65px); line-height:1.15; margin:12px 0 0; letter-spacing:-.025em; }
.body-copy { color:var(--muted); font-size:17px; }
.focus-section { border-top:1px solid var(--line); }
.focus-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:48px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.focus-grid article { padding:38px; min-height:240px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.focus-grid article span { color:var(--accent-2); font-size:12px; }
h3 { font-size:21px; font-weight:500; margin:28px 0 12px; }
.focus-grid p { color:var(--muted); margin:0; max-width:420px; }
.statement-section { padding:130px 32px; background:linear-gradient(135deg,#23191a,#181515); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statement { max-width:980px; margin:auto; text-align:center; font-size:clamp(30px,4.6vw,59px); line-height:1.38; color:#e8ddd4; }
.contact-card { align-self:end; border-top:1px solid var(--line); padding-top:24px; color:var(--muted); }
.contact-card a { color:var(--text); font-size:20px; }
footer { border-top:1px solid var(--line); padding:28px clamp(24px,5vw,70px); color:#8f857d; font-size:12px; }
@media (max-width:800px) {
  nav { display:none; }
  .site-header { padding:18px 20px; }
  .hero { min-height:88vh; padding:120px 24px 65px; }
  .hero-image-note { display:none; }
  .section { padding:88px 24px; }
  .about-grid,.contact-section { grid-template-columns:1fr; gap:42px; }
  .focus-grid { grid-template-columns:1fr; }
  .focus-grid article { min-height:auto; }
  .statement-section { padding:90px 24px; }
}
.philosophy-section { border-top:1px solid var(--line); }
.principles-grid { margin-top:48px; border-top:1px solid var(--line); }
.principles-grid article { display:grid; grid-template-columns:160px minmax(280px,.9fr) 1fr; gap:42px; padding:48px 0; border-bottom:1px solid var(--line); align-items:start; }
.principle-kicker { margin:8px 0 0; color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:12px; }
.principle-title { font-size:clamp(28px,3.2vw,44px); margin:0; }
.principles-grid article > p:last-child { margin:5px 0 0; color:var(--muted); }
.name-section { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr); max-width:1400px; margin:0 auto; border-top:1px solid var(--line); }
.name-image { min-height:100%; background-image:linear-gradient(rgba(10,12,18,.1),rgba(10,12,18,.35)),url("hero-vespercommons.png"); background-size:cover; background-position:center; }
.name-story { padding:120px clamp(32px,6vw,90px); background:#171514; }
.name-story h2 { margin-bottom:42px; }
.story-copy { max-width:720px; color:var(--muted); }
.story-copy h3 { margin:42px 0 14px; color:var(--text); font-family:"Playfair Display","Noto Sans JP",serif; font-size:30px; }
.story-copy blockquote { margin:50px 0; padding:28px 0 28px 28px; border-left:2px solid var(--accent); color:var(--text); font-family:"Playfair Display","Noto Sans JP",serif; font-size:clamp(24px,2.5vw,36px); line-height:1.5; }
@media (max-width:1000px) {
  .principles-grid article { grid-template-columns:120px 1fr; }
  .principles-grid article > p:last-child { grid-column:2; }
  .name-section { grid-template-columns:1fr; }
  .name-image { min-height:48vh; }
}
@media (max-width:800px) {
  .principles-grid article { grid-template-columns:1fr; gap:18px; padding:38px 0; }
  .principles-grid article > p:last-child { grid-column:auto; }
  .name-story { padding:88px 24px; }
  .name-image { min-height:38vh; }
}

/* V3 refinement: quieter ivory accents + mobile hero fit */
:root {
  --accent: #e7e0d4;
  --accent-2: #aaa6b2;
}
@media (max-width:800px) {
  .hero { padding-left: 22px; padding-right: 22px; }
  .hero-content { width:100%; max-width:100%; }
  h1 {
    font-size: clamp(40px, 12.3vw, 58px);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
    margin: 10px 0 22px;
  }
  .hero-copy {
    max-width: 92%;
    font-size: clamp(17px, 4.9vw, 22px);
    line-height: 1.6;
  }
  .eyebrow,.section-label,.principle-kicker { color: var(--accent); }
  .cta { border-bottom-color: rgba(231,224,212,.72); }
}
@media (max-width:390px) {
  h1 { font-size: 11.7vw; }
}