:root{
  --sumi:#0b0f0e;
  --raw:#f7f5ef;
  --smoke:#8c8c8c;
  --smoke-soft:#c9c9c6;
  --straw:#e7dfc1;
  --verdigris:#c3d6d1;
  --fuji:#dcd2df;
  --line:rgba(247,245,239,0.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{height:100%;}

body{
  background:var(--sumi);
  color:var(--raw);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

img{display:block;max-width:100%;}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--smoke-soft);
}

/* ---------- SITE HEADER (persists on every page) ---------- */

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,5vw,56px);
  mix-blend-mode:difference;
}

.site-header img{
  height:20px;
  width:auto;
}

.nav-toggle{
  background:none;
  border:none;
  cursor:pointer;
  width:34px;
  height:20px;
  position:relative;
  padding:0;
}
.nav-toggle span{
  position:absolute;
  left:0; right:0;
  height:1px;
  background:var(--raw);
  transition:transform .35s var(--ease), opacity .35s var(--ease), top .35s var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }

.nav-toggle.is-open span:nth-child(1){ top:9px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ---------- SIDE NAV ---------- */

.side-nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,15,14,0.55);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
  z-index:55;
}
.side-nav-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}

.side-nav{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:min(420px, 88vw);
  background:var(--sumi);
  border-left:1px solid var(--line);
  z-index:58;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(90px,12vh,120px) clamp(28px,5vw,52px) 44px;
}
.side-nav.is-open{ transform:translateX(0); }

.side-nav-links{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.side-nav-links a{
  display:flex;
  align-items:baseline;
  gap:16px;
  text-decoration:none;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.6rem,4vw,2.1rem);
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--raw);
  transition:opacity .25s var(--ease), padding-left .25s var(--ease);
}
.side-nav-links a .idx{
  font-size:13px;
  font-weight:600;
  color:var(--smoke);
  letter-spacing:0.06em;
}
.side-nav-links a:hover{
  opacity:0.6;
  padding-left:10px;
}
.side-nav-links a.is-current{
  color:var(--smoke-soft);
}
.side-nav-links a.is-current .idx{ color:var(--verdigris); }

.side-nav-foot{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.side-nav-foot p{
  font-size:13px;
  line-height:1.6;
  color:var(--smoke);
}
.side-nav-foot a.mail{
  font-size:13px;
  color:var(--raw);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  width:fit-content;
  padding-bottom:2px;
}

body.nav-open{ overflow:hidden; }

/* ---------- HERO (home / single fold) ---------- */

.hero{
  position:relative;
  height:100dvh;
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8vh clamp(20px,6vw,80px);
  overflow:hidden;
}

.batten-field{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(4px, 1.1vw, 14px);
  pointer-events:none;
  z-index:0;
  opacity:0.55;
}
.batten-field span{
  display:block;
  width:clamp(2px, 0.55vw, 7px);
  background:linear-gradient(to bottom, transparent, rgba(247,245,239,0.55) 40%, rgba(247,245,239,0.55) 60%, transparent);
  animation:sway 9s var(--ease) infinite;
  transform-origin:center;
}
@keyframes sway{
  0%,100%{ transform:scaleY(0.86); opacity:0.35; }
  50%{ transform:scaleY(1); opacity:0.85; }
}

.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:720px;
}

.mark{
  width:min(96px, 18vw);
  height:auto;
  margin-bottom:clamp(20px,4vh,32px);
  opacity:0;
  animation:rise 1.1s var(--ease) forwards;
  animation-delay:0.15s;
}

.hero .eyebrow{
  opacity:0;
  animation:rise 1s var(--ease) forwards;
  animation-delay:0.45s;
  margin-bottom:18px;
}

h1{
  font-size:clamp(2.1rem, 5.4vw, 4.1rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.01em;
  opacity:0;
  animation:rise 1.1s var(--ease) forwards;
  animation-delay:0.6s;
}

h1 em{
  font-style:normal;
  color:var(--smoke-soft);
}

.hero p.sub{
  margin-top:18px;
  font-size:clamp(0.95rem, 1.5vw, 1.1rem);
  line-height:1.6;
  color:var(--smoke-soft);
  max-width:460px;
  opacity:0;
  animation:rise 1.1s var(--ease) forwards;
  animation-delay:0.8s;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

form.notify{
  margin-top:clamp(24px,4vh,36px);
  display:flex;
  width:100%;
  max-width:420px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  opacity:0;
  animation:rise 1.1s var(--ease) forwards;
  animation-delay:1s;
}
form.notify input[type="email"]{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--raw);
  font-family:'Manrope',sans-serif;
  font-size:15px;
  padding:6px 4px;
}
form.notify input[type="email"]::placeholder{ color:var(--smoke); }
form.notify button{
  background:none;
  border:none;
  color:var(--raw);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px 4px 6px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:opacity .25s var(--ease), gap .25s var(--ease);
  white-space:nowrap;
}
form.notify button:hover{ opacity:0.65; gap:12px; }
form.notify button svg{ width:14px; height:14px; flex-shrink:0; }

.notify-note{
  margin-top:12px;
  font-size:11px;
  color:var(--smoke);
  letter-spacing:0.02em;
  min-height:14px;
  opacity:0;
  animation:rise 1.1s var(--ease) forwards;
  animation-delay:1.1s;
}

/* ---------- INNER PAGE LAYOUT (about / contact) ---------- */

.page{
  min-height:100dvh;
  padding:clamp(120px,18vh,160px) clamp(20px,6vw,80px) clamp(70px,10vh,100px);
}

.page-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
  margin-bottom:min(9vh,70px);
  flex-wrap:wrap;
}
.page-head h1{
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:500;
  letter-spacing:-0.01em;
  animation:none;
  opacity:1;
}
.page-head .idx{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.2em;
  color:var(--smoke);
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- ABOUT ---------- */

.about-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  margin-bottom:min(12vh,110px);
}
.about-grid p{
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.7;
  max-width:44ch;
  color:var(--smoke-soft);
}

.values{ display:flex; flex-direction:column; gap:28px; }
.value-row{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.value-row:last-child{ border-bottom:none; padding-bottom:0; }
.chip{
  flex-shrink:0;
  width:14px;
  height:14px;
  border-radius:2px;
  margin-top:5px;
}
.chip.verdigris{ background:var(--verdigris); }
.chip.fuji{ background:var(--fuji); }
.chip.straw{ background:var(--straw); }
.value-row h3{
  font-size:15px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.value-row h3 span{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--smoke);
  margin-left:8px;
  font-size:14px;
}
.value-row p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--smoke);
  max-width:40ch;
}

/* Corporate structure */
.structure{
  border-top:1px solid var(--line);
  padding-top:min(9vh,70px);
}
.structure .eyebrow{ margin-bottom:26px; }
.structure-chain{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0;
}
.structure-node{
  flex:1 1 220px;
  padding:28px clamp(20px,3vw,32px);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
}
.structure-node + .structure-node{ border-left:none; }
.structure-node .tag{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--smoke);
}
.structure-node h4{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  font-weight:500;
}
.structure-node p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--smoke);
  max-width:34ch;
}
.structure-node.current{
  background:var(--raw);
  color:var(--sumi);
  border-color:var(--raw);
}
.structure-node.current .tag,
.structure-node.current p{ color:#5a5a54; }
.structure-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  color:var(--smoke);
  flex:0 0 auto;
}
.structure-arrow svg{ width:18px; height:18px; }

/* ---------- CONTACT ---------- */

.offices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  margin-bottom:min(10vh,90px);
}
.office-card{
  background:var(--sumi);
  padding:clamp(28px,4vw,44px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.office-card .eyebrow{ margin-bottom:2px; }
.office-card h3{
  font-size:clamp(1.2rem,2vw,1.5rem);
  font-weight:500;
}
.office-card p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--smoke-soft);
  max-width:34ch;
}
.office-card a.map-link{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  width:fit-content;
  padding-bottom:3px;
  transition:opacity .25s var(--ease);
}
.office-card a.map-link:hover{ opacity:0.6; }

.contact-grid{
  display:flex;
  gap:110px;
  flex-wrap:wrap;
  margin-bottom:min(8vh,70px);
}
.contact-item a, .contact-item div.line{
  font-size:clamp(1.05rem,1.8vw,1.4rem);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
  display:inline-block;
}
.contact-item a:hover{ border-color:var(--raw); }
.contact-item .line{ color:var(--smoke-soft); font-weight:400; font-size:15px; }
.contact-item .eyebrow{ margin-bottom:14px; display:block; }

.site-links{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:34px;
}
.site-links a{
  font-size:13.5px;
  text-decoration:none;
  color:var(--smoke-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:opacity .25s var(--ease);
}
.site-links a:hover{ opacity:0.6; }

footer.page-footer{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding-top:50px;
  margin-top:min(10vh,90px);
  border-top:1px solid var(--line);
}
footer.page-footer img{ height:22px; opacity:0.85; }
footer.page-footer small{ font-size:11px; letter-spacing:0.05em; color:var(--smoke); }

/* ---------- RESPONSIVE ---------- */

@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; gap:52px; }
  .contact-grid{ gap:56px; }
  .offices{ grid-template-columns:1fr; }
  .structure-chain{ flex-direction:column; }
  .structure-node + .structure-node{ border-left:1px solid var(--line); border-top:none; }
  .structure-arrow{ transform:rotate(90deg); padding:6px 0; }
}

@media (max-width:520px){
  .page{ padding-left:6vw; padding-right:6vw; }
  form.notify{ max-width:100%; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}