/* Figi Agency. Their identity: black and white, nothing else. The script
   wordmark is the only ornament, Poppins carries everything, and motion does
   the job an accent colour would usually do.

   Hard rule learned the hard way: a pre-reveal rule must never be able to beat
   the revealed rule. Hence :not(.in) below, plus a timer in app.js that shows
   everything if the observer never fires. Content is never hidden by motion. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --ink:#0a0a0a; --ink-2:#121212; --ink-3:#181818;
  --bone:#f5f4f2; --bone-2:#b9b8b5; --bone-3:#7c7b79;
  --line:rgba(245,244,242,.14); --line-2:rgba(245,244,242,.28);
  --gold:#c8a15a; --gold-soft:rgba(200,161,90,.5);
  --sans:'Poppins',-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(24px,5.5vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* concrete texture, the way their deck does it */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(900px 600px at 70% -10%,rgba(255,255,255,.055),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(255,255,255,.035),transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--bone);color:var(--ink)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
main,header,footer{position:relative;z-index:1}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.1}
.display{font-size:clamp(2.6rem,7.5vw,6.4rem);font-weight:700;line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600}
.lede{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.75;color:var(--bone-2);max-width:66ch;font-weight:300}
.eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-3);font-weight:500}
.wrap{padding-inline:var(--gut) !important;max-width:1640px;margin-inline:auto;width:100%}
section{position:relative}

/* ---------- header ---------- */
header{position:fixed;inset-inline:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:24px var(--gut);transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
header.solid{background:rgba(10,10,10,.82);backdrop-filter:blur(16px);border-bottom-color:var(--line);padding-block:15px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:auto;height:38px}
.brand span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-2);font-weight:500}
nav.links{display:flex;gap:clamp(16px,2.6vw,34px);font-size:13.5px;font-weight:400;color:var(--bone-2)}
nav.links a{position:relative;padding-block:5px;white-space:nowrap}
nav.links a::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--bone);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
nav.links a:hover::after,nav.links a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
nav.links a[aria-current]{color:var(--bone)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:500;
  padding:12px 22px;border-radius:2px;border:1px solid var(--bone);color:var(--bone);background:transparent;cursor:pointer;
  position:relative;overflow:hidden;transition:color .45s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--bone);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn span{position:relative;z-index:1}
.btn.fill{background:var(--bone);color:var(--ink)}
.btn.fill::before{background:var(--ink)}
.btn.fill:hover{color:var(--bone)}
.btn.small{padding:10px 18px;font-size:12.5px}
@media(max-width:820px){nav.links{display:none}}

/* ---------- page head (inner pages) ---------- */
.phead{padding-block:clamp(130px,17vw,210px) clamp(40px,6vw,70px)}
.phead h1{font-size:clamp(2.4rem,6.5vw,5rem);letter-spacing:-.03em}
.phead .lede{margin-top:22px}

/* ---------- hero (home) ---------- */
/* The hero used to bottom-align inside a full viewport, which left a dead band
   between the header and the mark. It centres now, and stops growing past
   820px, so the mark sits just under the header on any screen. */
.hero{min-height:min(100svh,820px);display:flex;flex-direction:column;justify-content:center;
  padding-top:112px;padding-bottom:clamp(26px,5vh,58px);position:relative;overflow:hidden}

.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(22px,4vw,44px)}
.hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.hero h1{max-width:16ch}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(105%)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px}
.scrollcue{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3)}
.scrollcue i{width:40px;height:1px;background:var(--line-2);display:block;position:relative;overflow:hidden}
.scrollcue i::after{content:'';position:absolute;inset:0;background:var(--bone);transform:translateX(-100%);
  animation:cue 2.6s var(--ease) infinite}
@keyframes cue{50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- hero signature: the mark draws itself ----------
   The traced glyph is the only thing ever painted. A mask of brush centrelines
   uncovers it in writing order, and the dash offsets are driven from JS on rAF
   because Chrome runs no CSS transitions on nodes inside a <mask>. */
.signature{display:block;margin-bottom:clamp(8px,1.6vw,20px)}
.signature .mark{display:block;width:clamp(170px,23vw,330px);height:auto;overflow:visible}
.signature .glyph{fill:var(--bone)}


/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:16px}
.marquee-track{display:flex;gap:40px;white-space:nowrap;will-change:transform;padding-inline-end:40px}
.marquee-track span{font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.01em;color:var(--bone-3);
  display:inline-flex;align-items:center;gap:40px}
.marquee-track span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--bone-3);display:inline-block}

/* ---------- statement ---------- */
.statement{padding-block:clamp(70px,12vw,160px)}
.statement p{font-size:clamp(1.4rem,3.6vw,2.9rem);font-weight:600;line-height:1.3;letter-spacing:-.02em;max-width:22ch}
.statement .w{color:rgba(245,244,242,.18);transition:color .35s var(--ease)}
.statement .w.on{color:var(--bone)}

/* ---------- numbers ---------- */
.numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.num{background:var(--ink);padding:clamp(24px,4vw,48px) clamp(16px,3vw,36px)}
.num b{display:block;font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.num small{display:block;margin-top:10px;font-size:13px;color:var(--bone-3);max-width:24ch;line-height:1.5}

/* ---------- section head ---------- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4.5vw,54px)}

/* ---------- work ---------- */
.work{padding-block:clamp(60px,9vw,130px)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(18px,3vw,30px)}
.filter{font-family:var(--sans);font-size:12.5px;font-weight:400;padding:10px 18px;border-radius:2px;cursor:pointer;
  color:var(--bone-3);border:1px solid var(--line);background:transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.filter:hover{color:var(--bone);border-color:var(--line-2)}
.filter.on{color:var(--ink);background:var(--bone);border-color:var(--bone);font-weight:500}
.cases{display:grid;grid-template-columns:1fr;gap:14px}
.case{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--ink-2);display:block;
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.case:hover{border-color:var(--line-2);transform:translateY(-4px)}
.case[hidden]{display:none}
.case .shot{display:block;overflow:hidden;background:#111}
.case .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/7;transform:scale(1.02);
  filter:grayscale(1) contrast(1.05);transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.case:hover .shot img{transform:scale(1.06);filter:grayscale(0) contrast(1)}
.case .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:clamp(15px,2.2vw,24px)}
.case .kind{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:8px}
.case .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;
  font-size:16px;transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.case:hover .go{background:var(--bone);color:var(--ink);transform:rotate(45deg)}

/* ---------- services ---------- */
.svc-list{list-style:none;border-top:1px solid var(--line)}
.svc-list li{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-inline-start .5s var(--ease)}
.svc-list li::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,244,242,.06),transparent 55%);
  opacity:0;transition:opacity .45s var(--ease)}
.svc-list li:hover{padding-inline-start:16px}
.svc-list li:hover::before{opacity:1}
.svc-list .n{font-size:12px;font-weight:600;color:var(--bone-3);letter-spacing:.1em;position:relative}
.svc-list h3,.svc-list p{position:relative}
.svc-list p{grid-column:2;color:var(--bone-3);font-size:14.5px;margin-top:-2px}

/* ---------- the big-number claim (websites page) ---------- */
.claim{padding-block:clamp(70px,11vw,160px);text-align:center;position:relative;overflow:hidden}
.claim .big{font-size:clamp(5rem,24vw,18rem);font-weight:800;line-height:.85;letter-spacing:-.05em}
.claim h2{margin-top:6px}
.claim p{margin:20px auto 0}

/* ---------- client wall ---------- */
.wall{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(22px,4vw,44px)}
.wall span{font-size:clamp(.82rem,1.4vw,1rem);color:var(--bone-2);border:1px solid var(--line);border-radius:2px;
  padding:11px 17px;font-weight:300;transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.wall span:hover{color:var(--ink);background:var(--bone);border-color:var(--bone)}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(22px,4vw,44px)}
.quote{border:1px solid var(--line);padding:clamp(22px,3.2vw,42px);background:var(--ink-2)}
.quote p{font-size:clamp(1.1rem,2.2vw,1.65rem);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.quote .who{margin-top:18px;font-size:13px;color:var(--bone-3)}
.quote .who b{color:var(--bone);font-weight:500}

/* ---------- process (about) ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(22px,4vw,46px)}
.step{border:1px solid var(--line);padding:clamp(22px,3vw,38px);background:var(--ink-2);position:relative;overflow:hidden}
.step .n{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;line-height:1;color:var(--ink-3);
  -webkit-text-stroke:1px var(--bone-3);display:block;margin-bottom:16px}
.step h3{margin-bottom:9px}
.step p{color:var(--bone-3);font-size:14.5px}

/* ---------- contact ---------- */
.offices{display:flex;gap:clamp(18px,5vw,64px);flex-wrap:wrap;margin-top:clamp(28px,4vw,50px);
  padding-top:clamp(22px,3vw,36px);border-top:1px solid var(--line)}
.office{display:flex;flex-direction:column;gap:7px}
.office .city{font-size:clamp(1.2rem,2.6vw,1.8rem);font-weight:700;letter-spacing:-.02em}
.office .phone{font-size:14.5px;color:var(--bone-2);border-bottom:1px solid var(--line);padding-bottom:3px;width:fit-content}
.office .phone:hover{color:var(--bone);border-color:var(--line-2)}
.office .time{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.mail{display:inline-block;margin-top:22px;font-size:clamp(1.15rem,3.4vw,2.4rem);font-weight:600;letter-spacing:-.02em;position:relative}
.mail::after{content:'';position:absolute;inset-inline:0;bottom:-5px;height:1px;background:var(--bone);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.mail:hover::after{transform:scaleX(1)}

/* ---------- next-page link ---------- */
.nextlink{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:clamp(30px,5vw,58px);margin-top:clamp(40px,7vw,90px)}
.nextlink b{font-size:clamp(1.5rem,4vw,3rem);font-weight:700;letter-spacing:-.02em}
.nextlink .go{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.nextlink:hover .go{background:var(--bone);color:var(--ink);transform:rotate(45deg)}

footer{border-top:1px solid var(--line);padding:24px var(--gut);display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:12.5px;color:var(--bone-3)}
footer a{color:var(--bone-2);border-bottom:1px solid var(--line)}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--bone);pointer-events:none;
  z-index:50;transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s var(--ease)}
.cursor.big{width:46px;height:46px}
@media (hover:none){.cursor{display:none}}

/* ---------- reveals ----------
   :not(.in) so the hidden state can never out-specify the shown state. */
html.js [data-reveal]:not(.in){opacity:0;transform:translateY(22px)}
html.js [data-reveal="scale"]:not(.in){transform:scale(.97)}
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media (min-width:760px){
  .numbers{grid-template-columns:repeat(4,1fr)}
  .cases{grid-template-columns:repeat(2,1fr)}
  .case.wide{grid-column:span 2}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps.three{grid-template-columns:repeat(3,1fr)}
  .svc-list{columns:2;column-gap:56px}
  .svc-list li{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js [data-reveal]:not(.in){opacity:1;transform:none}
  .hero h1 .line > span{transform:none !important}
  #flow{display:none}
}

/* ---------- websites we built ---------- */
.sites{display:flex;flex-direction:column;gap:clamp(40px,7vw,96px);padding-bottom:clamp(50px,8vw,110px)}
.sitecard{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);align-items:center}
.sitecard .frame{border:1px solid var(--line);background:#0e0e0e;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);transition:transform .7s var(--ease),border-color .5s var(--ease)}
.sitecard:hover .frame{transform:translateY(-6px);border-color:var(--line-2)}
.chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#141414}
.chrome i{width:9px;height:9px;border-radius:50%;background:#2a2a2a;display:block}
.chrome .url{margin-left:12px;font-size:11.5px;color:var(--bone-3);letter-spacing:.04em;
  border:1px solid var(--line);border-radius:2px;padding:4px 12px;flex:1;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitecard .shot{overflow:hidden;background:#111}
.sitecard .shot img{width:100%;display:block;filter:grayscale(1);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.sitecard:hover .shot img,.sitecard.hot .shot img{filter:grayscale(0);transform:scale(1.03)}
.sideinfo h3{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:700;margin:12px 0 14px;letter-spacing:-.025em}
.sideinfo p{color:var(--bone-2);font-weight:300;max-width:48ch}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 26px}
.tags li{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);
  border:1px solid var(--line);border-radius:2px;padding:7px 12px}
.tags li{border-color:var(--line)}
.sideinfo .note{font-size:13px;color:var(--bone-3);border-bottom:1px solid var(--line);padding-bottom:3px}
@media (min-width:900px){
  .sitecard{grid-template-columns:1.35fr .65fr}
  .sitecard:nth-child(even) .frame{order:2}
}

/* footer socials */
footer .social{display:flex;gap:16px;flex-wrap:wrap}
footer .social a{border-bottom:1px solid var(--line)}
footer .social a:hover{color:var(--bone);border-color:var(--line-2)}

/* ---------- partners ---------- */
.partners{padding-block:clamp(50px,8vw,110px)}
.plist{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(20px,3vw,38px)}
.partner{display:flex;gap:clamp(16px,2.4vw,28px);align-items:flex-start;border:1px solid var(--line);
  padding:clamp(20px,3vw,36px);background:var(--ink-2);transition:border-color .5s var(--ease),transform .6s var(--ease)}
.partner:hover{border-color:var(--line-2);transform:translateY(-3px)}
.pmark{flex:none;width:58px;height:58px;border:1px solid var(--line);display:grid;place-items:center;color:var(--bone)}
.pmark svg{width:27px;height:27px;display:block}
.partner h3{margin-bottom:8px}
.partner p{color:var(--bone-3);font-size:14.5px;max-width:46ch}
@media (min-width:760px){.plist{grid-template-columns:repeat(2,1fr)}}

/* animate the mask stop itself, so the wordmark writes in rather than fades */

/* ---------- the reel: a video placeholder that looks like a cut, not a box ---------- */
.reelgrid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,48px)}
.reel{position:relative}
/* the rail sits OUTSIDE the frame, like slate marks on an edit timeline */
.reel-rail{display:flex;align-items:center;gap:12px;padding-bottom:10px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}
.reel-rail .rec{display:inline-flex;align-items:center;gap:7px;color:var(--bone-2)}
.reel-rail .rec i{width:7px;height:7px;border-radius:50%;background:var(--bone-2);animation:rec 2.2s var(--ease) infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
.reel-rail .tcode{font-variant-numeric:tabular-nums}
.reel-rail .fmt{margin-left:auto}
.reel-frame{position:relative;overflow:hidden;border:1px solid var(--line);background:#111;aspect-ratio:9/4;
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.reel:hover .reel-frame{border-color:var(--line-2);transform:translateY(-4px)}
.reel-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);
  transition:filter .8s var(--ease),transform 1.3s var(--ease)}
.reel:hover .reel-frame img{filter:grayscale(.15) brightness(.85);transform:scale(1.05)}
/* corner ticks, the way a viewfinder frames a shot */
.grid4{position:absolute;inset:14px;pointer-events:none;
  background:
    linear-gradient(var(--bone),var(--bone)) 0 0/18px 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 0 0/1px 18px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 0/18px 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 0/1px 18px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 0 100%/18px 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 0 100%/1px 18px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 100%/18px 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 100%/1px 18px no-repeat;
  opacity:.5;transition:inset .6s var(--ease),opacity .5s var(--ease)}
.reel:hover .grid4{inset:9px;opacity:.85}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(62px,7vw,84px);
  height:clamp(62px,7vw,84px);border-radius:50%;border:1px solid var(--bone);display:grid;place-items:center;
  color:var(--bone);background:rgba(10,10,10,.35);backdrop-filter:blur(3px);
  transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease)}
.play svg{width:26px;height:26px;margin-left:3px}
.play::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--line-2);
  opacity:0;transform:scale(.85);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reel:hover .play{background:var(--bone);color:var(--ink);transform:translate(-50%,-50%) scale(1.06)}
.reel:hover .play::after{opacity:1;transform:scale(1)}
.scrub{position:absolute;inset-inline:0;bottom:0;height:2px;background:rgba(245,244,242,.18)}
.scrub i{display:block;height:100%;width:22%;background:var(--bone);transition:width 1.4s var(--ease)}
.reel:hover .scrub i{width:68%}
.reel-meta{display:flex;align-items:baseline;gap:14px;padding-top:12px;border-top:1px solid var(--line);margin-top:12px}
.reel-meta .who{font-weight:600;font-size:15px}
.reel-meta .what{font-size:13px;color:var(--bone-3)}
.reel-meta .dur{margin-left:auto;font-size:13px;color:var(--bone-3);font-variant-numeric:tabular-nums}
.reelnote{margin-top:clamp(22px,3vw,34px);font-size:14px;color:var(--bone-3)}
.reelnote a{border-bottom:1px solid var(--line-2);color:var(--bone-2)}
.reelnote a:hover{color:var(--bone)}
@media (min-width:900px){.reelgrid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.reel-rail .rec i{animation:none}}

/* ---------- one metal per showcase store ----------
   Each card carries .tone plus its metal. The colour only ever appears on that
   card: gold for the two jewellery/food flagships, silver for Marly, chalk
   white for the two we run ourselves. Nothing else on the site is coloured. */
.sitecard.gold{--acc:#c8a15a;--acc-rest:rgba(200,161,90,.55);--acc-soft:rgba(200,161,90,.72);--acc-glow:rgba(200,161,90,.16);--acc-ink:#120d04}
.sitecard.silver{--acc:#cdd3db;--acc-rest:rgba(205,211,219,.58);--acc-soft:rgba(205,211,219,.78);--acc-glow:rgba(205,211,219,.18);--acc-ink:#0d1014}
.sitecard.chalk{--acc:#f2efe9;--acc-rest:rgba(242,239,233,.46);--acc-soft:rgba(242,239,233,.72);--acc-glow:rgba(242,239,233,.14);--acc-ink:#101010}
/* the outline is always there, so the metal reads without touching anything */
.sitecard.tone .frame{border-color:var(--acc-rest)}
.sitecard.tone .chrome .url{color:var(--acc);opacity:.72;transition:opacity .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.sitecard.tone .sideinfo .eyebrow{transition:color .4s var(--ease)}
.sitecard.tone:hover .frame,.sitecard.tone.hot .frame{border-color:var(--acc-soft);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px var(--acc-glow)}
.sitecard.tone:hover .chrome .url,.sitecard.tone.hot .chrome .url{opacity:1;border-color:var(--acc-soft)}
.sitecard.tone:hover .shot img,.sitecard.tone.hot .shot img{filter:grayscale(0) saturate(1.05)}
.sitecard.tone:hover .sideinfo .eyebrow,.sitecard.tone.hot .sideinfo .eyebrow{color:var(--acc)}
.sitecard.tone:hover .tags li,.sitecard.tone.hot .tags li{border-color:var(--acc-soft);color:var(--bone-2)}
.sitecard.tone .btn.fill:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}

/* ---------- phone: nothing may push the layout wider than the screen ---------- */
@media (max-width:680px){
  .brand span{display:none}                 /* the tagline plus the button overflowed 390px */
  .brand img{height:46px}                   /* a 26px mark read as a thumbnail on a phone */
  header{padding-block:16px}
  header.solid{padding-block:12px}
  .phead{padding-block:104px clamp(28px,6vw,44px)}   /* 130px left a dead band under the header */
  .btn.small{padding:9px 14px;font-size:12px}
  .hero{padding-top:92px;min-height:min(100svh,720px)}
  .hero-top{gap:8px}
  .hero-top .eyebrow:last-child{display:none}
  .eyebrow{letter-spacing:.22em}
  .shead{gap:14px}
  .reel-rail{flex-wrap:wrap;gap:8px}
  .offices{gap:22px}
  footer{gap:8px;flex-direction:column}
}
/* a long unbroken string must never widen the page */
h1,h2,h3,p,.eyebrow,.wall span,.tags li{overflow-wrap:anywhere}

/* ---------- drawn icons ----------
   Every icon is a stroke path. When its block reveals, the stroke draws itself
   in rather than fading, which matches the way the wordmark is painted on. */
.ico{display:inline-grid;place-items:center;flex:none}
.ico svg{width:100%;height:100%;display:block;overflow:visible}
.ico svg path,.ico svg circle,.ico svg rect{stroke-dasharray:var(--l,180);stroke-dashoffset:var(--l,180)}
[data-reveal].in .ico svg path,[data-reveal].in .ico svg circle,[data-reveal].in .ico svg rect,
.drawn .ico svg path,.drawn .ico svg circle,.drawn .ico svg rect{stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.4,.05,.25,1) var(--d,0s)}

/* services: the icon sits beside the number */
.svc-list li{grid-template-columns:auto auto 1fr}
.svc-list .ico{width:26px;height:26px;color:var(--bone-2);align-self:center}
.svc-list li:hover .ico{color:var(--bone)}
.svc-list h3{grid-column:3}
.svc-list p{grid-column:3}

/* socials: icon plus label, the icon draws once and lifts on hover */
.office .phone{display:inline-flex;align-items:center;gap:10px}
.office .phone .ico{width:19px;height:19px;color:var(--bone-3);transition:color .35s var(--ease),transform .45s var(--ease)}
.office .phone:hover .ico{color:var(--bone);transform:translateY(-2px)}
footer .social a{display:inline-flex;align-items:center;gap:8px;border-bottom:none}
footer .social .ico{width:17px;height:17px;transition:transform .45s var(--ease),color .35s var(--ease)}
footer .social a:hover .ico{transform:translateY(-2px) rotate(-4deg);color:var(--bone)}
@media (prefers-reduced-motion:reduce){
  .ico svg path,.ico svg circle,.ico svg rect{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ---------- only a live website is clickable ---------- */
.case.static{cursor:default}
.case.static:hover{transform:none;border-color:var(--line)}
.case.static:hover .shot img{transform:scale(1.03);filter:grayscale(0) contrast(1)}
a.case .kind::after{content:' · live site';color:var(--bone-2)}

/* one field behind the whole site, fixed so it never scrolls with content */
#inkbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){#inkbg{display:none}}

/* ---------- home: the eight disciplines as cards ---------- */
.teaser{padding-block:clamp(50px,8vw,110px)}
.scards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.scard{background:var(--ink);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:9px;
  transition:background .45s var(--ease)}
.scard:hover{background:var(--ink-2)}
.scard .ico{width:26px;height:26px;color:var(--bone-2);margin-bottom:6px}
.scard:hover .ico{color:var(--bone)}
.scard .t{font-weight:600;font-size:16px}
.scard .s{font-size:13.5px;color:var(--bone-3);line-height:1.5}
@media (min-width:640px){.scards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.scards{grid-template-columns:repeat(4,1fr)}}

/* ---------- home: closing call ---------- */
.cta{padding-block:clamp(40px,6vw,90px)}
.ctabox{border:1px solid var(--line);padding:clamp(26px,4vw,56px);display:grid;grid-template-columns:1fr;gap:26px;
  background:linear-gradient(140deg,rgba(245,244,242,.05),transparent 60%)}
.ctabox .mail{margin-top:0}
@media (min-width:860px){.ctabox{grid-template-columns:1fr auto;align-items:end}.ctaside{text-align:right}}

/* ?still: freeze everything for screenshots, and let the hero collapse so a
   tall capture shows the whole page rather than a viewport-height hero */
.still *,.still *::before,.still *::after{animation:none !important;transition:none !important}
.still [data-reveal]{opacity:1 !important;transform:none !important}
.still .hero{min-height:auto}

/* ---------- phone menu ---------- */
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;cursor:pointer;
  position:relative;border-radius:2px}
.menu-btn span{position:absolute;left:12px;width:20px;height:1.5px;background:var(--bone);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.menu-btn span:first-child{top:18px}
.menu-btn span:last-child{top:24px}
.menu-open .menu-btn span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:19;background:rgba(10,10,10,.97);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;justify-content:center;gap:34px;padding:110px var(--gut) 44px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.menu-open .mnav{opacity:1;pointer-events:auto}
.mnav-links{display:flex;flex-direction:column;gap:6px}
.mnav-links a{font-size:clamp(2rem,9vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;
  color:var(--bone-3);overflow:hidden;display:block}
.mnav-links a[aria-current]{color:var(--bone)}
.mnav-links a span{display:block;transform:translateY(105%);transition:transform .6s var(--ease)}
.menu-open .mnav-links a span{transform:none}
.mnav-links a:nth-child(1) span{transition-delay:.05s}
.mnav-links a:nth-child(2) span{transition-delay:.1s}
.mnav-links a:nth-child(3) span{transition-delay:.15s}
.mnav-links a:nth-child(4) span{transition-delay:.2s}
.mnav-links a:nth-child(5) span{transition-delay:.25s}
.mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--bone-3);
  border-top:1px solid var(--line);padding-top:20px}
.mnav-foot a:hover{color:var(--bone)}
body.menu-open{overflow:hidden}
@media (max-width:820px){
  .menu-btn{display:block}
  .hide-sm{display:none}
}
@media (min-width:821px){.mnav{display:none}}
@media (prefers-reduced-motion:reduce){.mnav-links a span{transform:none}}

/* ---------- partners wear their own colour ----------
   Explicit rgba rather than color-mix: this has to render everywhere, not just
   on a current Chrome. Colour appears on hover, and on touch when the card is
   the thing on screen (see .hot below). */
.partner.shopify{--brand:#95bf47;--brand-soft:rgba(149,191,71,.42);--brand-dim:rgba(149,191,71,.13);--brand-lift:#b7dd6d}
.partner.meta{--brand:#0866ff;--brand-soft:rgba(8,102,255,.45);--brand-dim:rgba(8,102,255,.16);--brand-lift:#6aa6ff}
.partner.shopify,.partner.meta{border-color:var(--brand-soft);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease)}
.partner.shopify .pmark,.partner.meta .pmark{border-color:var(--brand-soft);color:var(--brand);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.partner.shopify h3,.partner.meta h3{transition:color .45s var(--ease)}
.partner.shopify:hover,.partner.meta:hover,.partner.shopify.hot,.partner.meta.hot{border-color:var(--brand);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 44px var(--brand-dim)}
.partner.shopify:hover .pmark,.partner.meta:hover .pmark,
.partner.shopify.hot .pmark,.partner.meta.hot .pmark{background:var(--brand-dim)}
.partner.shopify:hover h3,.partner.shopify.hot h3,
.partner.meta:hover h3,.partner.meta.hot h3{color:var(--brand-lift)}

/* ---------- touch: colour arrives on scroll, not on hover ----------
   Most visitors are on a phone and never hover anything, so the same states are
   driven by what is in the middle of the screen, and fade back out as it leaves. */
.case.hot{border-color:var(--line-2)}
.case.hot .shot img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.case.hot .go{background:var(--bone);color:var(--ink);transform:rotate(45deg)}
/* a tile that is not a link still comes to colour, it just does not lift */
.case.static.hot{transform:none;border-color:var(--line)}
.case.static.hot .shot img{transform:scale(1.03);filter:grayscale(0) contrast(1)}
.reel.hot .reel-frame{border-color:var(--line-2)}
.reel.hot .reel-frame img{filter:grayscale(.15) brightness(.85);transform:scale(1.04)}
.reel.hot .grid4{inset:9px;opacity:.85}
.reel.hot .play{background:var(--bone);color:var(--ink);transform:translate(-50%,-50%) scale(1.06)}
.reel.hot .play::after{opacity:1;transform:scale(1)}
.reel.hot .scrub i{width:68%}

/* ---------- cards react to the scroll, not only to a cursor ----------
   A card lights up as it passes the middle of the screen: a hairline draws
   across its top edge, the icon goes to full white and the panel lifts out of
   the black. It is light, not a new colour, so the palette stays as it was. */
.scard{position:relative;overflow:hidden;transition:background .45s var(--ease),transform .55s var(--ease)}
.scard::before{content:'';position:absolute;top:0;inset-inline-start:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--bone),rgba(245,244,242,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.scard .ico{transition:color .45s var(--ease),transform .55s var(--ease)}
.scard:hover,.scard.hot{background:var(--ink-2);transform:translateY(-3px)}
.scard:hover::before,.scard.hot::before{transform:scaleX(1)}
.scard:hover .ico,.scard.hot .ico{color:var(--bone);transform:translateY(-2px)}
.scard .t{transition:letter-spacing .5s var(--ease)}
.scard.hot .t,.scard:hover .t{letter-spacing:.01em}
.svc-list li.hot{padding-inline-start:16px}
.svc-list li.hot::before{opacity:1}
.svc-list li.hot .ico{color:var(--bone)}
.office .phone.hot{color:var(--bone);border-color:var(--line-2)}
.office .phone.hot .ico{color:var(--bone);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .scard,.scard::before,.scard .ico{transition:none}
  .scard::before{display:none}
}

/* ---------- the OpSync block, the one place that is not Figi ----------
   It is a partner's brand inside ours, so it gets their black, their neon green
   and Space Grotesk, fenced inside .opsync and nowhere else. */
.opsync{--os:#00ff88;--os-dim:rgba(0,255,136,.12);--os-soft:rgba(0,255,136,.4);
  position:relative;background:#06080a;border:1px solid rgba(0,255,136,.18);border-radius:3px;
  padding:clamp(28px,4.4vw,64px);margin-block:clamp(50px,8vw,110px);overflow:hidden}
.opsync::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 80% 0%,rgba(0,255,136,.09),transparent 70%),
             linear-gradient(rgba(0,255,136,.035) 1px,transparent 1px) 0 0/100% 46px,
             linear-gradient(90deg,rgba(0,255,136,.035) 1px,transparent 1px) 0 0/46px 100%;
  mask-image:linear-gradient(#000,transparent 78%)}
.opsync > *{position:relative;z-index:1}
/* Figi introduces the partner first, then the partner's own mark answers. */
.opsync .osby{display:flex;align-items:center;gap:clamp(12px,1.8vw,20px);flex-wrap:wrap}
.opsync .eyebrow.by{font-family:var(--sans);color:var(--bone-3);opacity:1;position:relative;padding-inline-end:clamp(12px,1.8vw,20px)}
.opsync .eyebrow.by::after{content:'';position:absolute;inset-inline-end:0;top:50%;width:1px;height:14px;
  margin-top:-7px;background:rgba(0,255,136,.3)}
.opsync .oslogo{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',var(--sans);
  font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--bone)}
.opsync .oslogo i{width:9px;height:9px;border-radius:50%;background:var(--os);
  box-shadow:0 0 0 4px rgba(0,255,136,.16),0 0 18px var(--os);animation:ospulse 2.6s var(--ease) infinite}
@keyframes ospulse{50%{box-shadow:0 0 0 8px rgba(0,255,136,.05),0 0 26px var(--os)}}
.opsync .eyebrow{font-family:'Space Grotesk',var(--sans);color:var(--os);opacity:.9}
.opsync h2 em{font-style:normal;color:var(--os)}
.opsync .scards{background:rgba(0,255,136,.14);border-color:rgba(0,255,136,.16)}
.opsync .scard{background:#07090c}
.opsync .scard::before{background:linear-gradient(90deg,var(--os),rgba(0,255,136,0))}
.opsync .scard:hover,.opsync .scard.hot{background:#0a0f0d}
.opsync .scard:hover .ico,.opsync .scard.hot .ico{color:var(--os)}
.opsync .btn:hover{border-color:var(--os);color:var(--os)}

/* three hub views, floating at different depths */
.hubstack{position:relative;margin-block:clamp(26px,4vw,48px) clamp(8px,2vw,20px);
  aspect-ratio:16/10.4;max-width:1180px;margin-inline:auto}
.hubshot{position:absolute;border:1px solid rgba(0,255,136,.22);border-radius:3px;overflow:hidden;
  background:#06080a;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 60px rgba(0,255,136,.06);
  animation:float 9s ease-in-out infinite}
.hubshot img{display:block;width:100%;height:auto}
.hubshot.back{inset-inline-end:0;top:6%;width:62%;opacity:.72;animation-delay:-3.4s;filter:saturate(.9)}
.hubshot.front{inset-inline-start:0;top:18%;width:70%;animation-delay:-1.2s;z-index:2}
.hubshot.phone{inset-inline-end:7%;bottom:-2%;width:17%;border-radius:14px;z-index:3;animation-delay:-6s;
  border-color:rgba(0,255,136,.34);box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 40px rgba(0,255,136,.1)}
.hubshot .tag{position:absolute;inset-block-end:0;inset-inline-start:0;font-family:'Space Grotesk',var(--sans);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--os);
  background:rgba(4,8,6,.82);padding:6px 11px;border-top:1px solid rgba(0,255,136,.2);
  border-inline-end:1px solid rgba(0,255,136,.2)}
@keyframes float{50%{transform:translateY(-14px)}}
@media (max-width:760px){
  .hubstack{aspect-ratio:1/1.02}
  .hubshot.back{width:78%;top:0;opacity:.55}
  .hubshot.front{width:88%;top:20%}
  .hubshot.phone{width:30%;bottom:0;inset-inline-end:2%}
  .hubshot .tag{font-size:9px;padding:4px 8px}
}
@media (prefers-reduced-motion:reduce){.hubshot,.opsync .oslogo i{animation:none}}

/* ---------- the brands, as their own marks ----------
   Real logos lifted from each client's live site and reduced to a white
   silhouette, so five different palettes sit in one monochrome row. They come
   up to full strength on hover and, on a phone, as they pass the middle. */
.clients{padding-block:clamp(36px,6vw,72px);border-top:1px solid var(--line)}
/* Centred, because the row wraps: space-between strands the last line on a
   phone, where most of these are read. */
.logorail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3.4vw,46px) clamp(26px,4vw,54px);margin-top:clamp(20px,3vw,34px)}
.clogo{display:grid;place-items:center;opacity:.58;transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* --lh on each mark (set in the HTML) evens out optical size: a wide wordmark sits lower, a square or
   hairline mark sits taller, so no logo shouts over its neighbours */
.clogo img{display:block;height:calc(clamp(30px,4.6vw,44px) * var(--lh,1));width:auto;max-width:none}
.clogo:hover,.clogo.hot{opacity:1;transform:translateY(-2px)}
@media (max-width:680px){.logorail{gap:22px 26px}.clogo img{height:calc(30px * var(--lh,1))}}
@media (prefers-reduced-motion:reduce){.clogo{transition:none}}

/* ---------- the founder ----------
   Phone first: the portrait sits above the words and only goes side by side
   once there is room for both. */
.founder{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(44px,7vw,96px);border-top:1px solid var(--line)}
.fportrait{position:relative;border:1px solid var(--line);overflow:hidden;max-width:420px;
  transition:border-color .5s var(--ease)}
.fportrait img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.04);
  transition:filter .9s var(--ease),transform 1.2s var(--ease)}
.fportrait:hover img,.fportrait.hot img{filter:grayscale(0) contrast(1);transform:scale(1.02)}
.fportrait:hover,.fportrait.hot{border-color:var(--line-2)}
.fbadge{position:absolute;inset-block-end:0;inset-inline-start:0;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-2);background:rgba(10,10,10,.78);backdrop-filter:blur(8px);
  padding:8px 13px;border-top:1px solid var(--line);border-inline-end:1px solid var(--line)}
.fbody h2{margin-top:14px}
.fbody .frole{color:var(--bone-3);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
.fbody p + p{margin-top:16px}
.fbody > p:not(.frole){color:var(--bone-2);max-width:54ch}
@media (min-width:900px){
  .founder{grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,80px)}
  .fportrait{max-width:none}
}

/* ---------- the assistant ----------
   Phone first: on a phone it takes the whole screen, because a 380px panel on a
   390px viewport is a panel pretending it is not full screen. On a desktop it
   is a card in the corner. Same black and white as the rest of the site. */
.cbtn{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:60;width:58px;height:58px;
  border-radius:50%;border:1px solid var(--line-2);background:var(--bone);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 18px 40px rgba(0,0,0,.55);transition:transform .5s var(--ease),opacity .4s var(--ease)}
.cbtn svg{width:24px;height:24px}
.cbtn:hover{transform:translateY(-3px) scale(1.04)}
.cbtn .x{display:none}
.cbtn[aria-expanded="true"] .x{display:block}
.cbtn[aria-expanded="true"] .b{display:none}

.cnudge{position:fixed;inset-block-end:92px;inset-inline-end:22px;z-index:60;max-width:270px;
  background:var(--ink-2);border:1px solid var(--line-2);color:var(--bone-2);font-size:13.5px;line-height:1.5;
  padding:14px 38px 14px 16px;box-shadow:0 22px 50px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cnudge.in{opacity:1;transform:none}
.cnudge b{color:var(--bone);font-weight:600}
.cnudge .close{position:absolute;top:6px;inset-inline-end:8px;background:none;border:0;color:var(--bone-3);
  font-size:17px;line-height:1;cursor:pointer;padding:4px 6px}
.cnudge .close:hover{color:var(--bone)}

.cpanel{position:fixed;inset-block-end:92px;inset-inline-end:22px;z-index:61;width:382px;height:min(560px,70vh);
  background:var(--ink);border:1px solid var(--line-2);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.7);opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cpanel.open{opacity:1;transform:none;pointer-events:auto}
.chead{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);flex:none}
.chead img{height:22px;width:auto}
.chead .who{font-size:13.5px;font-weight:600;line-height:1.25}
.chead .st{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);
  display:flex;align-items:center;gap:6px}
.chead .st i{width:6px;height:6px;border-radius:50%;background:#5fd08a;display:block}
.chead .cx{margin-inline-start:auto;background:none;border:0;color:var(--bone-3);cursor:pointer;padding:8px;
  line-height:0}
.chead .cx:hover{color:var(--bone)}
.chead .cx svg{width:18px;height:18px}

.clog{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;overscroll-behavior:contain}
.cmsg{max-width:84%;font-size:14px;line-height:1.55;padding:11px 14px;white-space:pre-wrap;word-wrap:break-word}
.cmsg.bot{align-self:flex-start;background:var(--ink-2);border:1px solid var(--line);color:var(--bone-2)}
.cmsg.me{align-self:flex-end;background:var(--bone);color:var(--ink);font-weight:400}
.cdots{display:inline-flex;gap:5px;align-items:center;height:12px}
.cdots i{width:5px;height:5px;border-radius:50%;background:var(--bone-3);display:block;animation:cdot 1.3s infinite}
.cdots i:nth-child(2){animation-delay:.18s}
.cdots i:nth-child(3){animation-delay:.36s}
@keyframes cdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.cform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex:none;
  padding-block-end:calc(12px + env(safe-area-inset-bottom))}
.cform input{flex:1;background:var(--ink-2);border:1px solid var(--line);color:var(--bone);
  font-family:var(--sans);font-size:14px;padding:12px 14px;min-height:44px}
.cform input::placeholder{color:var(--bone-3)}
.cform input:focus{outline:none;border-color:var(--line-2)}
.cform button{flex:none;width:44px;min-height:44px;background:var(--bone);color:var(--ink);border:0;cursor:pointer;
  display:grid;place-items:center}
.cform button svg{width:18px;height:18px}
.cform button:disabled{opacity:.45;cursor:default}

@media (max-width:680px){
  .cpanel{inset:0;width:auto;height:auto;max-height:none;border:0;transform:translateY(100%)}
  .cpanel.open{transform:none}
  .chead{padding-block-start:calc(15px + env(safe-area-inset-top))}
  .cmsg{max-width:88%}
  .cbtn{inset-block-end:18px;inset-inline-end:18px;width:54px;height:54px}
  .cnudge{inset-block-end:82px;inset-inline-end:18px;max-width:calc(100vw - 36px)}
}
body.chat-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .cbtn,.cnudge,.cpanel{transition:none}
  .cdots i{animation:none;opacity:.6}
}

/* ---------- reel collages: four reels side by side, silent; one opens with sound ---------- */
/* every frame is 9:4, the exact shape of four 9:16 reels side by side */
.reel-frame.collage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8) saturate(.85);transition:filter .8s var(--ease)}
.reel:hover .reel-frame.collage video,.reel.hot .reel-frame.collage video{filter:none}
.taps{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);z-index:1}
.tap{position:relative;border:0;padding:0;background:transparent;cursor:pointer;color:var(--bone)}
.tap+.tap{box-shadow:inset 1px 0 0 rgba(10,10,10,.7)}
.tap::after{content:'';position:absolute;inset:0;background:rgba(245,244,242,.08);opacity:0;transition:opacity .35s var(--ease)}
.tap:hover::after,.tap:focus-visible::after{opacity:1}
.tap:focus-visible{outline:1px solid var(--bone);outline-offset:-4px}
.tplay{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1px solid var(--bone);display:grid;place-items:center;background:rgba(10,10,10,.4);backdrop-filter:blur(3px);
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.tplay svg{width:15px;height:15px;margin-left:2px}
.tap:hover .tplay,.tap:focus-visible .tplay{opacity:1;transform:none;background:var(--bone);color:var(--ink)}
.reel.hot .tplay{opacity:1;transform:none}            /* a phone has no hover, so show every play while the card is centred */
.reel-frame.collage .grid4,.reel-frame.collage .scrub{z-index:2;pointer-events:none}
@media (max-width:680px){.tplay{width:32px;height:32px;margin:-16px 0 0 -16px}.tplay svg{width:12px;height:12px}}

/* the player: one reel at a time, full height, with its own sound */
.reelbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--bone)}
.reelbox::backdrop{background:rgba(5,5,5,.92);backdrop-filter:blur(6px)}
.reelbox[open]{display:grid;place-items:center}
.reelbox video{display:block;width:min(calc(100vw - 32px),calc((100vh - 130px) * 9 / 16));width:min(calc(100vw - 32px),calc((100dvh - 130px) * 9 / 16));height:auto;aspect-ratio:9/16;
  background:#000;border:1px solid var(--line-2)}
.reelbox .rb-btn{position:fixed;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(10,10,10,.6);color:var(--bone);display:grid;place-items:center;cursor:pointer;font:300 24px/1 var(--sans);
  transition:background .3s var(--ease),color .3s var(--ease)}
.reelbox .rb-btn:hover,.reelbox .rb-btn:focus-visible{background:var(--bone);color:var(--ink)}
.reelbox .rb-close{top:16px;right:16px}
.reelbox .rb-prev{left:16px;top:50%;margin-top:-23px}
.reelbox .rb-next{right:16px;top:50%;margin-top:-23px}
.reelbox .rb-count{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}
@media (max-width:680px){.reelbox .rb-prev,.reelbox .rb-next{top:auto;bottom:10px;margin-top:0}.reelbox .rb-count{bottom:24px}}

/* ---------- our work: one section, numbered parts (reels, shoots, branding, stores) ---------- */
.wsub{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:clamp(44px,6vw,84px) 0 clamp(18px,2.6vw,28px);
  padding-top:18px;border-top:1px solid var(--line)}
.shead+.wsub{margin-top:clamp(26px,4vw,48px)}
.wsub .n{font-size:11px;letter-spacing:.2em;color:var(--bone-3);font-variant-numeric:tabular-nums}
.wsub h3{font-size:clamp(1.45rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.wsub p{margin-left:auto;font-size:14px;color:var(--bone-3)}
.wsub p a{color:var(--bone-2);border-bottom:1px solid var(--line-2)}
.wsub p a:hover{color:var(--bone)}
@media (max-width:680px){.wsub p{margin-left:0;flex-basis:100%}}

/* no scroll band under reduced motion, so the work is simply shown in colour */
@media (prefers-reduced-motion:reduce){.case .shot img,.sitecard .shot img,.fportrait img{filter:none}}