:root{
  --ink:#0b0b0c;
  --ink-2:#121214;
  --ink-3:#1a1a1d;
  --paper:#f3f0e9;
  --paper-2:#e9e5db;
  --accent:#d8d3c6;
  --accent-warm:#95815b;
  --d-line:rgba(255,255,255,.13);
  --d-line-2:rgba(255,255,255,.22);
  --d-mut:rgba(255,255,255,.60);
  --d-mut-2:rgba(255,255,255,.40);
  --l-line:rgba(11,11,12,.14);
  --l-mut:rgba(11,11,12,.56);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:74px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--ink);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:#fff;color:var(--ink)}

.mono{font-family:'Geist Mono',monospace;font-weight:400}
.label{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
}
.wrap{max-width:1480px;margin:0 auto;padding:0 40px}
@media(max-width:720px){ .wrap{padding:0 22px} }

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(11,11,12,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--d-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav-logo img{height:30px;width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-link{
  font-size:13.5px;letter-spacing:.04em;color:var(--d-mut);position:relative;padding:4px 0;
  transition:color .35s var(--ease);
}
.nav-link:hover{color:#fff}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:#fff;
  transition:width .4s var(--ease);
}
.nav-link:hover::after{width:100%}
/* industries dropdown */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-caret{font-size:9px;margin-left:6px;opacity:.7;display:inline-block;transition:transform .3s var(--ease)}
/* reading-progress hairline along the nav's bottom edge */
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.85),var(--accent));
  transform:scaleX(0);transform-origin:0 50%;opacity:.55}
.nav-drop:hover .nav-caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),transform .26s var(--ease);z-index:90;
  transform:translateX(-50%) translateY(6px)}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ndm-inner{min-width:212px;background:rgba(14,14,16,.94);backdrop-filter:blur(18px);
  border:1px solid var(--d-line-2);border-radius:13px;padding:8px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 24px 56px -22px rgba(0,0,0,.8)}
.ndm-inner a{padding:12px 15px;border-radius:9px;font-size:14px;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,.78);white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.ndm-inner a::after{display:none}
.ndm-inner a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-right{display:flex;align-items:center;gap:18px}
.icon-btn{
  width:38px;height:38px;border:1px solid var(--d-line-2);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:all .35s var(--ease);
}
.icon-btn:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.nav-cta{
  font-size:13px;letter-spacing:.03em;padding:11px 22px;border-radius:100px;
  background:#fff;color:var(--ink);font-weight:500;transition:all .35s var(--ease);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav-cta svg{transition:transform .35s var(--ease)}
.nav-cta:hover svg{transform:translate(3px,-3px)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--d-line-2);border-radius:50%;place-items:center;color:#fff;background:none}
@media(max-width:980px){
  .nav-links,.nav-right .icon-btn{display:none}
  .burger{display:grid}
}
.mobile-menu{
  /* above .nav (z-index:90) — otherwise the fixed nav bar's burger button sits on
     top of this panel's own close button in the same corner, and blocks it */
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 28px;gap:6px;
  transform:translateY(-100%);transition:transform .6s var(--ease);overflow:hidden;
}
/* landscape, or a small phone: the links are taller than the screen and
   `justify-content:center` would push the ends of the list out of reach */
@media (max-height:680px){
  .mobile-menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(var(--nav-h) + 14px) 28px 34px}
  .mobile-menu a{font-size:clamp(24px,5.4vh,40px);padding:7px 0}
  .mm-foot{margin-top:22px}
}
.mobile-menu.open{transform:translateY(0)}
/* staggered link rise once the panel is open */
.mobile-menu > a,.mobile-menu .mm-foot{opacity:0;transform:translateY(26px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mobile-menu.open > a,.mobile-menu.open .mm-foot{opacity:1;transform:none}
.mobile-menu.open > a:nth-of-type(1){transition-delay:.14s}
.mobile-menu.open > a:nth-of-type(2){transition-delay:.19s}
.mobile-menu.open > a:nth-of-type(3){transition-delay:.24s}
.mobile-menu.open > a:nth-of-type(4){transition-delay:.29s}
.mobile-menu.open > a:nth-of-type(5){transition-delay:.34s}
.mobile-menu.open > a:nth-of-type(6){transition-delay:.39s}
.mobile-menu.open > a:nth-of-type(7){transition-delay:.44s}
.mobile-menu.open .mm-foot{transition-delay:.52s}
.mobile-menu a{font-size:clamp(30px,8vw,58px);font-weight:500;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--d-line)}
.mobile-menu a.mm-sub{font-size:clamp(15px,4vw,20px);font-weight:300;color:var(--d-mut);padding:8px 0 8px 18px;border-bottom:none}
.mobile-menu a.mm-sub:first-of-type{margin-top:-2px}
.mm-close{position:absolute;top:18px;right:22px;width:46px;height:46px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;background:none;color:#fff}
.mm-foot{display:flex;gap:16px;margin-top:30px}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;overflow:hidden;background:#000}
/* guaranteed smooth fade to solid ink across the bottom — blends into next section */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.55) 50%,rgba(11,11,12,.9) 78%,var(--ink) 100%)}
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-bg video{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1}
.scrim-a{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.16) 30%,rgba(0,0,0,0) 55%)}
.scrim-b{background:linear-gradient(105deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.40) 45%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,rgba(11,11,12,.96),transparent 40%)}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
.hero-content{position:relative;z-index:5;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}

.h-eyebrow{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.82)}
.h-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18);animation:pulse 2.4s var(--ease) infinite}
.hero-inds{display:flex;flex-direction:column;gap:14px}
.hero-ind-kicker{color:var(--accent-warm)}
.hero-ind-names{display:flex;flex-direction:column;gap:2px}
.hero-ind-name{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;
  line-height:1.04;font-size:clamp(26px,3vw,46px);color:#fff}
.hero-ind-name:last-child{color:var(--accent);font-style:italic;font-weight:400}
@media(max-width:540px){.hero-ind-name{font-size:clamp(24px,7vw,34px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.12)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.03)}}

.display{
  font-weight:500;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(54px,9.2vw,150px);
}
.display .lite{font-weight:300;font-style:italic;letter-spacing:-.02em}
.hero-sub{font-size:clamp(16px,1.35vw,20px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.82);max-width:540px}

.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:16px 30px;border-radius:100px;transition:all .4s var(--ease);white-space:nowrap;
}
.btn-solid{background:#fff;color:var(--ink)}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.btn-ghost{border:1px solid var(--d-line-2);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;transform:translateY(-3px)}
.btn svg{transition:transform .4s var(--ease)}
.btn-solid:hover svg{transform:translateX(4px)}

/* hero entrance */
.reveal-up{opacity:0;transform:translateY(34px);animation:revUp 1s var(--ease) forwards}
@keyframes revUp{to{opacity:1;transform:none}}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:30px;}
@media(max-height:720px){.scroll-cue{display:none}}
.scroll-cue{transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--d-mut)}
.scroll-cue .bar{width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:cueRun 2.2s var(--ease) infinite}
@keyframes cueRun{0%{top:-60%}100%{top:120%}}

/* hero side index (direction B) */
.hero-index{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--d-line)}
.hero-index .row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--d-line);color:rgba(255,255,255,.78);transition:padding .4s var(--ease),color .4s}
.hero-index .row:hover{padding-left:10px;color:#fff}

/* hero giant wordmark (direction C) */
/* the floor only bites below ~360px, where a 52px nowrap wordmark is wider than
   the gutters leave room for and pushes the hero past the viewport */
.wordmark{font-weight:600;letter-spacing:-.045em;line-height:.8;font-size:clamp(46px,14.4vw,225px);color:#fff;text-transform:uppercase;white-space:nowrap;transform-origin:left top;will-change:transform,opacity}
.wm-strip{display:flex;gap:0;border-top:1px solid var(--d-line)}
.wm-strip .cell{flex:1;padding:18px 22px;border-right:1px solid var(--d-line)}
.wm-strip .cell:last-child{border-right:none}

/* ============ generic section ============ */
section{position:relative}
.dark{background:var(--ink);color:#fff}
.light{background:var(--paper);color:var(--ink)}
.sec-pad{padding:120px 0}
@media(max-width:720px){.sec-pad{padding:78px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:60px}
/* one column has no room for two: side by side, the second child holds its width
   (`.book-contact` is flex:none) and squeezes the copy to a few words per line */
@media(max-width:820px){
  .sec-head{flex-direction:column;align-items:stretch;gap:30px}
}
.sec-title{font-weight:500;letter-spacing:-.03em;line-height:.98;font-size:clamp(34px,5vw,72px)}
.sec-kicker{color:var(--accent-warm)}

/* book a call (Calendly inline embed) */
.book-sub{margin-top:20px;max-width:540px;font-size:16px;font-weight:300;line-height:1.6;color:var(--d-mut)}
.book-contact{display:flex;flex-direction:column;gap:18px;flex:none}
@media(max-width:720px){ .book-contact{margin-top:8px} }
.book-embed{position:relative;border:1px solid var(--d-line);border-radius:18px;overflow:hidden;
  background:#101012;min-height:720px;display:flex;align-items:center;justify-content:center}
.book-cal{width:100%;height:720px}
.book-fallback{position:absolute}
@media(max-width:820px){ .book-embed{min-height:1040px} .book-cal{height:1040px} }

/* reveal on scroll (keyframe-based; end-state is the base style) */
.ios{opacity:0;transform:translateY(40px)}
.ios.in{opacity:1;transform:none;animation:iosIn 1s var(--ease) both}
@keyframes iosIn{from{opacity:0;transform:translateY(40px)}}
@keyframes iosFade{from{opacity:0}}

/* masked title reveal — each line rises out of an overflow clip */
.tr-line{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em}
.tr-inner{display:inline-block;transform:translateY(115%)}
.ios.in .tr-inner{animation:trUp 1.05s var(--ease) both}
@keyframes trUp{to{transform:translateY(0)}}

/* cards stagger in — on first reveal and again on every industry switch */
/* bespoke showcase — title rises out of a mask, cards sweep up and settle.
   Deliberately large travel so the reveal reads from across the room; it
   replays every time the block scrolls back into view (see useReplayReveal). */
.bespoke .ios{transform:translateY(44px)}
.bespoke .ios.in{transform:none;animation-duration:1.5s;animation-timing-function:cubic-bezier(.2,.7,.25,1)}
.bespoke-row.ios .bcard{opacity:0;transform:translateY(110px) scale(.84);
  clip-path:inset(42% 0 0 0 round 18px);filter:blur(6px)}
.bespoke-row.ios.in .bcard{animation:bcardIn 1.5s cubic-bezier(.2,.7,.25,1) both}
@keyframes bcardIn{
  from{opacity:0;transform:translateY(110px) scale(.84);
       clip-path:inset(42% 0 0 0 round 18px);filter:blur(6px)}
  55%{opacity:1;filter:blur(0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 18px);filter:blur(0)}
}
/* the centre card leads, the sides follow */
.bespoke-row.ios.in .bcard:nth-child(2){animation-delay:.04s}
.bespoke-row.ios.in .bcard:nth-child(1){animation-delay:.24s}
.bespoke-row.ios.in .bcard:nth-child(3){animation-delay:.4s}
.bespoke-cta.ios{opacity:0;transform:translateY(28px)}
.bespoke-cta.ios.in{opacity:1;transform:none;animation:iosIn 1.1s var(--ease) both;animation-delay:.58s}

/* ============ PAGE LOADER ============ */
#page-loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;
  transition:opacity .5s ease}
#page-loader img{height:clamp(40px,5vw,56px);animation:plPulse 1.6s ease-in-out infinite}
#page-loader.done{opacity:0;pointer-events:none}
@keyframes plPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);padding:24px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:60px;align-items:center;animation:scrollX 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{font-size:22px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:60px}
/* homepage-only "Trusted by" variant */
.marquee--trusted{border-top:none;border-bottom:none;padding:24px 0 100px}
.marquee--trusted .mq-row{display:flex;align-items:center;gap:44px;max-width:1480px;margin:0 auto;padding:0 40px}
.mq-label{flex:none;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.marquee--trusted .mq-viewport{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
@media(max-width:720px){.marquee--trusted .mq-row{padding:0 22px;gap:24px}}
.mq-item::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.32)}

/* ============ INDUSTRIES ============ */
.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:880px){.ind-grid{grid-template-columns:1fr}}
.ind-card{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:16/10;cursor:pointer;border:1px solid var(--d-line)}
.ind-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:grayscale(1) brightness(.62) contrast(1.05)}
.ind-card:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.72)}
.ind-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(11,11,12,.9))}
.ind-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.ind-n{position:absolute;top:26px;left:32px;color:rgba(255,255,255,.6)}
.ind-name{font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.ind-desc{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.74);max-width:440px;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.ind-card:hover .ind-desc{max-height:120px;opacity:1;margin-top:4px}
.ind-arrow{position:absolute;top:24px;right:30px;z-index:2;width:46px;height:46px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;color:#fff;opacity:0;transform:translate(-6px,6px);transition:all .5s var(--ease)}
.ind-card:hover .ind-arrow{opacity:1;transform:none;background:#fff;color:var(--ink)}

/* ============ INDUSTRIES (podium frames) ============ */
.ind-kicker{text-align:center;color:var(--accent-warm);display:block;margin-bottom:6px}
.ind-frame{padding:74px 0}
@media(max-width:720px){.ind-frame{padding:54px 0}}
.serif{font-family:'Cormorant Garamond',serif}
.ind-serif-title{font-family:'Cormorant Garamond',serif;font-weight:500;text-align:center;
  font-size:clamp(36px,5.2vw,68px);letter-spacing:.012em;line-height:1;margin-bottom:16px}
.ind-frame-sub{text-align:center;color:var(--d-mut);max-width:540px;margin:0 auto 52px;
  font-weight:300;font-size:15.5px;line-height:1.55}
.podium{display:flex;justify-content:center;align-items:center;gap:26px;max-width:1200px;margin:0 auto}
.pod-card{position:relative;overflow:hidden;border-radius:20px;cursor:pointer;flex:1 1 0;
  background:#000;border:1px solid var(--d-line)}
.pod-card.side{aspect-ratio:16/11;max-width:382px}
.pod-card.center{aspect-ratio:9/12;max-width:428px;box-shadow:0 44px 90px -34px rgba(0,0,0,.85)}
.pod-card video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.82)}
.pod-card:hover video{transform:scale(1.05);filter:brightness(1.02)}
.pod-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.06) 38%,rgba(0,0,0,.72))}
.pod-label{position:absolute;left:14px;right:14px;bottom:24px;z-index:2;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:clamp(20px,1.8vw,28px);font-weight:500;
  letter-spacing:.02em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.pod-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);z-index:2;
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  border:1px solid var(--d-line-2);display:grid;place-items:center;color:#fff;opacity:0;transition:all .45s var(--ease)}
.pod-card:hover .pod-play{opacity:1;transform:translate(-50%,-50%) scale(1);background:#fff;color:var(--ink)}
.ind-frame-cta{display:flex;justify-content:center;margin-top:46px}
.pill{display:inline-flex;align-items:center;gap:11px;background:var(--paper);color:var(--ink);
  font-weight:500;font-size:14px;letter-spacing:.01em;padding:15px 28px;border-radius:100px;transition:all .4s var(--ease)}
.pill:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pill svg{transition:transform .4s var(--ease)}
.pill:hover svg{transform:translateX(4px)}
@media(max-width:820px){
  .podium{flex-direction:column;gap:18px}
  .pod-card.side,.pod-card.center{max-width:540px;width:100%;aspect-ratio:16/10}
}

/* ============ SERVICES (title left, 2x2 picture cards) ============ */
/* the title only ever needs ~40% of the row — an even 50/50 split left the
   cards capped by a column far wider than the title actually used, so they
   read small against all the leftover black. Give the cards the extra share. */
.svcs-grid{display:grid;grid-template-columns:minmax(280px,.62fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);align-items:center}
/* the intro is inline-block so it shrinks to the title — that is what lets the
   kicker centre over the words rather than over the whole column */
.svcs-intro{display:inline-block}
.svcs-kicker{display:block;text-align:center;margin-bottom:14px;
  font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-warm)}
.svcs-title{font-family:'Jost',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(32px,4vw,58px);color:#fff}
.svcs-intro.ios{opacity:0;transform:translateY(22px)}
.svcs-intro.ios.in{opacity:1;transform:none;animation:iosIn .9s var(--ease) both}

/* ---- the 2x2 ---- */
/* the cards fill their column rather than sitting at a fixed size, so the pair
   balances the title instead of leaving a gap beside it */
.svcs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.3vw,22px);max-width:880px;justify-content:start}
.svc-card{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  border-radius:clamp(14px,1.4vw,20px);background:#0f0f10;cursor:pointer;
  box-shadow:0 22px 54px -20px rgba(0,0,0,.8);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.svc-card:hover,.svc-card:focus-visible{transform:scale(1.045);z-index:3;outline:none;
  box-shadow:0 36px 74px -20px rgba(0,0,0,.88)}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.06);filter:brightness(.66) saturate(.98);
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.svc-card:hover img,.svc-card:focus-visible img{transform:scale(1);filter:brightness(.78) saturate(1.05)}
/* clear through the middle so the photograph still reads, deep at the foot where
   the type sits — dimming the whole frame instead just makes all four muddy */
.svc-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.58) 74%,rgba(0,0,0,.88) 100%)}
/* a soft hairline at rest — enough to read the card as an object against the black
   section background, not just a bright rectangle floating on nothing */
.svc-ring{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .5s var(--ease)}
.svc-card:hover .svc-ring,.svc-card:focus-visible .svc-ring{box-shadow:inset 0 0 0 1px rgba(149,129,91,.6)}
.svc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,1.6vw,26px)}
.svc-n{display:block;margin-bottom:8px;font-size:10.5px;letter-spacing:.18em;color:var(--accent-warm)}
/* the long names still wrap on a narrow viewport, so keep the measure short */
.svc-name{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(19px,1.8vw,27px);line-height:1.14;color:#fff;
  max-width:18ch;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.svc-blurb{font-size:12.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.88);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .45s var(--ease),margin-top .6s var(--ease)}
.svc-card:hover .svc-blurb,.svc-card:focus-visible .svc-blurb{max-height:70px;opacity:1;margin-top:9px}
/* staged arrival, one card after the next */
.svc-card.ios{opacity:0;transform:translateY(26px)}
.svc-card.ios.in{opacity:1;transform:none;
  animation:iosIn .85s var(--ease) both;animation-delay:calc(.06s * var(--i,0) + .08s)}

@media(max-width:980px){
  .svcs-grid{grid-template-columns:1fr;gap:40px}
  /* `margin:0 auto` here would kill the grid item's stretch and collapse the 1fr
     tracks to zero — centre with justify-self and keep the width definite */
  .svcs-cards{max-width:600px;width:100%;justify-self:center}
  .svcs-intro{display:block;text-align:center}
}
/* Two columns across 350px gives ~165px cards: the names wrapped to three lines in
   a box too small to read them in. One column per row keeps them full-width, and
   since there is no hover on a phone the blurb sits open. */
@media(max-width:620px){
  .svcs-cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .svc-card{aspect-ratio:16/10}
  .svc-name{font-size:23px;max-width:none}
  .svc-body{padding:18px 20px}
}
/* no growth, no drift — but the cards and their copy stay visible */
@media(prefers-reduced-motion:reduce){
  .svc-card:hover,.svc-card:focus-visible{transform:none}
  .svc-card img,.svc-card:hover img{transform:none}
  .svc-card.ios,.svc-card.ios.in{opacity:1;transform:none;animation:none}
}

/* ============ WORK (editorial magazine grid) ============ */
.work-sub{max-width:360px;font-weight:300;font-size:15px;line-height:1.6;color:var(--d-mut)}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.work-card{position:relative;overflow:hidden;border-radius:8px;cursor:pointer;border:1px solid var(--d-line);background:#000;aspect-ratio:16/10;transition:box-shadow .5s var(--ease)}
.work-card.hero{grid-column:span 12;aspect-ratio:21/9}
.work-card.half{grid-column:span 6}
.work-card.third{grid-column:span 4}
.work-card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 34px 64px -20px rgba(0,0,0,.7)}
.work-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease),filter .65s;filter:brightness(.72) contrast(1.04)}
.work-card:hover video{transform:scale(1.04);filter:brightness(.95) contrast(1.01)}
.work-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(0,0,0,.52) 66%,rgba(0,0,0,.95) 100%)}
.work-top{position:absolute;top:18px;left:20px;right:20px;z-index:2;display:flex;align-items:center;justify-content:space-between}
.work-idx{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.work-cat{display:inline-flex;align-items:center;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);padding:5px 11px;border:1px solid rgba(255,255,255,.18);border-radius:100px;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.work-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px}
.work-title{font-weight:500;letter-spacing:-.02em;line-height:1.06;font-size:clamp(18px,1.4vw,22px);transform:translateY(5px);transition:transform .5s var(--ease)}
.work-card.hero .work-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;font-size:clamp(32px,3.8vw,58px);transform:translateY(8px)}
.work-card:hover .work-title{transform:none}
.work-client{font-size:13px;font-weight:300;color:rgba(255,255,255,.7);margin-top:6px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease) .06s,transform .45s var(--ease) .06s}
.work-card:hover .work-client{opacity:1;transform:none}
@media(max-width:980px){
  .work-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .work-card{aspect-ratio:16/10}
  .work-card.hero{grid-column:span 2;aspect-ratio:16/9}
  .work-card.half,.work-card.third{grid-column:span 1}
}
@media(max-width:540px){
  .work-grid{grid-template-columns:1fr}
  .work-card.hero,.work-card.half,.work-card.third{grid-column:span 1;aspect-ratio:16/10}
}

/* ============ INDUSTRIES REEL (format-aware cards) ============ */
.ind-reel-sec-head{margin-bottom:72px}

/* ---- "Bespoke … Marketing" showcase (3-up, construction first) ---- */
.bespoke{padding:70px 0;text-align:center}
.bespoke + .bespoke{border-top:1px solid var(--d-line)}
.bespoke-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;
  line-height:1.05;font-size:clamp(32px,4vw,56px);color:#fff;margin-bottom:54px}
.bespoke-row{display:flex;justify-content:center;align-items:center;gap:26px}
.bcard{position:relative;overflow:hidden;border-radius:18px;background:#000;cursor:pointer;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
/* the media sits in its own layer so scroll parallax can move it inside the frame */
.bcard-media{position:absolute;inset:0;will-change:transform}
.bcard-media video,.bcard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.3s var(--ease),filter .6s var(--ease);filter:brightness(.86)}
.bcard:hover .bcard-media video,.bcard:hover .bcard-media img{transform:scale(1.05);filter:brightness(1)}
.bcard:hover{transform:translateY(-6px);box-shadow:0 36px 80px -28px rgba(0,0,0,.8)}
.bcard.side{flex:0 0 clamp(260px,28vw,440px);aspect-ratio:16/10}
.bcard.is-photo{cursor:default}
.bcard.center{flex:0 0 clamp(300px,31vw,470px);aspect-ratio:4/5;z-index:2}
.bcard-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%)}
.bcard-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px 26px;
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(20px,1.7vw,27px);
  letter-spacing:.01em;color:#fff;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* explore button — outlined pill that fills from the left on hover */
.bespoke-cta{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:56px;
  padding:14px 16px 14px 32px;border-radius:100px;overflow:hidden;
  border:1px solid var(--d-line-2);color:#fff;font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.bespoke-cta .bc-fill{position:absolute;inset:0;z-index:0;background:var(--paper);border-radius:100px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.bespoke-cta .bc-label,.bespoke-cta .bc-ring{position:relative;z-index:1;
  transition:color .45s var(--ease)}
.bespoke-cta .bc-ring{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.4);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.bespoke-cta .bc-ring svg{width:15px;height:15px}
.bespoke-cta:hover{transform:translateY(-3px);border-color:var(--paper)}
.bespoke-cta:hover .bc-fill{transform:scaleX(1)}
.bespoke-cta:hover .bc-label{color:var(--ink)}
.bespoke-cta:hover .bc-ring{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateX(3px)}

@media(max-width:860px){
  .bespoke-row{flex-wrap:wrap;gap:18px}
  .bcard.side{flex:1 1 calc(50% - 9px);aspect-ratio:16/11}
  .bcard.center{flex:1 1 100%;aspect-ratio:16/10;order:-1}
}
@media(max-width:520px){
  .bcard.side{flex:1 1 100%}
}

/* ---- clients slider (continuous marquee of every client) ---- */
.clients-strip{padding:64px 0 8px;border-top:1px solid var(--d-line)}
.clients-head{margin-bottom:36px}
.clients-kick{display:block;color:var(--accent-warm);margin-bottom:16px}
.clients-h{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;
  line-height:1.04;font-size:clamp(30px,3.6vw,48px);color:#fff}
/* the roster: two rows drifting against each other, names set like a title card
   rather than boxed into tags */
.cslider{position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.crow{overflow:hidden;padding:7px 0}
/* each track carries its half of the roster twice, so -50% lands exactly on the
   start of the copy and the loop has no seam */
.crow-track{display:flex;align-items:center;width:max-content;
  animation:crowL 54s linear infinite}
.crow.rev .crow-track{animation-name:crowR}
.cslider:hover .crow-track{animation-play-state:paused}
@keyframes crowL{from{transform:translateX(0)}     to{transform:translateX(-50%)}}
@keyframes crowR{from{transform:translateX(-50%)}  to{transform:translateX(0)}}
.cname{flex:none;padding:0 clamp(16px,2vw,30px);white-space:nowrap;
  font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;
  font-size:clamp(26px,3.1vw,46px);color:rgba(255,255,255,.88)}
.crow.rev .cname{color:rgba(255,255,255,.42)}
.cdiam{width:7px;height:7px;flex:none;transform:rotate(45deg);
  background:var(--accent-warm);opacity:.85}
.cslider.ios{opacity:0}
.cslider.ios.in{opacity:1;animation:iosFade 1.1s var(--ease) both}
/* no drift: fall back to a wrapped, evenly lit list with the loop copy dropped.
   A phone gets the same list — two names fit across 390px, so the drift showed
   clipped fragments of a roster instead of the roster. */
@media(prefers-reduced-motion:reduce),(max-width:720px){
  .cslider{-webkit-mask:none;mask:none}
  .crow{overflow:visible;padding:0}
  .crow-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .crow.rev .cname{color:rgba(255,255,255,.88)}
  .cdup{display:none}
}
@media(max-width:720px){
  .cname{padding:7px 14px;font-size:clamp(20px,5.4vw,28px);line-height:1.12}
  .cdiam{width:6px;height:6px}
  .clients-head{margin-bottom:26px}
}
@media(max-width:560px){.cname{font-size:clamp(21px,6vw,30px)}}

.ind-reel-block{padding:62px 0;border-top:1px solid var(--d-line)}
.ind-reel-block:first-of-type{border-top:none}
.ind-reel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:38px;flex-wrap:wrap}
.ind-reel-name{font-size:clamp(28px,3.5vw,50px);font-weight:500;letter-spacing:-.025em;line-height:1.02;margin-bottom:0}
.ind-reel-desc{font-size:15px;font-weight:300;color:var(--d-mut);max-width:460px;line-height:1.6;margin-top:14px}
.ind-svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ind-svc-chip{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-mut);padding:6px 13px;border:1px solid var(--d-line);border-radius:100px}
.ind-stat{margin:44px 0 0}
.ind-stat-v{font-size:clamp(48px,5.4vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ind-stat-l{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--d-mut);margin-top:12px}
.ind-svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}
.ind-reel-cta{display:flex;justify-content:center;margin-top:36px}

/* strip: 2-up — large 16:9 cinema card (≈65%) beside a vertical phone reel (≈35%), centered */
.reel-strip{display:flex;gap:24px;align-items:center}
.reel-card{position:relative;cursor:pointer;background:#000;min-width:0;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.reel-card:hover{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 38px rgba(255,255,255,.09)}
.reel-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.03);transition:transform 1.3s var(--ease),filter .65s}
.reel-card:hover video{transform:scale(1.04);filter:brightness(.95)}

/* landscape — cinematic viewfinder */
.reel-card.landscape{flex:0 1 auto;height:clamp(300px,33vw,548px);width:auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--d-line)}
.vf{position:absolute;inset:14px;z-index:3;pointer-events:none}
.vf i{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.38)}
.vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}

/* portrait — phone silhouette */
.reel-card.portrait{flex:0 1 auto;height:clamp(296px,32.5vw,540px);width:auto;aspect-ratio:9/16;border-radius:clamp(24px,2.8vw,36px);border:1.5px solid rgba(255,255,255,.24);padding:7px}
.reel-screen{position:absolute;inset:7px;border-radius:clamp(18px,2.2vw,29px);overflow:hidden;background:#000}
.reel-card.portrait video{position:absolute;inset:0}

/* shared chrome */
.reel-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.78) 100%)}
.reel-top{position:absolute;top:16px;left:16px;right:16px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:10px}
.reel-card.portrait .reel-top{top:20px;left:18px;right:18px}
.fmt-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.38);backdrop-filter:blur(8px);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap}
.fmt-pill svg{flex:none}
.reel-year{font-family:'Geist Mono',monospace;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.12em}
.reel-playc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);z-index:4;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff;opacity:0;transition:all .45s var(--ease)}
.reel-card:hover .reel-playc{opacity:1;transform:translate(-50%,-50%) scale(1);background:#fff;color:var(--ink);border-color:#fff}
.reel-body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:18px 20px}
.reel-card.portrait .reel-body{padding:20px 22px}
.reel-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;line-height:1.05;font-size:clamp(22px,1.9vw,30px);transform:translateY(7px);transition:transform .5s var(--ease)}
.reel-card.portrait .reel-title{font-size:clamp(20px,1.6vw,25px)}
.reel-card:hover .reel-title{transform:none}
.reel-client{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.7);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(5px);transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s}
.reel-card:hover .reel-client{opacity:1;transform:none}
@media(max-width:900px){
  .reel-strip{flex-wrap:wrap}
  .reel-card.landscape{flex:1 1 100%;width:100%;height:auto;order:-1}
  .reel-card.portrait{flex:0 0 auto;height:auto;width:min(46%,300px)}
}
@media(max-width:480px){
  .reel-card.portrait{width:min(80%,300px);margin:0 auto}
}

/* ============ ENGAGING CONTENT (social / reels) ============ */
.engage{padding:96px 0 110px}
@media(max-width:720px){.engage{padding:70px 0 80px}}
.engage-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(48px,7vw,120px);align-items:center}
.engage-phones{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.4vw,22px);flex:none}

/* --- phone frame --- */
.preel{
  --pw:clamp(196px,16vw,236px);
  width:var(--pw);height:calc(var(--pw)*2.06);
  position:relative;flex:none;cursor:pointer;
  background:#0a0a0c;border-radius:calc(var(--pw)*.16);
  padding:calc(var(--pw)*.032);
  box-shadow:0 2px 0 1px rgba(255,255,255,.10),0 40px 70px -28px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.preel:first-child{transform:translateY(-14px) rotate(-1.4deg)}
.preel:last-child{transform:translateY(16px) rotate(1.4deg)}
.engage-phones:hover .preel:first-child{transform:translateY(-18px) rotate(-1.4deg)}
.engage-phones:hover .preel:last-child{transform:translateY(20px) rotate(1.4deg)}
.preel-island{position:absolute;top:calc(var(--pw)*.052);left:50%;transform:translateX(-50%);
  width:34%;height:calc(var(--pw)*.085);background:#000;border-radius:100px;z-index:6}
.preel-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.128);
  overflow:hidden;background:#000;font-family:'Jost',sans-serif}
.preel-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 55%,rgba(0,0,0,.62) 100%)}

/* status bar */
.ig-status{position:absolute;top:0;left:0;right:0;z-index:5;height:calc(var(--pw)*.15);
  display:flex;align-items:center;justify-content:space-between;padding:calc(var(--pw)*.055) calc(var(--pw)*.075) 0;color:#fff}
.ig-time{font-size:calc(var(--pw)*.058);font-weight:600;letter-spacing:.01em}
.ig-sysic{display:flex;align-items:center;gap:calc(var(--pw)*.022)}

/* reels header */
.ig-head{position:absolute;top:calc(var(--pw)*.155);left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--pw)*.06);color:#fff}
.ig-tab{font-size:calc(var(--pw)*.072);font-weight:600}
.ig-chevL,.ig-cam{display:flex}
.ig-head svg{width:calc(var(--pw)*.092);height:calc(var(--pw)*.092)}

/* right action rail */
.ig-rail{position:absolute;right:calc(var(--pw)*.045);bottom:calc(var(--pw)*.30);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--pw)*.075);color:#fff}
.ig-act{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pw)*.012);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ig-act svg{width:calc(var(--pw)*.115);height:calc(var(--pw)*.115)}
.ig-act b{font-size:calc(var(--pw)*.048);font-weight:500}
.ig-disc{width:calc(var(--pw)*.105);height:calc(var(--pw)*.105);border-radius:7px;
  background-size:cover;background-position:center;border:2px solid #fff;margin-top:calc(var(--pw)*.01)}

/* bottom info */
.ig-foot{position:absolute;left:0;right:calc(var(--pw)*.20);bottom:calc(var(--pw)*.155);z-index:5;
  padding:0 calc(var(--pw)*.06);color:#fff}
.ig-userline{display:flex;align-items:center;gap:calc(var(--pw)*.03)}
.ig-avatar{width:calc(var(--pw)*.105);height:calc(var(--pw)*.105);border-radius:50%;
  background-size:cover;background-position:center;background-color:#222;border:1px solid rgba(255,255,255,.6);flex:none}
.ig-user{font-size:calc(var(--pw)*.055);font-weight:600}
.ig-userline svg{flex:none}
.ig-follow{margin-left:calc(var(--pw)*.03);font-size:calc(var(--pw)*.05);font-weight:600;
  border:1px solid rgba(255,255,255,.85);border-radius:6px;padding:calc(var(--pw)*.018) calc(var(--pw)*.05)}
.ig-caption{font-size:calc(var(--pw)*.052);font-weight:300;line-height:1.35;margin-top:calc(var(--pw)*.04);
  color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ig-audio{display:flex;align-items:center;gap:calc(var(--pw)*.03);margin-top:calc(var(--pw)*.05);
  font-size:calc(var(--pw)*.046);color:rgba(255,255,255,.9)}
.ig-audio span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-eq{display:inline-flex;align-items:flex-end;gap:1.5px;height:calc(var(--pw)*.05);flex:none;margin-left:auto}
.ig-eq b{width:1.6px;background:#fff;border-radius:1px;animation:igEq .9s ease-in-out infinite}
.ig-eq b:nth-child(1){height:40%;animation-delay:0s}
.ig-eq b:nth-child(2){height:90%;animation-delay:.25s}
.ig-eq b:nth-child(3){height:60%;animation-delay:.5s}
@keyframes igEq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* bottom nav */
.ig-nav{position:absolute;left:0;right:0;bottom:calc(var(--pw)*.05);z-index:5;height:calc(var(--pw)*.13);
  display:flex;align-items:center;justify-content:space-around;padding:0 calc(var(--pw)*.05);color:#fff}
.ig-nav svg{width:calc(var(--pw)*.105);height:calc(var(--pw)*.105)}
.ig-pfp{width:calc(var(--pw)*.10);height:calc(var(--pw)*.10);border-radius:50%;
  background-size:cover;background-position:center;border:1.5px solid #fff}
.ig-homebar{position:absolute;left:50%;bottom:calc(var(--pw)*.022);transform:translateX(-50%);z-index:5;
  width:34%;height:calc(var(--pw)*.018);background:#fff;border-radius:100px}

/* copy column */
.engage-kicker{margin-bottom:22px}
.engage-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;
  line-height:1.02;font-size:clamp(40px,4.6vw,76px)}
.engage-accent{font-style:italic;font-weight:400;color:var(--accent)}
.engage-body{margin-top:30px;max-width:520px;font-size:clamp(15px,1.2vw,18px);font-weight:300;
  line-height:1.62;color:var(--d-mut)}
.engage-cta{margin-top:40px}

/* reveal */
.engage .ios{opacity:0;transform:translateY(28px)}
.engage .ios.in{opacity:1;transform:none;animation:iosIn 1.2s cubic-bezier(.22,.61,.36,1) both}
.engage .engage-copy.ios.in{animation-delay:.15s}

@media(max-width:980px){
  .engage-grid{grid-template-columns:1fr;gap:54px;justify-items:center;text-align:center}
  .engage-copy{max-width:620px}
  .engage-body{margin-left:auto;margin-right:auto}
  .engage-cta{display:inline-flex}
  /* dropping the break runs "that" into "builds" — a break that collapses to a
     space keeps the words apart wherever the line happens to wrap */
  .engage .engage-title br{display:none}
  .engage .engage-accent::before{content:" "}
}
/* On a phone the pair shrank to ~160px each and the reel UI inside stopped being
   legible — the whole point of the mockup. Show them at a readable size and let
   the row swipe instead, snapping one phone at a time. */
@media(max-width:720px){
  .engage-grid{justify-items:stretch;text-align:left}
  .engage-copy{max-width:none}
  .engage-body{margin-left:0;margin-right:0}
  .engage-phones{display:flex;gap:16px;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:22px 22px 26px;margin:-22px -22px -26px;scrollbar-width:none;
    /* `center` would scroll the first phone half off screen on load */
    scroll-padding-left:22px}
  .engage-phones::-webkit-scrollbar{display:none}
  .preel{--pw:min(66vw,290px);scroll-snap-align:start}
  /* the fanned tilt only reads when both phones sit together in one frame */
  .preel:first-child,.preel:last-child,
  .engage-phones:hover .preel:first-child,.engage-phones:hover .preel:last-child{transform:none}
}

/* ============ APPROACH (light) ============ */
.appr-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end}
@media(max-width:880px){.appr-grid{grid-template-columns:1fr;gap:40px}}
.appr-lead{font-size:clamp(28px,3.6vw,52px);font-weight:300;letter-spacing:-.025em;line-height:1.12}
.appr-lead b{font-weight:500}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--l-line)}
.stat{padding:26px 0;border-bottom:1px solid var(--l-line)}
.stat:nth-child(odd){border-right:1px solid var(--l-line);padding-right:20px}
.stat:nth-child(even){padding-left:24px}
.stat-v{font-size:clamp(36px,4vw,56px);font-weight:400;letter-spacing:-.03em;line-height:1}
.stat-l{color:var(--l-mut);margin-top:8px;font-size:13px}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.field label{display:block;font-size:12px;letter-spacing:.03em;color:var(--d-mut);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--d-line-2);
  color:#fff;font-family:inherit;font-size:16px;font-weight:300;padding:11px 0;transition:border-color .4s var(--ease);
}
.field input:focus,.field select,.field textarea:focus{outline:none;border-color:#fff}
.field select{background:transparent}
.field select option{background:var(--ink-2);color:#fff}
.field textarea{resize:none}
.field input::placeholder,.field textarea::placeholder{color:var(--d-mut-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.contact-side .ct-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--d-line)}
.contact-side .ct-item:first-child{border-top:1px solid var(--d-line)}
.ct-ico{width:44px;height:44px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.ct-h{font-size:17px;font-weight:500}
.ct-p{font-size:14px;font-weight:300;color:var(--d-mut);margin-top:3px;transition:color .35s var(--ease)}
a.ct-item:hover .ct-ico{background:#fff;color:var(--ink);transform:translateY(-2px)}
a.ct-item:hover .ct-p{color:#fff}
.submit-btn{margin-top:8px;width:100%;justify-content:center;border:none}

/* ============ FOOTER ============ */
.footer{background:#080809;border-top:1px solid var(--d-line);padding:70px 0 36px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:54px;border-bottom:1px solid var(--d-line)}
@media(max-width:720px){.foot-top{grid-template-columns:1fr;gap:34px}}
.foot-col h5{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--d-mut-2);margin-bottom:18px;font-family:'Geist Mono',monospace}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col li a{display:inline-block;font-size:15px;font-weight:300;color:rgba(255,255,255,.78);
  transition:color .3s,transform .4s var(--ease)}
.foot-col li a:hover{color:#fff;transform:translateX(5px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;color:var(--d-mut-2);font-size:13px;flex-wrap:wrap}
.foot-legal{display:flex;align-items:center;gap:18px}
.foot-legal a{color:var(--d-mut-2);transition:color .3s var(--ease)}
.foot-legal a:hover{color:#fff}
.foot-mega{font-weight:600;letter-spacing:-.04em;line-height:.82;font-size:clamp(60px,16vw,260px);text-transform:uppercase;color:#fff;opacity:.04;padding-top:30px;user-select:none}
/* footer scroll reveal — the wordmark rises softly to its faint resting state */
.footer .foot-top.ios,.footer .foot-bottom.ios{opacity:0;transform:translateY(24px)}
.footer .foot-top.ios.in,.footer .foot-bottom.ios.in{opacity:1;transform:none;animation:iosIn 1s var(--ease) both}
.foot-mega.ios{opacity:0;transform:translateY(60px)}
.foot-mega.ios.in{opacity:.04;transform:none;animation:megaIn 1.4s var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(60px)}to{opacity:.04;transform:none}}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,6,7,.92);backdrop-filter:blur(10px);display:grid;place-items:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb-inner{position:relative;width:min(1180px,100%);max-height:86vh;transform:scale(.96);transition:transform .5s var(--ease)}
.lb.open .lb-inner{transform:scale(1)}
.lb video{display:block;margin:0 auto;max-width:100%;width:auto;min-width:min(420px,100%);max-height:78vh;border-radius:6px;background:#000;object-fit:contain}
.lb img{width:100%;max-height:80vh;border-radius:6px;background:#000;object-fit:contain}
.lb-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;gap:20px;flex-wrap:wrap}
.lb-close{position:absolute;top:-54px;right:0;width:46px;height:46px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;background:none;color:#fff;transition:all .35s var(--ease)}
.lb-close:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
/* gallery nav inside lightbox */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;transition:all .35s var(--ease);z-index:3}
.lb-nav:hover{background:#fff;color:var(--ink)}
.lb-nav.prev{left:-72px}
.lb-nav.next{right:-72px}
.lb-count{font-family:'Geist Mono',monospace;font-size:13px;color:var(--d-mut)}
/* shown only when the browser refuses an unmuted start */
/* sits clear of the native control bar — it only appears when a browser refuses the
   unmuted autostart, and landing on top of the scrubber made it unusable */
.lb-unmute{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;cursor:pointer;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid var(--d-line-2);
  color:#fff;font-size:13px;transition:background .35s var(--ease),border-color .35s var(--ease)}
.lb-unmute:hover{background:#fff;color:var(--ink);border-color:#fff}
.lb-unmute svg{width:12px;height:12px}
@media(max-width:900px){.lb-nav.prev{left:10px}.lb-nav.next{right:10px}}
/* phone: the 40px frame cost a fifth of the width, the close button sat off the
   top of the overlay (landscape put it at y:-14, out of reach), and the unmute
   pill landed on the native scrubber */
@media(max-width:720px),(max-height:600px){
  .lb{padding:74px 14px 24px}
  .lb-inner{max-height:none}
  /* `width:100%` would letterbox a portrait clip in a black box the width of the
     screen — let the element hug the frame instead */
  .lb video{min-width:0;width:auto;max-height:66vh}
  .lb-close{top:-58px;right:0}
  .lb-nav{width:46px;height:46px}
  .lb-unmute{top:14px;bottom:auto}
  .lb-meta{margin-top:14px;gap:6px}
}

/* ===================================================================== */
/* ============ INDUSTRY DETAIL PAGE ============ */
/* ===================================================================== */
.ip-hero{position:relative;min-height:88svh;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:flex-end}
/* full bleed — the old inset + rounded foot read as a box floating on the page */
.ip-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ip-hero-bg video,.ip-hero-bg img{width:100%;height:100%;object-fit:cover;
  object-position:center 42%;display:block;filter:brightness(.82)}
.ip-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.4) 62%,rgba(11,11,12,.97) 100%)}
.ip-hero-inner{position:relative;z-index:3;width:100%;padding-bottom:64px;padding-top:calc(var(--nav-h) + 40px)}
.crumb{display:flex;align-items:center;gap:11px;color:var(--d-mut);margin-bottom:26px;font-size:13px}
.crumb a{transition:color .3s}
.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}
.ip-num{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--d-mut);display:block;margin-bottom:14px}
.ip-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;line-height:.96;font-size:clamp(46px,8vw,118px);max-width:14ch}
.ip-lead{font-size:clamp(17px,1.5vw,21px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.84);max-width:620px;margin-top:24px}
.ip-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ip-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--d-line-2);border-radius:100px;font-size:13px;color:rgba(255,255,255,.86);background:rgba(255,255,255,.03)}
.ip-chip .dot{width:5px;height:5px;border-radius:50%;background:#fff}
.ip-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* section head for detail page */
.ip-sec{padding:96px 0}
@media(max-width:720px){.ip-sec{padding:64px 0}}
.ip-sec-head{max-width:680px;margin-bottom:48px}
.ip-sec-kicker{display:block;margin-bottom:18px;color:var(--accent-warm)}
.ip-arch-head{margin-bottom:clamp(28px,4vh,48px);max-width:56ch}
.ip-sec-title{font-weight:500;letter-spacing:-.02em;line-height:1.02;font-size:clamp(30px,4vw,56px)}
.ip-sec-sub{margin-top:18px;font-size:16px;font-weight:300;line-height:1.6;color:var(--d-mut)}

/* films grid (editorial, first item large) */
.films-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.film-card{position:relative;overflow:hidden;border-radius:clamp(14px,1.4vw,20px);cursor:pointer;border:1px solid var(--d-line);background:#000;aspect-ratio:16/10}
.film-card.lead{grid-column:span 2;aspect-ratio:21/9}
.film-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.74)}
.film-card:hover video{transform:scale(1.045);filter:brightness(.95)}
.film-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 32%,rgba(0,0,0,.45) 66%,rgba(0,0,0,.9) 100%)}
.film-top{position:absolute;top:20px;left:22px;right:22px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.film-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.film-cat{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.84);padding:6px 12px;border:1px solid var(--d-line-2);border-radius:100px;background:rgba(0,0,0,.2);backdrop-filter:blur(6px);font-size:11px}
.film-year{font-family:'Geist Mono',monospace;font-size:12px;color:rgba(255,255,255,.6)}
.film-title{font-weight:500;letter-spacing:-.02em;line-height:1.05;font-size:clamp(20px,1.7vw,26px)}
.film-card.lead .film-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;font-size:clamp(30px,3.4vw,52px)}
.film-meta{font-size:13px;font-weight:300;color:rgba(255,255,255,.72);margin-top:7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.film-meta .dotsep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.45)}
.film-desc{font-size:14px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.74);max-width:560px;margin-top:12px;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.film-card.lead:hover .film-desc{max-height:120px;opacity:1;margin-top:12px}
.film-play{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid var(--d-line-2);display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.7);transition:all .45s var(--ease)}
.film-card:hover .film-play{opacity:1;transform:scale(1);background:#fff;color:var(--ink)}
@media(max-width:760px){
  .films-grid{grid-template-columns:1fr}
  .film-card,.film-card.lead{grid-column:span 1;aspect-ratio:16/10}
}
/* vertical reels grid (portrait tiles) */
.films-grid.reels{grid-template-columns:repeat(4,1fr)}
.films-grid.reels .film-card,.films-grid.reels .film-card.lead{aspect-ratio:9/16;grid-column:span 1}
.films-grid.reels .film-title{font-size:clamp(17px,1.3vw,21px)}
@media(max-width:980px){.films-grid.reels{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.films-grid.reels{grid-template-columns:repeat(2,1fr)}}

/* photography property cards */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photo-card{position:relative;overflow:hidden;border-radius:clamp(14px,1.4vw,20px);cursor:pointer;border:1px solid var(--d-line);background:#000;aspect-ratio:4/5}
.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.82)}
.photo-card:hover img{transform:scale(1.05);filter:brightness(1)}
.photo-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.85))}
.photo-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.photo-name{font-size:19px;font-weight:500;letter-spacing:-.01em}
.photo-loc{font-size:13px;font-weight:300;color:rgba(255,255,255,.72);margin-top:5px}
.photo-tag{position:absolute;top:18px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--d-line-2);border-radius:100px;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
@media(max-width:880px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.photo-grid{grid-template-columns:1fr}}

/* other industries cross-nav */
.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cross-card{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--d-line);background:#000;aspect-ratio:16/10;cursor:pointer}
.cross-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:grayscale(1) brightness(.5)}
.cross-card:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.72)}
.cross-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(11,11,12,.88));z-index:1}
.cross-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.cross-n{font-family:'Geist Mono',monospace;font-size:11px;color:var(--d-mut);position:absolute;top:18px;left:22px}
.cross-name{font-size:19px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cross-arrow{width:34px;height:34px;border:1px solid var(--d-line-2);border-radius:50%;display:grid;place-items:center;flex:none;transition:all .4s var(--ease)}
.cross-card:hover .cross-arrow{background:#fff;color:var(--ink)}
@media(max-width:760px){.cross-grid{grid-template-columns:1fr}}

/* CTA band */
.ip-cta{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);padding:90px 0}
.ip-cta-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ip-cta-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;line-height:.98;font-size:clamp(38px,5.4vw,80px)}
.ip-cta-sub{color:var(--d-mut);font-weight:300;font-size:16px;line-height:1.55;max-width:380px;margin-top:16px}

@media(prefers-reduced-motion:reduce){
  .ip-hero-bg video{filter:brightness(.82)}
}

/* ===================================================================== */
/* ============ PORTFOLIO PAGE ============ */
/* ===================================================================== */
.pf-page{position:relative;background:var(--ink);min-height:100vh}
/* generous, editorial frame — more padding on every side */
.pf-page .wrap{max-width:1560px;padding:0 64px}

/* ---- header ---- */
.pf-head{position:relative;z-index:1;padding:calc(var(--nav-h) + 116px) 0 0}
.pf-title{font-family:'Jost',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.022em;line-height:.86;font-size:clamp(58px,9.5vw,164px);color:#fff}
.pf-sub{margin-top:26px;font-size:15px;font-weight:300;color:var(--d-mut-2);max-width:430px;line-height:1.62;letter-spacing:.01em}

/* ---- filters: plain uppercase text links, active = white underline only ---- */
.pf-filters{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin:72px 0 56px;
  padding-bottom:26px;border-bottom:1px solid var(--d-line)}
.pf-tabs{display:flex;flex-wrap:wrap;gap:34px}
.pf-tab{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;background:none;border:none;padding:0 0 8px;color:var(--d-mut-2);cursor:pointer;position:relative;
  transition:color .35s var(--ease)}
.pf-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.pf-tab:hover{color:rgba(255,255,255,.82)}
.pf-tab.active{color:#fff}
.pf-tab.active::after{transform:scaleX(1)}
.pf-count{font-family:'Geist Mono',monospace;font-size:11px;color:var(--d-mut-2);letter-spacing:.2em;text-transform:uppercase}

/* ---- masonry mood-board: 3 cols, mixed sizes, dense pack ---- */
.pf-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:110px;grid-auto-flow:row dense;gap:12px;padding-bottom:140px}
/* size buckets (col span / row span) — tuned for an organic film-strip rhythm */
.pf-wide  {grid-column:span 2;grid-row:span 5}
.pf-std   {grid-column:span 1;grid-row:span 4}
.pf-square{grid-column:span 1;grid-row:span 3}
.pf-tall  {grid-column:span 1;grid-row:span 6}

.pf-card{position:relative;overflow:hidden;background:#0a0a0b;cursor:pointer;min-width:0;
  transition:transform .4s ease, box-shadow .4s ease;
  animation:pfIn .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0ms)}
.pf-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -28px rgba(0,0,0,.9)}

/* ---- framing: landscape = rounded cinematic frame, portrait = phone silhouette ---- */
/* landscape (wide / std / square) */
.pf-card{border-radius:14px;border:1px solid rgba(255,255,255,.10)}
/* viewfinder corner ticks — the landscape "own thing" */
.pf-vf{position:absolute;inset:13px;z-index:5;pointer-events:none;opacity:.6;transition:opacity .4s var(--ease)}
.pf-vf i{position:absolute;width:16px;height:16px;border:0 solid rgba(255,255,255,.5)}
.pf-vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.pf-vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.pf-vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.pf-vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.pf-card:hover .pf-vf{opacity:.95}

/* portrait — Instagram-Reel / iPhone frame */
.pf-card.pf-tall{border-radius:clamp(22px,2vw,32px);border:1.5px solid rgba(255,255,255,.24);
  background:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.pf-card.pf-tall .pf-media{inset:7px;border-radius:clamp(15px,1.5vw,24px)}
.pf-card.pf-tall .pf-vf{display:none}            /* no viewfinder on phone frame */
.pf-card.pf-tall .pf-info{padding:20px 18px 22px}
/* notch pill */
.pf-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;
  width:30%;max-width:84px;height:5px;border-radius:100px;background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* film-strip cascade in (reliable for off-screen cards; reverts to base after, so FLIP transforms apply cleanly) */
@keyframes pfIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
.pf-grid.no-anim .pf-card{animation:none!important}

/* media: static still crossfades to live silent loop on hover */
.pf-media{position:absolute;inset:0;overflow:hidden}
.pf-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-still{z-index:1;filter:brightness(.78) contrast(1.03) saturate(.94);
  transition:transform 1.3s var(--ease),filter .6s var(--ease)}
.pf-live{z-index:2;opacity:0;filter:brightness(1) contrast(1.04);
  transition:opacity .45s var(--ease),transform 1.3s var(--ease)}
.pf-card.hot .pf-still{transform:scale(1.05);filter:brightness(.92) contrast(1.04) saturate(1)}
.pf-card.hot .pf-live{opacity:1;transform:scale(1.05)}

/* subtle animated film grain over each frame */
.pf-grain{position:absolute;inset:-40%;z-index:3;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size:160px 160px;animation:pfGrain 1.1s steps(5) infinite}
@keyframes pfGrain{
  0%{transform:translate(0,0)} 20%{transform:translate(-7%,4%)} 40%{transform:translate(5%,-6%)}
  60%{transform:translate(-4%,7%)} 80%{transform:translate(6%,3%)} 100%{transform:translate(0,0)}}

/* hover gradient + title/location (hidden at rest) */
.pf-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.30) 66%,rgba(0,0,0,.84) 100%);
  opacity:0;transition:opacity .5s var(--ease)}
.pf-card:hover .pf-scrim{opacity:1}
.pf-info{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:22px 24px;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.pf-card:hover .pf-info{opacity:1;transform:none}
.pf-info-title{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:-.01em;line-height:1.06;
  font-size:clamp(18px,1.5vw,25px);color:#fff;margin:0}
.pf-info-meta{margin-top:8px;font-family:'Geist Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.74)}

/* industry tag (ALL WORK view only) — tiny uppercase over a dark pill */
.pf-tag{position:absolute;top:14px;left:14px;z-index:6;
  font-family:'Geist Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.92);padding:5px 10px;border-radius:3px;
  background:rgba(8,8,10,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}

/* format badge — slimmer, semi-transparent, top-right */
.pf-fmt{position:absolute;top:14px;right:14px;z-index:6}
.pf-fmt-in{display:inline-flex;align-items:center;gap:6px;
  font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.86);padding:5px 9px;border-radius:3px;
  background:rgba(8,8,10,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)}
.pf-fmt-in svg{opacity:.85}

@media(prefers-reduced-motion:reduce){.pf-grain{animation:none}}

@media(max-width:1024px){
  .pf-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:104px}
  .pf-wide{grid-column:span 2;grid-row:span 5}
  .pf-std,.pf-square{grid-column:span 1}
  .pf-tall{grid-column:span 1;grid-row:span 6}
}
@media(max-width:980px){
  .pf-page .wrap{padding:0 40px}
  .pf-head{padding-top:calc(var(--nav-h) + 80px)}
}
@media(max-width:640px){
  .pf-page .wrap{padding:0 22px}
  .pf-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .pf-card{grid-column:1/-1!important;grid-row:auto!important}
  .pf-wide,.pf-std,.pf-square{aspect-ratio:16/10}
  .pf-tall{aspect-ratio:4/5}
  .pf-filters{margin:48px 0 36px}
  .pf-tabs{gap:22px}
  /* no hover on touch — reveal details + label at rest */
  .pf-scrim,.pf-info{opacity:1;transform:none}
  .pf-live{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ios{opacity:1;transform:none}
  .reveal-up{opacity:1;transform:none}
  .foot-mega,.foot-mega.ios{opacity:.04}
  .mobile-menu > a,.mobile-menu .mm-foot{opacity:1;transform:none}
  .tr-inner{transform:none}
}

/* ============ ABOUT BLURB (home) ============ */
.ab2-head{margin-bottom:clamp(44px,5vw,72px)}
.ab2-title{font-family:'Jost',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(40px,6vw,82px);color:#fff}
.ab2-boxes{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,2.6vw,36px)}
.ab2-box{position:relative;overflow:hidden;border:1px solid var(--d-line);border-radius:18px;padding:clamp(28px,2.6vw,42px);
  background:rgba(255,255,255,.015);display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)}
.ab2-box.wide{min-height:300px}
.ab2-box.narrow{min-height:240px;align-self:start}
.ab2-box.narrow:nth-child(3){margin-top:clamp(24px,3vw,48px)}
.ab2-box.wide:nth-child(4){margin-top:calc(-1*clamp(24px,3vw,48px))}
.ab2-box.light{background:var(--paper);border-color:var(--paper)}
.ab2-box.light .ab2-box-n{color:rgba(11,11,12,.45)}
.ab2-box.light .ab2-box-t{color:var(--ink)}
.ab2-box.light .ab2-box-d{color:rgba(11,11,12,.65)}
.ab2-box:hover{border-color:var(--d-line-2);transform:translateY(-5px)}
.ab2-box.light:hover{border-color:var(--paper-2);background:var(--paper-2)}
.ab2-box-n{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--d-mut-2)}
.ab2-box-t{margin-top:auto;font-size:clamp(19px,1.5vw,23px);font-weight:600;letter-spacing:-.015em;color:#fff;padding-top:28px}
.ab2-box-d{margin-top:16px;max-width:430px;font-size:14.5px;font-weight:300;line-height:1.68;color:var(--d-mut)}

/* background video card (FPV) — footage behind a scrim, text stays readable */
.ab2-box-bg{position:absolute;inset:-1px;z-index:0;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;
  transition:transform 1.2s var(--ease)}
.ab2-box:hover .ab2-box-bg{transform:scale(1.05)}
.ab2-box-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,8,9,.5) 0%,rgba(8,8,9,.16) 42%,rgba(8,8,9,.82) 100%)}
.ab2-box-n,.ab2-box-t,.ab2-box-d,.ab2v{position:relative;z-index:2}
.ab2-box.has-bg,.ab2-box.has-bg:hover{border:0;background:var(--ink)}
.ab2-box.has-bg .ab2-box-n{color:rgba(255,255,255,.75);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ab2-box.has-bg .ab2-box-t{color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.ab2-box.has-bg .ab2-box-d{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* animated glyphs — one per card, matching its claim */
.ab2v{align-self:center;margin-top:auto;flex:none;color:var(--d-mut)}
.ab2-box.light .ab2v{color:rgba(11,11,12,.6)}
/* 48hr — ticking clock */
.ab2v-clock{width:66px;height:66px;border:1.5px solid currentColor;border-radius:50%;position:relative;opacity:.8}
.ab2v-clock::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor}
.ab2v-clock span{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;border-radius:2px;background:currentColor;transform-origin:50% 100%}
.ab2v-clock .hm{height:24px;animation:ab2spin 4s linear infinite}
.ab2v-clock .hh{height:15px;animation:ab2spin 48s linear infinite}
@keyframes ab2spin{to{transform:rotate(360deg)}}
/* FPV — dot flying a first-person flight path */
.ab2v-fpv{position:relative;width:140px;height:60px}
.ab2v-fpv svg{display:block;width:100%;height:100%}
.fpv-dot{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:currentColor;
  offset-path:path('M4,46 C36,6 66,64 100,24 116,6 132,10 136,14');
  animation:ab2fly 5s cubic-bezier(.55,.05,.45,.95) infinite}
@keyframes ab2fly{to{offset-distance:100%}}
/* TC — certification check that draws itself on reveal */
.ab2v-check{width:64px;height:64px}
.ab2v-check svg{display:block;width:100%;height:100%}
.ab2v-check .tick{stroke-dasharray:34;stroke-dashoffset:34}
.ab2-boxes.in .ab2v-check .tick{animation:ab2tick .7s var(--ease) .8s forwards}
@keyframes ab2tick{to{stroke-dashoffset:0}}
/* 4K — viewfinder brackets + blinking REC */
.ab2v-cam{position:relative;width:100px;height:62px;animation:ab2frame 5s ease-in-out infinite}
.ab2v-cam .c{position:absolute;width:14px;height:14px;border:1.5px solid currentColor;opacity:.75}
.ab2v-cam .c1{top:0;left:0;border-right:none;border-bottom:none}
.ab2v-cam .c2{top:0;right:0;border-left:none;border-bottom:none}
.ab2v-cam .c3{bottom:0;left:0;border-right:none;border-top:none}
.ab2v-cam .c4{bottom:0;right:0;border-left:none;border-top:none}
.ab2v-cam .rec{position:absolute;top:7px;right:9px;width:7px;height:7px;border-radius:50%;background:#d84a3f;
  animation:ab2blink 1.6s steps(1) infinite}
@keyframes ab2blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes ab2frame{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ab2-boxes.ios .ab2-box{opacity:0;transform:translateY(24px)}
.ab2-boxes.ios.in .ab2-box{opacity:1;transform:none;animation:iosIn .9s var(--ease) both}
.ab2-head.ios{opacity:0;transform:translateY(20px)}
.ab2-head.ios.in{opacity:1;transform:none;animation:iosIn .9s var(--ease) both}
@media(max-width:900px){
  .ab2-boxes{grid-template-columns:1fr}
  .ab2-box.wide,.ab2-box.narrow{min-height:0;margin-top:0!important}
}
@media(max-width:480px){.ab2-boxes{grid-template-columns:1fr}}

/* ===================================================================== */
/* ============ ABOUT US PAGE ============ */
/* ===================================================================== */
.ab-page{background:var(--ink);min-height:100vh}

/* generic about section + heading */
.ab-sec{padding:clamp(72px,9vw,128px) 0}
.ab-head{max-width:720px;margin-bottom:clamp(44px,5vw,72px)}
.ab-head .sec-kicker{display:block;margin-bottom:18px}
.ab-head-title{font-weight:500;letter-spacing:-.025em;line-height:1.02;font-size:clamp(32px,4.4vw,62px);color:#fff}

/* meet the team — first section on the page, so clear the fixed nav */
.ab-team-sec{padding-top:calc(var(--nav-h) + clamp(48px,6vw,84px))}
.ab-team{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,6vw,110px);align-items:start}
.abt-side{position:sticky;top:calc(var(--nav-h) + 34px)}
.abt-side .sec-kicker{display:block}
.abt-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;
  line-height:.95;font-size:clamp(46px,5.4vw,86px);color:#fff;margin-top:20px}
.abt-copy{margin-top:26px;max-width:470px;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.78)}
.abt-badge{position:relative;width:112px;height:112px;margin-top:44px}
.abt-badge > svg{width:100%;height:100%;transform-origin:50% 50%;animation:abtSpin 24s linear infinite}
.abt-badge text{fill:var(--d-mut-2);font-family:'Geist Mono',monospace;font-size:10px;
  letter-spacing:1px;text-transform:uppercase}
.abt-badge-core{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.6)}
.abt-badge-core svg{width:17px;height:17px}
@keyframes abtSpin{to{transform:rotate(360deg)}}
.abt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.abt-card{cursor:pointer}
.abt-card:focus-visible{outline:1.5px solid rgba(255,255,255,.5);outline-offset:6px;border-radius:14px}
.abt-card:nth-child(even){margin-top:clamp(44px,5vw,76px)}
.abt-photo{position:relative;overflow:hidden;border-radius:14px}
.abt-photo::after{content:"";position:absolute;inset:-1px;background:var(--ink);z-index:2;
  transition:transform 1s var(--ease);transition-delay:calc(var(--abt-d,0s) + .12s)}
.abt-card.in .abt-photo::after{transform:translateY(-102%)}
.abt-photo image-slot{display:block;width:100%;height:auto;aspect-ratio:4/5;
  filter:grayscale(1) brightness(.92);transition:transform .9s var(--ease),filter .9s var(--ease)}
/* the slot's built-in empty state is styled for light pages — lift it for the dark theme */
.abt-photo image-slot::part(frame){background:rgba(255,255,255,.04)}
.abt-photo image-slot::part(empty){color:rgba(255,255,255,.5)}
.abt-photo image-slot::part(ring){border-color:rgba(255,255,255,.16)}
.abt-card:hover .abt-photo image-slot{transform:scale(1.05);filter:grayscale(0) brightness(1)}
.abt-role{display:block;margin-top:18px;color:var(--d-mut-2)}
.abt-name{margin-top:8px;font-size:clamp(21px,1.9vw,29px);font-weight:600;letter-spacing:-.015em;
  color:#fff;display:flex;align-items:center;gap:12px}
.abt-arrow{display:inline-flex;color:var(--d-mut-2);transition:transform .5s var(--ease),color .5s var(--ease)}
.abt-arrow svg{width:20px;height:20px}
.abt-card:hover .abt-arrow{transform:translateX(8px);color:#fff}
.ab-sign{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.ab-social{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--d-mut);transition:color .35s var(--ease)}
.ab-social svg{width:16px;height:16px}
.ab-social:hover{color:#fff}

/* bio modal (opens in place — no page change) */
.abm-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:rgba(8,8,9,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:abmFade .4s var(--ease) both}
.abm-card{position:relative;width:min(860px,100%);max-height:calc(100vh - 44px);overflow:auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.5vw,48px);align-items:center;
  background:#101012;border:1px solid var(--d-line-2);border-radius:20px;
  padding:clamp(22px,3vw,40px);animation:abmPop .55s var(--ease) both}
.abm-photo image-slot{display:block;width:100%;height:auto;aspect-ratio:4/5}
.abm-photo image-slot::part(frame){background:rgba(255,255,255,.04)}
.abm-photo image-slot::part(empty){color:rgba(255,255,255,.5)}
.abm-photo image-slot::part(ring){border-color:rgba(255,255,255,.16)}
.abm-close{position:absolute;top:14px;right:16px;z-index:2;appearance:none;border:1px solid var(--d-line-2);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);width:38px;height:38px;border-radius:50%;
  font-size:20px;line-height:1;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.abm-close:hover{background:rgba(255,255,255,.12);color:#fff}
.abm-role{display:block;color:var(--d-mut-2)}
.abm-name{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.005em;line-height:1;
  font-size:clamp(34px,4vw,56px);color:#fff;margin-top:12px}
.abm-bio{margin-top:20px;font-size:15.5px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.78)}
.abm-card .ab-sign{margin-top:26px}
@keyframes abmFade{from{opacity:0}}
@keyframes abmPop{from{opacity:0;transform:translateY(26px) scale(.97)}}
@media(max-width:720px){
  .abm-card{grid-template-columns:1fr;gap:22px;align-items:start}
  .abm-photo{max-width:300px}
}

/* services */
.absv-sec{border-top:1px solid var(--d-line)}
.absv{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,6vw,110px);align-items:start}
.absv-side{position:sticky;top:calc(var(--nav-h) + 34px)}
.absv-side .sec-kicker{display:block;margin-bottom:18px}
.absv-title{font-weight:600;letter-spacing:-.03em;line-height:.95;font-size:clamp(46px,6vw,92px);color:#fff}
.absv-copy{margin-top:22px;max-width:380px;font-size:15.5px;font-weight:300;line-height:1.65;color:var(--d-mut)}
.absv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,4.5vw,68px) clamp(28px,4vw,56px)}
.absv-item{border-top:1px solid var(--d-line);padding-top:22px;transition:border-color .5s var(--ease)}
.absv-item:hover{border-top-color:rgba(255,255,255,.45)}
.absv-n{display:block;color:var(--d-mut-2);transition:color .5s var(--ease)}
.absv-item:hover .absv-n{color:#fff}
.absv-t{margin-top:16px;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.015em;color:#fff}
.absv-d{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--d-mut)}

/* see the work */
.abw-sec{border-top:1px solid var(--d-line)}
.abw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px)}
.abw-card{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--d-line);transform:translateZ(0)}
.abw-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.abw-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 32%,transparent 68%,rgba(0,0,0,.3))}
.abw-card:hover video{transform:scale(1.05)}
.abw-tag{position:absolute;top:16px;left:16px;z-index:2;padding:8px 14px;border-radius:100px;
  background:rgba(10,10,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--d-line-2);color:rgba(255,255,255,.9);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.abw-card:hover .abw-tag{opacity:0;transform:translateY(-8px)}
.abw-view{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:#fff;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.abw-view svg{width:16px;height:16px}
.abw-card:hover .abw-view{opacity:1;transform:none}

/* cta */
.ab-cta{padding:clamp(90px,11vw,150px) 0;border-top:1px solid var(--d-line)}
.ab-cta-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.ab-cta-title{font-weight:500;letter-spacing:-.03em;line-height:1;font-size:clamp(38px,6vw,86px);color:#fff}
.ab-cta-sub{max-width:480px;font-size:16px;font-weight:300;line-height:1.6;color:var(--d-mut)}
.ab-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* reveal */
.ab-sec .ios,.ab-cta-inner.ios{opacity:0;transform:translateY(24px)}
.ab-sec .ios.in,.ab-cta-inner.ios.in{opacity:1;transform:none;animation:iosIn .9s var(--ease) both}

@media(max-width:980px){
  .ab-team{grid-template-columns:1fr;gap:44px}
  .abt-side{position:static}
  .absv{grid-template-columns:1fr;gap:40px}
  .absv-side{position:static}
  .abw-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .abt-grid{grid-template-columns:1fr}
  .abt-card:nth-child(even){margin-top:0}
  .absv-grid{grid-template-columns:1fr;gap:32px}
}


/* ===================== OUR WORK — hero =====================
   One still, full bleed. The copy sits at the page's left margin — same line as
   the Industry and About heroes — so every hero on the site starts in one place. */
.wk-hero{position:relative;height:min(96vh,880px);min-height:560px;overflow:hidden;background:var(--ink)}
.wk-hero-bg{position:absolute;inset:0}
.wk-hero-bg img,.wk-hero-bg video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
/* two layers: a bottom weight so the frame settles into the page, plus a soft
   wedge up the left where the title now sits — the crew are in that corner, and
   the type has to stay readable over them without flattening the whole frame */
.wk-hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,8,9,.72) 0%,rgba(8,8,9,.34) 28%,transparent 56%),
    linear-gradient(180deg,rgba(8,8,9,.5) 0%,rgba(8,8,9,.05) 24%,rgba(8,8,9,.34) 58%,rgba(11,11,12,.94) 100%)}
/* matches .wrap — max-width 1480 centred, 40px gutter — so the title lands on the
   same left margin as the nav and every other hero */
.wk-head{position:absolute;left:0;right:0;bottom:clamp(46px,8vh,90px);
  max-width:1480px;margin:0 auto;padding:0 40px;pointer-events:none;z-index:10}
.wk-h1{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(52px,7.6vw,116px);line-height:.9;letter-spacing:-.02em;margin:14px 0 0;color:var(--paper);
  text-shadow:0 16px 50px rgba(0,0,0,.6)}
.wk-head .sec-kicker,.wk-grp-head .sec-kicker{display:block}
.wk-idx{display:block}
.wk-sub{display:block;margin-top:18px;font-size:15px;font-weight:300;
  color:rgba(255,255,255,.76);max-width:42ch}

/* narrow: the frame has no room to hold type off to one side any more */
@media (max-width:900px){
  /* a portrait window onto a 3:2 frame throws most of the width away — pull the
     focal point left so the crew stay in shot instead of only the house */
  .wk-hero-bg img{object-position:34% 40%}
  .wk-hero{height:auto;min-height:74vh;display:flex;align-items:flex-end}
  .wk-head{position:relative;left:auto;right:auto;bottom:auto;margin:0;
    padding:clamp(120px,26vh,240px) clamp(20px,5vw,40px) clamp(34px,6vh,54px)}
  .wk-hero-bg{position:absolute}
}

/* ===================== OUR WORK — ambient focus reel =====================
   Scroll stays completely native: no pin, no wheel capture, no minimum dwell.
   A scroll listener writes --sc/--br/--sa/--mo per row, so the card
   nearest the middle of the screen is the one in focus and playing. */
.wk-filter{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:26px 0 4px}
.wk-filter-label{display:block;color:var(--d-mut-2);margin-bottom:12px}
/* wide: the filter becomes a rail down the left edge — where the scroll line used
   to be — and sticks there for the length of the reel. The reel itself becomes a
   two-column grid so the rows start clear of it rather than running underneath. */
@media (min-width:1100px){
  .wk-reel{display:grid;align-items:start;
    grid-template-columns:minmax(0,150px) minmax(0,1fr);
    column-gap:clamp(28px,3.4vw,64px);
    padding-left:clamp(20px,2.4vw,34px)}
  .wk-reel > .wk-filter{grid-column:1;grid-row:1/-1;margin:0;
    position:sticky;top:calc(var(--nav-h) + 46px)}
  .wk-reel > .wk-group{grid-column:2}
}
.wk-fbtn{display:flex;align-items:center;gap:12px;font-family:'Jost',sans-serif;
  font-size:16px;font-weight:600;color:var(--d-mut);background:none;border:0;
  padding:8px 0;cursor:pointer;transition:color .3s var(--ease)}
.wk-fbtn:hover{color:var(--paper)}
.wk-fbtn.on{color:var(--paper)}
.wk-fdot{width:7px;height:7px;border-radius:50%;background:transparent;
  box-shadow:0 0 0 4px transparent;flex:none;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.wk-fbtn.on .wk-fdot{background:var(--accent-warm);box-shadow:0 0 0 4px rgba(149,129,91,.22)}
/* narrow: the stacked rail costs a third of the first screen before any work is
   visible, so the three options become one row of chips */
@media (max-width:700px){
  .wk-filter{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 2px}
  .wk-filter-label{width:100%;margin-bottom:4px}
  .wk-fbtn{gap:8px;padding:10px 16px;font-size:14px;border-radius:100px;
    border:1px solid var(--d-line);min-height:44px}
  .wk-fbtn.on{border-color:rgba(149,129,91,.5);background:rgba(149,129,91,.12)}
  .wk-fbtn .wk-fdot{width:6px;height:6px}
  .wk-fbtn.on .wk-fdot{box-shadow:0 0 0 3px rgba(149,129,91,.22)}
}

.wk-grp-k{display:block;color:var(--ind,var(--d-mut-2))}
.wk-grp-title{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(30px,4vw,52px);line-height:1;margin:10px 0 0;color:var(--paper)}

.wk-row{display:grid;align-items:center;gap:clamp(28px,3.8vw,60px);
  grid-template-columns:auto minmax(0,1fr);padding:clamp(56px,8vh,110px) 0}
/* every other row mirrors: media to the right, copy over to the left */
.wk-row.flip{grid-template-columns:minmax(0,1fr) auto}
.wk-row.flip > .wk-card,.wk-row.flip > .wk-deck{order:2}
.wk-row.flip .wk-meta{order:1;justify-items:end;justify-self:end;text-align:right}
.wk-row.flip .wk-title,.wk-row.flip .wk-desc{margin-left:auto}

/* a button, not a link — it opens the clip full size rather than navigating */
.wk-card{position:relative;display:block;overflow:hidden;background:#0f0f10;
  padding:0;border:0;cursor:pointer;text-align:inherit;font:inherit;color:inherit;
  border-radius:clamp(14px,1.5vw,20px);box-shadow:0 22px 60px rgba(0,0,0,.5);
  transform:scale(var(--sc,.91));
  /* focus is scale + light only — no blur, the footage always stays sharp */
  filter:brightness(var(--br,.52)) saturate(var(--sa,.68));
  transition:filter .25s linear,transform .25s linear,box-shadow .5s var(--ease)}
.wk-card.portrait{width:clamp(250px,27vw,400px);aspect-ratio:9/16}
.wk-card.landscape{width:clamp(380px,46vw,660px);aspect-ratio:16/9}

/* mini carousel — several cuts of one property under one title. The bar sits under
   the card and inherits the row's focus dimming, so it lifts with the rest of the
   card as that row reaches mid-screen. */
.wk-deck{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.wk-row.flip .wk-deck{align-items:flex-end}
/* the next cut, peeking out from behind the front card — offset stays inside the
   row's column gap so it never reaches the copy */
.wk-stack{position:relative;width:max-content}
.wk-stack-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:clamp(14px,1.5vw,20px);z-index:0;pointer-events:none;
  transform:scale(var(--sc,.91)) translate(38px,24px) scale(.94) rotate(1.8deg);
  filter:brightness(calc(var(--br,.52) * .92)) saturate(calc(var(--sa,.68) * .95));
  box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);
  transition:filter .25s linear,transform .25s linear}
.wk-row.flip .wk-stack-back{
  transform:scale(var(--sc,.91)) translate(-38px,24px) scale(.94) rotate(-1.8deg)}
.wk-stack .wk-card{z-index:1}
/* count chip — the unambiguous "there is more than one clip here" cue */
.wk-card-cuts{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:100px;font-size:10px;letter-spacing:.12em;
  color:var(--paper);background:rgba(10,10,11,.6);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);opacity:var(--mo,.42);transition:opacity .25s linear}
.wk-card-cuts svg{color:var(--accent-warm)}
.wk-deck-bar{display:flex;align-items:center;gap:10px;
  opacity:var(--mo,.42);transition:opacity .25s linear}
.wk-row.flip .wk-deck-bar{justify-content:flex-end}
.wk-deck-arw{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:50%;cursor:pointer;color:var(--paper);
  background:rgba(255,255,255,.05);border:1px solid var(--d-line);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.wk-deck-arw:hover{background:rgba(255,255,255,.11);border-color:var(--d-line-2)}
.wk-deck-dots{display:flex;align-items:center;gap:7px}
.wk-deck-dot{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--d-line-2);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.wk-deck-dot:hover{border-color:var(--accent-warm)}
.wk-deck-dot.on{background:var(--accent-warm);border-color:var(--accent-warm)}
.wk-deck-n{margin-left:2px;font-size:10.5px;letter-spacing:.12em;color:var(--d-mut-2)}
.wk-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-card-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,transparent 34%,transparent 60%,rgba(0,0,0,.42) 100%)}
.wk-card-live{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:7px;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .35s var(--ease)}
.wk-row.on .wk-card-live{opacity:.9}
.wk-card-live i{width:6px;height:6px;border-radius:50%;background:#c8352a;
  box-shadow:0 0 6px rgba(200,53,42,.9);animation:wkPulse 1.4s ease-in-out infinite}
@keyframes wkPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* the affordance that says the card opens: a play mark that firms up on the row in
   focus and grows on hover */
.wk-card-open{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;color:#fff;pointer-events:none;
  background:rgba(10,10,11,.42);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);opacity:0;transform:scale(.9);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s var(--ease)}
.wk-row.on .wk-card-open{opacity:.92;transform:scale(1)}
.wk-card:hover .wk-card-open,.wk-card:focus-visible .wk-card-open{
  opacity:1;transform:scale(1.08);background:rgba(149,129,91,.72);border-color:transparent}
.wk-card:focus-visible{outline:2px solid var(--accent-warm);outline-offset:4px}

.wk-meta{display:grid;gap:0;align-content:center;max-width:38ch;
  opacity:var(--mo,.42);transform:translateY(var(--my,10px));
  transition:opacity .25s linear,transform .25s linear}
.wk-idx{display:block;color:var(--ind,var(--accent));margin-bottom:14px}
.wk-title{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(26px,3.3vw,44px);line-height:1.06;margin:0 0 11px;color:var(--paper);max-width:14ch}
.wk-client{font-size:14.5px;font-weight:300;color:var(--d-mut);margin:0 0 5px}
.wk-where{font-size:11.5px;letter-spacing:.05em;color:var(--d-mut-2)}
.wk-desc{font-size:14.5px;font-weight:300;line-height:1.65;color:var(--d-mut);margin:16px 0 0;max-width:44ch}

/* the bridge into the industry page — Our Work is highlights, that page is the archive */
.wk-more{display:flex;align-items:center;gap:16px;width:fit-content;margin:6px 0 40px;
  padding:16px 26px;border:1px solid var(--d-line);border-radius:100px;color:var(--paper);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.wk-more:hover{border-color:var(--ind,var(--accent));background:rgba(255,255,255,.03);transform:translateY(-2px)}
.wk-more span{font-size:14px}
.wk-more em{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-mut-2)}
.wk-more svg{width:13px;height:13px;color:var(--ind,var(--accent))}

/* running "you are here" tag — orientation without a sticky bar eating the screen */
.wk-here{position:fixed;left:clamp(20px,3vw,40px);bottom:clamp(22px,4vh,38px);z-index:45;
  display:flex;align-items:center;gap:9px;pointer-events:none;opacity:0;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-mut-2);transition:opacity .45s var(--ease)}
.wk-here.on{opacity:1}
.wk-here i{width:16px;height:1px;background:var(--ind,var(--accent));transition:background .45s var(--ease)}
.wk-here b{color:var(--paper);font-weight:500;letter-spacing:.1em}

/* both "see all" links land together when the reel is woven */
.wk-more-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,4vh,44px)}
.wk-more-row .wk-more{margin:0}
/* three items on one line only fits a desktop pill — stack the count under the
   label and let the link run the width of the column */
@media (max-width:620px){
  .wk-more{width:100%;flex-wrap:wrap;gap:4px 14px;padding:16px 22px}
  .wk-more span{flex:1 1 auto}
  .wk-more em{flex:1 0 100%;order:3}
  .wk-more svg{flex:none}
}

@media (max-width:900px){
  .wk-row,.wk-row.flip{grid-template-columns:minmax(0,1fr);gap:20px}
  .wk-row.flip > .wk-card,.wk-row.flip > .wk-deck{order:0}
  .wk-row.flip .wk-meta{order:0;justify-items:start;justify-self:start;text-align:left}
  .wk-row.flip .wk-title,.wk-row.flip .wk-desc{margin-left:0}
  .wk-card.portrait,.wk-card.landscape{width:100%}
  .wk-card.portrait{aspect-ratio:4/5}
  .wk-here{display:none}
  /* the 14ch measure is there to stop a title running the width of a desktop
     column; in one column it just breaks addresses over three lines */
  .wk-meta{max-width:none}
  .wk-title{max-width:none}
  .wk-row{padding:clamp(38px,6vh,64px) 0}
  /* a 32px circle is under the touch minimum — see the dots in MOBILE below */
  .wk-deck-arw{width:40px;height:40px}
  /* one column: the deck fills it, and everything reads left no matter the row's
     desktop side. `width:max-content` here would collapse the 100%-wide card. */
  .wk-deck,.wk-row.flip .wk-deck{align-items:flex-start;width:100%}
  .wk-stack{width:100%}
  .wk-row.flip .wk-deck-bar{justify-content:flex-start}
  /* smaller peek — a full-width card has no gutter left to lean into */
  .wk-stack-back,.wk-row.flip .wk-stack-back{
    transform:scale(var(--sc,.91)) translate(12px,9px) scale(.965) rotate(1deg)}
}
@media (prefers-reduced-motion: reduce){
  .wk-card{filter:none !important;transform:none !important}
  .wk-meta{opacity:1 !important;transform:none !important}
  .wk-card-live i{animation:none}
}

/* ===================== INDUSTRY — what we make =====================
   Each format sits in the frame it is actually made for: a phone for vertical
   social cuts, a feed post for long-form horizontal, a print sheet for stills. */
.ip-offer{padding:clamp(70px,10vh,120px) 0 clamp(30px,5vh,60px)}
/* title and proof on the left, the argument as bullets on the right — the old single
   column left the whole right half of the page empty above the format rows */
.ip-offer-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,86px);align-items:start}
.ip-offer-title{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(30px,4.4vw,58px);line-height:1;margin:16px 0 0;color:var(--paper)}
.ip-offer-intro{font-size:16.5px;font-weight:300;line-height:1.72;color:var(--d-mut);max-width:56ch;margin:0}
.ip-offer-stat{margin-top:36px;padding-top:26px;border-top:1px solid var(--d-line);display:inline-block}
.ip-offer-stat-v{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4vw,52px);
  line-height:1;color:var(--accent)}
/* tabular figures so the digits do not jitter the label's width while counting */
.ip-stat-count{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.ip-offer-stat-l{display:block;margin-top:8px;font-family:'Geist Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-mut-2)}

/* ---- the argument, as points ----
   A hairline runs down the left of the list and draws itself top-to-bottom when the
   block arrives; each node then pops on in turn, so the eye is pulled downward — the
   same direction it needs to travel to reach the format rows underneath. */
.ip-points{position:relative;list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:clamp(20px,2.4vh,30px)}
.ip-points-rail{position:absolute;left:5px;top:7px;bottom:7px;width:1px;
  background:linear-gradient(180deg,var(--accent-warm),rgba(149,129,91,.15));
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
.ip-points.in .ip-points-rail{transform:scaleY(1)}
.ip-point{position:relative;font-size:16.5px;font-weight:300;line-height:1.66;
  color:var(--d-mut);max-width:52ch;
  opacity:0;transform:translateY(14px)}
.ip-points.in .ip-point{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(.24s + .13s * var(--i,0))}
.ip-point-node{position:absolute;left:-34px;top:.62em;width:11px;height:11px;
  border-radius:50%;background:var(--ink);border:1px solid var(--accent-warm);
  transform:scale(0);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.ip-points.in .ip-point-node{transform:scale(1);
  box-shadow:0 0 0 4px rgba(149,129,91,.14);
  transition-delay:calc(.3s + .13s * var(--i,0))}
.ip-point-lead{color:var(--paper);font-weight:400}
.ip-point-rest{color:var(--d-mut)}
@media(max-width:900px){
  .ip-offer-head{grid-template-columns:1fr;gap:34px}
  .ip-point{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .ip-points-rail,.ip-points.in .ip-points-rail{transform:scaleY(1)}
  .ip-point,.ip-points.in .ip-point{opacity:1;transform:none;transition:none}
  .ip-point-node,.ip-points.in .ip-point-node{transform:scale(1);transition:none}
}

/* The break between the argument and the work. It needs `ios` so useReveal flips it,
   but the global `.ios` rules animate translateY — override both states or the
   scaleX draw never runs. */
.ip-offer-rule{display:block;height:1px;margin-top:clamp(46px,7vh,84px);
  background:linear-gradient(90deg,var(--accent-warm),rgba(255,255,255,.10) 42%,transparent);
  transform-origin:left}
.ip-offer-rule.ios{opacity:1;transform:scaleX(0)}
.ip-offer-rule.ios.in{opacity:1;transform:scaleX(1);animation:none;
  transition:transform 1.15s var(--ease) .62s}
@media(prefers-reduced-motion:reduce){
  .ip-offer-rule.ios,.ip-offer-rule.ios.in{transform:scaleX(1);transition:none}
}

.fmt-list{position:relative;display:grid;gap:clamp(70px,11vh,150px);margin-top:clamp(44px,6.5vh,86px)}
.fmt-row{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(34px,5.5vw,90px);align-items:center}
.fmt-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.fmt-row.flip .fmt-media{order:2}
.fmt-row.flip .fmt-copy{order:1}
.fmt-copy{max-width:46ch}
.fmt-plat{display:block;color:var(--accent);margin-bottom:14px}
.fmt-name{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(26px,3.2vw,42px);line-height:1.05;margin:0 0 16px;color:var(--paper)}
.fmt-body{font-size:15.5px;font-weight:300;line-height:1.72;color:var(--d-mut);margin:0}
.fmt-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.fmt-points li{position:relative;padding-left:22px;font-size:14px;font-weight:300;color:var(--d-mut)}
.fmt-points li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--accent)}

/* --- phone --- */
.fmt-phone{position:relative;width:clamp(240px,23vw,306px);aspect-ratio:9/19.2;
  background:#080809;border:1px solid var(--d-line-2);border-radius:38px;padding:9px;
  box-shadow:0 40px 90px rgba(0,0,0,.62)}
.fmt-phone-island{position:absolute;left:50%;top:19px;transform:translateX(-50%);
  width:76px;height:19px;border-radius:100px;background:#000;z-index:3}
.fmt-phone-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#111}
.fmt-phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fmt-phone-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 22%,transparent 54%,rgba(0,0,0,.72) 100%)}
.fmt-phone-rail{position:absolute;right:11px;bottom:86px;display:grid;gap:17px;justify-items:center}
.fmt-ico{width:26px;height:26px;display:grid;place-items:center;color:#fff;opacity:.92}
.fmt-ico svg{width:16px;height:16px}
.fmt-phone-foot{position:absolute;left:13px;right:52px;bottom:26px}
.fmt-phone-user{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:#fff}
.fmt-phone-user i{width:19px;height:19px;border-radius:50%;background:var(--accent);flex:none}
.fmt-phone-cap{display:block;margin-top:7px;font-size:11.5px;font-weight:300;color:rgba(255,255,255,.82)}
.fmt-phone-bar{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);
  width:104px;height:4px;border-radius:100px;background:rgba(255,255,255,.5);z-index:3}

/* --- feed post --- */
.fmt-post{width:clamp(330px,42vw,560px);background:#131315;border:1px solid var(--d-line);
  border-radius:14px;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.55)}
.fmt-post-head{display:flex;align-items:center;gap:11px;padding:15px 17px}
.fmt-post-av{width:38px;height:38px;border-radius:50%;background:var(--accent);flex:none}
.fmt-post-name{display:block;font-size:14px;font-weight:500;color:var(--paper)}
.fmt-post-sub{display:block;font-size:11px;letter-spacing:.05em;color:var(--d-mut-2);margin-top:2px}
.fmt-post-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
/* portrait source in a horizontal frame gets a blurred bed rather than a crop */
.fmt-post-bed{position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(26px) brightness(.5);transform:scale(1.1)}
/* the still sits under the clip at the same fit, so the frame reads correctly
   before the video buffers and if it ever fails to decode */
.fmt-post-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fmt-post-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fmt-post-foot{display:flex;align-items:center;justify-content:space-between;
  padding:13px 17px;border-top:1px solid var(--d-line)}
.fmt-post-react{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--d-mut)}
.fmt-post-react svg{width:13px;height:13px;color:var(--accent)}
.fmt-post-meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-mut-2)}

/* --- stills sheet --- */
.fmt-still{position:relative;width:clamp(320px,40vw,540px);aspect-ratio:4/3;
  border-radius:12px;overflow:hidden;border:1px solid var(--d-line);
  box-shadow:0 34px 80px rgba(0,0,0,.55)}
.fmt-still img{width:100%;height:100%;object-fit:cover;display:block}
.fmt-still-tag{position:absolute;left:14px;bottom:14px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}


/* --- two pieces per format, stacked in perspective --- */
.deck{position:relative;width:var(--deckw)}
.deck-vertical{--deckw:clamp(240px,23vw,306px)}
.deck-horizontal{--deckw:clamp(330px,42vw,560px)}
.deck-stills{--deckw:clamp(320px,40vw,540px)}
.deck-stage{position:relative;width:100%;perspective:1400px;transform-style:preserve-3d}
.deck-card{position:absolute;left:0;top:0;cursor:pointer;transform-origin:50% 50%;
  transition:transform .85s var(--ease),opacity .7s var(--ease),filter .7s var(--ease)}
/* the one behind sits back and to the side until you call it forward */
.deck-card{transform:translate3d(24%,6%,-190px) rotateY(-17deg) scale(.91);opacity:.66;
  filter:blur(.7px) brightness(.78) saturate(.9)}
.deck-card.on{transform:translate3d(0,0,0) rotateY(0deg) scale(1);opacity:1;
  filter:none}
/* on flipped rows the media sits right, so the stack leans inward instead of
   off the edge of the page */
.fmt-row.flip .deck-card{transform:translate3d(-24%,6%,-190px) rotateY(17deg) scale(.91)}
.fmt-row.flip .deck-card.on{transform:translate3d(0,0,0) rotateY(0deg) scale(1)}
.fmt-row.flip .deck-card:not(.on):hover{transform:translate3d(-22%,5%,-150px) rotateY(14deg) scale(.93)}
.deck-card:not(.on):hover{opacity:.88;filter:blur(0) brightness(.92) saturate(1);
  transform:translate3d(22%,5%,-150px) rotateY(-14deg) scale(.93)}
/* the stage needs real height since the cards are absolute */
.deck-vertical .deck-stage{height:calc(var(--deckw) * 19.2 / 9)}

.deck-horizontal .deck-stage{height:calc(var(--deckw) * 0.5625 + 118px)}
.deck-stills .deck-stage{height:calc(var(--deckw) * 0.75)}

.deck:focus-visible{outline:none}
.deck:focus-visible .deck-stage{outline:1px solid var(--accent);outline-offset:14px;border-radius:8px}

/* controls sit directly under the media so they read as a slider */
.deck-ctl{display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:clamp(14px,1.6vw,22px);row-gap:14px;margin-top:26px;width:100%}
.deck-arrows{display:flex;gap:8px;flex:none}
.deck-arrow{width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--paper);
  background:rgba(255,255,255,.03);border:1px solid var(--d-line-2);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.deck-arrow:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-2px)}
.deck-arrow svg{width:15px;height:15px}
.deck-bars{display:flex;gap:6px;flex:none;justify-self:start}
.deck-bar{padding:8px 0;background:none;border:0;cursor:pointer;width:34px}
.deck-bar i{display:block;height:2px;border-radius:2px;background:var(--d-line-2);
  transition:background .35s var(--ease),height .35s var(--ease)}
.deck-bar.on i{background:var(--accent);height:3px}
.deck-bar:hover i{background:var(--d-mut)}
.deck-now{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;min-width:0}
.deck-now-t{font-size:13px;color:var(--d-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.deck-now-n{font-size:10.5px;letter-spacing:.12em;color:var(--d-mut-2);flex:none}

.fmt-more{display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  padding:14px 24px;border:1px solid var(--d-line);border-radius:100px;color:var(--paper);
  font-size:13.5px;width:fit-content;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.fmt-more:hover{border-color:var(--accent);background:rgba(255,255,255,.03);transform:translateY(-2px)}
.fmt-more svg{width:13px;height:13px;color:var(--accent)}

@media (max-width:980px){
  .deck-vertical{--deckw:min(280px,72vw)}
  .deck-horizontal,.deck-stills{--deckw:100%}
  .deck-horizontal .deck-stage{height:calc(88vw * 0.5625 + 118px)}
  .deck-stills .deck-stage{height:calc(88vw * 0.75)}
  .deck-card{transform:translate3d(12%,4%,-120px) rotateY(-11deg) scale(.93)}
  .fmt-row.flip .deck-card{transform:translate3d(-12%,4%,-120px) rotateY(11deg) scale(.93)}
}
@media (prefers-reduced-motion: reduce){
  .deck-card{transition:opacity .3s linear}
}

@media (max-width:980px){
  .fmt-row,.fmt-row.flip{grid-template-columns:minmax(0,1fr);gap:30px}
  .fmt-row.flip .fmt-media,.fmt-row.flip .fmt-copy{order:0}
  .fmt-post,.fmt-still{width:100%}
  .fmt-phone{width:min(280px,72vw)}
  /* the segment bar was a 34x19 target — pad it out without changing how it looks */
  .deck-bar{padding:18px 0;width:38px}
  .deck-bars{gap:4px}
}

/* ===================================================================== */
/* ============ LEGAL PAGES (Privacy Policy / Terms of Service) ========= */
/* ===================================================================== */
.lg-hero{padding:calc(var(--nav-h) + 74px) 0 20px;border-bottom:1px solid var(--d-line)}
.lg-hero .label{color:var(--accent-warm);margin-bottom:16px;display:block}
.lg-title{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.01em;
  line-height:1;font-size:clamp(40px,6vw,72px);color:var(--paper)}
.lg-updated{margin-top:16px;font-size:13px;color:var(--d-mut)}
.lg-body{padding:64px 0 100px}
/* a measured column reads far better than the site's normal wide layout —
   legal copy is dense, and 1480px of line length would be exhausting */
.lg-grid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.lg-toc{position:sticky;top:calc(var(--nav-h) + 34px);align-self:start;display:flex;flex-direction:column;gap:2px}
.lg-toc a{font-size:13px;color:var(--d-mut);padding:8px 0;border-left:2px solid transparent;
  padding-left:14px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.lg-toc a:hover{color:var(--paper);border-left-color:var(--d-line-2)}
.lg-sec{max-width:68ch;margin-bottom:52px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.lg-sec:last-child{margin-bottom:0}
.lg-sec h2{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.01em;color:var(--paper);
  margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
.lg-sec h2 .lg-n{font-family:'Geist Mono',monospace;font-size:13px;font-weight:400;color:var(--accent-warm)}
.lg-sec p{font-size:15.5px;font-weight:300;line-height:1.75;color:var(--d-mut);margin-bottom:14px}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec ul{list-style:none;margin:14px 0;padding:0;display:grid;gap:9px}
.lg-sec li{position:relative;padding-left:20px;font-size:15px;font-weight:300;line-height:1.6;color:var(--d-mut)}
.lg-sec li::before{content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--accent-warm)}
.lg-sec a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--d-line-2);
  transition:text-decoration-color .3s var(--ease)}
.lg-sec a:hover{text-decoration-color:var(--paper)}
.lg-sec strong{color:var(--paper);font-weight:500}
@media(max-width:900px){
  .lg-grid{grid-template-columns:1fr;gap:36px}
  .lg-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .lg-toc a{border-left:0;padding:8px 12px;border:1px solid var(--d-line);border-radius:100px}
  .lg-toc a:hover{border-color:var(--d-line-2)}
}

/* ===================================================================== */
/* ============ MOBILE / TOUCH ============
   Cross-cutting rules that belong to no single component. Anything that is
   really about one section lives with that section above. */
/* ===================================================================== */

/* iOS Safari inflates text in landscape unless this is pinned */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* the nav is fixed, so an in-page anchor would otherwise land under it */
section[id],[id^="grp-"]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---- touch: nothing may be hover-only ----
   Copy that only appears on hover is unreachable on a phone. Anything that
   carries meaning is opened by default; pure decoration (play badges, fills)
   is left alone. */
@media (hover:none){
  .svc-blurb{max-height:none;opacity:1;margin-top:8px}
  .reel-client{opacity:1;transform:none}
  .reel-title{transform:none}
  .film-card.lead .film-desc{max-height:120px;opacity:1;margin-top:12px}
  .abw-view{opacity:1;transform:none}
  .wk-card-open{opacity:.92;transform:scale(1)}
  /* the card lifts on tap-and-hold otherwise, which reads as a stuck state */
  .svc-card:hover{transform:none}
  .ab2-box:hover{transform:none}
}

/* ---- touch targets ----
   44px is the floor; several controls were sitting at 30–38px. */
@media (max-width:980px){
  .nav-logo{display:inline-flex;padding:9px;margin:-9px}
  .nav-cta{padding:13px 22px}
  .footer .icon-btn,.mm-foot .icon-btn{width:44px;height:44px}
  .foot-col li a{padding:5px 0}
  .foot-col ul{gap:6px}
  .foot-legal a{display:inline-block;padding:9px 0}
  .foot-legal{gap:16px}
  .ct-item{padding:16px 0}
  .crumb a{display:inline-block;padding:6px 0}
  .mobile-menu a.mm-sub{padding:11px 0 11px 18px}
  /* the carousel dots were 7px of hittable area — grow the button, keep the dot */
  .wk-deck-dot,.wk-deck-dot.on{width:26px;height:26px;border:0;background:none;
    display:grid;place-items:center}
  .wk-deck-dot::after{content:"";width:8px;height:8px;border-radius:50%;
    border:1px solid var(--d-line-2);transition:background .3s var(--ease),border-color .3s var(--ease)}
  .wk-deck-dot.on::after{background:var(--accent-warm);border-color:var(--accent-warm)}
  .wk-deck-dots{gap:0}
}

/* ---- long-form copy ----
   Centred paragraphs are fine across a desktop column and hard to read down a
   phone; every other section on the site sets its copy left. */
@media (max-width:620px){
  .ab-cta-sub,.ip-cta-sub{text-align:left}
  .ab2-box-d,.ip-lead{max-width:none}
  /* type sits over the photograph in these boxes — a phone crops the image
     tighter, so the quiet part of the frame is not always under the words */
  .ab2-box-scrim{background:linear-gradient(180deg,rgba(8,8,9,.52) 0%,rgba(8,8,9,.36) 34%,rgba(8,8,9,.9) 100%)}
}

/* the mega footer wordmark is decorative; at 16vw it forces a scrollbar on the
   narrowest phones before `overflow-x:hidden` catches it */
@media (max-width:560px){
  .foot-mega{font-size:clamp(48px,15vw,120px);padding-top:18px}
  .foot-bottom{gap:8px}
}