/* Homepage scroll choreography. The approved hero and project-card rules live
   in hero-constellation.css and hero-project-links.css and are not restyled. */
.scroll-story{
  --story-dark:#08090b;
  --story-light:#f3f2ee;
  --story-ink:#171816;
  --story-gold:#bca67d;
  transition:background-color .72s var(--ease),color .72s var(--ease);
}
.scroll-story .ambient{transition:opacity .72s var(--ease)}
.scroll-story.story-light{background:var(--story-light);color:var(--story-ink)}
.scroll-story.story-light .ambient{opacity:0}

/* The slot preserves the approved hero grid and dimensions. Its child is moved
   as one object so the existing 3D orbit, blur, glow and breathing remain intact. */
.hero-visual-slot{position:relative;height:640px;min-width:0}
.hero-visual-slot>.hero-visual{position:absolute;inset:0;width:100%}
.hero-visual.constellation-ready::after{
  border-radius:50%;
  background:radial-gradient(ellipse at center,transparent 43%,rgba(8,9,11,.14) 66%,rgba(8,9,11,.42) 80%,rgba(8,9,11,.08) 92%,transparent 100%);
  filter:blur(18px);
  opacity:.76;
}
.story-ready .hero-visual-slot>.hero-visual{
  position:fixed;
  inset:auto;
  left:0;
  top:0;
  z-index:18;
  width:var(--traveler-width);
  height:var(--traveler-height);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.story-ready .hero-visual.constellation-ready .project-chip{
  opacity:var(--story-chip-opacity,1)!important;
  pointer-events:var(--story-chip-pointer,auto);
  border-color:rgba(255,255,255,.10);
  background:#101216;
  box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.hero-visual.constellation-ready .orbital{z-index:13}
.story-ready .hero-visual.constellation-ready .project-chip.depth-back{background:#0b0d10;border-color:rgba(255,255,255,.055)}
.story-ready .hero-visual.constellation-ready .project-chip.depth-front{background:#121418;border-color:rgba(255,255,255,.13);box-shadow:0 16px 42px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035)}
.story-ready .hero-visual.constellation-ready .project-chip.click-ready{background:#15181c;border-color:rgba(255,255,255,.20);box-shadow:0 18px 48px rgba(0,0,0,.32),0 0 22px rgba(255,255,255,.02),inset 0 1px rgba(255,255,255,.045)}

.story-particles{position:fixed;inset:0;z-index:23;width:100%;height:100%;pointer-events:none}
.dock-brand{
  position:fixed;
  right:clamp(24px,4vw,72px);
  bottom:30px;
  z-index:20;
  display:flex;
  align-items:center;
  min-height:38px;
  opacity:0;
  visibility:hidden;
  transform:translateY(34px);
  pointer-events:none;
  will-change:transform,opacity;
}
.dock-brand .brand-text strong{font-size:13px;letter-spacing:.18em}
.dock-brand .brand-text span{font-size:9px;color:var(--muted);letter-spacing:.22em;margin-top:5px}

.site-header{transition:transform .45s var(--ease),opacity .35s var(--ease),background-color .65s var(--ease),color .65s var(--ease)}
.site-header.story-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}
.site-header.story-light-nav{background:rgba(243,242,238,.92);color:var(--story-ink);border-color:rgba(0,0,0,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header.story-light-nav .nav-links{color:#484944}
.site-header.story-light-nav .nav-links a:hover{color:#000}
.site-header.story-light-nav .brand-text span{color:#6e7069}
.site-header.story-light-nav .nav-cta{background:#171816;color:#fff;border-color:#171816}
.site-header.story-light-nav .menu-btn{color:#171816}

/* The cards occupy 72% of the stage, leaving a deliberate editorial column for
   the section hook. */
#work>.container{width:100%;max-width:none;padding-inline:clamp(24px,5vw,96px)}
#work .work-story-layout{position:relative;display:block}
#work .work-list{width:72%;padding-bottom:calc(80svh + 152px - 15vh)}
#work .work-list::after{content:"";display:block;height:15vh}
#work .work-list.work-return-cover .work-card:not(:last-of-type){visibility:hidden;pointer-events:none}
#work .work-hook{position:absolute;inset:0 1% 0 auto;width:22%;min-height:100%;pointer-events:none}
#work .work-hook-inner{position:sticky;top:30vh;padding:8px 0 22vh;opacity:0;transform:translateY(26px);will-change:transform,opacity}
#work .work-hook .section-index{display:block;margin-bottom:25px}
#work .work-hook .section-title{font-size:clamp(38px,3.8vw,62px);max-width:360px;line-height:.92;text-wrap:balance}
#work .work-hook .section-title::after{content:".";color:var(--story-gold)}
#work .work-progress{display:flex;align-items:center;gap:18px;width:min(100%,170px);margin-top:42px;color:#666d76;font-size:11px;letter-spacing:.08em}
#work .work-progress-current{color:#e8e2d8}
#work .work-progress-line{height:1px;flex:1;background:rgba(255,255,255,.15)}
@media(min-width:981px){
  #work .work-card,
  #work .work-card:nth-child(2),
  #work .work-card:nth-child(3),
  #work .work-card:nth-child(4),
  #work .work-card:nth-child(5){height:80svh;min-height:620px;max-height:700px}
}

/* Why uses the same fixed hero visual; only the six requested labels are new. */
.why-story{position:relative;height:145svh;padding:0!important;background:var(--story-dark);overflow:clip;transition:background-color .58s var(--ease),color .58s var(--ease)}
.why-story-inner{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:40% 60%;align-items:center}
.why-story-copy{position:relative;z-index:2;opacity:0;transform:translateY(26px);will-change:transform,opacity}
.why-story-copy .section-index{display:block;margin-bottom:26px}
.why-story-copy .section-title{max-width:540px}
.why-story-copy .section-subtitle{max-width:500px}
.why-visual-slot{height:min(720px,90svh);min-width:0}
.scroll-story.story-light .why-story{background:var(--story-light);color:var(--story-ink)}
.scroll-story.story-light .why-story-copy .section-subtitle{color:#65675f}

.why-orbit{display:contents}
.why-orbit:not(.is-visible) .why-chip{visibility:hidden}
.why-chip{
  position:absolute;
  left:50%;
  top:50%;
  width:max-content;
  max-width:310px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(10,12,15,.72);
  box-shadow:0 16px 44px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  color:#bfc5cc;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.why-chip-button{appearance:none;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:9px;width:100%;padding:10px 13px;border-radius:inherit;cursor:pointer;font-size:10.5px;text-align:left;white-space:nowrap}
.why-chip-index{color:var(--story-gold);font-size:9px}
.why-chip-title{color:#fff;font-weight:650}
.why-chip-plus{margin-left:auto;color:#b8a98d;font-size:15px;line-height:1;transition:transform .28s var(--ease)}
.why-chip-description{width:290px;max-width:100%;padding:0 16px 16px}
.why-chip-description p{margin:0;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:#b9bec4;font-size:14px;line-height:1.7}
.why-chip.is-open{z-index:30!important;border-radius:20px;border-color:rgba(188,166,125,.58);background:#141413;box-shadow:0 24px 70px rgba(0,0,0,.6);-webkit-backdrop-filter:none;backdrop-filter:none;filter:none!important}
.why-chip.is-open .why-chip-plus{transform:rotate(45deg)}
.why-chip:focus-within{border-color:rgba(188,166,125,.72)}

/* The process section owns the light visual surface. The body color change also
   affects the last 30% of Why, as requested. */
#process.process-section{transition:background-color .72s var(--ease),color .72s var(--ease)}
#process .process-shell{opacity:calc(var(--process-reveal,0)*(1 - var(--process-exit,0)));transform:translateY(calc((1 - var(--process-reveal,0))*70px));will-change:opacity,transform}
.scroll-story.story-contact-dark #process.process-section{background:var(--story-dark);color:#f5f6f7}
.scroll-story.story-contact-dark #process .process-intro h2 em,
.scroll-story.story-contact-dark #process .process-intro>p,
.scroll-story.story-contact-dark #process .process-phase,
.scroll-story.story-contact-dark #process .process-card p,
.scroll-story.story-contact-dark #process .process-explore-hint,
.scroll-story.story-contact-dark #process .process-total{color:#9da3aa}
.scroll-story.story-contact-dark #process .process-track-heading,
.scroll-story.story-contact-dark #process .process-controls{border-color:rgba(255,255,255,.16)}
.scroll-story.story-contact-dark #process .process-card{border-color:rgba(255,255,255,.12)}
.scroll-story.story-contact-dark #process .process-range::-webkit-slider-runnable-track{background:#34373a}
.scroll-story.story-contact-dark #process .process-range::-webkit-slider-thumb{background:#f5f6f7}
.scroll-story.story-contact-dark #process .process-range::-moz-range-track{background:#34373a}
.scroll-story.story-contact-dark #process .process-range::-moz-range-progress,
.scroll-story.story-contact-dark #process .process-range::-moz-range-thumb{background:#f5f6f7}
.scroll-story.story-contact-dark #process .process-arrow{color:#f5f6f7;border-color:#686d72}
.scroll-story.story-contact-dark #process .process-arrow:hover:not(:disabled){background:#f5f6f7;color:#08090b;border-color:#f5f6f7}

@media(max-width:1180px){.hero-visual-slot{height:580px}}
@media(max-width:980px){
  .hero-visual-slot{height:510px;max-width:720px;width:100%;margin:auto}
  .story-ready .hero-visual-slot>.hero-visual{position:absolute;inset:0;width:100%;height:100%;transform:none!important;opacity:1!important}
  .story-ready .hero-visual.constellation-ready .project-chip{opacity:unset!important;pointer-events:auto}
  .story-particles,.dock-brand,.why-orbit{display:none}
  .site-header.story-hidden{transform:none;opacity:1;pointer-events:auto}
  #work .work-story-layout{grid-template-columns:1fr;gap:0}
  #work>.container{padding-inline:var(--gutter)}
  #work .work-hook{grid-column:1;grid-row:1;min-height:0}
  #work .work-hook-inner{position:relative;top:auto;padding:0 0 58px;opacity:1!important;transform:none!important}
  #work .work-hook .section-title{max-width:720px}
  #work .work-list{grid-column:1;grid-row:2;width:100%;padding-bottom:0}
  #work .work-hook{position:relative;inset:auto;width:100%}
  .why-story{height:auto;padding:105px 0!important;overflow:visible}
  .why-story-inner{position:relative;display:block;min-height:0}
  .why-story-copy{opacity:1!important;transform:none!important}
  .why-visual-slot{display:none}
  .why-mobile-list{display:grid!important;gap:11px;margin-top:48px}
  #process .process-shell{opacity:1!important;transform:none!important}
  .why-mobile-item{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0d0f12;overflow:hidden}
  .why-mobile-item button{appearance:none;border:0;background:transparent;color:#f2f3f4;width:100%;min-height:55px;padding:0 18px;display:flex;align-items:center;gap:13px;text-align:left}
  .why-mobile-item button span:nth-child(1){font-size:10px;color:var(--story-gold)}
  .why-mobile-item button span:nth-child(2){font-size:14px;font-weight:650}
  .why-mobile-item button span:nth-child(3){margin-left:auto;font-size:18px;color:#9e9380}
  .why-mobile-item p{margin:0;padding:0 18px 19px;color:#a5abb3;font-size:14px;line-height:1.72}
  .scroll-story.story-light .why-mobile-item{background:#ecebe6;border-color:rgba(0,0,0,.12)}
  .scroll-story.story-light .why-mobile-item button{color:#171816}
  .scroll-story.story-light .why-mobile-item p{color:#5e615b}
  .site-header.story-light-nav .nav.open .nav-links{background:rgba(243,242,238,.98);border-color:rgba(0,0,0,.12);color:#333}
}
@media(max-width:650px){.hero-visual-slot{height:390px}}
@media(min-width:981px){.why-mobile-list{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .story-particles{display:none}
  .story-ready .hero-visual-slot>.hero-visual{position:absolute;inset:0;width:100%;height:100%;transform:none!important;opacity:1!important}
  .story-ready .hero-visual.constellation-ready .project-chip{opacity:unset!important;pointer-events:auto}
  .dock-brand,.why-orbit{display:none}
  .site-header.story-hidden{transform:none;opacity:1;pointer-events:auto}
  #work .work-hook-inner,.why-story-copy{opacity:1!important;transform:none!important}
  .why-story{height:auto;padding:105px 0!important}
  .why-story-inner{position:relative;grid-template-columns:1fr;min-height:0}
  .why-visual-slot{display:none}
  .why-mobile-list{display:grid!important;gap:11px;margin-top:48px}
}