/* 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');

: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:20px 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:13px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:auto;height:30px}
.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) ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:150px;padding-bottom:clamp(26px,5vh,58px);position:relative;overflow:hidden}
#flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5}
.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 wordmark, written on load ----------
   A clipping wrapper that grows from zero, so the script appears left to right
   the way it was drawn. Deliberately NOT a CSS mask: mask-image is subject to
   CORS and renders nothing over file://, which is how this gets previewed. */
.signature{--sigw:clamp(160px,22vw,320px);display:block;margin-bottom:clamp(8px,1.6vw,20px)}
.signature .ink{display:block;width:var(--sigw);overflow:hidden}
.signature img{width:var(--sigw);max-width:none;height:auto;display:block}
.signature.draw .ink{width:0}
.signature.draw.on .ink{width:var(--sigw);transition:width 1.7s var(--ease) .3s}

/* ---------- 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 zero claim ---------- */
.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)}
  .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{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:28px;height:28px}
.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 ---------- */
.reels{padding-block:clamp(50px,8vw,120px)}
.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:16/8.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)}
  .reelgrid .reel:first-child{grid-column:span 2}
  .reelgrid .reel:first-child .reel-frame{aspect-ratio:16/6.6}
}
@media (prefers-reduced-motion:reduce){.reel-rail .rec i{animation:none}}

/* ---------- gold, used in exactly one place ----------
   Glamour and Faruk Kocer are the two showcase stores, so their cards warm up
   on hover. Nothing else on the site uses this colour. */
.sitecard.gold:hover .frame{border-color:var(--gold-soft);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(200,161,90,.14)}
.sitecard.gold:hover .chrome .url{color:var(--gold);border-color:var(--gold-soft)}
.sitecard.gold:hover .shot img{filter:grayscale(0) saturate(1.05)}
.sitecard.gold .sideinfo .eyebrow{transition:color .4s var(--ease)}
.sitecard.gold:hover .sideinfo .eyebrow{color:var(--gold)}
.sitecard.gold:hover .tags li{border-color:var(--gold-soft);color:var(--bone-2)}
.sitecard.gold .btn.fill:hover{background:var(--gold);border-color:var(--gold);color:#120d04}

/* ---------- 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:26px}
  header{padding-block:14px}
  .btn.small{padding:9px 14px;font-size:12px}
  .hero{padding-top:118px}
  .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}