/* Creative Services overview.
   Long collage forms built from delivered client work. Loads after base.css;
   the shared brand files load after this, so page layout only lives here.
   Full-bleed grids use gap:1px over the parent background: exactly one hairline
   between cells and none at the outer edge. */

/* ---------- locked shared rules, same values as the Advertising page ---------- */
:root{--gray:#62626c;--gray-light:#74747e;--sec-y:clamp(64px,7vw,108px);--r-card:18px}
html{scroll-padding-top:116px;overscroll-behavior:auto}
body{background:#fff;color:#0a0a0b;transition:none}
[data-surface]{--fg:#0a0a0b;--muted:#62626c;--meta:#696973;--rule:rgba(0,0,0,.12);--kicker:#bd2020;background:#fff;color:var(--fg)}
[data-surface="light"]{background:#f6f6f7}
[data-surface="ink"]{--fg:#fff;--muted:#b6b6bf;--meta:#b6b6bf;--rule:rgba(255,255,255,.16);--kicker:#ff6b6b;background:#0a0a0b;color:var(--fg)}
button,a,input,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #df4141;outline-offset:5px}
.visually-hidden:focus{position:fixed!important;z-index:1000;left:16px;top:12px;width:auto;height:auto;clip:auto;padding:14px 20px;background:#fff;color:#0a0a0b}
.btn{min-height:48px;white-space:normal;text-align:center;line-height:1.3}
.btn-outline{color:var(--kicker);border-color:var(--kicker)}
.btn-outline:hover{color:#fff;border-color:#b91c1c;background:#b91c1c}
.nav{max-width:calc(100vw - 40px);gap:2px}
.nav .btn{font-size:.875rem;white-space:nowrap;min-height:44px;margin-left:4px;padding:10px 18px}
.nav-links a,.nav-links button{font-size:.9375rem;padding:8px 12px}
.nav .logo img{height:24px}
.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav-dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd:hover>button svg{transform:none}.nav-dd.open>button svg{transform:rotate(180deg)}
.menu-btn{width:44px;height:44px}.menu-btn span{left:13px}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.mobile-menu{padding-top:96px}
.mobile-menu .sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
.mobile-menu .sub a{font-size:1rem}
.kicker{font-size:.8125rem;letter-spacing:.08em}
.section-head{display:flex;flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
.section-head h2{line-height:1.05;letter-spacing:-.045em}
.section-head h2 span{color:#bd2020}
[data-surface="ink"] .section-head h2 span{color:#ff6b6b}
.section-head>.intro-note{max-width:68ch;padding:22px 26px;background:#eeeef2;border-left:3px solid #d62c3b;border-radius:0 12px 12px 0;color:#62626c;line-height:1.65}
[data-surface="ink"] .section-head>.intro-note{background:#19191e;color:#b6b6bf;border-color:#ef5261}
.section-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:40px;text-align:center}

/* ---------- opening module, white per the website rule ---------- */
#creative-hero{padding:156px 0 60px;overflow:hidden}
#creative-hero .wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 93% 4%,#fdeef0,transparent 48%)}
#creative-hero .container{position:relative}
#creative-hero .kicker{margin-bottom:24px}
#creative-hero h1 span{display:block}
#creative-hero h1 .ombre{line-height:1.05}
.cr-lede{margin-top:24px;max-width:46ch;color:#62626c}
.cr-hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.cr-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4.4vw,74px);align-items:center;position:relative}
.cr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);
  border-top:1px solid #dddde3;border-bottom:1px solid #dddde3;list-style:none;padding:0}
.cr-facts li{padding:26px 24px;border-left:1px solid #dddde3}
.cr-facts li:first-child{border-left:0;padding-left:0}
.cr-facts b{display:block;font-size:clamp(1.9rem,3.3vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:#bd2020}
.cr-facts span{display:block;margin-top:10px;font-size:.8125rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#696973;line-height:1.5}

/* ---------- section furniture ---------- */
.cr-band{padding:var(--sec-y) 0}
.cr-band>.container+.bleed,.cr-band>.container+.cr-wall{margin-top:clamp(36px,4vw,60px)}
.cr-cap{margin-top:20px;font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--meta);line-height:1.6}
.bleed{width:100%}

/* ---------- lead collage: one tall panel, eight tiles beside it ---------- */
.cr-collage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:1px;background:var(--rule)}
.cr-collage>figure{margin:0;position:relative;background:#fff;overflow:hidden}
.cr-collage .tall img{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;object-position:top center}
.cr-collage .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-collage .tiles figure{margin:0;background:#fff;overflow:hidden}
.cr-collage .tiles img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.cr-collage.flip{grid-template-columns:minmax(0,11fr) minmax(0,7fr)}
.cr-collage.flip .tall{order:2}
.cr-collage.flip .tiles{order:1}

/* ---------- the wall of delivered listing images ---------- */
.cr-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-wall.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cr-wall figure{margin:0;position:relative;background:#fff;overflow:hidden}
[data-surface="ink"] .cr-wall figure{background:#17171a}
.cr-wall img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ease-out)}
.cr-wall figure:hover img{transform:scale(1.045)}
.cr-wall figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.55) 45%,transparent);
  opacity:0;transition:opacity .3s}
.cr-wall figure:hover figcaption,.cr-wall figure:focus-within figcaption{opacity:1}

/* ---------- A+ content: tall pages in three columns, wide modules below ---------- */
.cr-aplus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);align-items:start}
.cr-aplus .col{display:grid;gap:clamp(14px,1.8vw,26px);align-content:start}
.cr-aplus figure{margin:0;background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.07)}
.cr-aplus img{display:block;width:100%;height:auto}
.cr-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(24px,3vw,40px)}
.cr-mods figure{margin:0;background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.07)}
.cr-mods img{display:block;width:100%;height:auto}

/* ---------- storefront and long-form panels ---------- */
.cr-store{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--rule)}
.cr-store figure{margin:0;background:#fff;overflow:hidden}
.cr-store figure.wide{grid-column:1/-1}
.cr-store figure.tall2{grid-row:span 2}
.cr-store img{display:block;width:100%;height:auto}
.cr-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-strip figure{margin:0;background:#fff;overflow:hidden}
.cr-strip img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.cr-land{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-land figure{margin:0;background:#fff;overflow:hidden}
.cr-land img{display:block;width:100%;height:auto}
.cr-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-quad figure{margin:0;background:#fff;overflow:hidden}
.cr-quad img{display:block;width:100%;height:auto}

/* ---------- copy tiles, the hairline plate used across the site ---------- */
.cr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cr-tiles article{background:#fff;padding:clamp(30px,3.1vw,50px) clamp(26px,2.8vw,44px);
  display:flex;flex-direction:column;gap:14px;transition:background-color .35s var(--ease-out)}
.cr-tiles article:hover{background:#f6f6f7}
.cr-tiles .n{font-size:.75rem;font-weight:700;letter-spacing:.18em;color:#bd2020;font-variant-numeric:tabular-nums}
.cr-tiles h3{letter-spacing:-.025em;color:#0a0a0b}
.cr-tiles p{color:#62626c;margin:0}
.cr-tiles .more{margin-top:auto;padding-top:20px}
.cr-tiles .more a{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:#bd2020}
.cr-tiles .more a::after{content:"\2192";transition:transform .2s}
.cr-tiles .more a:hover::after{transform:translateX(4px)}

/* ---------- brand roll ---------- */
.cr-brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none;padding:0}
.cr-brands li{padding:10px 18px;border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:550;color:var(--fg)}

/* ---------- final CTA, same shape as the advertising page ---------- */
.cr-audit{padding:64px 0 80px}
.cr-audit h2{line-height:1.05;letter-spacing:-.045em}
.cr-audit h2 span{color:#bd2020}
.cr-audit p:not(.kicker){max-width:48ch;color:#62626c;margin-top:20px}
.cr-audit .btn{margin-top:28px}

/* ---------- responsive ---------- */
@media(max-width:1099px){
  .cr-hero-grid{grid-template-columns:1fr;gap:34px}
  .cr-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cr-wall.c5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-aplus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-quad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .cr-collage,.cr-collage.flip{grid-template-columns:1fr}
  .cr-collage .tall{order:0}.cr-collage .tiles{order:0}
  .cr-collage.flip .tall{order:0}.cr-collage.flip .tiles{order:1}
  .cr-collage .tall img{height:auto;min-height:0;aspect-ratio:4/5}
  .cr-aplus{grid-template-columns:1fr}
  .cr-mods,.cr-store,.cr-land{grid-template-columns:1fr}
  .cr-quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-store figure.wide{grid-column:auto}
}
@media(max-width:767px){
  html{scroll-padding-top:92px}
  #creative-hero{padding:108px 0 44px}
  .cr-facts li{padding:20px 12px}
  .cr-facts b{font-size:clamp(1.25rem,5.4vw,1.9rem)}
  .cr-facts span{font-size:.6875rem;letter-spacing:.07em}
  .cr-audit{padding:48px 0 64px}
}
@media(max-width:640px){
  .cr-wall,.cr-wall.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-tiles{grid-template-columns:1fr}
  .cr-wall figcaption{opacity:1;font-size:.625rem;padding-top:20px}
}

/* Secondary creative headlines use the same Ninja Heat gradient as the rest of the site. */
.section-head h2 span,
.cr-audit h2 span{
  display:inline-block!important;
  background:var(--ombre)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  padding-right:.05em!important;
  margin-right:-.05em!important;
}

/* ============================================================================
   Service showcases. Each service gets a marquee ribbon and a matrix, with one
   copy tile sitting inside the matrix rather than beside it.
   ========================================================================== */
.cr-svc{padding:var(--sec-y) 0}
.cr-svc .svc-head{display:grid;gap:20px;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.cr-svc .svc-head .top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:2px solid var(--fg)}
.cr-svc .svc-head .svc-no,.cr-svc .svc-head .service-icon{display:none}
.cr-svc .svc-head .top{gap:0}
.cr-svc .svc-no{font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--kicker);font-variant-numeric:tabular-nums;flex:none}
.cr-svc .svc-head .top .kicker{font-size:clamp(.875rem,1.15vw,1.0625rem);letter-spacing:.14em;
  font-weight:700;color:var(--fg)}
.cr-svc .svc-head h2{margin-top:6px}
.cr-svc .svc-head p{max-width:62ch;color:var(--muted)}
.cr-svc .svc-foot{display:flex;justify-content:center;padding:0 var(--gutter);
  margin-top:clamp(38px,4.2vw,64px)}
.cr-svc .svc-foot a{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:clamp(18px,1.9vw,26px) clamp(34px,4vw,60px);border-radius:var(--r-pill);
  background:#dc2626;color:#fff;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.0625rem,1.38vw,1.35rem);line-height:1.2;text-align:center;
  box-shadow:0 6px 22px rgba(220,38,38,.32);
  transition:background-color .2s,transform .2s,box-shadow .2s}
.cr-svc .svc-foot a::after{content:"\2192";transition:transform .2s}
.cr-svc .svc-foot a:hover{background:#b91c1c;transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(220,38,38,.4)}
.cr-svc .svc-foot a:hover::after{transform:translateX(5px)}
.cr-svc .bleed{margin-top:clamp(32px,3.6vw,52px)}
.cr-svc .bleed + .bleed{margin-top:1px}

/* ---------- marquee ribbon ----------
   Three identical runs, so translateX(-33.3333%) lands exactly one run along and
   the loop is seamless. Separation is a border on each item, not a flex gap,
   because a gap would add one extra column of width and drift the loop. */
.cr-marquee{--mq:clamp(140px,15vw,236px);width:100%;overflow:hidden;background:var(--rule)}
.cr-mq-track{display:flex;width:max-content;animation:crMq 64s linear infinite}
.cr-marquee.rev .cr-mq-track{animation-direction:reverse}
.cr-marquee.slow .cr-mq-track{animation-duration:92s}
.cr-mq-run{display:flex;flex:none;margin:0;padding:0;list-style:none}
.cr-mq-run li{flex:none;width:var(--mq);height:var(--mq);overflow:hidden;background:#fff;
  border-right:1px solid var(--rule);position:relative}
[data-surface="ink"] .cr-mq-run li{background:#17171a}
.cr-mq-run img{display:block;width:100%;height:100%;object-fit:cover}
.cr-marquee.wide{--mq:clamp(220px,24vw,380px)}
.cr-marquee.wide .cr-mq-run li{width:var(--mq);height:calc(var(--mq) * .5625)}
.cr-marquee.tall .cr-mq-run li{height:calc(var(--mq) * 1.5)}
@keyframes crMq{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
html.motion-paused .cr-mq-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .cr-mq-track{animation:none}
  .cr-marquee{overflow-x:auto}
  .cr-mq-run[aria-hidden]{display:none}
}

/* ---------- matrix: 24 cells, one of them copy ----------
   24 divides by 6, 4, 3 and 2, so the grid stays flush at every breakpoint.
   The copy tile is placed explicitly at row 2 column 3 on desktop; auto
   placement fills around it, which is why it is the 9th child in the DOM. */
.cr-matrix{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;background:#fff}
[data-surface="light"] .cr-matrix{background:#f6f6f7}
[data-surface="ink"] .cr-matrix{background:#0a0a0b}
.cr-matrix figure{margin:0;position:relative;background:#fff;overflow:hidden}
[data-surface="ink"] .cr-matrix figure{background:#17171a}
.cr-matrix img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .6s var(--ease-out)}
.cr-matrix figure:hover img{transform:scale(1.045)}
.cr-matrix figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.55) 45%,transparent);
  opacity:0;transition:opacity .3s}
.cr-matrix figure:hover figcaption,.cr-matrix figure:focus-within figcaption{opacity:1}
.cr-matrix .copy.wide{grid-column:2/span 2;grid-row:2/span 2}
.cr-matrix .copy{grid-column:3;grid-row:2/span 2;background:#0a0a0b;color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:clamp(18px,1.8vw,30px);container-type:inline-size}
.cr-matrix .copy b{display:block;font-size:clamp(1rem,1.3vw,1.25rem);font-weight:700;
  line-height:1.25;letter-spacing:-.02em}

.cr-matrix.tallcells img{aspect-ratio:3/4}

/* ---------- video matrix ---------- */
.cr-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-vid{position:relative;margin:0;background:#17171a;overflow:hidden;padding:0;border:0;
  width:100%;cursor:pointer;display:block;text-align:left}
.cr-vid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease-out),opacity .3s}
.cr-vid:hover img{transform:scale(1.04);opacity:.85}
.cr-vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.cr-vid .play i{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-out);
  box-shadow:0 6px 24px rgba(0,0,0,.3)}
.cr-vid .play i::after{content:"";border-left:19px solid #0a0a0b;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px}
.cr-vid:hover .play i{transform:scale(1.12)}
.cr-vid figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 20px 18px;
  font-size:.875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}

.cr-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:rgba(6,6,8,.94);padding:clamp(16px,4vw,56px);
  opacity:0;transition:opacity .25s}
.cr-lightbox.open{opacity:1}
.cr-lightbox video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;
  background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.cr-lightbox .lb-close{position:absolute;top:16px;right:16px;width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.cr-lightbox .lb-close:hover{background:rgba(255,255,255,.26)}
.cr-lightbox .lb-title{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;
  font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.85}

/* ---------- Alexa / Rufus audit: a document, not a screenshot ---------- */
.cr-paper-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.cr-stage{position:relative;perspective:1400px;padding:clamp(20px,3vw,44px) 0}
.cr-paper{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:17/22;
  background:#fff;border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 50px rgba(0,0,0,.16),0 50px 90px rgba(0,0,0,.1);
  transform:rotateX(6deg) rotateY(-11deg) rotateZ(1.2deg);transform-style:preserve-3d;
  padding:10% 9% 9%;overflow:hidden}
.cr-paper::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.55),transparent 34%,rgba(0,0,0,.05))}
.cr-paper .ph{display:flex;align-items:center;gap:8px;padding-bottom:12px;
  border-bottom:2px solid #0a0a0b}
.cr-paper .ph b{font-size:clamp(.7rem,1.1vw,.82rem);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#0a0a0b}
.cr-paper .ph i{width:9px;height:9px;border-radius:50%;background:#dc2626;flex:none}
.cr-paper h4{margin-top:7%;font-size:clamp(1.05rem,2vw,1.55rem)!important;font-weight:800;
  line-height:1.12!important;letter-spacing:-.03em;color:#0a0a0b}
.cr-paper .rule{height:7px;border-radius:4px;background:#ececf0;margin-top:11px}
.cr-paper .rule.s{width:62%}.cr-paper .rule.m{width:84%}.cr-paper .rule.r{background:#f7d4d4;width:44%}
.cr-paper .block{margin-top:7%;padding-top:13px;border-top:1px solid #e6e6ec}
.cr-paper .row{display:flex;align-items:center;gap:9px;margin-top:11px}
.cr-paper .row em{width:19px;height:19px;border-radius:5px;background:#0a0a0b;flex:none}
.cr-paper .row em.red{background:#dc2626}
.cr-paper .row .rule{margin-top:0;flex:1}
.cr-badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.cr-badges li{padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--rule);
  font-size:.9375rem;font-weight:600;color:var(--fg);background:rgba(255,255,255,.04)}
.cr-badges li b{color:var(--kicker);font-weight:800;font-variant-numeric:tabular-nums}
.cr-float{position:absolute;padding:11px 17px;border-radius:var(--r-pill);background:#0a0a0b;
  color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 12px 32px rgba(0,0,0,.28)}
.cr-float.red{background:#dc2626}
.cr-float.f1{top:6%;right:-2%}
.cr-float.f2{bottom:20%;left:-5%}
.cr-float.f3{bottom:3%;right:6%}
[data-surface="ink"] .cr-float{background:#fff;color:#0a0a0b}
[data-surface="ink"] .cr-float.red{background:#ef4444;color:#fff}

/* ---------- closing portfolio: organised brand plates, not a dump ---------- */
.cr-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.cr-plate{background:#fff;display:flex;flex-direction:column}
[data-surface="ink"] .cr-plate{background:#0f0f12}
.cr-plate .pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.cr-plate .pair figure{margin:0;overflow:hidden;background:#fff}
.cr-plate .pair img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .6s var(--ease-out)}
.cr-plate:hover .pair img{transform:scale(1.05)}
.cr-plate .name{padding:16px 18px;font-size:.8125rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg)}
.cr-plate.single .pair{grid-template-columns:1fr}

/* ---------- responsive ---------- */
@media(max-width:1099px){
  .cr-matrix{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cr-matrix{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cr-matrix .copy{grid-column:auto;grid-row:span 2}
  .cr-matrix .copy.wide{grid-column:span 2;grid-row:span 2}
  .cr-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-paper-wrap{grid-template-columns:1fr;gap:40px}
}
@media(max-width:767px){
  .cr-plates{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cr-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-matrix figcaption{opacity:1;font-size:.625rem;padding-top:20px}
  .cr-videos{grid-template-columns:1fr}
  .cr-plates{grid-template-columns:1fr}
  .cr-float.f1{right:0}.cr-float.f2{left:0}
}

/* ============================================================================
   Hero: the six services as cards standing in 3D space.

   One shared rotation on the rack puts every card on the same plane, so it reads
   as one object rather than six stickers. Per-card Z offsets and a staggered
   float give it depth without anything ever turning away from the reader, which
   is the point: all six services stay legible at once, including in a still.
   ========================================================================== */
.cr-deck{position:relative;display:flex;align-items:center;justify-content:center;
  perspective:1250px;perspective-origin:56% 46%;padding:clamp(14px,2vw,30px) 0}
.cr-rack{transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-18deg) rotateZ(1.5deg);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.35vw,20px);
  width:min(100%,620px)}
.fcell{transform-style:preserve-3d;will-change:transform}
.fcard{position:relative;transform-style:preserve-3d;border-radius:16px;background:#fff;
  border:1px solid rgba(0,0,0,.07);padding:clamp(18px,1.85vw,28px);
  display:flex;flex-direction:column;gap:10px;min-height:clamp(128px,14vw,184px);
  box-shadow:0 1px 2px rgba(10,10,11,.05),0 8px 18px rgba(10,10,11,.10),
             0 26px 48px rgba(10,10,11,.14);
  animation:fFloat 7.6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.05s);
  transition:box-shadow .4s var(--ease-out)}
@keyframes fFloat{
  0%,100%{transform:translateZ(calc(var(--z) * 1px)) translateY(0)}
  50%{transform:translateZ(calc(var(--z) * 1px)) translateY(-8px)}}
.fcard:hover{box-shadow:0 2px 4px rgba(10,10,11,.06),0 14px 28px rgba(10,10,11,.14),
             0 40px 70px rgba(10,10,11,.2)}
.fcard .num{font-size:.6875rem;font-weight:800;letter-spacing:.22em;color:#bd2020;
  font-variant-numeric:tabular-nums}
.fcard .ttl{font-size:clamp(1.0625rem,1.52vw,1.6rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.06;color:#0a0a0b;text-wrap:balance;margin-top:auto}
.fcard .bar{height:3px;width:26px;background:#bd2020;border-radius:2px}
html.motion-paused .fcard{animation-play-state:paused}
@media(max-width:1099px){
  .cr-deck{perspective:1000px}
  .cr-rack{transform:rotateX(6deg) rotateY(-13deg);width:min(100%,520px)}
}
@media(max-width:640px){
  .cr-rack{transform:none;gap:10px}
  .fcell{transform:none!important}
  .fcard{animation:none;transform:none;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .cr-rack{transform:none}
  .fcard{animation:none;transform:none}
}

/* ============================================================================
   Hero: six service cards on a rotating 3D carousel.

   The depth shading needs no JavaScript. The ring turns -360deg over --dur at a
   constant rate, so card i faces front at exactly t = (i/6) * --dur. Giving each
   card's shade overlay the same duration with a delay of -(i/6) * --dur puts its
   keyframe phase permanently in step with its own facing angle. Nothing is read
   or written per frame, and the motion toggle and reduced-motion query work on
   their own because it is all animation state.
   ========================================================================== */
.cr-deck{--cw:clamp(190px,20.2vw,292px);--ch:calc(var(--cw) * 1.16);
  --r:clamp(186px,19.2vw,276px);--dur:44s;
  position:relative;display:flex;align-items:center;justify-content:center;
  height:clamp(352px,37vw,500px);perspective:1350px;perspective-origin:50% 50%}
.cr-deck .tilt{transform:rotateX(-5deg);transform-style:preserve-3d}
.cr-deck .ring{position:relative;width:var(--cw);height:var(--ch);transform-style:preserve-3d;
  animation:crRing var(--dur) linear infinite}
@keyframes crRing{from{transform:rotateY(0deg)}to{transform:rotateY(-360deg)}}
.cr-deck .dcard{position:absolute;inset:0;border-radius:18px;background:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid rgba(0,0,0,.07);display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2.1vw,30px);
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--r));
  box-shadow:0 1px 2px rgba(10,10,11,.05),0 10px 22px rgba(10,10,11,.10),
             0 30px 60px rgba(10,10,11,.16),0 60px 100px rgba(10,10,11,.10)}
.cr-deck .dcard .num{font-size:.6875rem;font-weight:800;letter-spacing:.22em;color:#bd2020;
  font-variant-numeric:tabular-nums}
.cr-deck .dcard .ttl{font-size:clamp(1.15rem,1.62vw,1.6rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;color:#0a0a0b;text-wrap:balance}
.cr-deck .dcard .bar{height:3px;width:34px;background:#bd2020;border-radius:2px}
/* the depth cue: dark toward the back of the ring, clear at the front */
.cr-deck .dcard .shade{position:absolute;inset:0;pointer-events:none;background:#0a0a0b;
  border-radius:18px;animation:crFace var(--dur) linear infinite;
  animation-delay:calc((var(--i) - 6) * var(--dur) / 6)}
@keyframes crFace{
  0%{opacity:0}
  18%{opacity:.16}
  50%{opacity:.5}
  82%{opacity:.16}
  100%{opacity:0}
}
.cr-deck::after{content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:76%;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(10,10,11,.17),transparent 70%)}
html.motion-paused .cr-deck .ring,html.motion-paused .cr-deck .shade{animation-play-state:paused}

@media(max-width:1099px){
  .cr-deck{--cw:clamp(160px,22vw,210px);--r:clamp(172px,23vw,224px);height:clamp(320px,42vw,400px)}
}
/* Under reduced motion the carousel becomes a plain grid. A frozen cylinder
   would leave three of the six services facing away from the reader. */
@media(prefers-reduced-motion:reduce){
  .cr-deck{perspective:none;height:auto;display:block}
  .cr-deck .tilt{transform:none}
  .cr-deck .ring{width:100%;height:auto;animation:none;transform:none;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cr-deck .dcard{position:static;transform:none;box-shadow:var(--sh-rest)}
  .cr-deck .dcard{min-height:150px}
  .cr-deck .shade{display:none}
  .cr-deck::after{display:none}
}

/* ---------- storefront: one whole page inside a browser frame ---------- */
.cr-frame{position:relative;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 6px rgba(0,0,0,.06),0 26px 64px rgba(0,0,0,.18)}
.cr-frame .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f2f2f5;
  border-bottom:1px solid rgba(0,0,0,.08)}
.cr-frame .bar i{width:10px;height:10px;border-radius:50%;background:#d6d6dd;flex:none}
.cr-frame .bar span{margin-left:10px;flex:1;min-width:0;height:24px;border-radius:12px;background:#fff;
  border:1px solid rgba(0,0,0,.07);font-size:.6875rem;color:#8a8a94;display:flex;align-items:center;
  padding:0 12px;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cr-frame .page{position:relative;height:clamp(400px,50vw,660px);overflow:hidden;background:#fff}
.cr-frame .page img{display:block;width:100%;height:auto}
.cr-frame .page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  pointer-events:none;background:linear-gradient(0deg,#fff,rgba(255,255,255,0))}
.cr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,4.4vw,68px);align-items:start;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.cr-split .cr-badges{margin-top:26px}
@media(max-width:1099px){.cr-split{grid-template-columns:1fr;gap:36px}}

/* ============================================================================
   Service detail pages. Shared furniture for the six pages behind the
   Creative Services overview.
   ========================================================================== */
.cr-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);list-style:none;padding:0;margin:0;
  max-width:1280px;margin-inline:auto}
.cr-steps li{background:#fff;padding:clamp(30px,3.4vw,54px) clamp(26px,3vw,48px);
  display:flex;flex-direction:column;gap:16px}
[data-surface="ink"] .cr-steps li{background:#0f0f12}
[data-surface="light"] .cr-steps li{background:#fff}
.cr-steps .n{font-size:clamp(1.05rem,1.9vw,1.75rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--kicker);font-variant-numeric:tabular-nums}
.cr-steps h3{letter-spacing:-.03em;color:var(--fg);
  font-size:clamp(1.35rem,2.3vw,2.05rem)!important;line-height:1.1!important}
.cr-steps p{color:var(--muted);margin:0;font-size:clamp(1rem,1.18vw,1.1875rem)!important;
  line-height:1.6!important;max-width:46ch}

.cr-faq{max-width:900px;margin:clamp(32px,3.6vw,52px) auto 0;border-top:1px solid var(--rule)}
.cr-faq details{border-bottom:1px solid var(--rule)}
.cr-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(20px,2vw,26px) 0;cursor:pointer;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.0625rem,1.5vw,1.3rem);line-height:1.3;color:var(--fg);list-style:none}
.cr-faq summary::-webkit-details-marker{display:none}
.cr-faq summary::after{content:"";flex:none;width:22px;height:22px;margin-top:3px;position:relative;
  background:
    linear-gradient(var(--kicker),var(--kicker)) center/100% 2px no-repeat,
    linear-gradient(var(--kicker),var(--kicker)) center/2px 100% no-repeat;
  transition:transform .25s var(--ease-out)}
.cr-faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--kicker),var(--kicker)) center/100% 2px no-repeat}
.cr-faq details>p{margin:0;padding:0 0 clamp(22px,2.2vw,28px);color:var(--muted);max-width:72ch}

.cr-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cr-related a{background:#fff;padding:clamp(24px,2.6vw,38px) clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:10px;transition:background-color .3s var(--ease-out)}
.cr-related a:hover{background:#f6f6f7}
.cr-related .n{font-size:.75rem;font-weight:800;letter-spacing:.2em;color:var(--kicker);
  font-variant-numeric:tabular-nums}
.cr-related b{font-size:clamp(1.0625rem,1.35vw,1.25rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;color:#0a0a0b}
.cr-related span{font-size:.9375rem;color:#62626c;line-height:1.55}

/* before and after, for the listing optimization page */
.cr-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.cr-ba article{background:#fff;padding:clamp(24px,2.6vw,40px)}
.cr-ba .tag{display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#8a8a94;margin-bottom:16px}
.cr-ba article.after .tag{color:var(--kicker)}
.cr-ba .ttl{font-weight:700;line-height:1.35;color:#0a0a0b;font-size:1.0625rem}
.cr-ba ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.cr-ba li{position:relative;padding-left:20px;font-size:.9375rem;line-height:1.55;color:#62626c}
.cr-ba li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:#d3d3da}
.cr-ba article.after li::before{background:var(--kicker)}

@media(max-width:1099px){
  .cr-related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cr-steps,.cr-related,.cr-ba{grid-template-columns:1fr}
}


/* ---------- counting headline: one, two, three ----------
   Without JS the final word is simply the visible one, so the sentence always
   reads correctly. The script stacks the earlier words on top and animates. */
.cr-count{position:relative;display:inline-block;vertical-align:baseline;text-align:left}
.cr-count i{font-style:normal;display:block}
.cr-count i.q{position:absolute;left:0;top:0;opacity:0;white-space:nowrap}
.cr-count i.f{position:relative;color:var(--fg);white-space:nowrap}

/* ============================================================================
   Device frames. An A+ page is tall, so the screens scroll it rather than
   shrinking it to an unreadable thumbnail.

   The scroll is pure CSS. translateY percentages resolve against the image's
   own height, so "stop when the bottom of the page meets the bottom of the
   screen" is translateY(calc(-100% + var(--sh))), where --sh is the screen
   height as a real length. No per-frame JavaScript, and the motion toggle and
   reduced-motion query work on their own because it is all animation state.
   ========================================================================== */
.cr-devices{--sh:clamp(260px,29vw,420px);--sph:clamp(300px,33vw,470px);position:relative}
.dv-stage{display:grid;place-items:center;min-height:calc(var(--sph) + 90px)}
.dv-item{grid-area:1/1;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(18px,3vw,54px);width:100%;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-out);pointer-events:none}
.dv-item.on{opacity:1;visibility:visible;pointer-events:auto}
.dv-screen{position:relative;overflow:hidden;background:#fff}
.dv-screen img{display:block;width:100%;height:auto;
  animation:apScroll var(--dur,21s) ease-in-out infinite alternate}
@keyframes apScroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + var(--stop)))}}
html.motion-paused .dv-screen img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.dv-screen img{animation:none}}

/* laptop */
.dv-laptop{position:relative;margin:0;flex:0 1 auto;max-width:min(62%,760px)}
.dv-laptop .bezel{background:#1c1c20;border-radius:14px 14px 4px 4px;padding:12px 12px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 26px 60px rgba(0,0,0,.26)}
.dv-laptop .dv-screen{height:var(--sh);--stop:var(--sh);border-radius:4px}
.dv-laptop .foot{height:12px;margin:0 auto;width:100%;
  background:linear-gradient(#c9c9d1,#a9a9b4);border-radius:0 0 12px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 0 0 6px rgba(201,201,209,.35)}
.dv-laptop .foot::after{content:"";display:block;width:16%;height:4px;margin:0 auto;
  background:#8d8d98;border-radius:0 0 5px 5px}
/* phone */
.dv-phone{position:relative;margin:0;flex:0 0 auto;width:clamp(150px,16.5vw,232px)}
.dv-phone .bezel{background:#111115;border-radius:30px;padding:9px;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 22px 50px rgba(0,0,0,.28)}
.dv-phone .bezel::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:32%;height:5px;border-radius:3px;background:#2b2b33;z-index:2}
.dv-phone .dv-screen{height:var(--sph);--stop:var(--sph);border-radius:22px}
.dv-cap{margin-top:14px;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta)}
.dv-open{position:absolute;inset:0;bottom:34px;cursor:zoom-in;background:none;border:0;padding:0;z-index:3}
.dv-open span{position:absolute;right:10px;bottom:10px;padding:7px 12px;border-radius:100px;
  background:rgba(10,10,11,.78);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  opacity:0;transition:opacity .25s}
.dv-laptop:hover .dv-open span,.dv-phone:hover .dv-open span,.dv-open:focus-visible span{opacity:1}

/* controls */
.dv-row{display:flex;align-items:center;gap:clamp(8px,1.8vw,26px)}
.dv-row>.dv-stage{flex:1 1 auto;min-width:0}
.dv-arrow{flex:none;width:clamp(48px,4vw,60px);height:clamp(48px,4vw,60px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fg);color:var(--bg-inv,#fff);border:0;
  box-shadow:0 3px 10px rgba(0,0,0,.18),0 12px 28px rgba(0,0,0,.2);
  transition:background-color .2s,transform .2s}
[data-surface="ink"] .dv-arrow{background:#fff;color:#0a0a0b}
.dv-arrow:hover{background:var(--kicker);color:#fff;transform:scale(1.07)}
.dv-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dv-nav{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(18px,2vw,28px)}
.dv-dots{display:flex;gap:7px;align-items:center}
.dv-dots button{width:9px;height:9px;min-width:0;padding:0;border-radius:50%;border:0;
  background:var(--rule);transition:background-color .2s,transform .2s}
.dv-dots button[aria-current="true"]{background:var(--kicker);transform:scale(1.35)}
.dv-count{font-size:.8125rem;font-weight:700;letter-spacing:.1em;color:var(--meta);
  font-variant-numeric:tabular-nums;min-width:56px;text-align:center}

.cr-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;
  background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.cr-lightbox .lb-pair{display:flex;gap:clamp(12px,2vw,28px);align-items:flex-start;
  max-height:100%;max-width:100%}
.cr-lightbox .lb-col{display:flex;flex-direction:column;min-height:0;max-height:100%}
.cr-lightbox .lb-col>span{flex:none;padding:0 0 9px;color:#fff;opacity:.8;font-size:.6875rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cr-lightbox .lb-scroll{overflow-y:auto;border-radius:8px;background:#fff;min-height:0;
  -webkit-overflow-scrolling:touch}
.cr-lightbox .lb-col.d{flex:1 1 auto;min-width:0}
.cr-lightbox .lb-col.m{flex:0 0 clamp(150px,20vw,290px)}
.cr-lightbox .lb-scroll img{border-radius:0;box-shadow:none;width:100%;display:block}
@media(max-width:860px){.cr-lightbox .lb-pair{flex-direction:column;overflow-y:auto}
  .cr-lightbox .lb-col.m{flex:none;width:min(62%,280px)}}

@media(max-width:860px){
  .dv-item{flex-direction:column;align-items:center;gap:22px}
  .dv-laptop{max-width:100%;width:100%}
  .dv-phone{width:clamp(160px,44vw,220px)}
  .dv-stage{min-height:0}
}

/* ---------- storefront: three real pages cycling in a laptop ----------
   One 30s cycle, each page visible for a third of it. Both the fade and the
   scroll run off the same clock with the same per-page delay, so a page only
   ever scrolls while it is the one on screen. */
.sf-loop{--slot:11s;--cycle:33s;position:relative;height:var(--sh);overflow:hidden;background:#fff}
.sf-page{position:absolute;inset:0;opacity:0;overflow:hidden;
  animation:sfShow var(--cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--slot) * -1)}
.sf-page img{display:block;width:100%;height:auto;
  animation:sfScroll var(--cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--slot) * -1)}
@keyframes sfShow{0%{opacity:0}2%{opacity:1}31%{opacity:1}33.4%{opacity:0}100%{opacity:0}}
@keyframes sfScroll{
  0%,4%{transform:translateY(0)}
  31%,100%{transform:translateY(calc(-100% + var(--sh)))}}
.sf-tabs{display:flex;gap:0;padding:0;margin:0;list-style:none;border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff}
.sf-tabs li{padding:11px 18px;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#9a9aa4;position:relative;
  animation:sfTab var(--cycle) linear infinite;animation-delay:calc(var(--i) * var(--slot) * -1)}
@keyframes sfTab{0%,33%{color:#0a0a0b;box-shadow:inset 0 -2px 0 #bd2020}
  33.1%,100%{color:#9a9aa4;box-shadow:none}}
html.motion-paused .sf-page,html.motion-paused .sf-page img,html.motion-paused .sf-tabs li{
  animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .sf-loop{height:auto}
  .sf-page{position:static;opacity:1;animation:none}
  .sf-page:not(:first-child){display:none}
  .sf-page img{animation:none}
  .sf-tabs li{animation:none}
  .sf-tabs li:first-child{color:#0a0a0b;box-shadow:inset 0 -2px 0 #bd2020}
}


/* ---------- iPad frame for the storefront walkthrough ---------- */
.cr-devices.ipad{--sh:clamp(260px,30vw,470px)}
.dv-ipad{position:relative;margin:0 auto;width:calc(var(--sh) * 1.3333 + 40px);max-width:100%}
.dv-ipad .bezel{background:#17171b;border-radius:26px;padding:20px;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 26px 60px rgba(0,0,0,.3)}
.dv-ipad .bezel::before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#34343d}
.dv-ipad .dv-screen,.dv-ipad .sf-loop{height:var(--sh);border-radius:5px}
.dv-ipad .inner{border-radius:5px;overflow:hidden;background:#fff}
@media(max-width:640px){.cr-devices.ipad{--sh:clamp(190px,52vw,300px)}}

/* ---------- matrix copy tile: a statement, not a caption ---------- */
.cr-matrix .copy{justify-content:center;gap:16px}
.cr-matrix .copy b{font-size:clamp(1.25rem,2.35vw,2.15rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.03;text-wrap:balance;
  background:var(--ombre);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-right:.06em;margin-right:-.06em}
.cr-matrix .copy span{font-size:clamp(1.0625rem,1.55vw,1.55rem)!important;line-height:1.35!important;
  color:#fff;font-weight:500;letter-spacing:-.015em}
.cr-matrix .copy.wide b{font-size:clamp(1.5rem,3vw,2.9rem)}


/* ---------- full-width counting wall ----------
   Same shape as the finale: a full-viewport typographic statement. The three
   readings stack in the same box, so only the count changes rather than the
   whole line reflowing. The final one is the only visible reading without JS. */
/* The black band runs edge to edge, but the type sits on the same left and right
   margin as every other module, so the page keeps one vertical rhythm. */
#selected .cw-stage{width:100%;max-width:var(--container);margin:0 auto;position:relative;
  padding:clamp(48px,5.4vw,84px) var(--gutter)}
.cr-wall-h{font-size:clamp(2.1rem,8.35vw,7.4rem)!important;font-weight:800;letter-spacing:-.052em;
  line-height:.96!important;color:var(--fg);max-width:none}
.cr-wall-h .l{display:block;overflow:hidden;padding:.2em 0;margin:-.2em 0}
.cr-wall-h .w{display:inline-block;white-space:nowrap;will-change:transform}
/* the gradient reading, sized and spaced like the rest of the line */
.cr-wall-h .w-c{padding-right:.05em;margin-right:-.05em}
#selected .cw-note{margin-top:clamp(22px,2.6vw,36px);max-width:64ch;
  font-size:clamp(1.0625rem,1.3vw,1.3rem)!important;line-height:1.6!important;color:var(--muted)}
@media(max-width:767px){
  #selected .cw-stage{padding:44px var(--gutter)}
  .cr-wall-h{font-size:clamp(1.9rem,9.4vw,3rem)!important;letter-spacing:-.04em}
  .cr-wall-h .w{white-space:normal}
}


/* ---------- audit selling points: statements, not footnotes ---------- */
.cr-badges.big{gap:12px;margin-top:0}
.cr-badges.big li{display:flex;align-items:baseline;gap:12px;padding:18px 28px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:rgba(255,255,255,.04);
  font-size:clamp(1.0625rem,1.42vw,1.4rem);font-weight:650;line-height:1.2;color:var(--fg)}
.cr-badges.big li b{font-size:clamp(1.45rem,2.3vw,2.3rem);font-weight:800;letter-spacing:-.035em;
  color:var(--kicker);font-variant-numeric:tabular-nums}
.cr-badges.big li span{font-weight:650}
.cr-audit-note{margin-top:clamp(24px,2.6vw,36px);
  font-size:clamp(1.0625rem,1.28vw,1.3rem)!important;line-height:1.6!important;color:var(--muted)}
@media(max-width:640px){
  .cr-badges.big li{padding:14px 20px;font-size:1rem}
  .cr-badges.big li b{font-size:1.35rem}
}


/* ---------- soft step tiles: an off-white plate on a white section ---------- */
.cr-steps.soft{border-color:rgba(0,0,0,.09);background:rgba(0,0,0,.09)}
.cr-steps.soft li{background:#f6f6f7}
.cr-steps.soft .n{color:var(--kicker)}
.cr-steps.soft h3{color:#0a0a0b}
.cr-steps.soft p{color:#62626c}

/* ---------- the plain-speaking module ---------- */
#no-magic .nm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);align-items:start;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
#no-magic .nm-claims{list-style:none;padding:0;margin:0;display:grid;gap:12px}
#no-magic .nm-claims li{display:flex;align-items:center;gap:16px;padding:20px 28px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:rgba(10,10,11,.03);
  font-size:clamp(1.0625rem,1.42vw,1.4rem);font-weight:700;letter-spacing:-.02em;color:var(--fg)}
#no-magic .nm-claims li i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--kicker);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;line-height:1}
#no-magic .nm-claims.yes li i{font-size:.95rem}
#no-magic .nm-body p{font-size:clamp(1.0625rem,1.28vw,1.3rem)!important;line-height:1.6!important;
  color:var(--muted)}
#no-magic .nm-body p + p{margin-top:18px}
#no-magic .nm-body strong{color:var(--fg);font-weight:700}
@media(max-width:1099px){#no-magic .nm-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:640px){
  .cr-videos{grid-template-columns:1fr}
  #no-magic .nm-claims li{padding:16px 20px;font-size:1rem}
}


/* ---------- storefront: the reasons, stated large ---------- */
.cr-reasons{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.cr-reasons li{display:flex;align-items:center;gap:16px;padding:20px 28px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:rgba(10,10,11,.03);
  font-size:clamp(1.0625rem,1.4vw,1.375rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;color:var(--fg)}
.cr-reasons li i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--kicker);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:800;line-height:1}
[data-surface="ink"] .cr-reasons li{background:rgba(255,255,255,.04)}
.sf-note{margin-top:clamp(24px,2.6vw,34px)}
.sf-note p{font-size:clamp(1.0625rem,1.28vw,1.3rem)!important;line-height:1.6!important;
  color:var(--muted)}
.sf-note p + p{margin-top:16px}
.sf-note strong{color:var(--fg);font-weight:700}
@media(max-width:640px){.cr-reasons li{padding:16px 20px;font-size:1rem}}


/* ---------- what is inside the video, as a wrapping row ---------- */
.vh-badges{display:flex;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}
.vh-badges li{flex:0 0 auto}
.vh-line{margin-top:clamp(22px,2.4vw,32px);max-width:62ch;
  font-size:clamp(1.0625rem,1.35vw,1.35rem)!important;line-height:1.55!important;color:var(--muted)}
.vh-line strong{color:var(--fg);font-weight:700}