/* Reel Media Marketing — shared styles */
:root{
  --bg:#1E1E20; --bg-2:#000; --text:#fff; --muted:#8E9095; --display:#5A5D62;
  --tile:#2A2B2E; --tile-2:#343539; --card:#D4D5D9; --card-text:#1E1E20;
  --accent:#F2B632; --on-accent:#141414;
  --line:rgba(255,255,255,.12); --border:rgba(255,255,255,.45);
  --gut:clamp(1rem,2.5vw,1.75rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.1rem;line-height:1.45;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.pad{padding-inline:var(--gut)}
.bg-a{background:var(--bg)}.bg-b{background:var(--bg-2)}
.muted{color:var(--muted)}
.display{font-family:"Anton","Impact","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;color:var(--display);line-height:.88;margin:0;letter-spacing:.005em}
.lede{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.35;max-width:34ch;margin:0}
.lede b{font-weight:500}
.lede span{color:var(--muted)}
.eyebrow{font-size:.95rem;color:var(--muted);margin:0 0 1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:8px;padding:.7rem 1.2rem;font-size:1.1rem;font-weight:500;transition:background .25s,color .25s,border-color .25s;cursor:pointer;background:transparent;color:var(--text);white-space:nowrap}
.btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.fill{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.fill:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
@media (max-width:480px){.btn{white-space:normal}}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,transform .35s var(--ease)}
.top.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top.hide{transform:translateY(-100%)}
.top .in{display:flex;justify-content:space-between;align-items:center;padding-block:1.25rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.reel-icon{width:30px;height:30px;color:var(--text)}
.logo img{height:clamp(46px,5vw,58px);width:auto;display:block;margin-block:-.6rem;transition:transform .35s var(--ease)}
.logo:hover img{transform:rotate(-3deg) scale(1.05)}
.foot-logo{display:inline-block !important;margin-top:.4rem}
.foot-logo img{width:clamp(180px,18vw,240px);height:auto;display:block;transition:transform .35s var(--ease)}
.foot-logo:hover img{transform:rotate(-2deg) scale(1.04)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2.2rem;align-items:center}
.nav a:not(.btn){font-weight:500;transition:color .2s}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--accent)}
.nav .btn{font-size:1rem;padding:.55rem 1.15rem}
.menu-btn{display:none;background:none;border:0;padding:.5rem;margin-right:-.5rem;cursor:pointer}
.menu-btn span{display:block;width:26px;height:2px;background:var(--text);margin:6px 0;transition:transform .3s,opacity .3s}
@media (max-width:820px){
  .nav .hide-sm{display:none}
  .menu-btn{display:block}
  .nav ul{gap:.8rem}
}
body.menu-open{overflow:hidden}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:45;background:var(--bg-2);padding:6.5rem var(--gut) 2rem;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
body.menu-open .drawer{opacity:1;visibility:visible}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li a{display:block;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(3rem,15vw,5rem);line-height:1;color:var(--display);padding:.1em 0;transition:color .2s}
.drawer li a:hover,.drawer li a[aria-current="page"]{color:var(--text)}
.drawer .meta{color:var(--muted);font-size:1rem;display:grid;gap:.3rem}

/* page hero (inner pages) */
.phero{padding-top:clamp(7.5rem,14vw,10rem);padding-bottom:clamp(3rem,6vw,5rem)}
.phero .display{font-size:clamp(4.2rem,17vw,17rem)}
.phero .row{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(2rem,5vw,4.5rem)}
.crumb{color:var(--muted);font-size:1rem;margin:0 0 1.2rem}
h1.seo{margin:0;font-weight:400}
h1.seo .kw{display:block;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:500;color:var(--accent);margin-bottom:1.2rem;letter-spacing:-.005em}
h1.seo .display{display:block}
.svc-page .phero .display{font-size:clamp(3.4rem,13vw,14rem)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.related a{border:1px solid var(--line);border-radius:10px;padding:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.15rem;transition:border-color .25s,background .25s}
.related a:hover{border-color:var(--accent);background:var(--tile)}
.related a span{color:var(--accent)}
.areas{color:var(--muted);font-size:1rem;margin:3rem 0 0;max-width:60ch}
.areas b{color:var(--text);font-weight:500}
.crumb a:hover{color:var(--text)}

/* media slot: gradient placeholder; an <img> inside covers it once the file exists */
.media{position:relative;overflow:hidden;border-radius:8px;background:var(--tile);isolation:isolate}
.media>img,.media>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;z-index:1;transition:transform 1s var(--ease)}
.media .zoom{position:absolute;inset:0;transition:transform 1s var(--ease);display:grid;place-items:center}
.media .mark{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;color:rgba(255,255,255,.9);font-size:clamp(1.8rem,4vw,3.4rem);line-height:.9;text-align:center;padding:0 1.5rem}
.media .hint{position:absolute;left:1rem;bottom:.85rem;font-size:.78rem;color:rgba(255,255,255,.55);z-index:1}
.hint{display:none}
.dev .media .hint{display:block}
.dev .media>img~.hint{display:none}
.g1{background:linear-gradient(150deg,#1D4A55 0%,#0B1C21 80%)}
.g2{background:linear-gradient(150deg,#6B2130 0%,#1A0A0E 80%)}
.g3{background:linear-gradient(150deg,#3A3C44 0%,#0C0D10 80%)}
.g4{background:linear-gradient(150deg,#9A6224 0%,#241507 80%)}
.g5{background:linear-gradient(150deg,#3B5F8A 0%,#101B29 80%)}
.g6{background:linear-gradient(150deg,#4E6B3E 0%,#131C0F 80%)}
.g7{background:linear-gradient(150deg,#7A3E1C 0%,#1F0F07 80%)}
.g8{background:linear-gradient(150deg,#5B4A7A 0%,#151020 80%)}
.play{position:absolute;z-index:2;right:1rem;bottom:1rem;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:.35s var(--ease)}
.play::after{content:"";border-left:13px solid #141414;border-block:8px solid transparent;margin-left:4px}

/* work cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem 1.6rem}
@media (max-width:760px){.cards{grid-template-columns:1fr;gap:3rem}}
.card .media{aspect-ratio:3/2}
.card:hover .zoom,.card:hover .media>img{transform:scale(1.04)}
.card:hover .play,.card:focus-visible .play{opacity:1;transform:none}
.card .cap{margin-top:.8rem;font-size:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.card .cap span{color:var(--muted)}
.card .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.tag{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.15rem .65rem;color:var(--muted)}
.card[hidden]{display:none}
.card.soon{cursor:default}
.card.soon .cap::after{content:"Case study soon";font-size:.85rem;color:var(--muted)}

/* section heads */
.sec{padding-block:clamp(5rem,9vw,8rem)}
.sec-head .display{font-size:clamp(4rem,11vw,10rem)}
.sec-head{margin-bottom:clamp(3rem,6vw,5rem)}
.sec-head.split{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.center{text-align:center;margin-top:4.5rem}

/* tiles (results) */
/* Results: giant gold numbers that count up, with a gold line that draws in under each */
.bignums{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.bignum{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;align-items:center;gap:1rem 2.5rem;padding:clamp(1.4rem,3vw,2.4rem) 0;color:var(--text)}
.bignum::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.bignum::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .25s;z-index:1}
.bignum.in::before{transform:scaleX(1)}
.bignum strong{grid-column:1;grid-row:1;font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(4.5rem,12vw,11rem);line-height:.85;color:var(--accent);letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:transform .6s var(--ease),text-shadow .6s}
.bignum .unit{grid-column:1;grid-row:2;margin-top:.5rem;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bignum .who{grid-column:2;grid-row:1/3;font-size:1.05rem;line-height:1.45;color:var(--muted)}
.bignum .who b{display:block;color:var(--text);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:.3rem}
.bignum .go{grid-column:3;grid-row:1/3;width:56px;height:56px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:1.2rem;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.bignum:hover strong,.bignum:focus-visible strong{transform:translateX(12px);text-shadow:0 0 40px rgba(242,182,50,.35)}
.bignum:hover .go,.bignum:focus-visible .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(-45deg)}
@media (max-width:760px){
  .bignum{grid-template-columns:minmax(0,1fr) auto;gap:0 1rem}
  .bignum strong,.bignum .unit{grid-column:1}
  .bignum .who{grid-column:1/-1;grid-row:3;margin-top:.4rem}
  .bignum .go{grid-column:2;grid-row:1;width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){ .bignum::before{transform:scaleX(1);transition:none} }

/* programs (services page, rno1-style) */
.program{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--line)}
.program:first-of-type{border-top:0}
.program .aside{position:sticky;top:6.5rem;align-self:start}
.program .aside .media{aspect-ratio:4/3}
.program .aside .cap{margin-top:.8rem}
.program .aside .cap b{display:block;font-weight:500}
.program .aside .cap span{color:var(--muted)}
.program .display{font-size:clamp(4.5rem,11vw,10rem)}
/* program text: bold one-line summary, then an easy-to-read paragraph */
.program .desc{margin:1.6rem 0 3rem;max-width:42ch;font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.6}
.program .desc b{display:block;margin-bottom:.55rem;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.25;font-weight:600;color:var(--text)}
.program .desc span{color:var(--text);opacity:.78}
/* what's included: cards with checkmarks in the program's color, always readable */
.program{--pc:var(--accent)}
#social{--pc:#3FC7D4}#video{--pc:#FF5A5F}#photo-program{--pc:#8C7CFF}#web{--pc:#FF9A3C}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.group{background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem 1.4rem;transition:border-color .6s,transform .6s var(--ease)}
.group h3{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-size:clamp(1.15rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.01em;color:var(--text)}
.group h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--pc);flex:none}
.group ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.group li{position:relative;padding-left:1.7rem;line-height:1.4;color:var(--text);opacity:.85}
.group li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--pc)}
.group.on{border-color:var(--pc)}
@media (max-width:560px){ .groups{grid-template-columns:1fr} }@media (max-width:860px){
  .program{grid-template-columns:1fr}
  .program .aside{position:static;order:2}
}

/* benefits */
.benefits .display{font-size:clamp(2.6rem,6vw,5rem);max-width:16ch}
.bens{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 2rem;margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:980px){.bens{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bens{grid-template-columns:1fr}}
.ben .num{font-family:"Anton",Impact,sans-serif;font-size:3.2rem;color:var(--accent);line-height:1;display:block;margin-bottom:1.4rem}
.ben h3{margin:0 0 .6rem;font-size:1.35rem;font-weight:500}
.ben p{margin:0;color:var(--muted);font-size:1.02rem}

/* wins rail */
.wins-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.wins-head p{max-width:40ch}
.rail-ctl{display:flex;gap:.5rem}
.rail-ctl button{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:1.2rem;transition:background .2s,color .2s}
.rail-ctl button:hover{background:var(--text);color:var(--bg)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,28vw,380px);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:3rem var(--gut) 1rem;margin-inline:calc(var(--gut) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.win{scroll-snap-align:start;aspect-ratio:4/5;border-radius:10px;background:var(--tile);padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.win:hover{background:var(--tile-2)}
.win strong{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(2.6rem,4.5vw,4rem);line-height:.92;display:block;margin-bottom:.8rem}
.win p{margin:0;font-size:1.1rem}
.win .kind{font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.win.hl{background:var(--accent);color:var(--on-accent)}
.win.hl .kind{color:inherit;opacity:.7}

/* price cards */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:860px){.prices{grid-template-columns:1fr}}
.price{border:1px solid var(--line);border-radius:10px;padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem;transition:border-color .3s}
.price:hover{border-color:var(--border)}
.price .amt{font-family:"Anton",Impact,sans-serif;font-size:clamp(3.5rem,6vw,5rem);line-height:.9}
.price h3{margin:0;font-size:1.35rem;font-weight:500}
.price .len{color:var(--muted);font-size:1rem}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;color:var(--muted);font-size:1rem;flex:1}
.price ul li::before{content:"— ";color:var(--display)}
.price.hl{background:var(--card);color:var(--card-text);border-color:var(--card)}
.price.hl .len,.price.hl ul,.price.hl ul li::before{color:#55575C}
.price.hl .btn{border-color:rgba(0,0,0,.35);color:var(--card-text)}
.price.hl .btn:hover{background:var(--card-text);color:var(--card)}

/* offer card (audit) */
.offer{background:var(--card);color:var(--card-text);border-radius:12px;padding:clamp(2rem,5vw,4.5rem)}
.offer small{display:block;font-size:.9rem;margin-bottom:.4rem}
.offer .display{color:var(--card-text);font-size:clamp(3rem,7.5vw,6.2rem)}
.offer .body{display:grid;grid-template-columns:1fr 1.2fr;margin-top:3rem;gap:2rem}
.offer .body>div{grid-column:2}
@media (max-width:760px){.offer .body{grid-template-columns:1fr}.offer .body>div{grid-column:1}}
.offer p{margin:0 0 2rem;font-size:1rem;line-height:1.5}
.offer p b{font-weight:600}
.inline-form{display:flex;gap:.5rem;border:1px solid rgba(30,30,32,.3);border-radius:10px;padding:.35rem;flex-wrap:wrap}
.inline-form input{flex:1 1 10rem;min-width:0;background:transparent;border:0;color:var(--card-text);font:inherit;font-size:1rem;padding:.5rem .7rem}
.inline-form input:focus{outline:none}
.inline-form input::placeholder{color:rgba(30,30,32,.55)}
.inline-form button{background:var(--bg);color:var(--text);border:0;border-radius:7px;padding:.6rem 1.1rem;font-size:1rem;font-weight:500;cursor:pointer;white-space:nowrap;flex:none}
.inline-form button:hover{background:#000}
.form-note{margin:.8rem 0 0;font-size:.92rem;min-height:1.3em}

/* quote */
.quote{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center}
@media (max-width:860px){.quote{grid-template-columns:1fr}}
.quote blockquote{margin:0}
.quote blockquote p{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 1.4rem}
.quote cite{font-style:normal;color:var(--muted)}
/* vertical (Shorts) videos: sharp phone-shaped thumbnail centered on black */
.cover.short{background:#000}
.cover.short>img{left:50%;right:auto;width:auto;height:100%;aspect-ratio:9/16;translate:-50% 0;object-fit:cover}
/* "Built by Reel Media" feature cards (web page) */
.built{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:980px){.built{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.built{grid-template-columns:1fr}}
.bcard{background:var(--tile);border-radius:14px;padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;transition:background .3s,transform .4s var(--ease)}
.bcard:hover{background:var(--tile-2);transform:translateY(-4px)}
.bcard .num{font-family:"Anton",Impact,sans-serif;font-size:2.4rem;line-height:1;color:var(--accent)}
.bcard h3{margin:0;font-size:1.25rem;font-weight:500}
.bcard p{margin:0;color:var(--muted);font-size:1rem;flex:1}
.bcard .btn{align-self:flex-start;font-size:.95rem;padding:.55rem 1rem}
/* testimonial "phones": vertical videos as tilted phone cards with a gold glow */
.phones{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(1rem,2.6vw,2rem);padding:1.5rem 0 2.5rem;isolation:isolate}
.phones::before{content:"";position:absolute;inset:-10% -5%;z-index:-1;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);pointer-events:none}
.media.phone{width:clamp(140px,16vw,230px);aspect-ratio:9/16;flex:none;padding:0;display:block;border-radius:28px;border:7px solid #0e0e10;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-4deg);transition:transform .5s var(--ease),box-shadow .5s}
.media.phone:nth-child(2){transform:rotate(4deg) translateY(2rem)}
.media.phone::after{content:"";position:absolute;z-index:3;top:7px;left:50%;width:30%;height:13px;border-radius:10px;background:#0e0e10;translate:-50% 0;pointer-events:none}
.media.phone:hover,.media.phone:focus-visible{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:0 40px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
.media.phone:nth-child(2):hover,.media.phone:nth-child(2):focus-visible{transform:rotate(0) translateY(1.2rem) scale(1.03)}

.media.phone .pb{width:58px;height:58px;margin:-29px 0 0 -29px}
.media.phone .pb::after{border-left-width:16px;border-block-width:10px;margin-left:5px}
.media.phone .lbl{left:0;right:0;bottom:0;padding:2.2rem .9rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.75));font-weight:600;color:#fff}
.phones .media.phone{background:#000}
.phones .media.phone:has(iframe),.phones .media.phone:nth-child(2):has(iframe){transform:none} /* straighten up while playing */
@media (max-width:560px){.media.phone{width:clamp(130px,40vw,190px);border-width:6px;border-radius:24px}}
/* two vertical (Shorts) testimonials side by side */
.testis{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:560px;justify-self:end}
@media (max-width:860px){.testis{justify-self:stretch;max-width:none}}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:760px){.faq{grid-template-columns:1fr}}
.faq .display{font-size:clamp(4rem,9vw,8rem)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:1.1rem;align-items:center;padding:1.4rem 0;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.pm{width:20px;height:20px;flex:none;position:relative}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .3s}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}
.faq .ans{margin:0 0 1.4rem 2.35rem;color:var(--muted);max-width:52ch;font-size:1.05rem}

/* forms (contact) */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem}
.form .full{grid-column:1/-1}
.form fieldset{min-width:0}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.field label{display:block;font-size:.95rem;color:var(--muted);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit;font-size:1.15rem;padding:.55rem 0;border-radius:0;transition:border-color .2s}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.field select option{background:var(--bg);color:var(--text)}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.field .chips label{display:inline-block;margin:0}
.field .chips label{position:relative}
.field .chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.45rem .95rem;font-size:1rem;color:var(--text);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px}

/* filter chips (work) */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:3rem}
.filters button{border:1px solid var(--border);background:transparent;border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;font-size:1rem;transition:background .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--text)}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* case study */
.cover{aspect-ratio:16/9;width:100%;border:0;padding:0;cursor:pointer;display:block}
.cover[data-video=""]{cursor:default}
.cover .pb{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .35s;z-index:2}
.cover .pb::after{content:"";border-left:24px solid #141414;border-block:14px solid transparent;margin-left:7px}
.cover:hover .pb{transform:scale(1.08)}
.cover .lbl{position:absolute;left:1.3rem;bottom:1.1rem;font-size:.95rem;color:rgba(255,255,255,.8);z-index:2}
.cover[data-video=""] .pb{display:none}
.overview{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem}
@media (max-width:860px){.overview{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 1.5rem;align-content:start}
.facts h3{margin:0 0 .35rem;font-size:1rem;font-weight:600}
.facts p,.facts li{margin:0;color:var(--muted);font-size:1rem}
.facts ul{list-style:none;margin:0;padding:0}
.big{font-size:clamp(1.4rem,2.5vw,2.2rem);line-height:1.25;margin:0 0 1.8rem;letter-spacing:-.01em}
.big span{color:var(--muted)}
.prose p{color:var(--muted);max-width:58ch;margin:0 0 1rem}
.chapter{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem}
@media (max-width:860px){.chapter{grid-template-columns:1fr;gap:1.2rem}}
.chapter .display{font-size:clamp(3rem,6.5vw,5.6rem)}
.chapter p{margin:0 0 1.1rem;max-width:58ch;font-size:1.15rem}
.chapter p.muted{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.s-wide{grid-column:span 12;aspect-ratio:21/9}
.s-half{grid-column:span 6;aspect-ratio:4/5}
.s-third{grid-column:span 4;aspect-ratio:9/16}
.s-third.p45{aspect-ratio:4/5}
.zoomable{cursor:zoom-in}
.zoomable:hover>img{transform:scale(1.03)}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:4rem 4.5rem;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain;border-radius:6px}
.lightbox button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(0,0,0,.5);color:#fff;font-size:1.3rem;cursor:pointer}
.lightbox button:hover{background:#fff;color:#000}
.lb-x{top:1rem;right:1rem}.lb-p{left:1rem;top:50%;margin-top:-24px}.lb-n{right:1rem;top:50%;margin-top:-24px}
@media (max-width:700px){.lightbox{padding:4rem .5rem}.lb-p,.lb-n{top:auto;bottom:1rem;margin:0}.lb-p{left:calc(50% - 56px)}.lb-n{right:calc(50% - 56px)}}
.s-land{grid-column:span 6;aspect-ratio:3/2}
@media (max-width:700px){.s-half,.s-land{grid-column:span 12}.s-third{grid-column:span 6}.s-wide{aspect-ratio:4/3}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
.stat{border-radius:10px;background:var(--tile);padding:1.6rem;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:space-between}
.stat strong{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(3.4rem,7vw,6rem);line-height:.9}
.stat p{margin:0;font-size:1.05rem;max-width:26ch}
.stat.hl{background:var(--accent);color:var(--on-accent)}
.deliver ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 2rem}
@media (max-width:760px){.deliver ul{grid-template-columns:1fr}}
.deliver li{padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.2rem}
.deliver h2{font-size:1rem;font-weight:600;margin:0 0 1rem}
.next{display:block;padding-block:5rem 6rem}
.next small{display:block;color:var(--muted);font-size:1rem;margin-bottom:.6rem}
.next .display{font-size:clamp(3rem,12vw,13rem);transition:color .35s}
.next:hover .display{color:var(--text)}
.next .btn{margin-top:1.8rem}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-grid .media{aspect-ratio:4/5}
.about-grid .prose p{font-size:1.15rem}
.about-grid .prose p:first-child{color:var(--text)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.value{border-top:1px solid var(--line);padding-top:1.4rem}
.value h3{margin:0 0 .5rem;font-size:1.35rem;font-weight:500}
.value p{margin:0;color:var(--muted)}

/* footer */
footer.foot{padding-block:3rem 2rem;background:var(--bg-2)}
footer.foot .display{font-size:clamp(4.5rem,17vw,16rem);display:flex;justify-content:center;gap:.22em;flex-wrap:wrap;margin-bottom:5rem;transition:color .4s}
footer.foot .display:hover{color:var(--accent)}
footer.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr 1.3fr;gap:2rem;font-size:1rem}
@media (max-width:760px){footer.foot .cols{grid-template-columns:1fr 1fr}footer.foot .first{grid-column:1/-1}}
footer.foot h4{margin:0 0 .5rem;font-weight:600;font-size:1rem}
footer.foot .cols a,footer.foot .cols span{color:var(--muted);display:block;margin-bottom:.45rem}
footer.foot .cols a:hover{color:var(--text)}
footer.foot .first>div{margin-bottom:1.6rem}

/* ---------- motion ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* headline letters rise in */
.js .split .w{display:inline-block;white-space:nowrap}
.js .split .ch{display:inline-block;opacity:0;transform:translateY(.45em) rotate(4deg);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.js .split.lit .ch{opacity:1;transform:none}

/* 3D text ring (home hero + page heroes) */
.ring{position:relative;transform-style:preserve-3d;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;color:var(--display);height:1em;width:1px;line-height:1;animation:ring-spin 34s linear infinite}
.ring span{position:absolute;left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block;text-align:center}
@keyframes ring-spin{to{transform:rotateY(-360deg)}}
.phero{position:relative}
.phero-ring{position:absolute;right:clamp(8rem,17vw,16rem);top:clamp(7rem,12vw,10rem);perspective:1100px;pointer-events:none;display:grid;place-items:center;width:1px;height:12rem}
.phero-ring::before{content:"";position:absolute;width:26rem;height:18rem;left:-13rem;top:-3rem;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%)}
.phero-ring .tilt{transform:rotateX(-10deg) rotateZ(-6deg);transform-style:preserve-3d}
.phero-ring .ring{font-size:clamp(2rem,3.4vw,3.2rem);color:color-mix(in srgb,var(--text) 55%,var(--display))}
@media (max-width:900px){.phero-ring{display:none}}

/* animated logo mascot (page heroes) */
.mascot{position:absolute;right:var(--gut);top:clamp(6.5rem,10vw,8.5rem);width:clamp(300px,33vw,500px);z-index:1}
.mascot::before{content:"";position:absolute;inset:-18% -8%;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%);pointer-events:none}
.mascot::after{content:"";position:absolute;left:22%;right:22%;bottom:-6%;height:9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);animation:m-shadow 3.2s ease-in-out infinite alternate}
.m-wrap{position:relative;animation:m-float 3.2s ease-in-out infinite alternate}
.m-wrap img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.m-wrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-reel,.m-face,.m-eyes{transform-box:view-box}
.m-reel{transform-origin:560px 377px;animation:m-spin 6s linear infinite}
.m-face{transform-origin:560px 377px;animation:m-wobble 2.8s ease-in-out infinite alternate}
.m-eyes{transform-origin:560px 358px;animation:m-blink 5s infinite}
.mascot:hover .m-reel{animation-duration:1.1s}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-wobble{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes m-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes m-float{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-14px) rotate(1.2deg)}}
@keyframes m-shadow{from{transform:scaleX(1);opacity:.9}to{transform:scaleX(.8);opacity:.5}}
@media (max-width:900px){
  .mascot{position:relative;right:auto;top:auto;width:min(80vw,360px);margin:0 auto 2.2rem}
}

/* Reely chat helper */
.reely-btn{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:44;width:104px;height:92px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));animation:r-bob 2.6s ease-in-out infinite alternate}
.reely-btn svg{width:100%;height:100%;display:block;overflow:visible}
.reely-btn:hover .m-reel,.reely.thinking .m-reel{animation-duration:.9s}
.reely-btn .dot{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);animation:r-pulse 1.6s ease-in-out infinite}
.reely.open .reely-btn .dot,.reely.seen .reely-btn .dot{display:none}
@keyframes r-bob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-6px) rotate(4deg)}}
@keyframes r-pulse{50%{transform:scale(1.25)}}
.reely-tip{position:fixed;right:calc(clamp(12px,2vw,24px) + 108px);bottom:calc(clamp(12px,2vw,24px) + 40px);z-index:44;background:var(--card);color:var(--card-text);border-radius:14px 14px 4px 14px;padding:.65rem .9rem;font-size:.95rem;font-weight:500;max-width:220px;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.reely-tip.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.reely.open .reely-tip{display:none}
.reely-panel{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(clamp(12px,2vw,24px) + 104px);z-index:44;width:min(380px,calc(100vw - 24px));height:min(600px,calc(100svh - 140px));display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .3s,transform .35s var(--ease),visibility .3s}
.reely.open .reely-panel{opacity:1;visibility:visible;transform:none}
.reely-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--bg-2);border-bottom:1px solid var(--line)}
.reely-head svg{width:52px;height:52px;flex:none}
.reely-head b{display:block;font-size:1.05rem;font-weight:600}
.reely-head small{display:block;color:var(--muted);font-size:.8rem}
.reely-head small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#46c46a;margin-right:.35rem;vertical-align:1px}
.reely-x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:1.2rem;cursor:pointer}
.reely-x:hover{background:var(--text);color:var(--bg)}
.reely-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;scroll-behavior:smooth;overscroll-behavior:contain}
.r-msg{max-width:86%;padding:.65rem .85rem;border-radius:14px;font-size:.95rem;line-height:1.45;animation:r-in .35s var(--ease)}
.r-msg a{color:var(--accent);text-decoration:underline}
.r-msg p{margin:0 0 .45rem}.r-msg p:last-child{margin:0}
.r-msg ul{margin:.3rem 0 .45rem;padding-left:1.1rem}
.r-bot{align-self:flex-start;background:var(--tile);border-bottom-left-radius:4px}
.r-you{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.r-typing{display:inline-flex;gap:4px;padding:.8rem .9rem}
.r-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:r-dot 1s infinite}
.r-typing i:nth-child(2){animation-delay:.15s}.r-typing i:nth-child(3){animation-delay:.3s}
@keyframes r-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes r-in{from{opacity:0;transform:translateY(6px)}}
.r-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-self:flex-start;max-width:100%}
.r-chips button,.r-chips a{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;padding:.4rem .8rem;font-size:.88rem;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.r-chips button:hover,.r-chips a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.reely-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:var(--bg-2)}
.reely-form input{flex:1;min-width:0;background:var(--tile);border:1px solid transparent;border-radius:999px;color:var(--text);font:inherit;font-size:.95rem;padding:.65rem 1rem}
.reely-form input:focus{outline:none;border-color:var(--accent)}
.reely-form button{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:1.1rem;cursor:pointer}
.reely-form button:disabled{opacity:.4;cursor:default}
body.menu-open .reely{display:none}
/* Reely's case study cards and booking form */
.r-msg:has(.r-case){padding:0;background:transparent;max-width:92%}
.r-case{background:var(--tile);border-radius:14px;overflow:hidden;display:grid;gap:.15rem;padding-bottom:.8rem;animation:r-in .4s var(--ease)}
.r-case-media{aspect-ratio:16/9;border-radius:0;margin-bottom:.55rem}
.r-case-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.r-case-mark{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:1.35rem;line-height:1;color:rgba(255,255,255,.9)}
.r-play{position:absolute;z-index:2;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#141414;font-size:1.1rem;padding-left:4px;cursor:pointer;transition:transform .25s var(--ease),background .2s}
.r-play:hover{transform:scale(1.1);background:var(--accent)}
.r-case b,.r-case span,.r-case a{padding-inline:.9rem}
.r-case b{font-weight:600;font-size:.98rem}
.r-case span{color:var(--muted);font-size:.88rem}
.r-case a{color:var(--accent);font-size:.88rem;text-decoration:underline;margin-top:.2rem}
.r-book{max-width:94%}
.r-book form{display:grid;gap:.45rem;margin-top:.5rem}
.r-book input{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;font-size:.92rem;padding:.6rem .75rem;min-width:0}
.r-book input:focus{outline:none;border-color:var(--accent)}
.r-book button{margin-top:.2rem;background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;padding:.7rem;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer}
.r-book button:disabled{opacity:.5}
/* Reely's expressions */
.reely .r-x{opacity:0;transition:opacity .12s}
.reely.face-happy .r-happy,.reely.face-sleep .r-sleep{opacity:1}
.reely.face-happy .m-eyes,.reely.face-sleep .m-eyes{opacity:0}
.reely.face-wow .m-eyes{animation:none;transform:scale(1.2);transition:transform .15s}
.reely.spin-fast .m-reel{animation-duration:.4s}
.reely.sleep .reely-btn .m-reel{animation-duration:16s}
.reely.sleep .reely-btn .m-face{animation-duration:5s}
.reely.sleep .reely-btn{filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)) saturate(.85)}
/* floating "!", "?", "♪", "…", "Zz" above his head */
.reely-fx{position:fixed;right:calc(clamp(12px,2vw,24px) + 34px);bottom:calc(clamp(12px,2vw,24px) + 86px);z-index:45;width:40px;height:10px;pointer-events:none}
.reely-fx span{position:absolute;left:0;bottom:0;font-family:"Anton",Impact,sans-serif;font-size:1.6rem;line-height:1;color:var(--accent);text-shadow:0 2px 10px rgba(0,0,0,.55);white-space:nowrap}
.reely-fx span.zz{color:#cfe9ff;font-size:1.3rem}
.reely.open .reely-fx{display:none}
@media (max-width:560px){.reely-fx{right:44px;bottom:78px}}
@media (max-width:560px){
  .reely-btn{width:80px;height:70px}
  .reely-panel{right:8px;left:8px;width:auto;bottom:84px;height:min(560px,calc(100svh - 110px))}
  .reely-tip{right:96px;bottom:34px;max-width:min(220px,calc(100vw - 120px))}
}

/* rotating circular badge */
.badge{position:absolute;right:var(--gut);top:clamp(7.5rem,11vw,9.5rem);width:clamp(110px,11vw,150px);aspect-ratio:1;display:grid;place-items:center;z-index:2}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:badge-spin 14s linear infinite;fill:var(--text);font-family:"Instrument Sans",sans-serif;font-size:10.4px;font-weight:600;letter-spacing:.18em}
.badge .mid{width:44%;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:1.4rem;transition:transform .4s var(--ease)}
.badge:hover .mid{transform:scale(1.12) rotate(-45deg)}
@keyframes badge-spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.badge{display:none}}

/* scrolling text bands */
.marquee{overflow:hidden;white-space:nowrap;padding-block:clamp(1rem,2.5vw,1.8rem);border-block:1px solid var(--line);background:var(--bg-2);user-select:none}
.marquee .track{display:inline-flex;will-change:transform}
.marquee span{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(2.6rem,7vw,6.5rem);line-height:1;color:var(--display);padding-right:.35em}
.marquee span i{font-style:normal;color:var(--accent);padding:0 .35em;font-size:.6em;vertical-align:.25em}
.marquee.outline span{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 45%,transparent)}
.marquee.outline span i{-webkit-text-stroke:0}

/* parallax photos */
.px>img{scale:1.14;translate:0 calc(var(--py, 0) * 1%)}

/* footer "Let's Talk" slides together */
footer.foot .display span{display:inline-block;will-change:transform}

/* cursor follower */
.cursor{position:fixed;left:0;top:0;z-index:80;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:600;font-size:.95rem;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(0);transition:transform .35s var(--ease)}
.cursor.on{transform:translate3d(var(--cx),var(--cy),0) scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* magnetic buttons */
.mag{transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease)}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}

/* ===== homepage "New work" film strip (rolls sideways on its own, loops forever) ===== */
.reelsec{overflow:hidden}
.reelsec .sec-head{margin-bottom:2.5rem}
.strip{position:relative;background:#0b0b0c;padding:34px 0;border-block:1px solid #222;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:rotate(-2deg);margin:1.5rem -2vw}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:16px;background-image:linear-gradient(90deg,transparent 0 10px,#e9e3d6 10px 30px,transparent 30px 40px);background-size:40px 16px;opacity:.9;pointer-events:none;z-index:1}
.strip::before{top:9px}.strip::after{bottom:9px}
.ftrack{display:flex;gap:18px;width:max-content;will-change:transform}
.frame{position:relative;flex:none;width:clamp(260px,30vw,440px);aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#222;display:block;color:#fff}
.frame .fbg{position:absolute;inset:0;transition:transform 1s var(--ease)}
.frame .fbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame:hover .fbg{transform:scale(1.06)}
.frame .shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.8))}
.frame .mk{position:absolute;inset:0;display:grid;place-items:center;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:2.2rem;color:rgba(255,255,255,.85);text-align:center;padding:1rem}
.frame .info{position:absolute;left:1rem;right:1rem;bottom:.9rem;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.frame .info b{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1}
.frame .fbadge{flex:none;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.85rem;border-radius:999px;padding:.35rem .75rem;white-space:nowrap}
.frame .fnum{position:absolute;top:.7rem;left:.9rem;font-size:.75rem;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.frame:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* reduced motion: a still row you can swipe instead */
@media (prefers-reduced-motion:reduce){
  .strip{transform:none;margin-inline:0;overflow-x:auto;scrollbar-width:none}
  .ftrack{padding-inline:var(--gut)}
}
@media (max-width:760px){ .frame{width:74vw} .strip{transform:rotate(-1.5deg)} }
/* ===== services page: program index (big names, photo preview follows the cursor) ===== */
.pindex{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);position:relative;z-index:1}
.pindex a{display:grid;grid-template-columns:3.2rem minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding:clamp(.9rem,1.8vw,1.4rem) 0;border-bottom:1px solid var(--line);color:var(--text);position:relative}
.pindex a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.pindex a:hover::after,.pindex a:focus-visible::after{transform:scaleX(1)}
.pindex a:nth-child(2){transition-delay:.08s}.pindex a:nth-child(3){transition-delay:.16s}.pindex a:nth-child(4){transition-delay:.24s}.pindex a:nth-child(5){transition-delay:.32s}
.pindex .n{font-size:.85rem;letter-spacing:.14em;color:var(--muted);transition:color .3s}
.pindex .nm{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(3rem,8vw,7.5rem);line-height:.92;color:var(--display);transition:color .35s,transform .5s var(--ease)}
.pindex .what{color:var(--muted);font-size:clamp(1rem,1.3vw,1.2rem);max-width:22ch;justify-self:end;text-align:right;transition:color .3s}
.pindex .ar{width:54px;height:54px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:1.15rem;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.pindex a:hover .nm,.pindex a:focus-visible .nm{color:var(--text);transform:translateX(14px)}
.pindex a:hover .n,.pindex a:hover .what,.pindex a:focus-visible .what{color:var(--text)}
.pindex a:hover .ar,.pindex a:focus-visible .ar{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateY(4px)}
.pindex .thumb{display:none}
.pfloat{position:fixed;left:0;top:0;z-index:30;width:clamp(240px,24vw,360px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(.7) rotate(-6deg);transition:opacity .3s,transform .45s var(--ease);box-shadow:0 30px 70px rgba(0,0,0,.55);background:#141416}
.pfloat.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(-3deg)}
.pfloat .fi{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s}
.pfloat .fi.on{opacity:1}
.pfloat .fi.logo{background:radial-gradient(ellipse at 50% 60%,#3a2c12,#141416 70%)}
.pfloat .fi.logo img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}
.pfloat .fi span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:2.6rem;color:var(--on-accent);background:var(--accent)}
.program{scroll-margin-top:80px}
@media (max-width:760px){
  .pindex a{grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem 1rem}
  .pindex .n{grid-row:1/3;align-self:start;padding-top:.5rem}
  .pindex .nm{grid-column:2}
  .pindex .what{grid-column:2;grid-row:2;justify-self:start;text-align:left;max-width:none}
  .pindex .ar{grid-column:3;grid-row:1/3;width:44px;height:44px}
  .pfloat{display:none}
}
/* ===== services page: color inside the program names =====
   Gray name underneath; on scroll-in a color wipes across the letters, then a soft shine keeps moving through */
.display.fill{position:relative;display:inline-block}
.display.fill::after{content:attr(data-text);position:absolute;inset:0;color:transparent;background-image:linear-gradient(100deg,var(--c1) 0%,var(--c2) 22%,var(--c1) 40%,var(--c3) 60%,var(--c1) 80%,var(--c2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease);animation:fillshine 7s linear infinite;pointer-events:none}
.display.fill.on::after{clip-path:inset(0 0 0 0)}
.c-social{--c1:#3FC7D4;--c2:#A8F0F5;--c3:#1C8A99}
.c-video{--c1:#FF5A5F;--c2:#FFB3B0;--c3:#C2263A}
.c-photo{--c1:#8C7CFF;--c2:#D3CCFF;--c3:#5540E0}
.c-web{--c1:#FF9A3C;--c2:#FFD7A8;--c3:#E0600F}
.c-custom{--c1:#F2B632;--c2:#FFE29A;--c3:#C98A12}
@keyframes fillshine{from{background-position:0% 50%}to{background-position:250% 50%}}
@media (prefers-reduced-motion:reduce){ .display.fill::after{animation:none;transition:none} }
/* ===== work page: results band, gold result badges on cards, featured first card ===== */
.wstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wstat{padding:clamp(1.2rem,2.5vw,2rem) clamp(.8rem,2vw,1.6rem);border-left:1px solid var(--line)}
.wstat:first-child{border-left:0;padding-left:0}
.wstat strong{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(2.6rem,5.5vw,5rem);line-height:.95;color:var(--accent);font-variant-numeric:tabular-nums}
.wstat span{display:block;margin-top:.5rem;color:var(--muted);font-size:clamp(.9rem,1.1vw,1.05rem);line-height:1.35}
@media (max-width:760px){
  .wstats{grid-template-columns:1fr 1fr}
  .wstat:nth-child(3){border-left:0;padding-left:0}
  .wstat:nth-child(n+3){border-top:1px solid var(--line)}
}
.card .media{position:relative}
.cbadges{position:absolute;left:.9rem;top:.9rem;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem;pointer-events:none}
.cbadge{background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.85rem;border-radius:999px;padding:.35rem .8rem;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.card:hover .cbadge{transform:translateY(-2px)}
.card.feat{grid-column:1/-1}
.card.feat .media{aspect-ratio:21/9}
.card.feat .cap{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:500}
.card.feat .cap span{font-size:clamp(1rem,1.3vw,1.15rem);align-self:center}
.card.feat .cbadge{font-size:clamp(.95rem,1.3vw,1.15rem);padding:.45rem 1rem}
@media (max-width:760px){ .card.feat .media{aspect-ratio:4/3} }
/* work page grid: three across, compact cards, shorter featured banner */
.cards.wgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem 1.2rem}
.wgrid .card .media{aspect-ratio:4/3}
.wgrid .card .cap{font-size:1.05rem;margin-top:.7rem}
.wgrid .card .cap span{font-size:.92rem}
.wgrid .card .tags{margin-top:.4rem}
.wgrid .cbadges{left:.7rem;top:.7rem;gap:.3rem}
.wgrid .cbadge{font-size:.78rem;padding:.3rem .7rem}
.wgrid .card.feat .media{aspect-ratio:3/1}
.wgrid .card.feat .cap{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.wgrid .card.feat .cbadge{font-size:clamp(.85rem,1.1vw,1rem);padding:.4rem .9rem}
@media (max-width:1000px){ .cards.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .wgrid .card.feat .media{aspect-ratio:5/2} }
@media (max-width:560px){ .cards.wgrid{grid-template-columns:1fr;gap:2.2rem} .wgrid .card .media{aspect-ratio:16/10} .wgrid .card.feat .media{aspect-ratio:16/10} }
/* work page: less scrolling (four across, shorter photos, compact header) */
.cards.wgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem 1rem}
.wgrid .card .media{aspect-ratio:16/10}
.wgrid .card .cap{display:block;font-size:1rem;line-height:1.3;margin-top:.6rem}
.wgrid .card .cap span{display:block;font-size:.88rem;margin-top:.15rem}
.wgrid .card .tags{display:none}
.wgrid .card .hint{display:none}
.wgrid .card .mark{font-size:clamp(1.1rem,1.8vw,1.6rem)}
.wgrid .card.feat .media{aspect-ratio:4/1}
.wgrid .card.feat .cap{display:flex;align-items:baseline;gap:1rem;font-size:clamp(1.15rem,1.6vw,1.4rem)}
.wgrid .card.feat .cap span{margin:0}
.work-page .phero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.work-page .wstats{margin-top:clamp(1.5rem,3vw,2.5rem)}
.work-page .wstat{padding-block:clamp(.9rem,1.8vw,1.4rem)}
.work-page .wstat strong{font-size:clamp(2.2rem,4.2vw,3.8rem)}
@media (max-width:1100px){ .cards.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))} .wgrid .card.feat .media{aspect-ratio:3/1} }
@media (max-width:760px){ .cards.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .8rem} .wgrid .card.feat .media{aspect-ratio:2/1} .wgrid .cbadge{font-size:.7rem;padding:.25rem .55rem} .wgrid .card.feat .cap{display:block} }
/* ===== client logos: project covers (until a photo is added), case study covers, client facts, trusted-by row ===== */
.media .zoom .zlogo,.frame .fbg img.zlogo{position:static;inset:auto;width:auto;height:auto;max-width:56%;max-height:58%;object-fit:contain;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .6s var(--ease)}
.frame .fbg img.zlogo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);max-width:48%;max-height:52%}
.frame .fbg{display:block}
.card:hover .zlogo{transform:scale(1.05)}
.wgrid .card .zoom .zlogo{max-width:62%;max-height:70%}
.media>img.clogo{inset:auto;left:50%;top:46%;width:auto;height:auto;max-width:28%;max-height:48%;transform:translate(-50%,-50%);object-fit:contain;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:0}
.media>img.clogo.wide{max-width:56%;max-height:40%}
.flogo{display:flex;align-items:center;gap:.7rem}
.flogo img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff;flex:none}
.trusted .eyebrow{margin:0 0 1.4rem;color:var(--text);font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1}
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}
.logos a{position:relative;aspect-ratio:3/2;border-radius:12px;background:var(--tile);border:1px solid var(--line);display:block;overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.logos img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;transition:transform .4s var(--ease)}
.logos a:hover,.logos a:focus-visible{border-color:var(--accent);transform:translateY(-3px)}
.logos a:hover img,.logos a:focus-visible img{transform:scale(1.06)}

@media (max-width:760px){ .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem} }
.wgrid .card .zoom .zlogo{margin-top:6%}
@media (max-width:760px){ .wgrid .card .zoom{place-items:end center;padding-bottom:8%} .wgrid .card .zoom .zlogo{margin-top:0;max-height:50%;max-width:58%} }

/* ===== work page: highlight project with big numbers beside it ===== */
.hlwork{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.hl-pics{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:.6rem;aspect-ratio:5/4}
.hl-pics .media{display:block;height:100%;border-radius:10px}
.hl-pics .hl-main{grid-row:1/3}
.hl-pics:hover .media>img{transform:scale(1.04)}
.hl-eye{margin:0 0 .6rem;color:var(--accent);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.hlwork h2{margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:.95}
.hl-sub{margin:.9rem 0 1.4rem;color:var(--muted);font-size:1.05rem;line-height:1.5;max-width:44ch}
.hl-nums{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.hl-nums div{padding:1rem 0 .9rem;border-bottom:1px solid var(--line)}
.hl-nums div:nth-child(odd){padding-right:1rem;border-right:1px solid var(--line)}
.hl-nums div:nth-child(even){padding-left:1.2rem}
.hl-nums strong{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;color:var(--accent);font-variant-numeric:tabular-nums}
.hl-nums span{display:block;margin-top:.35rem;color:var(--muted);font-size:.92rem}
.hlwork blockquote{margin:1.3rem 0 1.4rem;font-size:1.05rem;line-height:1.5;color:var(--text)}
.hlwork cite{display:block;margin-top:.3rem;font-style:normal;color:var(--muted);font-size:.9rem}
@media (max-width:860px){ .hlwork{grid-template-columns:1fr} .hl-pics{aspect-ratio:4/3} }
/* highlight: compact version */
.hlwork{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.2rem,3vw,2.5rem);margin-bottom:clamp(1.8rem,3.5vw,2.8rem);padding-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.hl-pics{aspect-ratio:16/10;gap:.45rem}
.hlwork h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.hl-eye{margin-bottom:.4rem;font-size:.76rem}
.hl-sub{margin:.6rem 0 1rem;font-size:.95rem;max-width:56ch}
.hl-nums{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.hl-nums div,.hl-nums div:nth-child(odd),.hl-nums div:nth-child(even){padding:.8rem .9rem .7rem;border:0;border-left:1px solid var(--line)}
.hl-nums div:first-child{border-left:0;padding-left:0}
.hl-nums strong{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.hl-nums span{font-size:.8rem;line-height:1.3}
.hlwork blockquote{margin:.9rem 0 1rem;font-size:.95rem}
.hlwork cite{display:inline;margin-left:.4rem;font-size:.85rem}
.hlwork .btn{padding-block:.55rem}
@media (max-width:860px){ .hlwork{grid-template-columns:1fr} .hl-pics{aspect-ratio:2/1} }
@media (max-width:560px){ .hl-nums{grid-template-columns:1fr 1fr} .hl-nums div:nth-child(3){border-left:0;padding-left:0} .hl-nums div:nth-child(n+3){border-top:1px solid var(--line)} }
/* work page: shorter header, tighter call to action, lighter highlight on phones */
.work-page .phero{padding-top:clamp(6.5rem,11vw,8.5rem)}
.work-page .phero h1 .display{font-size:clamp(3.6rem,10vw,8.5rem)}
.work-page .phero .row{margin-top:1rem}
.work-page .phero .lede{font-size:clamp(1.05rem,1.5vw,1.3rem)}
.work-page .wstats{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-page .wstat strong{font-size:clamp(2rem,3.6vw,3.2rem)}
.work-page main > section.sec:last-of-type{padding-block:clamp(3rem,6vw,4.5rem)}
@media (max-width:760px){
  .work-page .wstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .work-page .wstat{padding:.9rem .5rem;border-top:0!important}
  .work-page .wstat:nth-child(3){border-left:1px solid var(--line);padding-left:.5rem}
  .work-page .wstat:first-child{padding-left:0}
  .work-page .wstat strong{font-size:1.7rem}
  .work-page .wstat span{font-size:.75rem}
  .hl-pics{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:16/9}
  .hl-pics .media:not(.hl-main){display:none}
  .hl-pics .hl-main{grid-row:auto}
  .hlwork blockquote{display:none}
  .hl-sub{font-size:.9rem}
}
@media (max-width:760px){
  .work-page .phero .mascot{display:none}
  .work-page .phero{padding-top:6rem}
  .hl-pics{display:block;aspect-ratio:auto}
  .hl-pics .hl-main{display:block;aspect-ratio:16/9;height:auto}
}@media (max-width:760px){ .hl-pics .hl-main>img{object-position:50% 18%!important} }
.hlwork.below{margin:clamp(2.5rem,5vw,4rem) 0 0;padding:clamp(2rem,4vw,3rem) 0 0;border-bottom:0;border-top:1px solid var(--line)}
.work-page .filters{margin-top:0}

/* ===== case study format: brand-colored header with big numbers, 3-step story, media that hides when empty ===== */
.cs{--brand:var(--accent);--brand2:#1a1a1d}
.cs-hero{position:relative;padding-top:clamp(6.5rem,11vw,8.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 32%,transparent) 0%,transparent 62%);pointer-events:none;z-index:0}
.cs-hero>*{position:relative;z-index:1}
.cs-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:1rem}
.cs-visual{position:relative;aspect-ratio:5/4;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,var(--brand2) 0%,color-mix(in srgb,var(--brand) 70%,#000) 100%);display:grid;place-items:center;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.cs-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.14),transparent 55%);pointer-events:none}
.cs-logo{width:auto;max-width:58%;max-height:66%;object-fit:contain;border-radius:14px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.cs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cs-eye{margin:0 0 .5rem;color:color-mix(in srgb,var(--brand) 55%,#fff);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.cs-title{margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,5.6vw,5rem);line-height:.92}
.cs-sub{margin:.8rem 0 1.3rem;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.5;color:var(--muted);max-width:46ch}
.cs-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-nums div{padding:1rem .9rem .9rem;border-left:1px solid var(--line)}
.cs-nums div:first-child{border-left:0;padding-left:0}
.cs-nums strong{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:.95;color:var(--accent);font-variant-numeric:tabular-nums}
.cs-nums span{display:block;margin-top:.35rem;color:var(--muted);font-size:.88rem;line-height:1.3}
.cs-meta{margin:.8rem 0 1rem;color:var(--muted);font-size:.85rem}
.cs-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.cs-tags span{font-size:.82rem;border:1px solid color-mix(in srgb,var(--brand) 55%,var(--line));border-radius:999px;padding:.25rem .75rem;color:var(--text)}
.cs-story{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.cs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cs-step{background:var(--tile);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:14px;padding:1.4rem 1.4rem 1.5rem}
.cs-n{font-family:"Anton",Impact,sans-serif;font-size:1.1rem;color:color-mix(in srgb,var(--brand) 60%,#fff)}
.cs-step h2{margin:.3rem 0 .6rem;font-size:1.25rem;font-weight:600}
.cs-step p{margin:0;color:var(--muted);line-height:1.55;font-size:.98rem}
.cs-step p b{color:var(--accent);font-weight:600}
.cs-media{padding-block:0 clamp(3rem,6vw,4.5rem)}
.cs-media .gallery{margin-top:1rem}
.cs-h{margin:0 0 1rem;font-size:1.3rem;font-weight:600}
.cs-next{display:block;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--nbrand,#333) 30%,transparent),transparent 70%);color:var(--text)}
.cs-next small{display:block;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:.8rem}
.cs-next-row{display:flex;align-items:center;gap:1.2rem}
.cs-next-row img{width:72px;height:72px;object-fit:contain;border-radius:12px;background:#fff;flex:none;transition:transform .5s var(--ease)}
.cs-next-name{flex:1;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1}
.cs-next-name em{display:block;font-family:inherit;font-style:normal;font-family:"Instrument Sans",sans-serif;text-transform:none;font-size:.95rem;color:var(--muted);margin-top:.35rem}
.cs-next:hover .cs-next-row img{transform:rotate(-4deg) scale(1.06)}
@media (max-width:860px){ .cs-grid{grid-template-columns:1fr} .cs-visual{aspect-ratio:16/9} .cs-steps{grid-template-columns:1fr} }
@media (max-width:560px){ .cs-nums span{font-size:.76rem} .cs-nums div{padding-inline:.5rem} .cs-next-row .btn{display:none} .cs-next-row img{width:56px;height:56px} }.cs-media[hidden],.cs-media [hidden]{display:none!important}

/* case study format: flexible number rows, photo-only spots, photo thumbnails, links */
.cs-nums{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.cs-meta a,.cs-step p a{color:var(--text);text-decoration:underline}
.media.cover.novideo{cursor:default}
.media.cover.novideo .pb{display:none}
.cs-next-row img.ph{object-fit:cover;background:none}
.cs-media .quote{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.cs-media>.media.cover{margin-bottom:1rem}
/* ===== work page: each card in its client's colors (matches the case study pages) ===== */
.wgrid .card.brandc .zoom{background:linear-gradient(145deg,var(--brand2) 0%,color-mix(in srgb,var(--brand) 70%,#000) 100%)}
.wgrid .card.brandc .zoom::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.14),transparent 55%);pointer-events:none}
.wgrid .card.brandc .media{box-shadow:inset 0 -3px 0 var(--brand);transition:box-shadow .4s,transform .4s var(--ease)}
.wgrid .card.brandc .media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);z-index:3}
.wgrid .card.brandc:hover .media,.wgrid .card.brandc:focus-visible .media{box-shadow:0 0 0 2px var(--brand),0 18px 40px color-mix(in srgb,var(--brand) 35%,transparent);transform:translateY(-3px)}
.wgrid .card.brandc .cap{position:relative;padding-left:.95rem}
.wgrid .card.brandc .cap::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:2px;background:var(--brand)}
.wgrid .card.brandc:hover .cap{color:color-mix(in srgb,var(--brand) 35%,#fff)}
/* highlight in its brand color */
.hlwork[style*="--brand"]{position:relative}
.hlwork[style*="--brand"]::before{content:"";position:absolute;left:-10%;top:0;width:60%;height:100%;background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 65%);pointer-events:none;z-index:0}
.hlwork[style*="--brand"]>*{position:relative;z-index:1}
.hlwork[style*="--brand"] .hl-eye{color:color-mix(in srgb,var(--brand) 60%,#fff)}
.hlwork[style*="--brand"] .hl-pics .media{box-shadow:inset 0 -3px 0 var(--brand)}
.hlwork[style*="--brand"] .hl-nums{border-top-color:var(--brand)}.media.cover.novideo .lbl{display:none}

/* ===== vertical videos: phones deal into a fan, Reels-style overlay, glow in the client's color ===== */
.s-full{grid-column:1/-1}
.reels-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin:clamp(1rem,3vw,2rem) 0 clamp(2rem,4vw,3rem)}
.reels-eye{margin:0 0 .5rem;color:color-mix(in srgb,var(--brand,var(--accent)) 60%,#fff);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.reels-h{margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,3rem);line-height:.95}
.reels-p{margin:.8rem 0 0;color:var(--muted);line-height:1.55;max-width:40ch}
.phones{perspective:1200px}
.phones::before{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--brand,var(--accent)) 30%,transparent),transparent 62%)!important}
.phones .media.phone{--r:-7deg;--x:0px;--y:0px;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .9s var(--ease),box-shadow .5s,filter .4s,opacity .4s;border-color:#111;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1),0 0 40px color-mix(in srgb,var(--brand,var(--accent)) 25%,transparent)}
.phones .media.phone:nth-child(2){--r:7deg;--y:2rem}
.phones .media.phone:nth-child(3){--r:-2deg;--y:-.6rem}
/* stacked until the section scrolls in, then they deal out */
.js .phones.rv:not(.in) .media.phone:nth-child(1){--x:55%;--r:-2deg}
.js .phones.rv:not(.in) .media.phone:nth-child(2){--x:-55%;--r:3deg;--y:0px}
.phones.rv .media.phone:nth-child(2){transition-delay:.12s}
.phones .media.phone:hover,.phones .media.phone:focus-visible{--r:0deg;--y:-12px;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.05);z-index:2}
.phones .media.phone:nth-child(2):hover,.phones .media.phone:nth-child(2):focus-visible{--y:1.2rem}
.phones:hover .media.phone:not(:hover){filter:brightness(.65)}
.phones .media.phone:has(iframe){--r:0deg;filter:none}
.phones .media.phone:has(iframe) .rl-ui{display:none}
/* Reels-style overlay (added by site.js) */
.rl-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.rl-tag{position:absolute;top:26px;left:12px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:.3rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.rl-tag svg{width:14px;height:14px}
.rl-rail{position:absolute;right:9px;bottom:4.2rem;display:grid;gap:.85rem;justify-items:center}
.rl-rail svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.media.phone .lbl{padding-right:2.6rem}
.phones .media.phone:hover .rl-rail svg:first-child{fill:#ff3b5c;transform:scale(1.15);transition:transform .3s}
@media (max-width:860px){ .reels-row{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .js .phones.rv:not(.in) .media.phone{--x:0px} }
/* ===== case studies: playlist for wide videos ===== */
.vlist{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:1rem;align-items:start;margin-bottom:1.2rem}
.vl-main{position:relative}
.vl-main>*{width:100%;border-radius:14px}
.vl-main .vl-off{display:none}
.vl-items{display:grid;gap:.6rem;align-content:start}
.vl-item{display:grid;grid-template-columns:44% minmax(0,1fr);gap:.75rem;align-items:center;padding:.5rem;border-radius:12px;background:var(--tile);border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:border-color .3s,transform .3s var(--ease),background .3s}
.vl-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block}
.vl-item span{font-size:.92rem;font-weight:600;line-height:1.3}
.vl-item em{display:block;font-style:normal;font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.vl-item:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--brand,var(--accent)) 50%,var(--line))}
.vl-item.on{border-color:var(--brand,var(--accent));background:color-mix(in srgb,var(--brand,var(--accent)) 12%,var(--tile))}
.vl-item.on em{color:color-mix(in srgb,var(--brand,var(--accent)) 65%,#fff)}
.cs-media .media.cover.solo{max-width:900px;margin-inline:auto}
@media (max-width:860px){
  .vlist{grid-template-columns:minmax(0,1fr)}
  .vl-main{width:100%}
  .vl-items{grid-auto-flow:column;grid-auto-columns:minmax(230px,75%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.3rem;min-width:0}
  .vl-item{scroll-snap-align:start}
}.vlist{grid-column:1/-1}

/* vertical Shorts in wide cards: a mini phone on the client's color, no blurry side bars */
.media.card-short .zoom{background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--brand) 45%,transparent),transparent 70%),linear-gradient(145deg,var(--brand2),#0c0c0e)}
.mini-phone{position:relative;display:block;height:84%;aspect-ratio:9/16;border:5px solid #0e0e10;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);transform:rotate(-4deg);transition:transform .5s var(--ease)}
.mini-phone img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover .mini-phone{transform:rotate(0) scale(1.04)}
/* 4+ vertical videos: the fan becomes a swipeable row of phones (arrows on computers) */
.phones.phones-rail{display:flex;justify-content:flex-start;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:1.6rem .4rem 2.6rem;margin-inline:-.4rem}
.phones.phones-rail::-webkit-scrollbar{display:none}
.phones.phones-rail .media.phone{scroll-snap-align:center;--x:0px!important;--y:0px;--r:-3deg}
.phones.phones-rail .media.phone:nth-child(even){--r:3deg;--y:1rem}
.phones.phones-rail .media.phone:hover,.phones.phones-rail .media.phone:focus-visible{--r:0deg;--y:-8px}
.rail-wrap{position:relative;min-width:0}
.rail-nav{position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--bg,#111) 80%,transparent);color:var(--text);font-size:1.1rem;cursor:pointer;backdrop-filter:blur(6px);transition:background .3s,color .3s,opacity .3s}
.rail-nav:hover{background:var(--brand,var(--accent));color:#111;border-color:transparent}
.rail-nav.prev{left:-.6rem}.rail-nav.next{right:-.6rem}
.rail-nav[disabled]{opacity:0;pointer-events:none}
.rail-fade{position:absolute;top:0;bottom:0;right:0;width:60px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg,#1e1e20));z-index:3}
@media (hover:none){ .rail-nav{display:none} }
/* rail controls: slim bar under the phones (replaces the floating arrows) */
.rail-nav{display:none!important}
.rail-bar{display:flex;align-items:center;gap:.9rem;margin-top:.2rem;padding-inline:.2rem}
.rail-btn{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text);background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--brand,var(--accent)) 45%,var(--line));transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),opacity .3s}
.rail-btn svg{width:18px;height:18px}
.rail-btn.rail-prev svg{transform:scaleX(-1)}
.rail-btn:hover:not([disabled]){background:var(--brand,var(--accent));border-color:var(--brand,var(--accent));color:#0e0e10;transform:scale(1.06)}
.rail-btn[disabled]{opacity:.28;cursor:default}
.rail-track{position:relative;flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.rail-track i{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:3px;background:var(--brand,var(--accent));transition:left .25s,width .25s}
.rail-fade{bottom:3.2rem;top:0}
@media (hover:none){ .rail-btn{width:36px;height:36px} }
/* highlighted tag on a phone, e.g. Testimonial */
.rl-tag-hl{background:var(--accent);color:#141416;text-shadow:none;padding:.22rem .55rem .22rem .45rem;border-radius:999px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.rl-tag-hl svg{width:12px;height:12px}
.quote .reels-eye{margin-bottom:.9rem}.quote blockquote p.reels-eye{font-size:.8rem;line-height:1.3;letter-spacing:.14em;margin:0 0 .9rem}

/* ===== The Signman Saga: cardboard-sign section on the Morgan & Myers page ===== */
.saga{position:relative;padding-block:clamp(3.5rem,7vw,6rem);background:
  radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.06),transparent 55%),
  repeating-linear-gradient(92deg,rgba(0,0,0,.035) 0 2px,transparent 2px 7px),
  linear-gradient(160deg,#3a2a17 0%,#24190e 100%);
  border-block:1px solid #4a3620;overflow:hidden}
.saga::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 60%,rgba(208,32,46,.18),transparent 55%);pointer-events:none}
.saga-inner{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.saga-eye{margin:0 0 1rem;color:#e7c28f;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.saga-sign{display:inline-block;margin:0 0 1.4rem;padding:1.1rem 1.6rem 1.2rem;font-family:"Permanent Marker","Comic Sans MS",cursive;font-weight:400;font-size:clamp(2.3rem,4.8vw,4rem);line-height:1;color:#1d1a16;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 5px),#c9a36b;
  border-radius:3px 6px 4px 7px;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.12),inset 0 -6px 14px rgba(0,0,0,.12);transition:transform .5s var(--ease)}
.saga-sign span{display:block}
.saga-sign span:last-child{color:#b3141f;transform:translateX(1.2rem) rotate(2deg)}
.saga-head:hover .saga-sign{transform:rotate(-1deg) scale(1.02)}
.saga-hook{margin:0 0 .8rem;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02;color:#fff}
.saga-p{margin:0 0 1.2rem;color:#d9c8ad;line-height:1.55;max-width:44ch}
.saga-stats{display:flex;flex-wrap:wrap;gap:.5rem}
.saga-stats span{font-size:.85rem;color:#f3e6d2;background:rgba(0,0,0,.25);border:1px dashed rgba(231,194,143,.5);border-radius:6px;padding:.35rem .7rem}
.saga-stats b{font-family:"Anton",Impact,sans-serif;font-weight:400;color:#ffcc70;font-size:1.05rem;margin-right:.2rem}
.saga .phones::before{background:radial-gradient(ellipse at 50% 55%,rgba(231,194,143,.28),transparent 62%)!important}
.saga .rl-tag-hl,.saga-feature .rl-tag-hl{background:#c9a36b;color:#1d1a16;font-family:"Permanent Marker",cursive;text-transform:none;letter-spacing:.02em;font-size:.78rem}
.saga .rail-btn{border-color:rgba(231,194,143,.55)}
.saga .rail-btn:hover:not([disabled]){background:#c9a36b;border-color:#c9a36b}
.saga .rail-track i{background:#c9a36b}
.saga .rail-fade{background:linear-gradient(90deg,transparent,#2b1f12)}
.saga[hidden]{display:none!important}
@media (max-width:860px){ .saga-inner{grid-template-columns:1fr} .saga-sign span:last-child{transform:translateX(.6rem) rotate(2deg)} }
/* saga layout: sign + big featured phone on top, episode row underneath */
.saga-feature{display:grid;place-items:center;position:relative}
.saga-feature::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 55%,rgba(231,194,143,.3),transparent 62%);z-index:0}
.media.phone.phone-lg{position:relative;z-index:1;width:clamp(200px,24vw,320px);border-width:9px;border-radius:34px;transform:rotate(3deg);box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(231,194,143,.25);transition:transform .5s var(--ease)}
.media.phone.phone-lg:hover,.media.phone.phone-lg:focus-visible{transform:rotate(0) scale(1.03)}
.media.phone.phone-lg:has(iframe){transform:none}
.media.phone.phone-lg .pb{width:72px;height:72px;margin:-36px 0 0 -36px}
.saga-feature[hidden],.saga-feature:not(:has(.media:not([hidden]))){display:none}
.saga-eps{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.saga-eps-h{margin:0 0 .4rem;font-family:"Permanent Marker",cursive;font-size:1.5rem;color:#e7c28f}
.saga-eps:not(:has(.media:not([hidden]))){display:none}
/* saga v2: artwork + story on top, featured phone + episodes below */
.saga-top{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.saga-art{position:relative;border-radius:14px;overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(231,194,143,.25);transition:transform .6s var(--ease)}
.saga-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.saga-art:hover{transform:rotate(0) scale(1.015)}
.saga-copy .saga-sign{font-size:clamp(1.5rem,2.6vw,2.1rem);padding:.6rem 1rem .7rem;margin-bottom:1rem}
.saga-copy .saga-sign span{display:inline}
.saga-copy .saga-sign span:last-child{display:inline-block;transform:rotate(2deg)}
.saga-watch{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.saga-watch:not(:has(.saga-feature .media:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.saga-eps{margin-top:0}
@media (max-width:860px){ .saga-top,.saga-watch{grid-template-columns:minmax(0,1fr)} .saga-feature{order:-1} }.saga [hidden],[data-hide-empty] .media[hidden]{display:none!important}
.saga-eps .phones:not(.phones-rail){justify-content:flex-start;padding-left:.5rem}

/* Signman Saga page: the saga is the hero, Morgan & Myers underneath */
.saga.saga-hero{padding-top:clamp(6.5rem,11vw,8.5rem);border-top:0}
.saga-crumb{position:relative;margin:0 0 1.2rem;color:#d9c8ad}
.saga-crumb a{color:#f3e6d2}
.saga-for{border-top:1px solid var(--line)}
.saga-made{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem 1.6rem;align-items:center;margin-bottom:1.6rem}
.saga-made img{width:84px;height:84px;object-fit:contain;border-radius:14px;background:#fff}
.saga-made .cs-eye{margin-bottom:.2rem;color:color-mix(in srgb,#D0202E 55%,#fff)}
.saga-made-h{margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:.95}
.saga-made .cs-sub{margin:.5rem 0 0}
.saga-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:"Permanent Marker",cursive;color:#ffcc70;font-size:1.05rem}
.saga-link:hover{color:#fff}
@media (max-width:760px){ .saga-made{grid-template-columns:auto minmax(0,1fr)} .saga-made .btn{grid-column:1/-1;justify-self:start} }/* phone rows scroll sideways only; the mouse wheel always scrolls the page */
.phones.phones-rail{overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y}
.phones.phones-rail{padding-top:1.4rem;padding-bottom:3.4rem}
.phones.phones-rail .media.phone:nth-child(even){--y:.5rem}
.phones.phones-rail::before{inset:0}
.phones.phones-rail{padding-top:1.6rem;padding-bottom:2.8rem}

/* "more to see" edge fade: fade the phones themselves (works on any background) instead of a colored strip */
.rail-fade{display:none!important}
.phones.phones-rail{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent 100%)}
.phones.phones-rail.at-start.at-end,.phones.phones-rail.at-end{-webkit-mask-image:none;mask-image:none}
.phones.phones-rail.mid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(100% - 90px),transparent 100%)}
/* edge fades by scroll position: start = right fade, middle = both, end = left fade, no overflow = none */
.phones.phones-rail.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 100%)}
.phones.phones-rail.at-start.at-end{-webkit-mask-image:none;mask-image:none}
/* case studies: photos and phones at a similar scale (photos 4 across, phones a bit bigger) */
.cs-media .gallery .media:not(.cover),.cs-media .gallery .media.cover.novideo{grid-column:span 3;aspect-ratio:4/5}
.cs-media .gallery .media.s-land:not(.cover),.cs-media .gallery .media.s-wide:not(.cover){grid-column:span 6;aspect-ratio:8/5}
.cs-media .gallery{gap:.8rem}
.phones .media.phone{width:clamp(170px,19vw,250px)}
@media (max-width:1000px){ .cs-media .gallery .media:not(.cover),.cs-media .gallery .media.cover.novideo{grid-column:span 4} .cs-media .gallery .media.s-land:not(.cover){grid-column:span 8} }
@media (max-width:700px){ .cs-media .gallery .media:not(.cover),.cs-media .gallery .media.cover.novideo{grid-column:span 6} .cs-media .gallery .media.s-land:not(.cover),.cs-media .gallery .media.s-wide:not(.cover){grid-column:span 12} .phones .media.phone{width:clamp(150px,42vw,200px)} }.cs-media .gallery:not(:has(.media)){display:none}

/* ===== service pages: case-study style header, reels up top, timeline, closing panel ===== */
.svc-h1{margin:0}
.svc-h1 .kw{display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--brand) 60%,#fff)}
.svc-hero .cs-eye{display:none}
.svc-visual{background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--brand) 45%,transparent),transparent 70%),linear-gradient(145deg,var(--brand2),#0c0c0e)}
.phone-stack{position:relative;display:block;width:100%;height:100%}
.phone-stack .mini-phone{position:absolute;top:50%;left:50%;height:78%;transform-origin:50% 100%}
.phone-stack .ps-1{transform:translate(-118%,-48%) rotate(-10deg)}
.phone-stack .ps-2{transform:translate(-50%,-52%) rotate(0deg);z-index:2;height:86%}
.phone-stack .ps-3{transform:translate(18%,-48%) rotate(10deg)}
.svc-visual:hover .ps-1{transform:translate(-128%,-50%) rotate(-14deg)}
.svc-visual:hover .ps-3{transform:translate(28%,-50%) rotate(14deg)}
.phone-stack .mini-phone{transition:transform .6s var(--ease)}
.svc-reels{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.svc-reels .reels-row{margin-top:0}
.svc-link{color:color-mix(in srgb,var(--brand) 60%,#fff)}
/* how it works: connected steps with a gold line that draws across */
.timeline .bens{position:relative}
.timeline .bens::before,.timeline .bens::after{content:"";position:absolute;left:0;right:0;top:1.35rem;height:2px;border-radius:2px;pointer-events:none}
.timeline .bens::before{background:var(--line)}
.timeline .bens::after{background:var(--brand,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s}
.timeline .bens.in::after{transform:scaleX(1)}
.timeline .ben{position:relative;z-index:1}
.timeline .ben .num{display:inline-grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:#141416;border:2px solid var(--brand,var(--accent));color:var(--brand,var(--accent));font-weight:700;margin-bottom:1rem;transition:background .4s,color .4s}
.timeline .bens.in .ben .num{background:var(--brand,var(--accent));color:#0e0e10}
.timeline .bens.in .ben:nth-child(2) .num{transition-delay:.5s}.timeline .bens.in .ben:nth-child(3) .num{transition-delay:.9s}.timeline .bens.in .ben:nth-child(4) .num{transition-delay:1.3s}
@media (max-width:860px){ .timeline .bens::before,.timeline .bens::after{display:none} }
@media (prefers-reduced-motion:reduce){ .timeline .bens::after{transform:none} }
/* closing panel */
.svc-cta{padding-block:clamp(3rem,6vw,5rem)}
.svc-cta-in{position:relative;overflow:hidden;border-radius:20px;padding:clamp(2rem,5vw,3.5rem);text-align:center;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 70%),linear-gradient(160deg,var(--brand2),#121214);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line))}
.svc-cta-in .cs-eye{color:color-mix(in srgb,var(--brand) 60%,#fff)}
.svc-cta-h{margin:0 0 .6rem;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,5vw,4rem);line-height:.95}
.svc-cta-in .cs-sub{margin:0 auto 1.6rem}
.svc-cta-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
@media (max-width:560px){ .phone-stack .ps-1{transform:translate(-112%,-48%) rotate(-10deg)} .phone-stack .ps-3{transform:translate(12%,-48%) rotate(10deg)} }.timeline .ben .num{font-family:"Instrument Sans",sans-serif!important;font-size:.95rem!important;line-height:1!important;letter-spacing:0!important;-webkit-text-stroke:0!important;padding:0!important;position:relative!important;top:auto!important;left:auto!important;opacity:1!important}

/* services page: compact program blocks (less scrolling) */
.services-page .pindex a{padding:clamp(.55rem,1.1vw,.9rem) 0}
.services-page .pindex .nm{font-size:clamp(2.4rem,5.2vw,4.6rem)}
.services-page .phero{padding-bottom:clamp(2rem,4vw,3rem)}
.services-page .program{display:block;padding-block:clamp(2.5rem,5vw,3.5rem)}
.services-page .program>.aside{display:none}
.services-page .program>div:not(.aside){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.services-page .program>div>.display{grid-column:1;font-size:clamp(3rem,6vw,5.4rem)}
.services-page .program>div>.desc{grid-column:1;margin:1rem 0 1.4rem}
.services-page .program>div>p:not(.desc){grid-column:1;margin:0!important}
.services-page .program .groups{grid-column:2;grid-row:1/span 4;gap:.7rem}
.services-page .program .group{padding:1rem 1.1rem 1.1rem}
.services-page .program .group h3{margin-bottom:.6rem;font-size:1.05rem}
.services-page .program .group ul{gap:.35rem}
.services-page .program .group li{font-size:.93rem}
@media (max-width:860px){ .services-page .program>div:not(.aside){grid-template-columns:1fr} .services-page .program .groups{grid-column:1;grid-row:auto;margin-top:1.4rem} }@media (max-width:560px){ .services-page .program .groups{grid-template-columns:1fr 1fr;gap:.5rem} .services-page .program .group{padding:.8rem .75rem .85rem} .services-page .program .group li{font-size:.82rem;padding-left:1.25rem} .services-page .program .group h3{font-size:.95rem} }
@media (max-width:760px){ .services-page .phero .mascot{display:none} .services-page .phero{padding-top:6rem} }

/* service pages: photo prints, browser mockup, site cards */
.photo-stack .mini-phone{aspect-ratio:4/5;height:70%;border:7px solid #f3efe7;border-bottom-width:22px;border-radius:4px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.photo-stack .ps-2{height:78%}
.browser-mock{position:relative;display:block;width:84%;border-radius:12px;overflow:hidden;background:#0e0e10;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-2deg);transition:transform .6s var(--ease)}
.svc-visual:hover .browser-mock{transform:rotate(0) scale(1.02)}
.bm-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#1b1b1e;border-bottom:1px solid rgba(255,255,255,.06)}
.bm-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.bm-bar i:nth-child(2){background:#febc2e}.bm-bar i:nth-child(3){background:#28c840}
.bm-bar b{margin-left:.6rem;font-weight:500;font-size:.72rem;color:#9a9aa2;background:#0e0e10;border-radius:6px;padding:.15rem .7rem}
.browser-mock img{display:block;width:100%;aspect-ratio:800/506;object-fit:cover}
.bm-chat{position:absolute;right:6%;bottom:9%;z-index:2;max-width:13rem;padding:.6rem .85rem;border-radius:14px 14px 4px 14px;background:#fff;color:#141416;font-size:.82rem;font-weight:600;box-shadow:0 14px 30px rgba(0,0,0,.45);animation:bmpop 3.5s var(--ease) infinite}
@keyframes bmpop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.site-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.site-card{display:block;color:var(--text);border-radius:14px;background:var(--tile);border:1px solid var(--line);padding:.8rem .8rem 1.1rem;transition:border-color .3s,transform .4s var(--ease)}
.site-card:hover{border-color:var(--brand);transform:translateY(-4px)}
.sc-media{display:grid;place-items:center;aspect-ratio:16/10;border-radius:9px;overflow:hidden;margin-bottom:.9rem}
.sc-media img{width:100%;height:100%;object-fit:cover}
.sc-media.sc-logo img{width:auto;height:auto;max-width:46%;max-height:62%;object-fit:contain;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.site-card b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.site-card span:not(.sc-media){color:var(--muted);font-size:.9rem;line-height:1.4}
.svc-more{margin:1.2rem 0 0;text-align:right}
.svc-visual .cs-logo{max-width:52%}
@media (max-width:760px){ .site-cards{grid-template-columns:1fr} .bm-chat{font-size:.72rem;max-width:10rem} }.svc-testi{padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.svc-testi .quote blockquote p.reels-eye{font-size:.8rem;line-height:1.3;letter-spacing:.14em;margin:0 0 .9rem}

/* ===== Home: reels wall (moving columns of phones, tap to play in a pop-up) ===== */
.rwall-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.rwall-copy .display{margin:0 0 1.2rem}
.rwall-copy .lede span{color:var(--muted)}
.rwall-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.rwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;height:clamp(460px,62vh,640px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.rw-col{min-width:0}
.rw-col.dn,.rw-col.c2,.rw-col.c4{padding-top:60px}
.rw-in{display:flex;flex-direction:column;gap:14px}
.rwall.go .rw-in{animation:rwUp var(--d,38s) linear infinite}
.rwall.go .dn .rw-in{animation-direction:reverse}
/* column speeds set by JS */
.rwall:hover .rw-in,.rwall.off .rw-in,.rwall:focus-within .rw-in{animation-play-state:paused}
@keyframes rwUp{to{transform:translateY(calc(-50% - 7px))}}
.rw-tile{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:18px;overflow:hidden;background:#000;cursor:pointer;
  box-shadow:0 0 0 2px #2b2c30,0 0 0 5px #101012,0 14px 30px rgba(0,0,0,.45);transition:transform .35s var(--ease),box-shadow .35s}
.rw-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .35s}
.rw-tile::before{content:"";position:absolute;z-index:1;top:7px;left:50%;width:30%;height:5px;border-radius:9px;background:#000;transform:translateX(-50%)}
.rw-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.75));pointer-events:none}
.rw-cap{position:absolute;z-index:2;left:10px;right:10px;bottom:9px;font-size:.72rem;font-weight:600;line-height:1.2;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.rw-tile:hover,.rw-tile:focus-visible{transform:scale(1.04);box-shadow:0 0 0 2px var(--accent),0 0 0 5px #101012,0 18px 40px rgba(0,0,0,.55)}
.rw-tile:hover img{transform:scale(1.06)}
.rwall:hover .rw-tile:not(:hover) img{filter:brightness(.55)}
.rw-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.86);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.rw-modal.open{opacity:1;visibility:visible}
.rw-box{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:min(380px,100%,calc((100vh - 150px) * 9 / 16))}
.rw-player{width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #2b2c30,0 0 0 7px #101012,0 30px 80px rgba(0,0,0,.6)}
.rw-player iframe{width:100%;height:100%;border:0;display:block}
.rw-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;font-size:.95rem}
.rw-meta b{display:block}.rw-meta span{color:var(--muted);font-size:.85rem}
.rw-meta a{color:var(--accent);font-weight:600;white-space:nowrap}
.rw-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:none;font-size:1.6rem;line-height:1;cursor:pointer}
.rw-x:hover{background:#fff;color:#000}
@media (max-width:900px){
  .rwall-grid{grid-template-columns:1fr}
  .rwall{height:500px}
}
@media (max-width:560px){
  .rwall{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:440px}
  .rw-in{gap:10px}
  .rw-col.dn{padding-top:40px}
  .rw-tile{border-radius:14px}
  .rw-cap{font-size:.62rem;left:7px;right:7px;bottom:6px}
  @keyframes rwUp{to{transform:translateY(calc(-50% - 5px))}}
}
@media (prefers-reduced-motion:reduce){
  .rwall.go .rw-in{animation:none}
  .rwall{overflow-y:auto}
}
/* ===== Signman buddy (cardboard mascot) ===== */
.sm-buddy{position:relative;width:130px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline-offset:6px}
.sm-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.sm-svg text{font-family:"Permanent Marker","Comic Sans MS",cursive}
.sm-svg g{transform-box:view-box}
.sm-body{transform-origin:80px 206px;animation:sm-bob 2.4s ease-in-out infinite alternate}
.sm-arm-l{transform-origin:22px 84px;animation:sm-wave 1.3s ease-in-out infinite alternate}
.sm-arm-r{transform-origin:140px 86px;animation:sm-sway 2.1s ease-in-out infinite alternate}
.sm-leg-l{transform-origin:62px 146px;animation:sm-step 1.1s ease-in-out infinite alternate}
.sm-leg-r{transform-origin:98px 146px;animation:sm-step 1.1s ease-in-out infinite alternate-reverse}
.sm-eyes{transform-origin:72px 98px;animation:sm-blink 4.8s infinite}
.sm-pupils{transition:transform .15s}
.sm-mouth{transform-box:fill-box;transform-origin:50% 0;animation:sm-talk .9s ease-in-out infinite alternate;animation-play-state:paused}
.sm-buddy.talk .sm-mouth{animation-play-state:running}
.sm-buddy:hover .sm-arm-l,.sm-buddy:focus-visible .sm-arm-l{animation-duration:.32s}
.sm-buddy:hover .sm-leg-l,.sm-buddy:hover .sm-leg-r{animation-duration:.4s}
.sm-buddy.hop .sm-hopper{animation:sm-hop .65s var(--ease)}
.sm-hopper{transform-origin:80px 206px}
@keyframes sm-bob{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-6px) rotate(2.5deg)}}
@keyframes sm-wave{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@keyframes sm-sway{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes sm-step{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes sm-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes sm-talk{from{transform:scaleY(1)}to{transform:scaleY(2.2)}}
@keyframes sm-hop{0%{transform:none}30%{transform:translateY(-26px) rotate(-7deg)}60%{transform:translateY(0) scale(1.07,.92)}80%{transform:translateY(-6px) rotate(3deg)}100%{transform:none}}
.sm-bubble{position:absolute;z-index:2;bottom:96%;left:50%;transform:translate(-50%,8px) scale(.85);opacity:0;transition:opacity .25s,transform .35s var(--ease);
  background:#f3e6cf;color:#241a12;font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:.92rem;line-height:1.15;text-align:center;padding:.5rem .8rem;border-radius:12px;border:2px solid #5e3f1c;
  white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.sm-bubble::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#f3e6cf;border:2px solid #5e3f1c;border-top:0;border-left:0;transform:translate(-50%,-6px) rotate(45deg)}
.sm-buddy.talk .sm-bubble{opacity:1;transform:translate(-50%,-2px) scale(1)}
/* on the Signman page: he stands on the corner of the artwork */
.saga-art-wrap{position:relative}
.saga-art-wrap .sm-buddy{position:absolute;right:-6px;bottom:-54px;width:clamp(92px,10vw,132px);z-index:3}
/* in the "Want results like Signman?" box */
.svc-cta-in.has-sm{padding-inline:clamp(2rem,17vw,240px)}
.svc-cta-in .sm-buddy{position:absolute;left:clamp(1rem,3vw,3rem);bottom:-4px;width:clamp(130px,13vw,180px)}
.svc-cta-in .sm-bubble{left:72%}
@media (max-width:760px){
  .svc-cta-in.has-sm{padding-inline:clamp(1.4rem,5vw,2rem);overflow:visible}
  .svc-cta-in .sm-buddy{position:relative;left:auto;bottom:auto;width:96px;margin:1.6rem auto .6rem}
  .svc-cta-in .sm-bubble{left:50%}
  .saga-art-wrap .sm-buddy{right:4px;bottom:-40px}
}
/* the artwork scans in, then lightning and fire come alive */
.saga-art.sa-fx img{clip-path:inset(0 0 100% 0)}
.saga-art.sa-go img{animation:sa-reveal 1.5s cubic-bezier(.6,0,.2,1) forwards,sa-shake 6s 1.7s infinite,sa-zoom 16s 1.5s ease-in-out infinite alternate}
@keyframes sa-reveal{0%{clip-path:inset(0 0 100% 0);filter:brightness(1.9) saturate(0)}70%{clip-path:inset(0 0 0 0);filter:brightness(1.3) saturate(.4)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes sa-shake{0%,86%,94%,100%{translate:0 0}87%{translate:-4px 2px}88.5%{translate:4px -2px}90%{translate:-2px 1px}92%{translate:1px 0}}
@keyframes sa-zoom{from{scale:1}to{scale:1.06}}
.sa-scan,.sa-flash,.sa-fire{position:absolute;pointer-events:none;opacity:0}
.sa-scan{left:0;right:0;top:0;height:3px;z-index:2;background:#efe2ff;box-shadow:0 0 18px 7px rgba(190,150,255,.75)}
.sa-go .sa-scan{animation:sa-scan 1.5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes sa-scan{0%{top:0;opacity:1}70%{top:calc(100% - 3px);opacity:1}100%{top:calc(100% - 3px);opacity:0}}
.sa-flash{inset:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 22% 22%,rgba(214,190,255,.65),transparent 55%),radial-gradient(ellipse at 82% 18%,rgba(214,190,255,.55),transparent 55%),radial-gradient(ellipse at 50% 10%,rgba(255,255,255,.35),transparent 50%)}
.sa-go .sa-flash{animation:sa-flash 6s 1.7s infinite}
@keyframes sa-flash{0%,86%,100%{opacity:0}87%{opacity:1}88.5%{opacity:.15}90%{opacity:.95}94%{opacity:0}}
.sa-fire{left:0;right:0;bottom:0;height:50%;mix-blend-mode:screen;background:radial-gradient(ellipse at 6% 100%,rgba(255,140,40,.6),transparent 55%),radial-gradient(ellipse at 94% 100%,rgba(255,140,40,.6),transparent 55%),radial-gradient(ellipse at 50% 115%,rgba(255,90,20,.45),transparent 60%)}
.sa-go .sa-fire{animation:sa-fire 1.7s 1.4s ease-in-out infinite alternate}
@keyframes sa-fire{0%{opacity:.3}25%{opacity:.75}50%{opacity:.45}75%{opacity:.9}100%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .sm-body,.sm-arm-l,.sm-arm-r,.sm-leg-l,.sm-leg-r,.sm-eyes,.sm-mouth{animation:none}
}

/* Signman page: he climbs up from behind the artwork, hops onto it and sits on the top edge */
.saga-art-wrap .saga-art{z-index:2;background:#1b1714}
.saga-art-wrap .sm-buddy{position:absolute;top:0;bottom:auto;right:9%;width:clamp(110px,12vw,150px);z-index:4;transform:translateY(-64%)}
.saga-art-wrap .sm-buddy.sm-wait{z-index:1;transform:translateY(20%)}
.saga-art-wrap .sm-buddy.sm-climb{animation:sm-climb 1.7s var(--ease) forwards}
@keyframes sm-climb{
  0%{transform:translateY(20%);z-index:1}
  38%{transform:translateY(-52%);z-index:1}
  52%{transform:translateY(-52%) rotate(-3deg);z-index:1}
  66%{transform:translateY(-104%) rotate(-7deg);z-index:1}
  67%{transform:translateY(-104%) rotate(-7deg);z-index:4}
  82%{transform:translateY(-60%) scale(1.05,.93);z-index:4}
  92%{transform:translateY(-67%);z-index:4}
  100%{transform:translateY(-64%);z-index:4}
}
.saga-art-wrap .sm-buddy.sm-sat .sm-body{animation:sm-sit 2.6s ease-in-out infinite alternate}
.saga-art-wrap .sm-buddy.sm-sat .sm-leg-l{animation:sm-kick .8s ease-in-out infinite alternate}
.saga-art-wrap .sm-buddy.sm-sat .sm-leg-r{animation:sm-kick .8s ease-in-out infinite alternate-reverse}
@keyframes sm-sit{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes sm-kick{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
/* Signman takes Reely's job for a moment */
.reely .reely-btn{transition:translate .5s var(--ease)}
.reely.reely-away .reely-btn{translate:0 170%}
.reely.reely-away .reely-tip{opacity:0 !important;visibility:hidden}
.sm-cameo{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(4px,1.2vw,14px);width:112px;z-index:46;translate:0 135%;transition:translate .55s var(--ease)}
.sm-cameo.in{translate:0 0}
.sm-cameo.shove{translate:-118px 135%}
.sm-cameo.in.shove{translate:-118px 0}
.sm-cameo .sm-bubble,.form-wrap .sm-buddy .sm-bubble{left:auto;right:0;transform:translate(0,8px) scale(.85);transform-origin:90% 100%}
.sm-cameo.talk .sm-bubble,.form-wrap .sm-buddy.talk .sm-bubble{transform:translate(0,-2px) scale(1)}
.sm-cameo .sm-bubble::after,.form-wrap .sm-buddy .sm-bubble::after{left:70%}
.sm-reely-say{position:fixed;right:clamp(12px,2vw,24px);bottom:118px;z-index:47;background:#fff;color:#141414;font-weight:600;font-size:.95rem;padding:.55rem .85rem;border-radius:14px 14px 4px 14px;box-shadow:0 10px 26px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.sm-reely-say.show{opacity:1;transform:none}
/* Signman pops into Reely's chat */
.r-sm{display:flex;align-items:center;gap:.7rem}
.r-sm .sm-svg{width:74px;flex:none;filter:none}
.r-sm span{font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:.95rem}
/* contact page: next to the send button */
.form-wrap .submit .sm-buddy{width:104px;margin-left:auto;margin-top:-1rem}
/* work page: pops up from behind the Signman card on hover and sits on it */
.card.has-sm{position:relative}
.card.has-sm .media{z-index:2}
.card.has-sm .sm-buddy{position:absolute;top:0;right:8%;width:clamp(100px,9vw,130px);z-index:1;transform:translateY(25%);transition:transform .55s var(--ease),z-index 0s;pointer-events:none}
.card.has-sm:hover .sm-buddy,.card.has-sm:focus-visible .sm-buddy{transform:translateY(-46%) rotate(-4deg);transition:transform .45s var(--ease)}
.card.has-sm .sm-buddy .sm-arm-l{animation-duration:.45s}
@media (hover:none){ .card.has-sm .sm-buddy{transform:translateY(-46%) rotate(-4deg)} }

/* ===== fixes ===== */
/* a playing video never dims, and nothing in its row dims while it plays */
.phones .media.phone:has(iframe),.phones:has(iframe) .media.phone{filter:none!important}
/* Signman's speech bubble can rise above the Signman section */
.saga{overflow:visible;overflow-x:clip}
/* Home link in the main menu */
.nav .nav-home{opacity:.85}
/* back button on case studies */
.cs-back{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1rem;padding:.5rem .95rem .5rem .8rem;border:1px solid var(--border);border-radius:999px;font-size:.9rem;font-weight:500;color:var(--text);background:rgba(0,0,0,.25);transition:background .25s,color .25s,border-color .25s}
.cs-back:hover,.cs-back:focus-visible{background:#fff;color:#141414;border-color:#fff}
.cs-back .arr-l{display:inline-block;transition:transform .25s var(--ease)}
.cs-back:hover .arr-l{transform:translateX(-3px)}
/* ===== bigger phones, swipeable rows, quicker reveals, compact service pages, photo wall ===== */
/* reveals: quicker and lighter, so nothing feels like it loads in late */
.js .rv{transform:translateY(14px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
/* phones are the star: bigger next to text and photos */
.reels-row{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.phones .media.phone{width:clamp(200px,21vw,290px)}
@media (max-width:700px){ .phones .media.phone{width:clamp(180px,58vw,240px)} }
/* rows of phones: room at the sides so tilted corners never get cut off */
.phones.phones-rail{padding-inline:1.4rem;margin-inline:-1.4rem;scroll-padding-inline:1.4rem}
/* swipe the film strip and reels row with a finger (up and down still scrolls the page) */
.reelsec .strip,.rwall{touch-action:pan-y}
.rw-row{will-change:transform}
/* touch screens: a tap leaves "hover" stuck on, which dimmed/zoomed the moving tiles and made swiping stutter */
@media (hover:none){
  .rw-tile:hover{transform:none;box-shadow:0 0 0 2px #2b2c30,0 0 0 5px #101012,0 14px 30px rgba(0,0,0,.45)}
  .rw-tile:hover img{transform:none}
  .rwall:hover .rw-tile:not(:hover) img{filter:none}
  .frame:hover .fbg{transform:none}
}
/* service pages: tighter spacing and headings, phones stay big */
main.svc .sec,main.svc > section.pad{padding-block:clamp(2.6rem,5vw,4.2rem)}
main.svc > section[style*="padding-bottom"]{padding-bottom:clamp(2.6rem,5vw,4.2rem)!important}
main.svc h2.display{font-size:clamp(2.4rem,4.6vw,4rem)!important}
main.svc .overview{gap:clamp(1.2rem,3vw,2.5rem)}
main.svc .overview .big{font-size:clamp(1.15rem,1.7vw,1.45rem);margin-bottom:1rem}
main.svc .overview .prose p{margin:0 0 .8rem;font-size:1rem}
main.svc .program{padding-top:clamp(1.6rem,3vw,2.4rem)}
main.svc .program .groups{gap:.7rem}
main.svc .program .group{padding:1rem 1.1rem}
main.svc .stats .stat{padding-block:1rem}
main.svc .sec-head{margin-bottom:1.2rem}
main.svc .faq details summary{padding-block:1rem}
main.svc .timeline .bens{gap:1rem}
main.svc .svc-cta{padding-block:clamp(2rem,4vw,3rem)}
main.svc .svc-testi{padding-block:clamp(2rem,4vw,3rem)}
/* Photo page: instant-film prints that "develop" as they come on screen */
.gallery.polaroids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.2rem) clamp(1rem,2.2vw,1.8rem);padding:1.2rem .4rem 1rem}
.gallery.polaroids .media{grid-column:auto!important;aspect-ratio:auto!important;overflow:visible;background:#f6f3ec;border-radius:3px;padding:10px 10px 46px;box-shadow:0 18px 34px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.08);rotate:var(--rot,-2deg);transition:rotate .45s var(--ease),translate .45s var(--ease),scale .45s var(--ease),box-shadow .45s,opacity .5s var(--ease),transform .55s var(--ease)}
.gallery.polaroids .media:nth-child(4n+2){--rot:2.5deg}
.gallery.polaroids .media:nth-child(4n+3){--rot:-1deg;translate:0 10px}
.gallery.polaroids .media:nth-child(4n+4){--rot:3deg}
.gallery.polaroids .media:nth-child(5){--rot:1.5deg}
.gallery.polaroids .media:nth-child(7){--rot:-3deg}
.gallery.polaroids .media>img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:1px;transition:filter 1.8s ease-out,transform 1s var(--ease)}
.gallery.polaroids .media::before{content:"";position:absolute;z-index:3;top:-11px;left:50%;width:74px;height:22px;translate:-50% 0;rotate:-3deg;background:rgba(240,232,210,.62);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.gallery.polaroids .media:nth-child(even)::before{rotate:4deg}
.gallery.polaroids .pcap{position:absolute;left:8px;right:8px;bottom:11px;text-align:center;font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:clamp(.82rem,1.05vw,1rem);color:#2a2622;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery.polaroids .media:hover,.gallery.polaroids .media:focus-visible{rotate:0deg;translate:0 -8px;scale:1.05;z-index:2;box-shadow:0 30px 50px rgba(0,0,0,.6)}
.gallery.polaroids .media:hover>img{transform:none}
.js .gallery.polaroids .media.rv:not(.in)>img{filter:brightness(2.3) saturate(0) contrast(.55) sepia(.25)}
@media (max-width:860px){ .gallery.polaroids{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .js .gallery.polaroids .media.rv:not(.in)>img{filter:none} }
/* case study hero with a phone instead of a photo (Big Apple Comics) */
.cs-visual.cs-visual-phone{aspect-ratio:auto;overflow:visible;display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem) 1rem}
.cs-visual-phone .media.phone.phone-lg{width:clamp(210px,21vw,290px)}
.gallery.polaroids .media>img{transform:none!important;--py:0}

/* phones: side-by-side pairs fit the screen; swipeable rows stay big */
@media (max-width:700px){ .phones:not(.phones-rail) .media.phone{width:clamp(130px,40vw,200px)} }

/* reels row: clear space under the buttons, and arrow buttons to page through it */
.rwall-copy{position:relative;z-index:2;margin-bottom:clamp(1.6rem,3vw,2.4rem)!important}
.rw-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem}
.rw-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:1.15rem;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.rw-nav button:hover,.rw-nav button:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .rw-nav{display:none} }
/* ===== Photo galleries (Photography page) ===== */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,2.5vw,2rem);margin-top:1.4rem}
.album{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:0;border:0;background:none;color:var(--text);cursor:pointer;text-align:center}
.album-stack{position:relative;display:block;width:100%;aspect-ratio:1;margin-bottom:1rem}
.album-print{position:absolute;inset:6% 8% 10%;background:#f6f3ec;padding:7px 7px 30px;border-radius:3px;box-shadow:0 14px 28px rgba(0,0,0,.5);transition:rotate .45s var(--ease),translate .45s var(--ease)}
.album-print img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}
.album-print.p0{rotate:-2deg;z-index:3}
.album-print.p1{rotate:6deg;translate:4% 2%;z-index:2}
.album-print.p2{rotate:-8deg;translate:-4% 3%;z-index:1}
.album-print.p0::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;translate:-50% 0;rotate:-3deg;background:rgba(240,232,210,.65);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.album:hover .album-print.p0,.album:focus-visible .album-print.p0{rotate:0deg;translate:0 -6px}
.album:hover .album-print.p1,.album:focus-visible .album-print.p1{rotate:12deg;translate:14% 0}
.album:hover .album-print.p2,.album:focus-visible .album-print.p2{rotate:-13deg;translate:-14% 2%}
.album-title{font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.15}
.album-count{color:var(--muted);font-size:.88rem;transition:color .25s}
.album:hover .album-count{color:var(--accent)}
.pg-modal{position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;background:rgba(16,16,18,.97);padding:0 var(--gut) 4rem;opacity:0;transition:opacity .25s}
.pg-modal.open{opacity:1}
.pg-head{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.4rem 0 1.1rem;background:linear-gradient(rgba(16,16,18,.98) 75%,rgba(16,16,18,0))}
.pg-eye{margin:0 0 .3rem;color:var(--accent);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.pg-title{margin:0;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3.4rem);line-height:.95}
.pg-about{margin:.4rem 0 0;color:var(--muted)}
.pg-x,.pg-vx{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(0,0,0,.3);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.pg-x:hover,.pg-vx:hover{background:#fff;color:#000}
.pg-grid{max-width:1400px;margin:0 auto}
.gallery.polaroids .pg-print{display:block;width:100%;border:0;cursor:zoom-in;font:inherit}
.pg-print:not(.dev)>img{filter:brightness(2.3) saturate(0) contrast(.55) sepia(.25)}
.pg-view{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;background:rgba(8,8,9,.96);opacity:0;transition:opacity .2s}
.pg-view.open{opacity:1}
.pg-view figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:min(1200px,86vw)}
.pg-frame{display:block;background:#f6f3ec;padding:10px 10px 12px;border-radius:3px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.pg-frame img{display:block;max-width:min(1180px,84vw);max-height:76vh;width:auto;height:auto}
.pg-view figcaption{color:#e8e4da;font-family:"Permanent Marker","Comic Sans MS",cursive;font-size:1.05rem;text-align:center}
.pg-prev,.pg-next{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;font-size:1.3rem;cursor:pointer}
.pg-prev:hover,.pg-next:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pg-vx{position:absolute;top:14px;right:16px}
@media (max-width:700px){
  .albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
  .album-print{padding:5px 5px 20px}
  .pg-prev,.pg-next{position:absolute;bottom:18px;width:46px;height:46px}
  .pg-prev{left:calc(50% - 56px)}.pg-next{right:calc(50% - 56px)}
  .pg-frame img{max-width:92vw;max-height:70vh}
}
@media (prefers-reduced-motion:reduce){ .pg-print:not(.dev)>img{filter:none} }
.pg-view[hidden],.pg-modal[hidden]{display:none!important}

.alt-wide-h{margin:clamp(1.5rem,3vw,2.5rem) 0 .8rem}
.reels-row .reels-h{overflow-wrap:anywhere}
/* a fan of 2-3 phones shrinks to fit its column instead of spilling onto the text */
.phones:not(.phones-rail) .media.phone{flex-shrink:1;min-width:0}
.reels-row > .phones:not(.phones-rail){min-width:0;overflow:visible}

/* phone fans: gentler and balanced; the middle phone stands up straight */
.phones:not(.phones-rail) .media.phone:nth-child(1){--r:-4deg;--y:.6rem}
.phones:not(.phones-rail) .media.phone:nth-child(2){--r:0deg;--y:-.3rem}
.phones:not(.phones-rail) .media.phone:nth-child(3){--r:4deg;--y:.6rem}
.phones:not(.phones-rail) .media.phone:nth-child(2):last-child{--r:4deg;--y:.6rem} /* just two phones */
.phones:not(.phones-rail) .media.phone:hover,.phones:not(.phones-rail) .media.phone:focus-visible{--r:0deg;--y:-12px}
.phones:not(.phones-rail) .media.phone:nth-child(n):hover,.phones:not(.phones-rail) .media.phone:nth-child(n):focus-visible{--r:0deg;--y:-12px}/* breathing room between a widescreen playlist and the phone row after it */
.vlist + .reels-row,.svc-reels .vlist + .reels-row{margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--line)}

/* little hovering drone next to drone headings */
.mini-drone{display:block;width:clamp(130px,13vw,170px);margin:0 0 .4rem;filter:drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.mini-drone svg{display:block;width:100%;height:auto;overflow:visible}
.mini-drone .dr-craft{transform-box:view-box;transform-origin:110px 60px;animation:dr-hover 3.2s ease-in-out infinite alternate}
.mini-drone .dr-prop{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:dr-spin .16s linear infinite}
.mini-drone .dr-prop.rev{animation-direction:reverse}
.mini-drone .dr-led{animation:dr-blink 1.4s steps(1) infinite}
.mini-drone .dr-led.r{animation-delay:.7s}
.mini-drone .dr-cam{transform-box:view-box;transform-origin:110px 76px;animation:dr-look 6s ease-in-out infinite}
@keyframes dr-hover{0%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(6px,-7px) rotate(1deg)}100%{transform:translate(-4px,-2px) rotate(2.5deg)}}
@keyframes dr-spin{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes dr-blink{0%{opacity:1}50%{opacity:.15}}
@keyframes dr-look{0%,40%,100%{transform:rotate(0)}55%,80%{transform:rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){ .mini-drone .dr-craft,.mini-drone .dr-prop,.mini-drone .dr-led,.mini-drone .dr-cam{animation:none} }
/* CEF: photos from the night */
.cef-night{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--line)}
.cef-night .btn{margin-top:1.2rem}
.gallery.polaroids.cef-prints{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){ .cef-night{grid-template-columns:1fr} .gallery.polaroids.cef-prints{grid-template-columns:repeat(2,minmax(0,1fr))} }
.albums .album{animation:album-in .6s var(--ease) both}
.albums .album:nth-child(2){animation-delay:.06s}.albums .album:nth-child(3){animation-delay:.12s}.albums .album:nth-child(n+4){animation-delay:.18s}
@keyframes album-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* gallery captions wrap to two lines instead of getting cut off */
.pg-grid .pcap{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;bottom:6px;font-size:clamp(.74rem,1vw,.95rem);display:flex;align-items:center;justify-content:center;height:34px}

/* Photography page: gallery stacks are big, 3 across on computers, 2 on phones */
.albums{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin-inline:auto;gap:clamp(2rem,3.5vw,3.2rem) clamp(1.4rem,3vw,2.6rem)}
.album-title{font-size:clamp(1.25rem,1.9vw,1.6rem)}
@media (max-width:700px){ .albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem} }
/* Work page: Mermaids Magic highlight at the top */
.hlwork.hl-lead{margin:clamp(1.2rem,2.5vw,2rem) 0 clamp(2.2rem,4.5vw,3.4rem);padding:0 0 clamp(2rem,4vw,3rem);border-top:0;border-bottom:1px solid var(--line)}

/* ===== mobile fixes ===== */
/* the page never slides side to side (decorations that poke past the edge are clipped) */
html,body{overflow-x:clip}
@supports not (overflow:clip){ html,body{overflow-x:hidden} }
/* phones + words stack on tablets and phones (a desktop rule was overriding this) */
@media (max-width:860px){
  .reels-row{grid-template-columns:1fr}
  .cef-night{grid-template-columns:1fr}
}
/* on phones: groups of 2-3 phones become one big swipeable row instead of a squeezed fan */
@media (max-width:700px){
  .reels-row .phones:not(.phones-rail),.quote .phones,.svc-testi .phones{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:1rem var(--gut) 1.8rem;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
  .reels-row .phones:not(.phones-rail)::-webkit-scrollbar,.quote .phones::-webkit-scrollbar,.svc-testi .phones::-webkit-scrollbar{display:none}
  .reels-row .phones:not(.phones-rail) .media.phone,.quote .phones .media.phone,.svc-testi .phones .media.phone{width:min(68vw,270px);flex:none;scroll-snap-align:center;--x:0px!important;--y:0px!important;--r:0deg!important}
  /* a single phone sits centered */
  .reels-row .phones:not(.phones-rail):has(> .media.phone:only-child){justify-content:center}
  /* swipe rows (4+ phones) get the same big phones */
  .phones.phones-rail .media.phone{width:min(68vw,270px)}
  .reels-row > .rv:first-child{max-width:none}
}