@font-face{ font-family:'Pontano Sans'; src:url('../fonts/PontanoSans-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Pontano Sans'; src:url('../fonts/PontanoSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Pontano Sans'; src:url('../fonts/PontanoSans-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Pontano Sans'; src:url('../fonts/PontanoSans-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Pontano Sans'; src:url('../fonts/PontanoSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --plum: #28001a;
  --plum-deep: #1a001f;
  --black: #000000;
  --lime: #c4ffc5;
  --gray: #f5f5f3;

  --font: 'Pontano Sans', 'Helvetica Neue', Arial, sans-serif;
  --logo-serif: 'Cormorant', serif;

  --max: 1600px;
  --pad: clamp(28px, 4.5vw, 64px);
  --head-gap: clamp(40px, 6vw, 72px);
  --ease: cubic-bezier(.22,.7,.28,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.js-loading, html.js-loading body{ overflow:hidden; height:100%; }
body{
  margin:0; background:var(--gray); color:var(--plum);
  font-family:var(--font); font-weight:400; -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; }

/* ---------- Loader ---------- */
.loader{
  display:none; position:fixed; inset:0; z-index:9999;
  background:var(--plum); color:var(--gray);
  align-items:center; justify-content:center; flex-direction:column; gap:22px;
}
html.js-loading .loader{ display:flex; }
.loader.is-done{ opacity:0; pointer-events:none; transition:opacity .7s var(--ease); }
.loader .mark{ width:52px; height:52px; animation:pulse 1.6s ease-in-out infinite; }
.loader .bar{ width:200px; height:1px; background:rgba(245,245,243,0.25); position:relative; overflow:hidden; }
.loader .bar span{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--lime); }
.loader .pct{ font-size:13px; letter-spacing:0.02em; color:rgba(245,245,243,0.7); font-variant-numeric:tabular-nums; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.92); opacity:0.75; } }
@media (prefers-reduced-motion: reduce){ .loader .mark{ animation:none; } }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(56px) scale(0.98);
  transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0) scale(1); }

/* Masked text reveal: the outer element clips completely (text is truly
   invisible, not just transparent) while the inner span sits below the
   visible window; revealing slides it up into view from behind that
   boundary, rather than fading a ghost of it in place. */
.reveal-mask{ overflow:hidden; padding-bottom:0.12em; margin-bottom:-0.12em; }
.reveal-mask .reveal-inner{
  display:block; transform:translateY(112%);
  transition:transform 1s cubic-bezier(.16,.8,.24,1);
}
.reveal-mask.in-view .reveal-inner{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-mask .reveal-inner{ transition:none; transform:none; }
}
.grid .reveal:nth-child(2){ transition-delay:.08s; }
.grid .reveal:nth-child(3){ transition-delay:.16s; }
.grid .reveal:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; opacity:1; transform:none; } }

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:50; overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
  transition:box-shadow .3s ease;
}
header.scrolled{ box-shadow:0 4px 18px rgba(0,0,0,0.22); }
header video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.header-tint{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(40,0,26,0.72) 0%, rgba(40,0,26,0.8) 100%);
}
nav.wrap{ position:relative; z-index:2; display:flex; align-items:center; height:84px; gap:clamp(14px,1.8vw,28px); }
.brand{ text-decoration:none; display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:22px; width:auto; }
nav.wrap > a{
  font-size:15px; font-weight:400; color:var(--gray); text-decoration:none; opacity:.85;
  transition:color .15s ease, opacity .15s ease; letter-spacing:-0.01em;
}
nav.wrap > a:hover, nav.wrap > a:focus-visible{ opacity:1; color:var(--lime); }
nav.wrap > .nav-tab + .nav-tab{ margin-left:clamp(6px,1vw,16px); }
nav.wrap > .nav-tab{
  font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;
}
nav.wrap > .cta{
  margin-left:auto;
  opacity:1; padding:9px 18px; border:1px solid var(--gray); border-radius:999px; font-weight:400;
  color:var(--gray); transition:background .2s ease, color .2s ease, border-color .2s ease; flex:0 0 auto;
}
nav.wrap > .cta:hover{ background:var(--lime); color:var(--plum); border-color:var(--lime); }
@media (max-width:1180px){
  nav.wrap > .nav-tab{ display:none; }
}
nav.wrap > .nav-fallback{ display:none; }
@media (max-width:1180px){
  nav.wrap > .nav-fallback{ display:inline; }
}

/* ---------- Hero (video) ---------- */
.hero{ display:flex; align-items:flex-end; overflow:hidden; background:var(--plum); min-height:calc(100vh - 84px); scroll-margin-top:84px; }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-tint{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(40,0,26,0.5) 0%, rgba(40,0,26,0.66) 55%, rgba(26,0,31,0.85) 100%);
}
.hero-content{ position:relative; z-index:2; padding-top:clamp(40px,7vw,72px); padding-bottom:clamp(48px,6vw,72px); width:100%; }
.hero h1{
  font-family:var(--font); font-weight:300; font-size:clamp(56px,12vw,180px);
  line-height:0.94; letter-spacing:-0.03em; margin:0 0 clamp(40px,5vw,60px); max-width:22ch; color:var(--lime);
}
.hero h1 .reveal-mask{ display:block; padding-bottom:0.32em; margin-bottom:-0.32em; }
.hero h1 em{
  font-family:var(--logo-serif); font-style:italic; font-weight:300;
  letter-spacing:-0.045em; display:inline-block;
  color:var(--lime);
}
.hero p{
  font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:46ch;
  color:rgba(245,245,243,0.82); margin:0 0 32px; letter-spacing:-0.005em;
}
.hero-ctas{ display:block; }
.reveal-mask .hero-ctas-inner{ display:flex; gap:32px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; font-weight:400; font-size:15px;
  text-decoration:none; letter-spacing:-0.005em; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{ background:var(--lime); color:var(--plum); }
.btn-solid:hover{ background:var(--gray); }
.btn-ghost{ border:1px solid rgba(245,245,243,0.6); color:var(--gray); }
.btn-ghost:hover{ border-color:var(--gray); background:rgba(245,245,243,0.1); }
.btn-outline-dark{ border:1px solid var(--plum); color:var(--plum); }
.btn-outline-dark:hover{ background:var(--plum); color:var(--gray); }

/* ---------- Section heading ---------- */
.section{ padding-top:var(--head-gap); padding-bottom:clamp(64px,10vw,120px); }
.section-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:var(--head-gap); }
.section h2{
  font-family:var(--logo-serif); font-weight:300; font-style:italic; font-size:clamp(29px,4vw,48px);
  letter-spacing:-0.045em; margin:0; display:inline-block;
}
/* The scaleY stretch used to live on .section h2 itself, applying to the
   whole heading uniformly. Now that some headings mix a sans title-case
   portion with a serif italic portion, the stretch needs to apply ONLY to
   the serif part specifically — putting it on the parent would stretch
   the sans portion too, which was never tuned for that. */
.section h2 .h2-serif-part{ display:inline-block; transform:scaleY(1.14); transform-origin:left bottom; }
.section h2 .h2-sans-part{
  font-family:var(--font); font-style:normal; font-weight:300; letter-spacing:-0.045em;
  display:inline-block;
}
.section-head .sub{ font-size:15px; color:rgba(40,0,26,0.6); max-width:34ch; }
.section-head .sub.sub-oneline{ text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; letter-spacing:0.02em; }

/* Hero, belief, and Project Category form two visible sliding-cover
   transitions: belief slides up and over the hero heading, then Project
   Category slides up and over belief. Each panel gets a brief pause
   (dwell) before the next one visibly slides in on top of it — this is a
   real, continuous motion (not an instant cut), driven frame-by-frame in
   main.js. Only the last panel (Project Category) gets a release phase
   afterward, gliding away to reveal Project Category Information in
   normal flow; the "tail-fill" is a plain solid-color backdrop covering
   that release distance so there is never a gap, regardless of exact
   timing. */
.parallax-wrap{ position:relative; }
.anchor-marker{ position:absolute; top:0; left:0; width:1px; height:1px; visibility:hidden; pointer-events:none; }
.tail-fill{ position:absolute; left:0; width:100%; background:var(--plum); z-index:0; }

@media (min-width:861px){
  .hero{ z-index:1; }
  .belief{ z-index:2; box-shadow:0 -24px 60px rgba(0,0,0,0.18); }
  .project-type{ z-index:3; box-shadow:0 -24px 60px rgba(0,0,0,0.18); }
}

@media (max-width:860px){
  .hero{ min-height:80vh; }
}

.belief{
  /* Text sits near the top (not vertically centered) so that, as Project
     Category slides up and covers this section from the bottom, the LAST
     sliver of belief left visible right before full coverage is actual
     text — not a blank margin above centered text. That blank margin was
     exactly what was flashing as an unexplained "white bar": with centered
     text, the covering slide eats the bottom margin, then both text lines,
     and only THEN reaches the empty space above the text — which is the
     one thing that has nothing else behind it to make it look intentional. */
  display:flex; align-items:flex-start; background:var(--gray);
  padding:clamp(40px,6vw,72px) 0 clamp(56px,11vw,120px); min-height:calc(100vh - 84px);
}
.belief-text{
  font-family:var(--font); font-weight:400; font-size:clamp(32px,6.2vw,92px);
  line-height:1.12; letter-spacing:-0.02em; color:var(--plum); margin:0; max-width:none;
}
.belief-text .reveal-mask{ display:block; }
.belief-text .reveal-inner{ text-wrap:balance; }
.belief-text em{
  font-family:var(--logo-serif); font-style:italic; font-weight:300; letter-spacing:-0.03em;
}

/* Project Category — dark carousel section */
.project-type{
  display:flex; flex-direction:column; justify-content:flex-start;
  background:var(--plum); color:var(--gray); scroll-margin-top:84px;
  /* Without this, Project Category was only ever as tall as its own
     content (heading + carousel + label) — whenever that content is
     shorter than the available viewport, its dark background simply
     stopped short, leaving whatever sits behind it (briefly belief,
     before it parks away, then plain page background) exposed below the
     carousel. That gap was there the ENTIRE time Project Category was
     resting on screen, not just during a transition — matching hero and
     belief with a real min-height fixes it at the source. */
  min-height:calc(100vh - 84px);
}
.project-type > .wrap{ width:100%; max-width:var(--max); margin-left:auto; margin-right:auto; }
.project-type h2{ color:var(--gray); }
.project-type .section-head{
  margin-bottom:16px; flex-direction:row; justify-content:space-between;
  align-items:flex-start; flex-wrap:wrap;
}
.project-type .section-head .sub{
  color:rgba(245,245,243,0.65); text-align:right; max-width:32ch;
  white-space:normal; overflow:visible; text-overflow:clip; padding-top:8px;
}
.project-type.section{ padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(24px,3vw,40px); }

/* ---------- Project Category gallery (coverflow carousel) ---------- */
.gallery-viewport{ overflow:hidden; position:relative; margin:0 calc(-1 * var(--pad)); }
.gallery-track{
  overflow:hidden; padding:12px 0;
}
.gallery-track-inner{ display:flex; align-items:center; will-change:transform; }
.gallery-slide{
  flex:0 0 clamp(240px,31vw,440px); text-decoration:none; color:inherit;
  margin:0 clamp(-46px,-3.5vw,-26px);
  opacity:0.3; transform:scale(0.56); transition:opacity .4s ease, transform .4s ease;
  position:relative; z-index:1;
}
.gallery-slide.near-left, .gallery-slide.near-right{ opacity:0.6; z-index:2; }
.gallery-slide.far-left, .gallery-slide.far-right{ z-index:1; }
.gallery-slide.active{ opacity:1; z-index:5; }
/* Uses the standalone CSS `scale` property (not `transform: scale()`), which
   composes additively with whatever `transform` JS has already set inline
   for positioning — it doesn't fight or overwrite it, just layers a bit of
   extra scale on top on hover. */
.gallery-slide.active{ transition:scale .25s ease; cursor:pointer; }
.gallery-slide.active:hover{ scale:1.045; }
.gallery-slide .thumb{
  position:relative; aspect-ratio:4/3.4; overflow:hidden; border-radius:14px; background:var(--plum-deep);
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.gallery-slide .thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-slide .thumb.placeholder{ background:repeating-linear-gradient(135deg, var(--plum-deep), var(--plum-deep) 14px, #12000f 14px, #12000f 28px); }
.gallery-slide .meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding:0 6px; opacity:0; transition:opacity .3s ease; }
.gallery-track.no-transition, .gallery-track.no-transition *{ transition:none !important; }
.gallery-slide.active .meta{ opacity:1; }
.gallery-slide h3{ font-size:clamp(16px,1.5vw,19px); font-weight:400; text-transform:uppercase; letter-spacing:0; color:var(--gray); margin:0; }
.gallery-slide.active h3{ color:var(--lime); }
.gallery-slide .count{ font-size:12px; color:rgba(245,245,243,0.55); white-space:nowrap; }

.gallery-arrow{
  position:absolute; top:42%; transform:translateY(-50%); z-index:10;
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(40,0,26,0.12); background:var(--gray);
  color:var(--plum); font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease; font-family:var(--font);
}
.gallery-arrow.prev{ left:var(--pad); }
.gallery-arrow.next{ right:16px; }
.gallery-arrow:hover{ background:var(--lime); border-color:var(--lime); }

/* ---------- Accordion (Project Category Information) ---------- */
.info-panel{ background:#000; color:var(--gray); }
.info-panel h2{ color:var(--gray); }
.info-panel .section-head .sub{ color:rgba(245,245,243,0.65); }
.accordion{ list-style:none; margin:0; padding:0; }
.accordion-item{ border-top:1px solid rgba(245,245,243,0.18); }
.accordion-item:last-child{ border-bottom:1px solid rgba(245,245,243,0.18); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 4px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font); font-weight:300; font-size:clamp(18px,2.2vw,28px); letter-spacing:-0.02em;
  color:var(--gray); transition:color .3s ease;
}
.accordion-trigger:hover{ color:var(--lime); }
.accordion-icon{ flex:0 0 auto; width:28px; height:28px; position:relative; }
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; background:var(--gray); top:50%; left:50%; transform:translate(-50%,-50%);
  transition:background .3s ease;
}
.accordion-trigger:hover .accordion-icon::before,
.accordion-trigger:hover .accordion-icon::after{ background:var(--lime); }
.accordion-icon::before{ width:16px; height:2px; }
.accordion-icon::after{ width:2px; height:16px; transition:transform .3s ease; }
.accordion-item.open .accordion-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.accordion-panel-inner{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px;
  padding-bottom:30px; flex-wrap:wrap;
}
.accordion-panel-inner p{ font-size:clamp(15px,1.3vw,18px); line-height:1.65; color:rgba(245,245,243,0.78); max-width:62ch; margin:0; flex:1 1 380px; }
.accordion-panel-inner .btn{ flex:0 0 auto; white-space:nowrap; }

/* ---------- Category tiles (homepage) ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,56px) clamp(24px,3vw,40px); }
.cat-tile{ display:block; text-decoration:none; color:inherit; }
.cat-tile .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--plum); }
.cat-tile .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat-tile:hover .thumb img{ transform:scale(1.045); }
.cat-tile .thumb.placeholder{ background:repeating-linear-gradient(135deg, var(--plum), var(--plum) 14px, var(--plum-deep) 14px, var(--plum-deep) 28px); }
.cat-tile .meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; gap:12px; border-top:1px solid rgba(40,0,26,0.12); padding-top:14px; }
.cat-tile h3{ font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:0; margin:0; text-transform:uppercase; }
.cat-tile .count{ font-size:13px; color:rgba(40,0,26,0.55); white-space:nowrap; }
.cat-tile:hover h3{ text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px; }
@media (max-width:760px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---------- Work / project grid (category pages) ---------- */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,56px) clamp(24px,3vw,40px); }
.card{ display:block; text-decoration:none; color:inherit; }
.card .thumb{ position:relative; aspect-ratio:5/4; overflow:hidden; background:#e7e3e1; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .thumb img{ transform:scale(1.045); }
.card .meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; gap:12px; border-top:1px solid rgba(40,0,26,0.12); padding-top:14px; }
.card h3{ font-family:var(--font); font-weight:400; font-size:clamp(18px,1.5vw,21px); margin:0; letter-spacing:-0.02em; }
.card .cat{ font-size:13px; color:rgba(40,0,26,0.55); white-space:nowrap; }
.card:hover h3{ text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px; }
@media (max-width:760px){ .grid{ grid-template-columns:1fr; } }

/* ---------- Empty-category placeholder ---------- */
.empty-box{
  border:1px dashed rgba(40,0,26,0.35); border-radius:4px; padding:clamp(48px,8vw,96px) clamp(24px,4vw,48px);
  text-align:center; color:rgba(40,0,26,0.6);
}
.empty-box .icon{ width:32px; height:32px; margin:0 auto 20px; opacity:0.5; }
.empty-box h3{ font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:-0.01em; color:var(--plum); margin:0 0 8px; }
.empty-box p{ font-size:15px; max-width:44ch; margin:0 auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:14px; color:rgba(40,0,26,0.55); margin-bottom:clamp(20px,3vw,32px); }
.breadcrumb a{ text-decoration:none; color:rgba(40,0,26,0.55); transition:color .15s ease; }
.breadcrumb a:hover{ color:var(--plum); }
.breadcrumb span{ margin:0 6px; }

/* ---------- Project (case study) page ---------- */
.project-hero{ background:#e7e3e1; }
.project-hero img{ width:100%; max-height:72vh; object-fit:cover; }
.project-head{ padding:clamp(40px,6vw,64px) 0 clamp(24px,3vw,32px); }
.project-head .cat-tag{ display:inline-block; font-size:13px; font-weight:400; color:var(--plum); background:var(--lime); padding:5px 12px; border-radius:999px; margin-bottom:16px; }
.project-head h1{ font-size:clamp(32px,5vw,56px); font-weight:400; letter-spacing:-0.03em; margin:0 0 20px; max-width:20ch; }
.project-body{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,72px); padding-bottom:clamp(56px,8vw,88px); }
@media (max-width:760px){ .project-body{ grid-template-columns:1fr; } }
.project-body p{ font-size:clamp(16px,1.4vw,19px); line-height:1.65; color:rgba(40,0,26,0.82); margin:0 0 18px; max-width:60ch; }
.project-side dl{ margin:0; }
.project-side dt{ font-size:13px; font-weight:400; color:rgba(40,0,26,0.55); margin-top:18px; }
.project-side dt:first-child{ margin-top:0; }
.project-side dd{ margin:2px 0 0; font-size:16px; font-weight:400; }
.project-side a.behance-link{ display:inline-block; margin-top:26px; font-weight:400; text-decoration:none; border-bottom:1px solid var(--plum); padding-bottom:2px; }

.project-nav{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(40,0,26,0.14); padding:clamp(28px,4vw,40px) 0; flex-wrap:wrap; gap:16px; }
.project-nav a{ text-decoration:none; font-weight:400; font-size:15px; }
.project-nav a:hover{ text-decoration:underline; text-decoration-color:var(--lime); }
.project-nav .back{ font-weight:400; opacity:.7; }

/* ---------- Case study (Studio Ninety One-style project page) ---------- */
.case-hero-band{ position:relative; overflow:hidden; min-height:50vw; }
.case-hero-img-full{
  position:absolute; top:0; right:0; width:50vw; aspect-ratio:1;
  background:#e7e3e1;
}
.case-hero-img-full img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-hero-band .wrap{
  position:relative; z-index:1;
  padding-top:clamp(28px,4vw,40px); padding-bottom:clamp(48px,7vw,88px);
}
.case-hero-text{ display:flex; flex-direction:column; align-items:flex-start; max-width:50%; }
.case-tags{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:760px){
  .case-hero-band{ min-height:0; }
  .case-hero-img-full{ position:static; width:100%; aspect-ratio:1; margin-bottom:24px; }
  .case-hero-band .wrap{ padding-top:24px; }
  .case-hero-text{ max-width:100%; }
}
.case-title{ margin-bottom:clamp(20px,2.8vw,28px); }
.case-title h1{
  font-family:var(--font); font-weight:400; font-size:clamp(56px,8vw,104px);
  letter-spacing:-0.03em; line-height:1.0; margin:0; display:inline-block;
}
.case-hero-text .cat-tag{
  display:inline-block; font-size:16px; font-weight:400; color:var(--plum); background:none;
  border:1px solid var(--plum); padding:7px 18px; border-radius:999px;
}
.tagline{ font-size:clamp(16px,1.6vw,20px); color:rgba(40,0,26,0.6); margin:0; }
.case-meta-row{
  display:grid;
  /* The About column's left edge needs to land exactly on the 50vw mark
     where the hero photo starts. Grid's fr-based columns are relative to
     the wrap's own (padded) content width, not the viewport, so they
     can't hit an exact viewport-relative point on their own — this
     explicitly computes column 1's width as "whatever's left after
     reaching 50vw," accounting for the wrap's own left padding and the
     gap between columns. */
  grid-template-columns: calc(50vw - var(--pad) - clamp(32px,6vw,72px)) 1fr;
  gap:clamp(32px,6vw,72px);
  padding:clamp(48px,6vw,64px) 0; border-top:1px solid rgba(40,0,26,0.14); border-bottom:1px solid rgba(40,0,26,0.14);
  margin-bottom:clamp(48px,7vw,88px);
}
@media (max-width:760px){ .case-meta-row{ grid-template-columns:1fr; } }
.case-meta{ display:block; }
.case-meta div + div{ margin-top:clamp(20px,3vw,28px); }
.case-about h2{
  font-family:var(--font); font-weight:400; font-style:normal; font-size:clamp(18px,2vw,22px); letter-spacing:-0.01em; margin:0 0 12px;
}
.case-about p{
  font-size:clamp(15px,1.3vw,17px); line-height:1.65; color:rgba(40,0,26,0.82); margin:0 0 14px; max-width:60ch;
}
.case-about p:last-child{ margin-bottom:0; }
.case-meta dt{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(40,0,26,0.5); margin:0 0 8px; }
.case-meta dd{ margin:0; font-size:16px; line-height:1.6; }
.case-gallery{ display:flex; flex-direction:column; gap:clamp(16px,2.2vw,28px); margin-bottom:clamp(48px,7vw,88px); }
.case-row{ display:flex; gap:clamp(16px,2.2vw,28px); }
@media (max-width:640px){ .case-row{ flex-direction:column; } }
.case-ph{ flex:1 1 0; background:#e7e3e1; border-radius:2px; overflow:hidden; }
.case-ph-stack{ display:flex; flex-direction:column; gap:inherit; background:none; }
.case-row-natural{ display:flex; justify-content:center; }
.case-row-natural img{ width:auto; max-width:100%; border-radius:2px; }
.case-ph img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ---------- Services ---------- */
.services{ background:var(--plum); color:var(--gray); }
.services h2{ color:var(--gray); }
.services .section-head .sub{ color:rgba(245,245,243,0.65); }
.servicelist{ list-style:none; margin:0; padding:0; }
.servicelist li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 4px; border-top:1px solid rgba(245,245,243,0.16);
  font-size:clamp(24px,3.4vw,42px); font-weight:400; letter-spacing:-0.02em;
  transition:padding-left .3s var(--ease), color .3s ease;
}
.servicelist li:last-child{ border-bottom:1px solid rgba(245,245,243,0.16); }
.servicelist li:hover{ padding-left:16px; color:var(--lime); }
.servicelist li span.num{ font-size:14px; font-weight:400; color:rgba(245,245,243,0.45); letter-spacing:0; }

/* ---------- About ---------- */
.about .cols{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,88px); align-items:start; }
@media (max-width:760px){ .about .cols{ grid-template-columns:1fr; } }
.about p{ font-size:clamp(16px,1.4vw,19px); line-height:1.65; max-width:56ch; color:rgba(40,0,26,0.82); margin:0 0 18px; letter-spacing:-0.005em; }
.status{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:400; color:var(--plum); margin-top:8px; }
.status i{ width:7px; height:7px; border-radius:50%; background:var(--plum); display:inline-block; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ border-top:1px solid rgba(40,0,26,0.16); padding:18px 0; }
.contact-list li:last-child{ border-bottom:1px solid rgba(40,0,26,0.16); }
.contact-list .label{ display:block; font-size:13px; font-weight:400; color:rgba(40,0,26,0.55); margin-bottom:4px; }
.contact-list a{
  font-family:var(--font); font-weight:400; font-size:clamp(19px,1.8vw,24px); text-decoration:none;
  color:var(--plum); letter-spacing:-0.02em; border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.contact-list a:hover{ border-color:var(--plum); }

/* ---------- Footer ---------- */
footer{ position:relative; overflow:hidden; background:var(--black); color:rgba(245,245,243,0.7); }
footer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
footer .footer-tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(40,0,26,0.5) 0%, rgba(40,0,26,0.66) 55%, rgba(26,0,31,0.85) 100%); z-index:1; }
footer .inner{ position:relative; z-index:2; padding-top:clamp(56px,8vw,88px); padding-bottom:clamp(28px,4vw,40px); }

.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,64px); }
.foot-left{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.foot-left .foot-logo{ height:30px; width:auto; }
.foot-contact-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot-email{ font-size:15px; font-weight:400; color:var(--gray); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease; }
.foot-email:hover{ border-color:var(--lime); }
.foot-location{ font-size:15px; color:rgba(245,245,243,0.75); white-space:nowrap; padding-top:4px; }

footer .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:26px; border-top:1px solid rgba(245,245,243,0.14); font-size:13px; }
footer .social{ display:flex; gap:20px; }
footer .social a{ text-decoration:none; opacity:.75; transition:opacity .15s ease; }
footer .social a:hover{ opacity:1; }

/* ---------- Home: shared video stage (hero + spiral) ----------
   One sticky video background sits behind both the hero and the project
   spiral, so scrolling from one into the other is seamless. */
.home-stage{ position:relative; background:var(--plum-deep); overflow:clip; }
.home-bg{ position:sticky; top:0; height:100vh; margin-bottom:-100vh; overflow:hidden; z-index:0; }
.home-bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-bg-tint{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(40,0,26,0.5) 0%, rgba(40,0,26,0.66) 55%, rgba(26,0,31,0.85) 100%); }
.home-bg-shade{ position:absolute; inset:0; background:#0d0010; opacity:0; }
.home-stage .hero{ position:relative; z-index:1; background:transparent; }

/* ---------- Home: project spiral ----------
   Cards sit on a vertical helix (a cylinder of radius R). Each card is
   split into thin vertical slices, each rotated to its own angle, so the
   card visibly curves around the cylinder. Scroll drives the helix like a
   screw: it rotates and rises together, bringing each card to the front
   in turn. Geometry and motion live in main.js. */
.spiral{ position:relative; z-index:1; margin-top:-16vh; margin-bottom:-24vh; }
.spiral.is-3d .spiral-sticky{ pointer-events:none; }
.spiral.is-3d .spiral-card{ pointer-events:auto; }
.spiral::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:70vh; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); }
.spiral-sticky{
  position:sticky; top:84px; height:calc(100vh - 84px); overflow:hidden;
  perspective:1400px; perspective-origin:50% 50%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.spiral-world{ position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; }
.spiral-helix{ position:absolute; left:0; top:0; transform-style:preserve-3d; will-change:transform; }
.spiral-title{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%); margin:0; white-space:nowrap;
  font-family:var(--font); font-weight:300; font-size:clamp(56px,10vw,168px); line-height:1;
  letter-spacing:-0.045em; color:var(--gray); pointer-events:none; text-align:center;
}
.spiral-title em{ font-family:var(--logo-serif); font-style:italic; font-weight:300; letter-spacing:-0.04em; color:var(--lime); }
.spiral-card{ position:absolute; left:0; top:0; transform-style:preserve-3d; --lift:0px; --b:1; }
.spiral-card:hover, .spiral-card:focus-visible{ --lift:26px; }
.spiral-card:focus-visible{ outline:none; }
.spiral-slice{
  position:absolute; display:block; background-repeat:no-repeat;
  backface-visibility:visible; filter:brightness(var(--b)); opacity:var(--fade,1);
  transition:transform .5s var(--ease);
}
.spiral-card .spiral-slice:first-of-type{ border-radius:10px 0 0 10px; }
.spiral-card .spiral-slice:last-of-type{ border-radius:0 10px 10px 0; }
.spiral-caption{
  position:absolute; left:50%; bottom:17%; transform:translate(-50%,8px);
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; z-index:5;
}
.spiral-caption.show{ opacity:1; transform:translate(-50%,0); }
.spiral-caption-name{ font-size:clamp(17px,1.6vw,22px); color:var(--gray); letter-spacing:-0.01em; }
.spiral-caption-cat{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--lime); }
.spiral-end{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-decoration:none;
  opacity:0; pointer-events:none; color:var(--gray);
}
.spiral-end.live{ pointer-events:auto; }
.spiral-end em{ font-family:var(--logo-serif); font-style:italic; font-weight:300; font-size:clamp(64px,9vw,150px); line-height:1; letter-spacing:-0.04em; transition:color .2s ease; }
.spiral-end span{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--lime); }
.spiral-end:hover em{ color:var(--lime); }

/* Fallback before/without the 3D build: a simple grid of the same cards. */
.spiral:not(.is-3d) .spiral-sticky{ position:relative; top:0; height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; padding:var(--head-gap) var(--pad); }
.spiral:not(.is-3d) .spiral-world{ position:static; width:auto; height:auto; }
.spiral:not(.is-3d) .spiral-title{ position:static; transform:none; display:block; margin-bottom:var(--head-gap); font-size:clamp(48px,7vw,96px); }
.spiral:not(.is-3d) .spiral-helix{ position:static; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.spiral:not(.is-3d) .spiral-card{ position:static; }
.spiral:not(.is-3d) .spiral-card img{ width:100%; display:block; border-radius:10px; }
.spiral:not(.is-3d) .spiral-end{ position:static; transform:none; opacity:1; pointer-events:auto; margin-top:var(--head-gap); }
.spiral.is-3d .spiral-card img{ display:none; }

/* Spiral end link: one line, sans + serif italic, matching the title. */
.spiral-end{ flex-direction:row; align-items:baseline; gap:0.24em; white-space:nowrap; font-size:clamp(48px,7vw,120px); }
.spiral-end .spiral-end-sans{ font-family:var(--font); font-weight:300; font-size:1em; letter-spacing:-0.045em; line-height:1; color:var(--gray); text-transform:none; }
.spiral-end em{ font-size:1em; color:var(--lime); }
.spiral-end:hover em, .spiral-end:hover .spiral-end-sans{ color:var(--gray); opacity:.85; }

/* Category info -> About: same breathing room on both sides of the seam. */
.info-panel.section{ padding-bottom:clamp(56px,7vw,96px); }
.about.section{ padding-top:clamp(56px,7vw,96px); }

/* Sections after the spiral sit above the shared video layer. */
.info-panel, .about{ position:relative; z-index:2; }