:root { --ink:#050506; --paper:#f0efec; --muted:#989898; --accent:#9b8aff; --case-progress:0; --visual-scale:.88; --copy-opacity:1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; color:var(--paper); background:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; }
.skip-link { position:fixed; z-index:30; top:-4rem; left:1rem; padding:.75rem 1rem; color:#000; background:#fff; border-radius:4px; } .skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:10; top:0; left:0; display:flex; width:100%; align-items:center; justify-content:space-between; padding:28px 4.15vw; font-size:12px; letter-spacing:.11em; }
.brand { font-weight:700; letter-spacing:.145em; } .brand span { font-weight:400; opacity:.72; }
.site-nav { display:flex; gap:30px; } .site-nav a { opacity:.7; transition:opacity .2s; } .site-nav a:hover,.site-nav a:focus-visible { opacity:1; }
.menu-toggle { display:none; }
.hero { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; }
.hero-media,.hero-vignette { position:absolute; inset:0; z-index:-2; } .hero-media img,.hero-media video { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.72) contrast(1.06); } .hero-media video { position:absolute; inset:0; }
.hero-flash { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 48%,rgba(230,255,240,.95),rgba(140,242,179,.24) 24%,transparent 62%); mix-blend-mode:screen; transform:scale(.82); }
.hero-flash.is-active { animation:hero-flash 420ms ease-out both; }
@keyframes hero-flash { 0% { opacity:0; transform:scale(.82); } 28% { opacity:.9; } 100% { opacity:0; transform:scale(1.18); } }
.hero-vignette { z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.36)),linear-gradient(0deg,rgba(0,0,0,.78),transparent 48%); }
.hero-content { width:min(950px,100%); padding:0 8vw 12vh; } .eyebrow { margin:0; font-size:11px; letter-spacing:.14em; color:#a5a5a5; } .hero h1 { margin:20px 0 24px; font-size:clamp(2.85rem,5.6vw,5.8rem); line-height:1.04; letter-spacing:-.065em; font-weight:620; } .hero-intro { margin:0 0 26px; color:#d4d4d4; font-size:clamp(15px,1.3vw,18px); line-height:1.6; }
.text-link { display:inline-flex; gap:12px; align-items:center; font-size:14px; transition:opacity .2s; } .text-link:hover { opacity:.66; }.text-link span { color:var(--accent); font-size:18px; }
.scroll-cue { position:absolute; right:4.15vw; bottom:34px; display:flex; gap:10px; align-items:center; color:#aaa; font-size:9px; letter-spacing:.16em; }.scroll-cue span { display:block; width:28px; height:1px; background:#aaa; }
.manifesto { height:300vh; background:linear-gradient(#080808 25%,#161514 60%,#cfcbc5 100%); }.manifesto-sticky { position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; overflow:hidden; }.manifesto-line { position:absolute; width:min(1000px,86vw); margin:0; color:#eee; font-size:clamp(3.2rem,7.4vw,8rem); font-weight:600; line-height:1.06; letter-spacing:-.075em; opacity:0; filter:blur(12px); transform:translateY(32px) scale(.97); transition:opacity .1s linear,filter .1s linear,transform .1s linear; }.manifesto-line.is-active { opacity:1; filter:blur(0); transform:none; }
.case-intro { padding:19vh 8vw 17vh; color:#090909; background:var(--paper); }.case-intro h2 { margin:24px 0 44px; font-size:clamp(3.7rem,8vw,9.4rem); line-height:.9; letter-spacing:-.08em; }.case-intro > p:last-child { margin:0; font-size:clamp(1.65rem,3vw,3.25rem); line-height:1.15; letter-spacing:-.055em; }
.case-story { height:300vh; background:#050606; }.case-stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center; }.case-media,.case-shade { position:absolute; inset:0; }.case-media { transform:scale(var(--visual-scale)) translateY(calc((1 - var(--case-progress)) * 2.5%)); transition:transform .08s linear; }.case-media img,.case-media video { width:100%; height:100%; object-fit:cover; }.case-media video { position:absolute; inset:0; opacity:0; transition:opacity .35s; }.case-media.video-ready video { opacity:1; }.case-shade { background:linear-gradient(90deg,rgba(0,0,0,calc(.64 - var(--case-progress) * .35)),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.42),transparent 55%); pointer-events:none; }.case-copy { position:relative; z-index:1; width:min(780px,84vw); align-self:end; justify-self:start; margin:0 0 14vh 8vw; opacity:var(--copy-opacity); transform:translateY(calc(var(--case-progress) * -18px)); transition:opacity .08s linear,transform .08s linear; }.case-title-copy { margin:16px 0 0; font-size:clamp(3.25rem,7vw,7.3rem); line-height:1; font-weight:620; letter-spacing:-.08em; }.case-description { position:absolute; top:calc(100% + 24px); margin:0; color:#e4e4e4; font-size:16px; line-height:1.6; opacity:calc(var(--case-progress) * 1.8 - .35); transition:opacity .08s linear; }.media-control { position:absolute; z-index:2; right:4.15vw; bottom:34px; display:flex; min-width:82px; min-height:44px; align-items:center; justify-content:center; gap:8px; padding:0 13px; color:#fff; cursor:pointer; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5); border-radius:999px; backdrop-filter:blur(5px); }.media-control:hover,.media-control:focus-visible { background:rgba(255,255,255,.18); outline:none; }.play-icon { width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor; }.media-control.is-playing .play-icon { width:8px;height:10px;border:0;border-left:2px solid currentColor;border-right:2px solid currentColor; }.control-text { font-size:12px; }
.services { padding:18vh 0 17vh; background:#09090a; }.services-heading { display:flex; align-items:end; justify-content:space-between; padding:0 8vw 7vh; }.services h2 { margin:0; font-size:clamp(3.4rem,7vw,7rem); line-height:.9; letter-spacing:-.08em; }.service-rail { display:flex; gap:18px; overflow-x:auto; padding:0 8vw 24px; scroll-snap-type:x mandatory; scrollbar-width:none; }.service-rail::-webkit-scrollbar { display:none; }.service-unit { display:grid; flex:0 0 min(60vw,800px); grid-template-columns:1.1fr 1fr; min-height:390px; overflow:hidden; color:#151515; background:#dfdedb; scroll-snap-align:start; }.service-unit img { width:100%; height:100%; min-height:390px; object-fit:cover; }.service-unit div { display:flex; flex-direction:column; justify-content:end; padding:32px; }.service-number { margin:0 0 auto; color:#6b6b69; font-size:12px; }.service-unit h3 { margin:0 0 10px; font-size:clamp(1.7rem,2.7vw,2.7rem); letter-spacing:-.06em; }.service-unit div > p:last-child { max-width:20em; margin:0; color:#3d3d3b; font-size:14px; line-height:1.65; }
.contact { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:15vh 8vw 10vh; overflow:hidden; background:#d1cdc7; color:#0b0b0b; }.contact .eyebrow { color:#575552; }.contact h2 { position:relative; z-index:1; margin:22px 0 42px; font-size:clamp(3.5rem,8vw,9rem); font-weight:620; line-height:.93; letter-spacing:-.09em; }.contact-orb { position:absolute; right:-12vw; top:10%; width:min(58vw,780px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 32%,#ded9ff 0 3%,#9b8aff 15%,#504775 42%,transparent 69%); filter:blur(1px); opacity:.8; }.project-button { position:relative; z-index:1; display:flex; width:max-content; min-height:54px; align-items:center; gap:40px; padding:0 20px; color:#fff; background:#111; border-radius:99px; font-size:14px; transition:transform .2s,background .2s; }.project-button:hover,.project-button:focus-visible { transform:translateY(-2px); background:#302c42; outline:none; }.email-link { position:relative; z-index:1; width:max-content; margin-top:28px; color:#31302f; font-size:14px; border-bottom:1px solid currentColor; }
footer { display:flex; justify-content:space-between; padding:24px 4.15vw; color:#777; background:#0a0a0b; font-size:10px; letter-spacing:.12em; }.debug-panel { display:none; position:fixed; z-index:20; right:12px; bottom:12px; width:190px; padding:12px; color:#eee; background:rgba(0,0,0,.82); border:1px solid #555; font:11px/1.65 ui-monospace,SFMono-Regular,monospace; }.debug-panel b,.debug-panel span { display:block; }.debug-panel b { color:#b8aaff; margin-bottom:5px; }
body.debug .debug-panel { display:block; } :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:700px) { .site-header { padding:21px 22px; }.site-nav { position:absolute; top:0; right:0; display:none; width:min(250px,80vw); padding:75px 25px 28px; background:rgba(10,10,11,.96); flex-direction:column; gap:19px; }.site-nav.is-open { display:flex; }.menu-toggle { position:relative; z-index:1; display:grid; width:44px; height:44px; place-content:center; gap:5px; padding:0; color:#fff; background:none; border:0; }.menu-toggle span { width:20px; height:1px; background:currentColor; transition:transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }.hero { min-height:100svh; }.hero-media img { object-position:58% center; }.hero-content { padding:0 22px 13svh; }.hero h1 { font-size:clamp(2.2rem,8vw,3rem); }.desktop-only,.scroll-cue { display:none; }.manifesto { height:210vh; }.manifesto-line { width:calc(100% - 44px); font-size:clamp(3rem,13.2vw,4.6rem); }.case-intro { padding:17svh 22px 14svh; }.case-intro h2 { font-size:clamp(3.8rem,17vw,5rem); }.case-story { height:215vh; }.case-media { transform:scale(calc(.94 + var(--case-progress) * .06)); }.case-media img { object-position:center; }.case-media.video-ready { transform:none; background:#030303; }.case-media.video-ready video { object-fit:contain; object-position:center; background:#030303; }.case-copy { width:calc(100% - 44px); margin:0 0 13svh 22px; }.case-title-copy { font-size:clamp(3.3rem,14.5vw,4.9rem); }.case-description { font-size:14px; }.media-control { right:16px; bottom:20px; backdrop-filter:none; }.services { padding:14svh 0 13svh; }.services-heading { display:block; padding:0 22px 40px; }.services-heading .eyebrow { margin-bottom:22px; }.services h2 { font-size:clamp(3.3rem,15vw,4.7rem); }.service-rail { gap:12px; padding:0 22px 18px; }.service-unit { flex-basis:82vw; grid-template-columns:1fr; grid-template-rows:48% 52%; min-height:470px; }.service-unit img { min-height:0; }.service-unit div { padding:21px; }.contact { padding:14svh 22px 9svh; }.contact h2 { font-size:clamp(3.5rem,15.5vw,5.1rem); }.contact-orb { right:-44vw; top:4%; width:120vw; opacity:.55; } footer { padding:20px 22px; font-size:8px; }.debug-panel { width:175px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.manifesto { height:auto; padding:18vh 0; }.manifesto-sticky { position:static; display:block; height:auto; }.manifesto-line,.manifesto-line.is-active { position:static; width:auto; margin:0 8vw 14vh; opacity:1; filter:none; transform:none; transition:none; }.manifesto-line:last-child { margin-bottom:0; }.hero-media video,.hero-flash { display:none; }.case-story { height:auto; }.case-stage { position:relative; min-height:100svh; }.case-media { transform:none; }.case-copy { opacity:1; transform:none; }.case-description { position:static; margin-top:24px; opacity:1; }.case-video { display:none; }.media-control { display:none; } }

/* V4: visible case-video timeline and chapter navigation */
.case-timeline {
  --video-progress:0%;
  --video-buffer:0%;
  --timeline-accent:#8cf2b3;
  position:absolute;
  z-index:4;
  right:calc(4.15vw + 128px);
  bottom:-28px;
  left:4.15vw;
  min-width:0;
  padding:11px 14px 9px;
  color:#fff;
  background:linear-gradient(180deg,rgba(9,13,11,.66),rgba(3,5,4,.86));
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  box-shadow:0 14px 38px rgba(0,0,0,.32);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* Temporary A/B test: hide chapter click targets while preserving the master timeline. */
.timeline-chapters {
  visibility: hidden;
  pointer-events: none;
}
.timeline-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:16px;
  margin-bottom:5px;
  color:rgba(255,255,255,.74);
  font-size:10px;
  letter-spacing:.08em;
}
.timeline-chapter-current {
  overflow:hidden;
  color:var(--timeline-accent);
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.timeline-time {
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.timeline-scrubber {
  position:relative;
  height:39px;
}
.timeline-track {
  position:absolute;
  z-index:1;
  top:9px;
  right:0;
  left:0;
  height:4px;
  overflow:hidden;
  background:rgba(255,255,255,.22);
  border-radius:99px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.timeline-buffer,.timeline-progress {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-radius:inherit;
}
.timeline-buffer {
  width:var(--video-buffer);
  background:rgba(255,255,255,.3);
}
.timeline-progress {
  width:var(--video-progress);
  background:var(--timeline-accent);
  box-shadow:0 0 13px rgba(140,242,179,.55);
  transition:width .08s linear;
}
.timeline-range {
  position:absolute;
  z-index:3;
  top:0;
  left:0;
  width:100%;
  height:22px;
  margin:0;
  padding:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
}
.timeline-range::-webkit-slider-runnable-track { height:22px; background:transparent; }
.timeline-range::-moz-range-track { height:22px; background:transparent; }
.timeline-range::-webkit-slider-thumb {
  width:13px;
  height:13px;
  margin-top:4.5px;
  border:2px solid #07100b;
  border-radius:50%;
  background:var(--timeline-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 12px rgba(0,0,0,.7);
  appearance:none;
  -webkit-appearance:none;
  transition:transform .15s;
}
.timeline-range::-moz-range-thumb {
  width:13px;
  height:13px;
  border:2px solid #07100b;
  border-radius:50%;
  background:var(--timeline-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 2px 12px rgba(0,0,0,.7);
  transition:transform .15s;
}
.timeline-range:hover::-webkit-slider-thumb,.timeline-range:focus-visible::-webkit-slider-thumb,.case-timeline.is-scrubbing .timeline-range::-webkit-slider-thumb { transform:scale(1.16); }
.timeline-range:hover::-moz-range-thumb,.timeline-range:focus-visible::-moz-range-thumb,.case-timeline.is-scrubbing .timeline-range::-moz-range-thumb { transform:scale(1.16); }
.timeline-range:focus-visible { outline:none; }
.timeline-chapters {
  position:absolute;
  z-index:4;
  top:0;
  right:0;
  left:0;
  height:39px;
  pointer-events:none;
}
.timeline-chapter {
  position:absolute;
  top:3px;
  left:var(--chapter-position);
  display:block;
  width:34px;
  min-width:34px;
  height:36px;
  padding:0;
  color:rgba(255,255,255,.58);
  cursor:pointer;
  background:none;
  border:0;
  transform:translateX(-50%);
  pointer-events:auto;
}
.timeline-chapter:first-child { transform:none; }
.chapter-dot {
  position:absolute;
  top:3px;
  left:50%;
  display:block;
  width:7px;
  height:7px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:#08100c;
  box-shadow:0 0 0 3px rgba(0,0,0,.28);
  transform:translateX(-50%);
  transition:width .16s,height .16s,top .16s,background .16s,box-shadow .16s;
}
.timeline-chapter:first-child .chapter-dot { left:0; transform:none; }
.chapter-label {
  position:absolute;
  top:20px;
  left:50%;
  width:max-content;
  max-width:130px;
  overflow:hidden;
  color:currentColor;
  font-size:9px;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  white-space:nowrap;
  transform:translateX(-50%);
  transition:color .16s,opacity .16s;
}
.chapter-label b { margin-right:3px; font-weight:700; }
.timeline-chapter:first-child .chapter-label { left:0; transform:none; }
.timeline-chapter:hover,.timeline-chapter:focus-visible,.timeline-chapter.is-active { color:#fff; outline:none; }
.timeline-chapter.is-passed .chapter-dot { border-color:var(--timeline-accent); background:var(--timeline-accent); }
.timeline-chapter.is-active .chapter-dot {
  top:1px;
  width:11px;
  height:11px;
  border-color:#fff;
  background:var(--timeline-accent);
  box-shadow:0 0 0 3px rgba(140,242,179,.22),0 0 15px rgba(140,242,179,.56);
}
.case-stage::after {
  content:"";
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  height:150px;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
  pointer-events:none;
}
.media-control { z-index:5; }

@media (max-width:900px) {
  .chapter-label { font-size:8px; }
}
@media (max-width:700px) {
  .case-timeline {
    right:16px;
    bottom:16px;
    left:16px;
    padding:10px 12px 8px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .media-control { right:16px; bottom:91px; }
  .timeline-meta { font-size:9px; }
  .timeline-scrubber,.timeline-chapters { height:25px; }
  .chapter-label { display:none; }
}

/* Project gallery / shared detail player */
.project-gallery-section { position:relative; overflow:hidden; padding:20vh 0 18vh; color:#f4f5f2; background:radial-gradient(circle at 72% 34%,rgba(76,106,91,.16),transparent 34%),#080a09; }
.project-gallery-heading { display:grid; grid-template-columns:1fr auto; gap:18px 28px; align-items:end; padding:0 8vw 8vh; }
.project-gallery-heading .eyebrow { grid-column:1/-1; margin:0; color:#91d9ac; }
.project-gallery-heading h2 { margin:0; font-size:clamp(4.6rem,11vw,11rem); line-height:.82; letter-spacing:-.1em; }
.project-gallery-lede { max-width:22em; margin:0 0 4px; color:rgba(244,245,242,.56); font-size:14px; line-height:1.7; }
.project-gallery { overflow-x:auto; padding:0 8vw 24px; scrollbar-width:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.project-gallery::-webkit-scrollbar { display:none; }
.project-gallery-track { display:flex; gap:20px; width:max-content; padding-right:8vw; }
.project-card { flex:0 0 min(72vw,930px); scroll-snap-align:center; }
.project-card-button { display:grid; grid-template-columns:1.5fr 1fr; width:100%; min-height:500px; padding:0; overflow:hidden; color:#f4f5f2; text-align:left; background:linear-gradient(135deg,#1b211e,#111513); border:1px solid rgba(255,255,255,.13); border-radius:28px; box-shadow:0 26px 70px rgba(0,0,0,.34); cursor:pointer; transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .5s; }
.project-card-button:hover,.project-card-button:focus-visible,.project-card.is-selected .project-card-button { transform:translateY(-8px); border-color:rgba(145,217,172,.55); box-shadow:0 32px 90px rgba(0,0,0,.48),0 0 0 1px rgba(145,217,172,.12); }
.project-card-media { position:relative; min-height:500px; overflow:hidden; background:#030403; }
.project-card-media::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,transparent 58%,rgba(10,14,11,.2)),linear-gradient(0deg,rgba(4,7,5,.44),transparent 45%); pointer-events:none; }
.project-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.project-card-button:hover .project-card-media img,.project-card-button:focus-visible .project-card-media img { transform:scale(1.035); }
.project-card-play { position:absolute; z-index:1; right:24px; bottom:24px; display:grid; width:48px; height:48px; place-items:center; color:#101411; background:#c7f4d5; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.project-card-play .play-icon { width:0; height:0; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.project-card-meta { display:flex; flex-direction:column; min-width:0; padding:32px 32px 30px; }
.project-card-index { color:#91d9ac; font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.project-card-title { margin-top:auto; font-size:clamp(1.7rem,3.1vw,3rem); font-weight:500; letter-spacing:-.065em; line-height:1.04; }
.project-card-summary { max-width:20em; margin-top:18px; color:rgba(244,245,242,.58); font-size:13px; line-height:1.75; }
.project-card-action { margin-top:28px; color:#c7f4d5; font-size:12px; }
.project-detail[hidden] { display:none; }
.project-detail { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:5vw; background:rgba(3,5,4,.74); backdrop-filter:blur(18px); opacity:0; transition:opacity .22s ease; }
.project-detail.is-open { opacity:1; }
.project-detail-panel { position:relative; display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.75fr); gap:clamp(24px,5vw,72px); align-items:end; width:min(1180px,100%); padding:clamp(24px,4vw,56px); color:#f4f5f2; background:linear-gradient(145deg,rgba(31,40,34,.96),rgba(10,13,11,.98)); border:1px solid rgba(255,255,255,.15); border-radius:30px; box-shadow:0 35px 100px rgba(0,0,0,.54); transform:translateY(16px); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.project-detail.is-open .project-detail-panel { transform:translateY(0); }
.project-detail-copy .eyebrow { margin:0 0 18px; color:#91d9ac; }
.project-detail-copy h2 { margin:0; font-size:clamp(2.2rem,5vw,5.3rem); line-height:.94; letter-spacing:-.085em; }
.project-detail-copy > p:last-child { max-width:24em; margin:24px 0 0; color:rgba(244,245,242,.62); font-size:14px; line-height:1.75; }
.project-detail-media { position:relative; overflow:hidden; aspect-ratio:16/9; background:#000; border-radius:18px; box-shadow:0 16px 44px rgba(0,0,0,.34); }
.project-detail-video { width:100%; height:100%; object-fit:contain; background:#000; }
.project-detail-play { position:absolute; right:20px; bottom:20px; display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; color:#101411; font-size:12px; background:#c7f4d5; border:0; border-radius:99px; cursor:pointer; }
.project-detail-play .play-icon { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid currentColor; }
.project-detail-close { position:absolute; z-index:2; top:18px; right:20px; width:44px; height:44px; color:#f4f5f2; font-size:27px; line-height:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:50%; cursor:pointer; }
.project-detail-close:hover,.project-detail-close:focus-visible,.project-detail-play:hover,.project-detail-play:focus-visible { filter:brightness(1.08); }
.project-card-button:focus-visible,.project-detail-close:focus-visible,.project-detail-play:focus-visible { outline:2px solid #c7f4d5; outline-offset:4px; }
@media (max-width:700px) {
  .project-gallery-section { padding:15svh 0 14svh; }
  .project-gallery-heading { display:block; padding:0 22px 42px; }
  .project-gallery-heading h2 { margin-top:18px; font-size:clamp(4rem,18vw,6rem); }
  .project-gallery-lede { margin-top:24px; }
  .project-gallery { padding:0 22px 18px; }
  .project-gallery-track { gap:12px; padding-right:22px; }
  .project-card { flex-basis:calc(100vw - 44px); }
  .project-card-button { grid-template-columns:1fr; min-height:0; border-radius:22px; }
  .project-card-media { min-height:58vw; max-height:310px; }
  .project-card-meta { min-height:230px; padding:22px; }
  .project-card-title { margin-top:42px; font-size:2rem; }
  .project-card-summary { margin-top:12px; }
  .project-card-action { margin-top:18px; }
  .project-detail { padding:18px; }
  .project-detail-panel { display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:24px 18px 18px; border-radius:24px; }
  .project-detail-copy { padding-top:24px; }
  .project-detail-copy h2 { font-size:2.9rem; }
  .project-detail-media { order:-1; border-radius:14px; }
  .project-detail-close { top:10px; right:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .project-card-button,.project-card-media img,.project-detail,.project-detail-panel { transition:none; }
}
@media (prefers-reduced-motion:reduce) {
  .case-timeline { display:none; }
}

/* V6: project-based proportional timeline */
.case-timeline { --video-progress:0%; --video-buffer:0%; }
.timeline-playhead {
  position:absolute;
  z-index:6;
  top:3px;
  left:0;
  width:15px;
  height:15px;
  border:2px solid #07100b;
  border-radius:50%;
  background:var(--timeline-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.96),0 0 16px rgba(140,242,179,.8);
  transform:translateX(-50%);
  pointer-events:none;
  transition:left .08s linear,transform .15s;
}
.timeline-chapters { z-index:6; height:58px; }
.timeline-scrubber { height:58px; }
.timeline-chapter {
  top:0;
  left:var(--chapter-left,0%);
  width:var(--chapter-width,0%);
  min-width:0;
  height:58px;
  padding:0 7px 0 12px;
  text-align:left;
  border-left:1px solid rgba(255,255,255,.35);
  transform:none;
  transition:background .16s,color .16s,border-color .16s;
}
.timeline-chapter:first-child { border-left:0; }
.timeline-chapter:hover,.timeline-chapter:focus-visible { background:rgba(255,255,255,.08); }
.timeline-chapter.is-active { background:rgba(140,242,179,.12); }
.chapter-dot,
.timeline-chapter:first-child .chapter-dot {
  top:6px;
  left:0;
  width:7px;
  height:7px;
  transform:translateX(-50%);
}
.timeline-chapter.is-active .chapter-dot {
  top:4px;
  left:0;
}
.chapter-label,
.timeline-chapter:first-child .chapter-label {
  position:relative;
  top:20px;
  left:auto;
  display:block;
  width:140px;
  max-width:140px;
  overflow:visible;
  white-space:normal;
  line-height:1.25;
  text-overflow:clip;
  transform:none;
}
.timeline-chapter:nth-child(even) .chapter-label { top:36px; }
.chapter-label span { color:currentColor; }
.timeline-range { z-index:5; }

@media (max-width:700px) {
  .timeline-playhead { top:1px; width:13px; height:13px; }
  .timeline-chapter {
    position:relative;
    left:auto;
    flex:1 1 0;
    width:auto;
    min-width:44px;
    height:25px;
    padding:0;
    text-align:center;
    border-left:1px solid rgba(255,255,255,.35);
  }
  .timeline-chapter:first-child { border-left:0; }
  .timeline-chapters { display:flex; }
  .timeline-scrubber,.timeline-chapters { height:25px; }
  .chapter-dot,
  .timeline-chapter:first-child .chapter-dot,
  .timeline-chapter.is-active .chapter-dot { display:none; }
  .chapter-label,
  .timeline-chapter:first-child .chapter-label {
    top:5px;
    width:auto;
    max-width:none;
    font-size:10px;
    white-space:nowrap;
  }
  .timeline-chapter:nth-child(even) .chapter-label { top:5px; }
  .chapter-label span { display:none; }
  .timeline-chapter.is-active .chapter-label { color:var(--timeline-accent); }
}

/* hero text blur reveal */
.hero-content .eyebrow,.hero-content h1,.hero-content .hero-intro,.hero-content .text-link{opacity:0;filter:blur(12px);transition:opacity .9s cubic-bezier(.25,.46,.45,.94),filter .9s cubic-bezier(.25,.46,.45,.94)}
.hero-content.is-revealed .eyebrow{opacity:1;filter:blur(0);transition-delay:0s}
.hero-content.is-revealed h1{opacity:1;filter:blur(0);transition-delay:.15s}
.hero-content.is-revealed .hero-intro{opacity:1;filter:blur(0);transition-delay:.3s}
.hero-content.is-revealed .text-link{opacity:1;filter:blur(0);transition-delay:.45s}