/* ==========================================================================
   Worldwide Distributors — site stylesheet
   Every color below is rewritten at runtime by site.js from one value:
   the time of day. See setTime() there.
   ========================================================================== */

:root{
  /* clock-driven — do not hardcode these anywhere else */
  --sky-top:#4F8FD6;
  --sky-bot:#DCEBF7;
  --surface:#F4F6F8;
  --surface-2:#E9EDF1;
  --text:#10151B;
  --text-mute:#5B6672;
  --text-mute-strong:#3C444E;
  --line:#D8DEE5;
  --accent:#B9741A;      /* the color of light: glows, fixtures, the seam */
  --accent-ink:#FFF6E8;
  --brand:#003FD6;       /* the company's own blue, off the eLighting mark */
  --brand-ink:#FFFFFF;
  --chev:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23003FD6' stroke-width='1.6'/%3E%3C/svg%3E");
  --glow:0;

  /* fixed */
  --steel:#9AA3AD;
  --signal:#25406B;
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-b:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1280px;
  --rail:0px;
}
@media(min-width:901px){ :root{ --rail:70px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The header is fixed, so without this every fragment link lands with its
   target tucked underneath it — measured at 13px above the viewport top
   before this rule existed. 84px is the 64px header plus air. */
main[id],section[id],.panel[id]{scroll-margin-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-right:var(--rail);
  transition:background-color .12s linear,color .12s linear;
}
@media(max-width:900px){ body{padding-bottom:78px} }

img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ───────────────────────────────────────────── */
.disp{
  font-family:var(--f-d);
  font-variation-settings:"wdth" 114,"wght" 810;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:-.017em;
  margin:0;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--brand);margin:0;
}
/* eLighting and eBuilt are set the way their own mark sets them, so they
   opt out of the uppercase the labels around them use */
.cased{text-transform:none}
.lede{font-size:clamp(15px,1.8vw,17.5px);color:var(--text-mute);max-width:60ch;margin:16px 0 0}

/* ── header ─────────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:var(--rail);z-index:80;
  border-bottom:1px solid transparent;
  transition:background-color .25s,border-color .25s,backdrop-filter .25s;
}
/* Unstuck, the header floats over photography. This scrim keeps the brand
   and nav legible against a bright sky without adding a visible bar. */
.hdr::before{
  content:"";position:absolute;inset:-1px 0 auto;height:132px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 88%,transparent) 0%,
    color-mix(in srgb,var(--surface) 46%,transparent) 52%,
    transparent 100%);
  transition:opacity .25s;
}
.hdr.stuck::before{opacity:0}
.hdr-in{position:relative}
.hdr.stuck{
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom-color:var(--line);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
/* The Worldwide Distributors lockup, in the artwork the company supplied.
   It is fixed navy and black, which disappears once the clock takes the
   page dark, so a night variant with the ink lifted rides on top and
   cross-fades on --glow — the same way the division lockups and the
   night photography turn over. */
.brand .mark-wwd{position:relative;display:block;width:93px;height:34px;flex:none}
.brand .mark-wwd img{position:absolute;left:0;top:0;width:93px;height:34px;display:block}
.brand .mark-wwd .ngt{opacity:var(--glow,0)}
@media(max-width:420px){.brand .mark-wwd,.brand .mark-wwd img{width:76px;height:28px}}
.brand .wm{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand b{
  font-family:var(--f-d);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.brand .wm span{font-family:var(--f-m);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.nav{display:flex;gap:24px;align-items:center}
.nav a{color:var(--text-mute);text-decoration:none;font-size:13.5px;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand)}
@media(max-width:1000px){.nav{display:none}}
/* the strapline wraps to two lines under the wordmark on a narrow phone,
   which reads as a mistake rather than a subtitle */
@media(max-width:420px){.brand .wm span{display:none}}

/* ── buttons ────────────────────────────────────────── */
.btn{
  font-family:var(--f-m);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:14px 20px;text-decoration:none;display:inline-block;
  border:1px solid transparent;cursor:pointer;transition:.2s;line-height:1;white-space:nowrap;
}
.btn-p{background:var(--brand);color:var(--brand-ink)}
.btn-p:hover{background:var(--text);color:var(--surface)}
.btn-s{border-color:var(--line);color:var(--text)}
.btn-s:hover{border-color:var(--brand);color:var(--brand)}
/* The home hero is the one that runs light type over the picture. Its
   secondary button was still taking the page's ink, so in daylight it was
   near-black on a photograph beside a near-white headline. The interior
   heroes set their headline dark and are left alone. */
.hero .btn-s{border-color:rgba(244,241,236,.45);color:#F4F1EC}
.hero .btn-s:hover{border-color:#F4F1EC;background:rgba(244,241,236,.12);color:#F4F1EC}
.btn-sm{padding:11px 15px;font-size:11px}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* ── time rail ──────────────────────────────────────── */
.rail{
  position:fixed;top:0;right:0;bottom:0;width:var(--rail);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 0;
  background:var(--surface);border-left:1px solid var(--line);
  transition:background-color .12s linear,border-color .12s linear;
}
.rail .cap{font-family:var(--f-m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.track{position:relative;flex:1;width:14px;border-radius:7px;border:1px solid var(--line);overflow:hidden;cursor:ns-resize;touch-action:none}
.track .grad{position:absolute;inset:0}
.knob{
  position:absolute;left:50%;width:30px;height:30px;margin-left:-15px;margin-top:-15px;
  border-radius:50%;border:2px solid var(--text);background:var(--surface);
  pointer-events:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 9px rgba(0,0,0,.26);
}
.knob i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.clock{font-family:var(--f-m);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.live{
  font-family:var(--f-m);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent);background:none;padding:2px 5px;cursor:pointer;line-height:1.5;
}
.live[data-on="1"]{background:var(--accent);color:var(--accent-ink)}
@media(max-width:900px){ .rail{display:none} }

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-shots{position:absolute;inset:0;overflow:hidden;background:#0A0C0F}
.hero-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* hero film: covers the still once it can play, and never plays at all for
   a visitor who asked for reduced motion */
.hero-shots video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hero-shots video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-shots video{display:none}}
.hero-shots .day{opacity:calc(1 - var(--glow))}
.hero-shots .night{opacity:var(--glow)}
/* The hero sits on dusk footage that is dark whatever the clock says, so its
   type does NOT follow the palette — it is always light on a dark scrim.
   Letting --text apply here put near-black copy over a lit facade in the
   morning, which is exactly where it disappeared. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(6,8,11,.55) 0%,
      rgba(6,8,11,.18) 26%,
      rgba(6,8,11,.62) 62%,
      rgba(6,8,11,.88) 88%,
      var(--surface) 100%),
    linear-gradient(90deg,
      rgba(6,8,11,.60) 0%,
      rgba(6,8,11,.20) 52%,
      rgba(6,8,11,0) 78%);
}
@media(max-width:900px){
  /* one column, type runs the full width, so the wash has to as well */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(6,8,11,.58) 0%,
      rgba(6,8,11,.30) 22%,
      rgba(6,8,11,.72) 55%,
      rgba(6,8,11,.90) 85%,
      var(--surface) 100%);
  }
}
.hero-in{position:relative;z-index:3;width:100%;padding:120px 0 clamp(38px,7vh,80px)}
.hero h1,.hero .claim{color:#F6F3EE;text-shadow:0 1px 26px rgba(4,6,9,.5)}
.hero .lede{color:#D2D6DB;text-shadow:0 1px 18px rgba(4,6,9,.55)}
.hero h1{font-size:clamp(36px,7.4vw,102px)}
.hero h1 span{display:block}
.hero h1 a{color:inherit;text-decoration:none;display:inline-block}
.hero h1 a::after{
  content:"";display:block;height:3px;margin-top:.06em;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.hero h1 a:hover::after,.hero h1 a:focus-visible::after{transform:scaleX(1)}
.hero h1 .accent a{color:var(--accent)}
.stamp{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#F6F3EE;background:rgba(6,8,11,.5);
  border:1px solid rgba(246,243,238,.28);padding:6px 10px;
}
.stamp i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.stamp b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.claim{
  font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 650;
  font-size:clamp(17px,2.6vw,31px);text-transform:uppercase;line-height:1.13;
  margin:22px 0 0;max-width:19ch;
}
.hero .lede{margin-top:15px;max-width:50ch}
.hero .btns{margin-top:28px}

/* ── sections ───────────────────────────────────────── */
.sec{padding:clamp(56px,9vh,120px) 0;position:relative}
.sec-tight{padding-top:0}
.head{max-width:72ch;margin-bottom:clamp(26px,4vh,52px)}
.head h2{font-size:clamp(25px,4.3vw,52px);margin-top:13px}
.hr{height:1px;background:var(--line);border:0;margin:0;transition:background-color .12s linear}

/* ── grid of panels ─────────────────────────────────── */
.grid{display:grid;gap:2px;background:var(--line)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g3,.g4,.g2{grid-template-columns:1fr}}

.panel{
  background:var(--surface);padding:clamp(22px,3vw,38px);
  display:flex;flex-direction:column;gap:11px;position:relative;
  text-decoration:none;color:var(--text);transition:background-color .12s linear;
}
a.panel::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%);
}
a.panel:hover::before{opacity:1}
.panel > *{position:relative}
.panel .lock{width:46px;height:46px;color:var(--text);margin-bottom:14px;display:block}
/* eLighting and eBuilt lead with their own lockup, in the flat artwork the
   company supplied. Its lettering is a mid grey that sits at about 2.9:1 on
   the night surface, so a second variant with the neutrals lifted and the
   blue opened up is stacked on top and cross-faded on --glow — the same
   property the night photographs ride on, so the marks turn over with the
   rest of the page rather than snapping at dusk. */
.panel .lockup{position:relative;display:block;height:52px;width:-moz-fit-content;width:fit-content;margin:0}
.panel .lockup img{height:52px;width:auto;display:block}
.panel .lockup .ngt{position:absolute;left:0;top:0;opacity:var(--glow,0)}
.panel h3{margin:0 0 2px}

.panel .n{font-family:var(--f-m);font-size:10px;letter-spacing:.15em;color:var(--brand)}
.panel h3{
  font-family:var(--f-d);font-variation-settings:"wdth" 106,"wght" 760;
  font-size:clamp(19px,2.2vw,27px);margin:0;line-height:1.05;
}
.panel p{margin:0;font-size:14px;line-height:1.55;color:var(--text-mute);flex:1}
.panel .go{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
a.panel:hover .go{color:var(--brand)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 0;padding:0;list-style:none}
.tags li{font-family:var(--f-m);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);border:1px solid var(--line);padding:3px 7px}

/* ── capability spine ───────────────────────────────── */
.spine-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.spine{display:grid;grid-template-columns:repeat(6,minmax(172px,1fr));gap:2px;background:var(--line);min-width:1040px}
.stage{background:var(--surface-2);padding:20px 18px 24px;position:relative;overflow:hidden;transition:background-color .12s linear}
.stage .bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.stage .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1s cubic-bezier(.2,.7,.3,1)}
.stage.on .bar i{width:100%}
.stage .ix{font-family:var(--f-m);font-size:10px;color:var(--text-mute);letter-spacing:.13em}
.stage h4{font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 770;font-size:16px;text-transform:uppercase;margin:9px 0 7px}
.stage p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-mute)}
.stage .own{margin-top:12px;font-family:var(--f-m);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand)}

/* ── proof strip ────────────────────────────────────── */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);transition:background-color .12s linear}
.proof .grid{background:var(--line)}
.pf{background:var(--surface-2);padding:24px 20px;transition:background-color .12s linear}
.pf b{display:block;font-family:var(--f-d);font-variation-settings:"wdth" 108,"wght" 770;font-size:clamp(18px,2.2vw,26px);text-transform:uppercase;line-height:1.05;margin-bottom:6px}
.pf span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);line-height:1.6;display:block}
.tbd{color:var(--accent)}

/* ── project tiles ──────────────────────────────────── */
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);display:block;text-decoration:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .day{opacity:calc(1 - var(--glow))}
.tile .night{opacity:var(--glow)}
.tile .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:44px 16px 16px;
  background:linear-gradient(0deg,
    var(--surface) 0%,
    color-mix(in srgb,var(--surface) 88%,transparent) 46%,
    transparent 100%);
}
.tile .cat{font-family:var(--f-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:4px}
.tile h4{font-family:var(--f-d);font-variation-settings:"wdth" 102,"wght" 730;font-size:15px;text-transform:uppercase;margin:0;line-height:1.06;color:var(--text)}

/* ── film ───────────────────────────────────────────── */
.film-wrap{position:relative;border:1px solid var(--line);background:#000;line-height:0}
.film-wrap video{width:100%;height:auto}
.film-meta{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:12px;font-family:var(--f-m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute)}

/* ── kelvin demo ────────────────────────────────────── */
.kelvin{border:1px solid var(--line);background:var(--surface);transition:background-color .12s linear,border-color .12s linear}
.kroom{display:block;width:100%;height:auto;background:#0A0C0F}
.kctl{padding:clamp(18px,2.6vw,30px);display:flex;flex-direction:column;justify-content:center;gap:13px}
.krow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.kval{font-family:var(--f-d);font-variation-settings:"wdth" 110,"wght" 800;font-size:clamp(25px,4vw,44px);line-height:1;text-transform:uppercase}
.kname{font-family:var(--f-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute)}
.kuse{font-size:14.5px;color:var(--text-mute);margin:0;min-height:3.2em}
.kuse b{color:var(--text);font-weight:600}
/* Stop labels under the slider, each centered on the position its thumb
   actually reaches. space-between will not do it: that spreads the
   label boxes evenly, which is not the same as centring each one on a
   quarter mark. The 11px inset is half the thumb, the range the thumb
   center cannot travel into at either end. */
.kstops{list-style:none;margin:-4px 0 0;padding:0;position:relative;height:14px}
.kstops li{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;color:var(--text-mute)}
.kstops li:nth-child(1){left:11px}
.kstops li:nth-child(2){left:calc(11px + (100% - 22px) * .3333)}
.kstops li:nth-child(3){left:calc(11px + (100% - 22px) * .6667)}
.kstops li:nth-child(4){left:calc(100% - 11px)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#FF9C3F,#FFC97A,#FFE9C9,#F3F6FF,#CFE0FF)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#FF9C3F,#FFC97A,#FFE9C9,#F3F6FF,#CFE0FF)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-8px;background:var(--surface);border:2px solid var(--text)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--text)}

/* ── split state ────────────────────────────────────── */
.split{position:relative;user-select:none;touch-action:pan-y;background:#07090B;border:1px solid var(--line);overflow:hidden}
.split img{display:block;width:100%;height:auto}
.split .after{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.split .after img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.seam{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 16px 2px color-mix(in srgb,var(--accent) 55%,transparent);cursor:ew-resize;z-index:4}
.seam::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border:2px solid var(--accent);border-radius:50%;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.seam::after{content:"◄ ►";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9.5px;color:var(--accent);white-space:nowrap}
.split-lbl{position:absolute;bottom:12px;z-index:5;font-family:var(--f-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#F4F1EC;background:rgba(10,12,15,.62);padding:4px 8px;pointer-events:none}
.split-lbl.l{left:12px}
.split-lbl.r{right:12px;color:#F2C879}

/* ── lighting studies ───────────────────────────────────
   Generated visualizations, kept visually distinct from the photographed
   grid above: stacked wide rather than tiled, each with its own caption. */
/* ── ground-up stages ───────────────────────────────────
   Five across on a wide screen; a snapping horizontal strip on a phone,
   where five stacked would bury the last one. */
.stages{list-style:none;margin:34px 0 0;padding:0 0 6px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:16px}
.stage img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2)}
.stage .sn{display:block;margin:11px 0 3px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.15em;color:var(--brand)}
.stage b{display:block;font-family:var(--f-d);
  font-variation-settings:"wdth" 104,"wght" 760;font-size:15px;
  text-transform:uppercase;margin-bottom:5px}
.stage p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-mute)}
@media(max-width:900px){
  .stages{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .stage{scroll-snap-align:start}
}
.studies{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px);margin-top:36px}
.study{margin:0}
.study .split{margin:0}
.study figcaption{margin-top:16px;max-width:64ch}
.study figcaption b{display:block;font-family:var(--f-d);
  font-variation-settings:"wdth" 106,"wght" 760;font-size:clamp(17px,2vw,22px);
  text-transform:uppercase;letter-spacing:-.005em;margin-bottom:6px}
.study figcaption p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-mute)}
@media(min-width:901px){
  .study{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:center}
  .study figcaption{margin-top:0}
}

/* ── notes / callouts ───────────────────────────────── */
.note{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--surface-2);padding:16px 18px;margin:24px 0 0;max-width:68ch;transition:background-color .12s linear}
.note p{margin:0;font-size:14px;line-height:1.6;color:var(--text-mute)}
.note b{color:var(--text)}
.note .t{display:block;font-family:var(--f-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:7px;font-weight:600}

/* ── contact / close ────────────────────────────────── */
/* Their logo animation, on a dark ground of its own. The artwork is built
   on black with a glow around it, so unlike everything else on the page it
   cannot follow the clock — it is fixed, the way the hero is. */
.plate{background:#000;display:flex;justify-content:center;
  padding:clamp(26px,3.4vw,44px) var(--pad)}
/* The clip is built on black, so screening it over a black band makes its
   own black exactly the band and the video's rectangle stops showing an
   edge. Without blend support it simply sits on black, which is no worse
   than the artwork was designed for. */
.plate-film{width:min(560px,100%);height:auto;display:block;mix-blend-mode:screen}

.close{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.close::before{content:"";position:absolute;inset:0;background:radial-gradient(85% 100% at 50% 125%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.close .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(28px,5.6vw,72px)}
/* Four items once the Follow row is live, three before it. auto-fit rather
   than a fixed count so adding one does not leave half an empty row. */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(32px,5vh,58px)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.ci{background:var(--surface);padding:24px 22px;transition:background-color .12s linear}
.ci b{display:block;font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px}
.ci p{margin:0;font-size:15px;line-height:1.6}
.ci a{color:var(--brand);text-decoration:none}
.ci a:hover{text-decoration:underline}

/* ── footer ─────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:32px 0 40px;font-family:var(--f-m);font-size:11px;line-height:1.85;color:var(--text-mute)}
.foot-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.foot a{color:var(--text-mute);text-decoration:none}
.foot a:hover{color:var(--brand)}
/* Profile icons. They take the ink of whatever they sit in, so the same
   row works in the footer and in the contact details block. */
.soc{display:flex;gap:12px;margin-top:10px}
.soc a{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);color:var(--text-mute);
  transition:color .15s,border-color .15s}
.soc a:hover{color:var(--brand);border-color:var(--brand)}
.soc svg{display:block}
.ci .soc{margin-top:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:14px}

/* ── mobile call bar ────────────────────────────────── */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:85;display:none;text-align:center;
  background:var(--brand);color:var(--brand-ink);padding:15px;text-decoration:none;
  font-family:var(--f-m);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
@media(max-width:900px){.callbar{display:block}}

/* ── reveal ─────────────────────────────────────────── */
html.js .rv{opacity:0;transform:translateY(13px)}
html.js .rv.on{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

/* ── interior page hero ─────────────────────────────── */
.phero{position:relative;min-height:60svh;display:flex;align-items:flex-end;overflow:hidden}
.phero-in{position:relative;z-index:3;width:100%;padding:140px 0 clamp(32px,6vh,66px)}
.phero h1{font-size:clamp(30px,5.8vw,76px)}
/* The page hero is shorter than the home hero, so the shared scrim's
   mid-gradient lands right on the body copy. Weight it lower. */
.phero .hero-scrim{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 46%,transparent) 0%,
    color-mix(in srgb,var(--surface) 16%,transparent) 24%,
    color-mix(in srgb,var(--surface) 74%,transparent) 62%,
    var(--surface) 100%);
}
/* On the interior heroes this paragraph sits on a photograph, not on a
   flat surface. It was clearing 4.5:1 on average and less than that
   wherever the picture behind it is bright, which on a phone in daylight
   is most of it. Darker ink, plus a halo in the surface color so busy
   areas of the photograph cannot eat the letterforms. Both follow the
   clock, so this holds at midnight as well as at noon. */
.phero .lede{margin-top:16px;color:var(--text-mute-strong);
  text-shadow:0 1px 12px var(--surface),0 0 3px var(--surface)}
.phero .btns{margin-top:26px}

/* ── ordered detail list ────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{
  counter-increment:s;border-bottom:1px solid var(--line);
  padding:20px 0 20px 62px;position:relative;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--f-m);font-size:11px;letter-spacing:.13em;color:var(--brand);
}
.steps b{
  display:block;font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 740;
  font-size:clamp(16px,1.9vw,21px);text-transform:uppercase;line-height:1.1;margin-bottom:6px;
}
.steps p{margin:0;font-size:14.5px;color:var(--text-mute);max-width:66ch}

/* ── form ───────────────────────────────────────────── */
.form{display:grid;gap:18px;max-width:660px;margin-top:clamp(26px,4vh,46px)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field > span{
  font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);
}
.field > span i{color:var(--brand);font-style:normal}
.field input,.field select,.field textarea{
  font-family:var(--f-b);font-size:15px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);padding:12px 13px;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,background-color .12s linear,color .12s linear;
}
.field textarea{min-height:132px;resize:vertical}
.field select{
  padding-right:38px;
  /* the arrow is a data URI, so it cannot read a variable — site.js
     rewrites --chev with the rest of the palette */
  background-image:var(--chev);
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none}

/* ── file field ─────────────────────────────────────── */
.field input[type=file]{
  padding:12px 13px;font-family:var(--f-b);font-size:13.5px;cursor:pointer;
  color:var(--text-mute);
}
.field input[type=file]::file-selector-button{
  font-family:var(--f-m);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:9px 13px;margin:0 13px 0 0;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  transition:border-color .2s,color .2s;
}
.field input[type=file]:hover::file-selector-button{border-color:var(--brand);color:var(--brand)}
.hint{display:block;margin-top:8px;font-size:12px;line-height:1.55;color:var(--text-mute)}
/* Filled in by site.js once files are chosen; empty and invisible before
   that, and with no script at all it simply never appears. */
.filelist{display:block;margin-top:10px;font-family:var(--f-m);font-size:11.5px;line-height:1.9;color:var(--text-mute)}
.filelist:empty{display:none}
.filelist b{color:var(--text);font-weight:500}
.filelist .over{color:var(--brand);font-weight:600}
.form .btn{justify-self:start}
.formnote{font-size:13px;color:var(--text-mute);margin:0;max-width:60ch}

/* ── inline definition rows ─────────────────────────── */
.rows{border-top:1px solid var(--line);margin:0}
.row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:8px 30px;
     border-bottom:1px solid var(--line);padding:16px 0}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.row dt{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.row dd{margin:0;font-size:15px;color:var(--text-mute)}

/* ══ SCROLL SCENES ═══════════════════════════════════════════════════
   Every block below has a static fallback. The `-on` classes are added
   by scroll.js; without it these read as ordinary stacked content.      */

/* ── film scrub ─────────────────────────────────────────────────────── */
.scrub{position:relative;height:420vh}
.scrub-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:#07090B}
.scrub-stage{position:relative;width:100%;height:100%}
.scrub canvas,.scrub video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scrub canvas{opacity:0;transition:opacity .5s}
.scrub[data-mode="canvas"] canvas{opacity:1}
.scrub[data-mode="canvas"] video{display:none}
.scrub-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(128% 90% at 50% 40%,transparent 46%,rgba(4,6,9,.58) 100%)}
/* The clip ends bright, so the copy needs its own ground, not just the
   vignette. */
.scrub-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(60px,14vh,150px) 0 clamp(26px,5vh,58px);
  background:linear-gradient(0deg,rgba(4,6,9,.92) 0%,rgba(4,6,9,.72) 42%,transparent 100%)}
.scrub-copy .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.scrub-copy .eyebrow{color:#F2C879}
.scrub-copy h2{color:#F4F1EC;font-size:clamp(26px,4.6vw,58px);margin:12px 0 0}
.scrub-copy p{color:#C4C8CE;max-width:52ch;font-size:15px;margin:14px 0 0}
.scrub-bar{height:2px;background:rgba(244,241,236,.18);margin:22px 0 14px;overflow:hidden}
.scrub-bar i{display:block;height:100%;background:#F2C879;transform:scaleX(0);transform-origin:0 50%}
.scrub-steps{display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  font-family:var(--f-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,236,.38)}
.scrub-steps li{transition:color .35s}
.scrub-steps li.on{color:#F2C879}
/* Where a picture on this site is generated rather than photographed, it
   carries a credit saying so. Quiet, but never hidden. */
.credit{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);margin:16px 0 0}
.scrub-copy .credit{color:rgba(196,200,206,.66)}
@media(max-width:900px){
  .scrub{height:auto}
  /* The dark ground belongs to the pinned frame. Once the section unpins and
     the copy comes out from over the picture, it has to come out onto the
     page it is actually sitting on, or it is grey type on black. */
  .scrub-stick{position:static;height:auto;display:block;background:none}
  .scrub-stage{height:auto;aspect-ratio:16/9}
  .scrub canvas{display:none}
  .scrub video{position:static}
  .scrub-copy{position:static;padding:22px 0 0;background:none}
  .scrub-copy h2,.scrub-copy p{color:inherit}
  .scrub-copy .eyebrow{color:var(--brand)}
  .scrub-copy h2{color:var(--text)}
  .scrub-copy p{color:var(--text-mute)}
  .scrub-bar{background:var(--line)}
  .scrub-bar i{background:var(--brand)}
  .scrub-steps{color:var(--text-mute)}
  .scrub-steps li.on{color:var(--brand)}
  .scrub-copy .credit{color:var(--text-mute)}
}

/* ── progressive relight ────────────────────────────────────────────── */
.relight{position:relative;height:300vh}
.relight-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:#07090B}
.relight-stage{position:relative;width:100%;height:100%}
.relight-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The scene starts from the property unlit and switches it on, so the base
   layer is the night frame held down hard and the masked layer above it is
   the same frame at full output. */
.rl-dark{filter:brightness(.20) saturate(.55)}
.rl-night{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 0% 0% at 50% 50%,#000 0%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 0% 0% at 50% 50%,#000 0%,rgba(0,0,0,0) 100%)}
.rl-night img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-count{position:absolute;left:var(--pad);top:clamp(78px,12vh,120px);z-index:4;
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.6)}
.rl-count b{font-family:var(--f-d);font-variation-settings:"wdth" 110,"wght" 800;
  display:block;font-size:clamp(40px,7vw,88px);line-height:1;color:#F2C879;font-variant-numeric:tabular-nums}
.rl-copy{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(56px,13vh,140px) 0 clamp(26px,5vh,58px);
  background:linear-gradient(0deg,rgba(4,6,9,.92) 0%,rgba(4,6,9,.70) 44%,transparent 100%)}
.rl-copy .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.rl-copy h2{color:#F4F1EC;font-size:clamp(24px,4.2vw,52px);margin:10px 0 0}
.rl-copy p{color:#C4C8CE;max-width:50ch;font-size:15px;margin:13px 0 0}
.rl-copy .eyebrow{color:#F2C879}
@media(max-width:900px){
  .relight{height:auto}
  .relight-stick{position:static;height:auto;display:block}
  .relight-stage{aspect-ratio:4/3}
  .rl-count{position:static;padding:18px var(--pad) 0;color:var(--text-mute)}
  .rl-count b{color:var(--accent)}
  .rl-copy{position:static;padding:16px 0 0;background:none}
  .rl-copy h2{color:var(--text)} .rl-copy p{color:var(--text-mute)}
}

/* ── pinned sequence ────────────────────────────────────────────────── */
.seq{position:relative}
.seq-stick{padding:clamp(56px,9vh,110px) 0}
/* as a flex child .wrap would shrink to its content instead of holding the
   page gutter */
.seq-stick > .wrap{width:100%;position:relative;z-index:2}

/* The fixture holds the center of the viewport while the stage copy changes
   in the columns either side of it. Hidden below 900px, where there is no
   room for an object and two columns of text at once. */
.seq-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:none}
.seq-on .seq-canvas{display:block}
/* On a phone the section stops pinning the whole viewport, so the fixture
   used to be hidden along with it — it is drawn behind the copy, and a
   rotating object behind a stacked list of six items is unreadable.
   Instead of dropping it, pin just the fixture: it sticks below the header
   and keeps turning while the six stages scroll underneath. Same idea as
   the desktop treatment on a fifth of the screen budget. It costs nothing
   to run — the thing is drawn in code, there is no asset behind it, and
   scene() was already driving its rotation on mobile with nothing to show
   for it. */
@media(max-width:900px){
  .seq-on .seq-canvas{
    display:block;
    position:sticky;
    inset:auto;
    top:64px;
    width:100%;
    height:min(42vh,330px);
    margin:0 0 clamp(16px,2.6vh,28px);
    /* The copy has to pass BEHIND it, not over it. .seq-stick > .wrap sits at
       z-index 2, so the pinned fixture has to clear that or the six stages
       scroll straight through the middle of the object. With its own ground
       and a higher layer it behaves like a sticky header: text slides under
       and out of sight. */
    z-index:3;
    background:var(--surface);
    transition:background-color .12s linear;
    /* Full bleed. Boxed to the text column it had two visible vertical edges
       at a different inset from the copy beside it, which is most of what
       made it read as a card pasted onto the page rather than part of it. */
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* The light itself is soft; the rectangle holding it is not, and a hard
       horizontal line under a glow is the other half of the card effect.
       Feather the bottom so the panel dissolves into the page and the copy
       emerges through the fade instead of appearing at an edge. */
    /* The fixture is drawn around 40% of the box height and its beam falls
       below that, so the fade has to start under the object itself. Any
       higher and the copy behind shows through the middle of the barrel. */
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%);
  }
}
.seq-grid{display:grid;grid-template-columns:minmax(0,31%) minmax(0,31%);justify-content:space-between;gap:clamp(30px,5vw,80px);align-items:center}
/* grid children default to min-width:auto, which lets the big display type
   push its own track wider than the template allows */
.seq-grid > *{min-width:0}
.seq-side h2{font-size:clamp(25px,3.1vw,44px);margin:13px 0 0}
.seq-side .lede{margin-top:15px;max-width:40ch}

.seq-index{list-style:none;margin:clamp(22px,3.4vh,38px) 0 0;padding:0;border-top:1px solid var(--line)}
.seq-ix{display:flex;align-items:baseline;gap:13px;padding:9px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(14px,1.5vw,18px);text-transform:uppercase;line-height:1;
  color:var(--text-mute);opacity:.42;transition:opacity .35s,color .35s}
.seq-ix span{font-family:var(--f-m);font-size:9.5px;font-variation-settings:normal;
  letter-spacing:.1em;font-weight:500}
.seq-ix.done{opacity:.72}
.seq-ix.on{opacity:1;color:var(--accent)}

.seq-bar{position:relative;height:2px;background:var(--line);margin-top:clamp(16px,2.4vh,26px)}
.seq-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

.seq-item{border-bottom:1px solid var(--line);padding:22px 0}
.seq-item:last-child{border-bottom:0}
.seq-num{display:block;font-family:var(--f-m);font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.seq-item h3{font-family:var(--f-d);font-variation-settings:"wdth" 106,"wght" 780;
  font-size:clamp(26px,3.6vw,50px);text-transform:uppercase;margin:0 0 13px;line-height:1;letter-spacing:-.012em}
.seq-item p{margin:0;color:var(--text-mute);font-size:clamp(14px,1.5vw,16px);max-width:38ch;line-height:1.6}
.seq-item .own{display:inline-block;align-self:flex-start;margin-top:16px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand);
  border:1px solid var(--line);padding:6px 10px}

/* pinned behavior, only once the engine takes over */
.seq-on{height:400vh}
.seq-on .seq-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0}
.seq-on .seq-stage{position:relative;min-height:min(60vh,440px)}
.seq-on .seq-item{border-bottom:0;padding:0;position:absolute;inset:0 0 auto 0;
  display:flex;flex-direction:column;justify-content:center;min-height:min(60vh,440px);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.seq-on .seq-item.on{opacity:1;transform:none;pointer-events:auto}
.seq-on .seq-num{display:none}

@media(max-width:900px){
  .seq-on{height:auto}
  /* Less tail than the top: the fixture is pinned, so bottom padding is
     dead space it hangs over after the last stage has been read. */
  .seq-on .seq-stick{position:static;height:auto;display:block;
    padding:clamp(48px,8vh,96px) 0 clamp(16px,2.5vh,28px)}
  .seq-on .seq-stage,.seq-on .seq-item{min-height:0}
  .seq-on .seq-item{position:relative;opacity:1;transform:none;pointer-events:auto;
    display:block;border-bottom:1px solid var(--line);padding:24px 0}
  .seq-on .seq-item:last-child{border-bottom:0}
  .seq-on .seq-num{display:block}
  .seq-on .seq-item h3{font-size:clamp(24px,6vw,34px)}
  .seq-grid{grid-template-columns:1fr}
  .seq-index,.seq-bar{display:none}
}

/* ── parallax host ──────────────────────────────────────────────────── */
.par-host{overflow:hidden}
[data-par]{will-change:transform}

/* ── portfolio ──────────────────────────────────────────────────────── */
.filt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(20px,3vh,34px)}
.filt-scroll{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filt button{
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--text-mute);
  padding:9px 14px;cursor:pointer;transition:.2s;line-height:1;
}
.filt button:hover{border-color:var(--brand);color:var(--brand)}
.filt button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.filt-live{font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute);margin-left:auto}
/* On a phone these wrapped to four rows, which ate the screen, pushed the
   grid below the fold and left the count stranded in the far corner — the
   one piece of feedback a filter gives, in the least-looked-at place. One
   scrolling line instead, with the count on its own line above it. */
@media(max-width:760px){
  .filt{display:block;position:relative;padding-top:22px;margin-bottom:18px}
  .filt-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .filt-scroll::-webkit-scrollbar{display:none}
  .filt-scroll button{flex:0 0 auto}
  .filt-live{position:absolute;top:0;left:0;margin:0;font-size:10.5px;
    color:var(--text-mute-strong)}
}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
@media(max-width:940px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pf-grid{grid-template-columns:1fr}}
.pf-item{background:var(--surface);display:flex;flex-direction:column}
.pf-item[hidden]{display:none}
/* Inert cells that finish a short last row, so the grid's own
   background stops reading as a grey void beside a lone tile. */
.pf-fill{background:var(--surface)}
.pf-body .credit{margin-top:auto;padding-top:14px}
.pf-item .tile{aspect-ratio:4/3}
.pf-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.pf-body .k{font-family:var(--f-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.pf-body h3{font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 750;
  font-size:clamp(17px,2vw,21px);text-transform:uppercase;margin:0;line-height:1.06}
.pf-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-mute);flex:1}

/* case study */
.cs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);margin-top:2px}
.cs:nth-child(even) .cs-media{order:2}
@media(max-width:860px){.cs{grid-template-columns:1fr}.cs:nth-child(even) .cs-media{order:0}}
.cs-media{position:relative;overflow:hidden;background:#07090B;min-height:clamp(280px,46vh,540px)}
.cs-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.cs-media .day{opacity:calc(1 - var(--glow))}
.cs-media .night{opacity:var(--glow)}
.cs-body{background:var(--surface);padding:clamp(24px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;gap:13px}
.cs-body h3{font-family:var(--f-d);font-variation-settings:"wdth" 106,"wght" 760;
  font-size:clamp(21px,3vw,36px);text-transform:uppercase;margin:0;line-height:1.05}
.cs-body p{margin:0;color:var(--text-mute);font-size:15px;max-width:52ch}
.cs-scope{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.cs-scope li{border-bottom:1px solid var(--line);padding:10px 0;font-size:13.5px;color:var(--text-mute);
  display:grid;grid-template-columns:106px 1fr;gap:14px}
.cs-scope b{font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:500}


/* ── carousel ───────────────────────────────────────────────────────────
   A scroll-snapping row first, a carousel second. With no JavaScript it is
   simply a row you can swipe or drag; the arrows and dots are added by
   scroll.js and only appear once they work. */
.carou{position:relative}
.carou-track{
  display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carou-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.carou-track{scroll-behavior:auto}}
.carou-item{flex:0 0 clamp(260px,31%,420px);scroll-snap-align:start;background:var(--surface);display:flex;flex-direction:column}
@media(max-width:860px){.carou-item{flex-basis:78%}}
.carou-item .tile{aspect-ratio:4/3}
.carou-body{padding:16px 2px 0;display:flex;flex-direction:column;gap:6px}
.carou-body .k{font-family:var(--f-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.carou-body h3{font-family:var(--f-d);font-variation-settings:"wdth" 104,"wght" 750;
  font-size:clamp(15px,1.7vw,19px);text-transform:uppercase;margin:0;line-height:1.08}

.carou-ui{display:none;align-items:center;gap:14px;margin-top:22px}
.carou.ready .carou-ui{display:flex}
.carou-btn{
  width:42px;height:42px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--text);
  font-family:var(--f-m);font-size:15px;line-height:1;transition:.2s;
}
.carou-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.carou-btn:disabled{opacity:.3;cursor:default}
.carou-dots{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.carou-dot{
  width:22px;height:3px;padding:0;border:0;cursor:pointer;background:var(--line);
  transition:background-color .25s;
}
.carou-dot[aria-selected="true"]{background:var(--brand)}
.carou-count{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-mute);font-variant-numeric:tabular-nums}