@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; padding:2px 6px; margin:0 -6px;
  background:linear-gradient(var(--lime), var(--lime)) no-repeat left center / 0% 100%;
  transition:background-size .45s cubic-bezier(.65,0,.35,1);
}
.contact-list a:hover, .contact-list a:focus-visible{ background-size:100% 100%; }

/* ---------- 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; }

/* ================= Design Madeline rebrand ================= */

/* Nav logo: inline SVG so it can ripple and recolor on hover. */
.brand .brand-logo{ display:block; height:26px; width:auto; color:var(--gray); overflow:visible;
  transition:color .35s var(--ease), transform .35s var(--ease); }
nav.wrap > a.brand{ opacity:1; }
nav.wrap > a.brand:hover .brand-logo, nav.wrap > a.brand:focus-visible .brand-logo{ color:var(--lime); transform:scale(1.03); }

/* Loader: the mark fills with lime from the bottom up as the page loads. */
.loader-mark{ position:relative; width:72px; height:53.6px; }
.loader-mark img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.loader-mark .lm-fill{ clip-path:inset(calc(100% - var(--p, 0%)) 0 0 0); }

/* Custom cursor (plum arrow; lime version over anything clickable).
   Plain PNG first so every browser gets it; richer SVG/retina version after. */
html{ cursor:url(../assets/dm-cursor.png) 4 1, auto; }
html{ cursor:url(../assets/dm-cursor.svg) 4 1, -webkit-image-set(url(../assets/dm-cursor.png) 1x, url(../assets/dm-cursor@2x.png) 2x) 4 1, auto; }
html body *:not(input):not(textarea){ cursor:inherit !important; }
html body a[href], html body button, html body select, html body label, html body summary, html body [role="button"], html body .accordion-trigger{
  cursor:url(../assets/dm-cursor-hover.png) 4 1, pointer !important; }
html body input, html body textarea{ cursor:text !important; }

/* Loader safety net: even if scripts never run, the loading screen clears. */
@keyframes loaderBail{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
html.js-loading .loader{ animation:loaderBail .6s ease 7s forwards; }
html.js-loading{ animation:none; }

/* About CTA link */
.about-cta{ color:inherit; text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px; }
.about-cta:hover{ color:var(--plum); text-decoration-color:var(--plum); }

/* Contact pop-up */
.contact-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.contact-modal[hidden]{ display:none; }
.cm-backdrop{ position:absolute; inset:0; background:rgba(16,0,12,0.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .3s var(--ease); }
.cm-panel{ position:relative; width:100%; max-width:560px; max-height:calc(100vh - 48px); overflow:auto;
  background:var(--plum); color:var(--gray); border-radius:16px; padding:clamp(28px,4vw,44px);
  box-shadow:0 30px 80px rgba(0,0,0,0.45); transform:translateY(18px) scale(.98); opacity:0;
  transition:transform .35s var(--ease), opacity .3s var(--ease); }
.contact-modal.open .cm-backdrop{ opacity:1; }
.contact-modal.open .cm-panel{ transform:none; opacity:1; }
.cm-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(245,245,243,0.3);
  background:none; color:var(--gray); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; }
.cm-close:hover{ border-color:var(--lime); color:var(--lime); }
.cm-title{ font-family:var(--font); font-weight:300; font-size:clamp(34px,4.6vw,48px); letter-spacing:-0.045em; line-height:1; margin:0 0 10px; }
.cm-title em{ font-family:var(--logo-serif); font-style:italic; font-weight:300; color:var(--lime); letter-spacing:-0.03em; }
.cm-sub{ margin:0 0 26px; font-size:15px; line-height:1.55; color:rgba(245,245,243,0.75); max-width:40ch; }
.cm-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.cm-field{ display:flex; flex-direction:column; gap:7px; }
.cm-field.full{ grid-column:1 / -1; }
.cm-field span{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(245,245,243,0.7); }
.cm-field input, .cm-field select, .cm-field textarea{
  font:inherit; font-size:16px; color:var(--gray); background:rgba(245,245,243,0.06);
  border:1px solid rgba(245,245,243,0.22); border-radius:10px; padding:12px 14px; outline:none;
  transition:border-color .2s ease, background .2s ease; }
.cm-field select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:38px; }
.cm-field select option{ color:#28001a; }
.cm-field textarea{ min-height:130px; resize:vertical; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus{ border-color:var(--lime); background:rgba(245,245,243,0.1); }
.cm-honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cm-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.cm-actions .btn{ border:none; font:inherit; font-size:15px; }
.cm-actions .btn[disabled]{ opacity:.6; }
.cm-status{ font-size:14px; color:rgba(245,245,243,0.8); margin:0; }
.cm-status.err{ color:#ffb4b4; }
.cm-status a{ color:var(--lime); }
.cm-done{ text-align:left; }
.cm-done p{ color:rgba(245,245,243,0.8); line-height:1.6; margin:0 0 22px; }
@media (max-width:560px){ .cm-form{ grid-template-columns:1fr; } .contact-modal{ padding:12px; } }
@media (prefers-reduced-motion: reduce){ .cm-panel, .cm-backdrop{ transition:none; } }
body.cm-lock{ overflow:hidden; }

/* The spiral overlaps the bottom of the hero (for a seamless hand-off), so it
   must never swallow clicks meant for the hero buttons. Only the tiles are
   clickable; the hero content sits on top. */
.spiral.is-3d{ pointer-events:none; }
.spiral.is-3d .spiral-card{ pointer-events:auto; }
.home-stage .hero{ z-index:2; }

/* ===== Round: softer polish + mobile (Oct 15) ===== */
.cm-title .cm-lead{ font-size:0.84em; }

/* Mobile hero: no tall empty band above the heading */
@media (max-width:860px){
  .hero{ min-height:0; align-items:flex-start; }
  .hero-content{ padding-top:clamp(36px,9vw,56px); padding-bottom:clamp(56px,14vw,96px); }
}

/* Mobile galleries: stack images full width at their natural ratio */
@media (max-width:640px){
  .case-row{ flex-direction:column; }
  .case-row > .case-ph{ flex:none !important; width:100%; }
  .case-ph-stack > .case-ph{ flex:none !important; width:100%; }
}

/* Mobile nav toggle + menu */
nav.wrap > .nav-toggle{ display:none; }
@media (max-width:1180px){
  nav.wrap > .nav-fallback{ display:none !important; }
  nav.wrap > .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
    width:40px; height:40px; margin-right:-8px; padding:0 8px; background:none; border:0; cursor:pointer; flex:0 0 auto;
  }
  nav.wrap > .nav-toggle span{
    display:block; height:1.5px; width:100%; background:var(--gray); border-radius:2px;
    transition:transform .4s cubic-bezier(.65,0,.35,1), opacity .25s ease, background .2s ease;
  }
  nav.wrap > .nav-toggle:hover span{ background:var(--lime); }
  .menu-open nav.wrap > .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .menu-open nav.wrap > .nav-toggle span:nth-child(2){ opacity:0; }
  .menu-open nav.wrap > .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}
@media (max-width:560px){ nav.wrap > .cta{ display:none; } nav.wrap > .nav-toggle{ margin-left:auto; } }
.mobile-menu{
  position:fixed; left:0; right:0; top:84px; bottom:0; z-index:49; background:var(--plum);
  padding:28px var(--pad) 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s; }
.menu-open{ overflow:hidden; }
.menu-open header{ top:0; }
.mobile-menu ul{ list-style:none; margin:0 0 32px; padding:0; }
.mobile-menu li{ border-bottom:1px solid rgba(245,245,243,0.14); opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.menu-open .mobile-menu li{ opacity:1; transform:none; transition-delay:calc(var(--i) * 50ms + 80ms); }
.mobile-menu li a{ display:block; padding:18px 0; font-size:clamp(22px,6vw,30px); font-weight:300; letter-spacing:-0.03em; color:var(--gray); text-decoration:none; transition:color .2s ease; }
.mobile-menu li a:hover{ color:var(--lime); }
@media (min-width:1181px){ .mobile-menu{ display:none; } }

/* Mobile: tighten the gap between the hero buttons and the first spiral tiles */
@media (max-width:860px){
  .spiral{ margin-top:-30vh; }
}