/* ==========================================================================
   Shane Fry - paid ads studio
   One typeface (Figtree) throughout. Warm orange gradients on a near-black
   and cream panel system. Motion is opacity/transform only.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --black:#050505;
  --black-2:#0c0c0d;
  --cream:#f0eee9;
  --cream-2:#e4e0d8;

  --on-dark:#ffffff;
  --on-dark-dim:rgba(255,255,255,.60);
  --on-dark-faint:rgba(255,255,255,.36);
  --on-dark-line:rgba(255,255,255,.13);

  --on-light:#0b0b0b;
  --on-light-dim:rgba(11,11,11,.60);
  --on-light-faint:rgba(11,11,11,.40);
  --on-light-line:rgba(11,11,11,.13);

  /* warm accent, pulled from the hero video */
  --accent:#ff6a1a;
  --accent-2:#ff9a4d;
  --accent-3:#ffc48a;
  --grad:linear-gradient(102deg,#ffc48a 0%,#ff8a3d 45%,#ff5a1f 100%);
  --grad-soft:linear-gradient(170deg,#ffe0c2 0%,#ffab6b 46%,#ff7a33 100%);

  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --panel-r:44px;
  --maxw:1180px;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--on-dark);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.06}
/* figure carries a UA default of `margin:1em 40px`. Left unreset it added 80px
   to every carousel card's width, throwing off slide pitch and teleport maths. */
p,figure,blockquote,figcaption{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent);color:#150800}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 30px}
section{scroll-margin-top:110px}
/* deep-linked service blocks must clear the fixed nav */
.step,.svc-item{scroll-margin-top:120px}
/* visible to screen readers and crawlers only */
.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;
}

/* the signature emphasis phrase: same font, italic, warm gradient */
.mut{
  font-style:italic;font-weight:600;
  background:var(--grad-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;                 /* descender clearance for g/y/p */
}
.panel-light .mut{
  background:linear-gradient(170deg,#ff8a3d,#e8500a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- TEXT MICRO-ANIMATION (word stagger) ---------- */
.tx .w{
  display:inline-block;
  opacity:0;transform:translateY(.5em);filter:blur(6px);
  transition:opacity .68s var(--ease),transform .68s var(--ease),filter .68s var(--ease);
  transition-delay:calc(var(--i,0) * 42ms);
  padding-bottom:.06em;                 /* keeps descenders off the clip edge */
}
.tx.in .w{opacity:1;transform:none;filter:blur(0)}

/* Gradient text has to be re-applied per word: once split, each .w carries a
   filter, which creates its own stacking context and drops the parent's
   background-clip:text. Without this the gradient lines render invisible. */
.fade .w,
.panel-dark .mut .w{
  background:var(--grad-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel-light .mut .w{
  background:linear-gradient(170deg,#ff8a3d,#e8500a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* block-level reveal for everything that is not split into words */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .tx .w,.rv{opacity:1;transform:none;filter:none;transition:none}
}
/* no-JS safety: nothing stays hidden */
.no-js .tx .w,.no-js .rv{opacity:1;transform:none;filter:none}

/* ---------- PANELS ---------- */
.panel{position:relative;z-index:1}
.panel-dark{background:var(--black);color:var(--on-dark)}
.panel-light{background:var(--cream);color:var(--on-light)}
.r-bottom{border-bottom-left-radius:var(--panel-r);border-bottom-right-radius:var(--panel-r)}
.r-top{border-top-left-radius:var(--panel-r);border-top-right-radius:var(--panel-r)}

/* ambient warm glow inside dark slabs.
   The glows sit past the slab edges on purpose, so they need clipping. They get
   their own absolute wrapper rather than `overflow:hidden` on the section,
   because .svc contains a position:sticky child and an overflow ancestor would
   silently break sticky positioning. */
.glow-wrap{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  border-radius:inherit;
}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);z-index:0}
.glow-a{width:60vw;height:60vw;max-width:820px;max-height:820px;top:-14%;right:-12%;
  background:radial-gradient(circle,rgba(255,106,26,.24),transparent 66%)}
.glow-b{width:52vw;height:52vw;max-width:700px;max-height:700px;bottom:-10%;left:-14%;
  background:radial-gradient(circle,rgba(255,90,31,.18),transparent 66%)}
.panel-dark > .wrap,.panel-dark > section,.panel-dark > div{position:relative;z-index:1}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:90;padding-top:18px;pointer-events:none}
.capsule{
  pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:calc(100% - 44px);max-width:1060px;margin:0 auto;height:58px;padding:6px 6px 6px 26px;
  border-radius:999px;
  background:rgba(14,14,14,.78);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 40px rgba(0,0,0,.42);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  color:#fff;
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
header[data-theme="light"] .capsule{
  background:rgba(255,255,255,.80);border-color:rgba(11,11,11,.10);color:var(--on-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 40px rgba(0,0,0,.10);
}
.brand{font-weight:800;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a,.nav-link{font-size:.9rem;font-weight:500;opacity:.7;transition:opacity .25s var(--ease),color .25s var(--ease)}
.nav-links a:hover,.nav-link:hover{opacity:1;color:var(--accent-2)}
header[data-theme="light"] .nav-links a:hover,header[data-theme="light"] .nav-link:hover{color:var(--accent)}

/* services dropdown */
.nav-item{position:relative}
.nav-link{
  background:none;border:0;padding:0;color:inherit;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.nav-item[data-open="true"] .nav-link{opacity:1}
.nav-link svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav-item[data-open="true"] .nav-link svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 18px);left:50%;min-width:200px;padding:8px;
  transform:translateX(-50%) translateY(-6px);
  border-radius:16px;background:rgba(16,16,18,.94);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease);
}
/* invisible bridge so the pointer can cross the gap without closing */
.drop::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-item[data-open="true"] .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:10px;font-size:.88rem;opacity:.8}
.drop a:hover{opacity:1;background:rgba(255,255,255,.09)}
header[data-theme="light"] .drop{background:rgba(255,255,255,.96);border-color:rgba(11,11,11,.1);box-shadow:0 20px 50px rgba(0,0,0,.14)}
header[data-theme="light"] .drop a:hover{background:rgba(11,11,11,.06)}
.nav-cta{display:flex;align-items:center;gap:12px;padding-right:2px}
.nav-cta .lbl{font-size:.9rem;font-weight:600;white-space:nowrap}
.arrow-btn{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--grad);color:#160a04;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 4px 16px rgba(255,106,26,.4);
}
.nav-cta:hover .arrow-btn{transform:rotate(45deg);box-shadow:0 6px 22px rgba(255,106,26,.6)}
.arrow-btn svg{width:17px;height:17px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 28px;border-radius:999px;font-size:.95rem;font-weight:600;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .32s var(--ease),background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn-accent{background:var(--grad);color:#160a04;box-shadow:0 8px 28px rgba(255,106,26,.34)}
.btn-accent:hover{box-shadow:0 12px 38px rgba(255,106,26,.52)}
.btn-line{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.22)}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,154,77,.5)}
.btn-dark{background:#0b0b0b;color:#fff}
.btn-dark:hover{box-shadow:0 10px 32px rgba(0,0,0,.28)}
.btn .circ{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-right:-14px;transition:transform .32s var(--ease)}
.btn-accent .circ{background:rgba(0,0,0,.16);color:#160a04}
.btn-dark .circ,.btn-line .circ{background:var(--grad);color:#160a04}
.btn:hover .circ{transform:rotate(45deg)}
.btn .circ svg{width:14px;height:14px}

/* ---------- HERO (full-bleed background video) ---------- */
.slab-hero{overflow:hidden}
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:140px 0 30px;
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Slight blur + overscale turns the footage into ambient texture instead of a
   subject competing with the headline. The scale hides the blurred edges. */
/* object-position favours the upper glow. The footage has a hard horizontal
   desk edge about two thirds down, and once blurred that band is exactly what
   reads as a "cut" in the gradient. Push it low, then cover it (see ::after). */
.hero-media video,.hero-media img.poster{
  position:absolute;top:-10%;left:-10%;width:120%;height:120%;
  object-fit:cover;object-position:50% 30%;
  filter:blur(5px) saturate(1.1);
}
/* ONE long gentle fade, ending on solid black exactly at the hero's bottom edge,
   which is the same colour as the slab below. Deliberately only three stops:
   earlier versions stacked five, and each steep segment extinguished the
   video's bright glow over a short distance, which the eye reads as a band. */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,5,.60) 0%,
    rgba(5,5,5,.60) 50%,
    #050505 100%);
}
/* Readability scrim + warm wash tying the video into the palette.
   The vertical gradient MUST reach fully opaque --black at 100%. Stopping short
   (it was .86) left the video faintly visible right at the hero's edge, which
   read as a hard horizontal cut against the solid section below. */
/* Readability only. The vertical fades live on .hero-media::after, so these two
   layers are not stacking opposing ramps on top of each other (which is what
   produced the visible banding). Darkest through the middle, where the copy is. */
.hero-scrim{
  position:absolute;inset:0;
  background:radial-gradient(90% 80% at 50% 44%,
    rgba(5,5,5,.44) 0%,
    rgba(5,5,5,.38) 52%,
    rgba(5,5,5,.28) 100%);
}
.hero-content{position:relative;z-index:2}
/* .fade is display:block, so it already forces the second line. max-width just
   needs to clear the longer of the two lines, or it wraps to three. */
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;max-width:24ch;margin:0 auto}
.hero h1 .fade{
  display:block;
  background:var(--grad-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{color:rgba(255,255,255,.74);font-size:clamp(1rem,1.4vw,1.14rem);max-width:48ch;margin:26px auto 0;line-height:1.55}
.hero-cta{margin-top:36px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.hero-rating{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-size:.86rem;color:rgba(255,255,255,.7);
}
.stars{display:inline-flex;gap:2px;color:var(--accent-2)}
.stars svg{width:15px;height:15px}
.hero-rating b{color:#fff;font-weight:700}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:.8rem;color:rgba(255,255,255,.82);margin-bottom:28px;
}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);font-style:normal}

/* ---------- STATS ---------- */
/* position:relative keeps .glow-wrap scoped to this section. The ::before
   carries the video's warm hue down past the hero edge so the orange does not
   stop dead at the boundary. */
.stats{padding:70px 0 84px;position:relative}
/* No warm bridge gradient here. A pseudo-element clips its background at its own
   box, so any gradient still partly opaque at that boundary draws a hard line.
   The hero already fades to solid black and .glow-a supplies the warmth lower
   down, so the join needs nothing. */
.stats .glow-a{top:8%;right:-14%}
.stats h2{font-size:clamp(2rem,4.6vw,3.4rem);text-align:center;margin-bottom:64px;letter-spacing:-.04em}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 26px}
.stat + .stat{border-left:1px solid var(--on-dark-line)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(255,154,77,.3);background:rgba(255,106,26,.07);
  font-size:.76rem;color:var(--accent-2);margin-bottom:20px;
}
.chip svg{width:13px;height:13px}
.stat .num{font-size:clamp(2.1rem,4vw,3.1rem);font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.stat .num .u{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
}
.stat .cap{color:var(--on-dark-dim);font-size:.88rem;margin-top:14px;max-width:20ch;line-height:1.4}

/* ---------- LOGO MARQUEE ----------
   Seamless loop rules:
   1. NO `gap` on the track. Gap adds (n-1) gaps, so translating -50% lands
      half a gap out of register and the row visibly jumps. Spacing lives on
      each item's margin-right instead, so every item occupies an identical
      slot and -50% is always an exact multiple of one sequence.
   2. The track holds 4 identical .mseq blocks, so one half (2 sequences) is
      wide enough to cover the viewport. Too few and you see an empty gap
      before it snaps back.
   Client logos will be greyscale images: drop an <img> inside .lg.
   ------------------------------------------------------------------------ */
.logos{padding:64px 0 0}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* duration scales with the track: 13 names per sequence, so this keeps the
   on-screen speed roughly where it was at 8 */
.mtrack{display:flex;width:max-content;align-items:center;animation:slide 98s linear infinite}
.mseq{display:flex;align-items:center;flex-shrink:0}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.lg{
  display:flex;align-items:center;flex-shrink:0;
  margin-right:64px;                    /* spacing lives here, never on gap */
  opacity:.38;transition:opacity .35s var(--ease);
}
.lg:hover{opacity:.9}
.lg span{font-weight:600;font-size:.9rem;letter-spacing:.01em;white-space:nowrap;color:#fff}
/* greyscale image logos, once supplied */
.lg img{height:24px;width:auto;filter:grayscale(1) brightness(1.7);opacity:.9}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .mseq:nth-child(n+2){display:none}
}

/* ---------- SECTION HEADS ---------- */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.panel-dark .eyebrow{color:var(--accent-2)}
.h-sec{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1.07}

/* ---------- WORK (cream, 3 tabs) ---------- */
.work{padding:120px 0 130px}
/* centred, because the examples underneath change shape per tab */
.work-head{text-align:center;margin-bottom:38px}
.work-head p{color:var(--on-light-dim);font-size:1rem;max-width:52ch;margin:18px auto 0}
.work-head .h-sec{max-width:22ch;margin-inline:auto}
.tabbar{display:inline-flex;gap:5px;padding:5px;border-radius:999px;background:var(--cream-2);margin-bottom:40px}
.tabs-wrap{text-align:center}
.tab{
  border:0;background:none;font-size:.92rem;font-weight:600;color:var(--on-light-dim);
  padding:11px 22px;border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.tab:hover{color:var(--on-light)}
.tab[aria-selected="true"]{background:var(--grad);color:#160a04;box-shadow:0 6px 18px rgba(255,106,26,.3)}
.panel-body,.sub-body{display:none}
.panel-body[data-active="true"]{display:block;animation:fadeUp .55s var(--ease)}
.sub-body[data-active="true"]{display:block;animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.work-foot{margin-top:26px;font-size:.85rem;color:var(--on-light-faint);text-align:center}

/* ---------- CAROUSEL (arrows flank the stage, dots sit below) ---------- */
.carousel{position:relative}
/* .car-stage is the positioning context so arrows centre on the media,
   not on the media plus the dots row underneath. */
.car-stage{position:relative}
/* Deliberately NO scroll-behavior:smooth here. It hijacks every programmatic
   scroll: scrollLeft writes become animations and scrollBy gets swallowed,
   which breaks arrow stepping and makes the infinite-loop teleport visible.
   main.js passes `behavior` explicitly on every call and honours
   prefers-reduced-motion itself. */
.car-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.car-viewport::-webkit-scrollbar{display:none}
.car-track{display:flex;gap:18px}
.car-item{flex:0 0 auto;scroll-snap-align:start}

/* per-panel item sizing */
.car-reels .car-item{width:calc((100% - 36px) / 3)}   /* three larger 9:16 reels */
.car-single .car-item{width:100%}                      /* one full-width mockup */

.car-arrow{
  position:absolute;top:50%;z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(240,238,233,.92);border:1px solid var(--on-light-line);color:var(--on-light);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:translateY(-50%);
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .2s var(--ease),opacity .28s var(--ease);
}
.car-prev{left:-23px}
.car-next{right:-23px}
.car-arrow:hover:not(:disabled){background:var(--grad);border-color:transparent;color:#160a04}
/* keep the vertical centring when the press-down scale applies */
.car-arrow:active:not(:disabled){transform:translateY(-50%) scale(.93)}
.car-arrow:disabled{opacity:.28;cursor:default}
.car-arrow svg{width:17px;height:17px}
.panel-dark .car-arrow{background:rgba(12,12,13,.82);border-color:rgba(255,255,255,.18);color:#fff}

.car-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px}
.car-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(11,11,11,.2);transition:background .3s var(--ease),width .3s var(--ease);
}
.car-dots button[aria-current="true"]{width:26px;border-radius:999px;background:var(--grad)}
.panel-dark .car-dots button{background:rgba(255,255,255,.22)}
.panel-dark .car-dots button[aria-current="true"]{background:var(--grad)}

/* ---------- SECTION CTA (repeated quote reminder) ---------- */
.sec-cta{text-align:center;margin-top:58px}

/* ---------- MEDIA ERROR STATE ----------
   Stands in for real media until the files are added. Reads as a failed load
   rather than an empty slot. Swap the whole .media-error div for a <video> or
   <img> when the real asset is ready. */
.media-error{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;padding:20px;text-align:center;
  background:#121214;color:rgba(255,255,255,.40);
}
.media-error svg{width:26px;height:26px;opacity:.55}
.media-error span{font-size:.8rem;line-height:1.4;letter-spacing:.01em}
/* inside a laptop or phone screen a light failure reads more like a real page */
.laptop-screen .media-error,.phone-screen .media-error{background:#f2f2f3;color:rgba(11,11,11,.38)}

/* ---------- 9:16 REEL (Facebook ad videos) ---------- */
.reel{
  position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:var(--cream-2);border:1px solid var(--on-light-line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.reel:hover{transform:translateY(-6px)}
.reel img,.reel video{width:100%;height:100%;object-fit:cover}
.reel .ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.18) 46%,transparent 68%);color:#fff;
}
.reel .ov b{font-size:.96rem;font-weight:600;letter-spacing:-.015em}
.reel .ov small{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:3px;line-height:1.4}

/* ---------- DEVICE MOCKUP FRAMES ---------- */
/* Frames only. Real screenshots drop into the <img> inside each screen. */
.laptop{width:100%;max-width:940px;margin:0 auto}
.laptop-lid{
  position:relative;border-radius:16px;padding:12px 12px 12px;
  background:linear-gradient(160deg,#2a2a2d,#141416);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.laptop-screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#fff}
.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop-base{
  height:14px;border-radius:0 0 14px 14px;margin:0 auto;width:112%;max-width:none;
  transform:translateX(-5.35%);
  background:linear-gradient(180deg,#26262a,#0f0f11);
}
.laptop-base::after{
  content:"";display:block;width:88px;height:5px;border-radius:0 0 6px 6px;margin:0 auto;
  background:rgba(255,255,255,.12);
}
/* near-full contrast: this caption was too faint to read on cream */
.mock-cap{text-align:center;margin-top:24px;font-size:.95rem;font-weight:500;color:var(--on-light)}
.mock-cap b{font-weight:700}
.mock-cap .sep{color:var(--on-light-faint);margin:0 9px}
.panel-dark .mock-cap{color:#fff}
.panel-dark .mock-cap .sep{color:var(--on-dark-faint)}

/* desktop + phone pair for website work */
.site-pair{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:end;max-width:1000px;margin:0 auto}
.phone{width:100%}
.phone-body{
  position:relative;border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#2a2a2d,#141416);
  box-shadow:0 26px 60px rgba(11,11,11,.3),inset 0 1px 0 rgba(255,255,255,.14);
}
.phone-screen{position:relative;aspect-ratio:9/19;border-radius:26px;overflow:hidden;background:#fff}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-body::before{
  content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;border-radius:99px;background:rgba(0,0,0,.5);z-index:2;
}

/* ---------- SUB-FILTER (Search / Shopping / PMax) ---------- */
.subfilter{display:inline-flex;gap:7px;margin-bottom:30px}
.subfilter button{
  border:1px solid var(--on-light-line);background:transparent;cursor:pointer;
  font-family:var(--font);font-size:.84rem;font-weight:600;color:var(--on-light-dim);
  padding:8px 16px;border-radius:999px;transition:all .28s var(--ease);
}
.subfilter button:hover{color:var(--on-light);border-color:rgba(11,11,11,.28)}
.subfilter button[aria-selected="true"]{background:var(--on-light);border-color:transparent;color:#fff}

/* ---------- RESULT STATS (under testimonials) ---------- */
.results{padding:52px 0 20px}
.results-lead{
  text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:22px;
}
/* auto-fit, because a client may have two metrics rather than three */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:16px;max-width:820px;margin:0 auto}
.rcard{
  text-align:center;padding:34px 22px;border-radius:18px;
  background:rgba(255,255,255,.035);border:1px solid var(--on-dark-line);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.rcard:hover{border-color:rgba(255,154,77,.4);transform:translateY(-5px);background:rgba(255,106,26,.06)}
.rcard .rn{
  font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.05em;
}
.rcard .rl{color:var(--on-dark-dim);font-size:.88rem;margin-top:12px;line-height:1.4}

/* ---------- SERVICES (expanding accordion, no imagery needed) ----------
   Full-width numbered rows. One open at a time. The open row gets a warm wash,
   a gradient left edge and an outline ghost numeral, and its detail spreads
   across three columns so the width is doing real work. */
.svc{padding:130px 0 40px}
.svc-head{margin-bottom:56px}
.svc-intro{color:var(--on-dark-dim);font-size:1.06rem;line-height:1.65;max-width:62ch;margin-top:22px}
.svc-intro strong{color:#fff;font-weight:600}

/* ---------- SERVICES LIST (calm 2x2, always visible) ----------
   Replaced an expanding accordion with ghost numerals and a three-column
   detail grid. That had too much going on for four short points. */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-top:1px solid var(--on-dark-line)}
.svc-item{
  position:relative;padding:38px 34px 40px 0;border-bottom:1px solid var(--on-dark-line);
}
.svc-item:nth-child(odd){padding-right:44px}
.svc-item:nth-child(even){padding-left:44px;border-left:1px solid var(--on-dark-line)}
.svc-item .svc-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.svc-item h3{
  font-size:clamp(1.18rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.28;
  max-width:30ch;
}
.svc-item p{color:var(--on-dark-dim);font-size:.95rem;line-height:1.6;margin-top:12px;max-width:42ch}

.svc-acc{border-top:1px solid var(--on-dark-line)}
.svc-row{position:relative;border-bottom:1px solid var(--on-dark-line);overflow:hidden}
/* warm wash, fades in with the row */
.svc-row::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(90% 130% at 0% 0%,rgba(255,106,26,.12),transparent 58%);
}
.svc-row.open::before{opacity:1}
/* gradient edge marking the open row */
.svc-row::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease);
}
.svc-row.open::after{transform:scaleY(1)}

.svc-btn{
  position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  padding:32px 6px 32px 22px;font-family:var(--font);
  transition:padding-left .45s var(--ease);
}
.svc-row.open .svc-btn{padding-left:30px}
.svc-btn:hover .svc-title{color:var(--accent-2)}
.svc-title{
  font-size:clamp(1.45rem,3vw,2.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.12;
  transition:color .3s var(--ease);
}
.svc-toggle{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--on-dark-line);color:#fff;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .45s var(--ease);
}
.svc-row.open .svc-toggle{background:var(--grad);border-color:transparent;color:#160a04;transform:rotate(135deg)}
.svc-toggle svg{width:16px;height:16px}

.svc-panel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.svc-panel-in{position:relative;z-index:2;padding:0 6px 40px 22px}
.svc-row.open .svc-panel-in{padding-left:30px}
.svc-lede{color:var(--on-dark-dim);font-size:1.02rem;max-width:56ch}
.svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.svc-cols li{font-size:.94rem;color:var(--on-dark-dim);line-height:1.5}
.svc-cols li b{display:block;color:#fff;font-weight:600;margin-bottom:5px}
.svc-cols .tick{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-bottom:12px;
  background:rgba(255,106,26,.12);color:var(--accent);
}
.svc-cols .tick svg{width:14px;height:14px}
/* small service name above the benefit-led title */
.svc-copy{display:block;min-width:0}
.svc-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
/* oversized outline numeral, decorative */
.ghost-num{
  position:absolute;right:2.5%;top:50%;transform:translateY(-50%);
  font-size:clamp(6rem,13vw,11rem);font-weight:800;letter-spacing:-.05em;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;z-index:1;opacity:0;transition:opacity .7s var(--ease);
}
.svc-row.open .ghost-num{opacity:1}

.num-pill{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:28px;border-radius:999px;
  border:1px solid rgba(255,154,77,.32);background:rgba(255,106,26,.08);
  font-size:.78rem;font-weight:700;color:var(--accent-2);
}

/* ---------- TESTIMONIALS ---------- */
/* overflow:hidden contains the max-content marquee row, which would
   otherwise push the whole page into horizontal scroll */
.testi{padding:120px 0 130px;overflow:hidden}
.testi-head{text-align:center;margin-bottom:56px}
.testi-head .h-sec{max-width:18ch;margin:0 auto}
/* arrow driven, no auto-scroll. Cards snap to centre; the centred one is
   .active and drives the stat block below it. The track needs side padding
   so the first and last card can actually reach the centre. */
.testi-car{margin-top:10px}
.testi-car .car-track{gap:18px;padding-inline:calc((100% - 360px) / 2)}
.testi-car .car-prev{left:22px}
.testi-car .car-next{right:22px}
/* Stacked card: media band on top, copy below. The old design overlaid the
   quote on a photo, which cannot work while the images are a failure state. */
.tcard{
  display:flex;flex-direction:column;flex:0 0 auto;width:360px;border-radius:20px;overflow:hidden;
  background:var(--black-2);border:1px solid var(--on-dark-line);scroll-snap-align:center;
  opacity:.4;transition:opacity .55s var(--ease),border-color .55s var(--ease);
}
.tcard.active{opacity:1;border-color:rgba(255,255,255,.18)}
.tcard-media{position:relative;aspect-ratio:16/9;flex-shrink:0}
.tcard-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tcard .co{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-2)}
.tcard blockquote{margin:14px 0 0;color:#fff;font-size:.95rem;line-height:1.55}
.tcard .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:20px}
.tcard .who .av{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#160a04;flex-shrink:0}
.tcard .who b{display:block;font-size:.88rem;font-weight:600}
.tcard .who small{display:block;font-size:.76rem;color:rgba(255,255,255,.58)}

/* ---------- INNER PAGE HERO (ad account audit) ---------- */
.page-hero{position:relative;padding:170px 0 110px;text-align:center}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{
  font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  max-width:26ch;margin:0 auto;
}
.page-hero .fade{
  display:block;background:var(--grad-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero .sub{color:var(--on-dark-dim);font-size:clamp(1rem,1.4vw,1.12rem);max-width:56ch;margin:24px auto 0;line-height:1.55}
.crumbs{font-size:.8rem;color:var(--on-dark-faint);margin-bottom:26px}
.crumbs a{color:var(--on-dark-dim);transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--accent-2)}
.crumbs span{margin:0 4px}

/* what-you-get grid */
.audit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.audit-card{
  padding:30px 26px;border-radius:18px;background:rgba(11,11,11,.035);
  border:1px solid var(--on-light-line);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.audit-card:hover{transform:translateY(-5px);border-color:rgba(255,106,26,.36);background:rgba(255,106,26,.05)}
.audit-card h3{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:18px 0 9px}
.audit-card p{color:var(--on-light-dim);font-size:.94rem}
.num-pill.dark{border-color:rgba(255,106,26,.32);background:rgba(255,106,26,.09);color:var(--accent)}

/* ---------- ABOUT / WHY ME (cream) ---------- */
.about{padding-bottom:110px;margin-bottom:100px;border-bottom:1px solid var(--on-light-line);scroll-margin-top:110px}
.about-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;text-align:left}
/* Smaller than a full-width section head, since this one sits in a column.
   text-align and max-width are reset explicitly: the About block lives inside
   the .faq section, so `.faq .h-sec{text-align:center;max-width:20ch}` was
   centring and narrowing this heading. */
.about .about-body .h-sec{font-size:clamp(1.85rem,3.3vw,2.55rem);text-align:left;max-width:none;margin:0}
.about-body p{color:var(--on-light-dim);font-size:1.04rem;line-height:1.65;margin-top:20px;max-width:54ch}
.about-body p strong{color:var(--on-light);font-weight:700}
/* photo sits right, copy stays left */
.about-photo{position:relative;border-radius:18px;overflow:hidden;background:var(--cream-2);aspect-ratio:16/9}
/* self-documenting placeholder, covered once the real photo is in place */
.about-photo::before{
  content:"Save the photo to assets/img/shane-award.jpg";
  position:absolute;inset:0;display:grid;place-items:center;padding:24px;
  font-size:.82rem;line-height:1.5;text-align:center;color:var(--on-light-faint);
}
.about-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
/* main.js hides an image that fails to load, so the note above shows instead */
.about-photo img.missing{display:none}
.about-caption{margin-top:14px;font-size:.86rem;color:var(--on-light-faint)}

/* ---------- FAQ (cream) ---------- */
.faq{padding:120px 0 130px}
.faq .h-sec{text-align:center;max-width:20ch;margin:0 auto 56px}
.faq-list{max-width:800px;margin:0 auto;border-top:1px solid var(--on-light-line)}
.qa{border-bottom:1px solid var(--on-light-line)}
.qa button{
  width:100%;background:none;border:0;color:var(--on-light);font-size:1.1rem;font-weight:600;
  text-align:left;padding:26px 46px 26px 2px;cursor:pointer;position:relative;letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.qa button:hover{color:var(--accent)}
.qa .pm{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.qa .pm::before{top:8px;left:0;width:18px;height:2px}
.qa .pm::after{top:0;left:8px;width:2px;height:18px}
.qa.open .pm::after{transform:rotate(90deg);opacity:0}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.qa .ans p{color:var(--on-light-dim);padding:0 46px 26px 2px;max-width:66ch}
@media (prefers-reduced-motion:reduce){.qa .ans{transition:none}}

/* ---------- QUOTE ---------- */
.cta{padding:130px 0}
.cta-head{text-align:center;margin-bottom:52px}
.cta-head .h-sec{max-width:16ch;margin:0 auto}
.cta-head p{color:var(--on-dark-dim);margin-top:20px;max-width:46ch;margin-inline:auto}
.qform{max-width:660px;margin:0 auto;display:grid;gap:16px;padding-bottom:56px}
.f{display:grid;gap:8px}
.f label{font-size:.82rem;color:var(--on-dark-dim);font-weight:500}
.f label .rq{color:var(--accent)}
.f input,.f select,.f textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--on-dark-line);border-radius:12px;
  padding:14px 16px;color:#fff;font-family:var(--font);font-size:.95rem;
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.f textarea{resize:vertical;min-height:150px}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.34)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(255,106,26,.16);
}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill-opt input{position:absolute;opacity:0;width:0;height:0}
.pill-opt label{
  display:inline-flex;padding:10px 17px;border-radius:999px;border:1px solid var(--on-dark-line);
  font-size:.86rem;color:var(--on-dark-dim);cursor:pointer;transition:all .25s var(--ease);user-select:none;
}
.pill-opt label:hover{border-color:rgba(255,154,77,.44);color:#fff}
.pill-opt input:checked+label{background:var(--grad);border-color:transparent;color:#160a04;font-weight:600}
.pill-opt input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.fnote{font-size:.79rem;color:var(--on-dark-faint);text-align:center}
.ok{display:none;padding:20px;border-radius:14px;background:rgba(255,106,26,.12);border:1px solid rgba(255,106,26,.32);color:var(--accent-3);align-items:center;gap:12px;font-size:.94rem}
.ok.show{display:flex}
.form-err{
  display:none;padding:16px 18px;border-radius:12px;font-size:.9rem;line-height:1.5;
  background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.34);color:#ffb4b4;
}
.form-err.show{display:block}

/* ---------- FOOTER ---------- */
footer{padding:90px 0 44px;border-top:1px solid var(--on-dark-line);margin-top:20px}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.f-brand .bm{font-weight:800;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase}
.f-brand p{color:var(--on-dark-dim);font-size:.92rem;margin-top:14px;max-width:28ch}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--on-dark-line);display:grid;place-items:center;color:var(--on-dark-dim);transition:all .3s var(--ease)}
.socials a:hover{background:var(--grad);color:#160a04;border-color:transparent;transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.f-col h3{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:18px;font-weight:700}
.f-col a{display:block;color:var(--on-dark-dim);font-size:.9rem;padding:6px 0;transition:color .25s var(--ease)}
.f-col a:hover{color:var(--accent-2)}
.f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--on-dark-line);flex-wrap:wrap;gap:12px}
.f-bot p{color:var(--on-dark-faint);font-size:.84rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  :root{--panel-r:30px}
  .nav-links{display:none}
  .nav-cta .lbl{display:none}
  .hero-rating{font-size:.8rem;flex-wrap:wrap;justify-content:center}
  .stat-row{grid-template-columns:1fr 1fr;gap:36px 0}
  .stat{padding:0 20px}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(3),.stat:nth-child(4){padding-top:34px;border-top:1px solid var(--on-dark-line)}
  .svc-cols{grid-template-columns:1fr 1fr;gap:22px}
  .ghost-num{display:none}
  .audit-grid{grid-template-columns:1fr 1fr}
  .page-hero{padding:140px 0 80px}
  .about-inner{grid-template-columns:1fr;gap:36px}
  .about{padding-bottom:80px;margin-bottom:80px}
  .svc-list{grid-template-columns:1fr}
  .svc-item:nth-child(odd),.svc-item:nth-child(even){padding:32px 0;border-left:0}
  .car-reels .car-item{width:calc((100% - 18px) / 2)}
  /* arrows move inside the stage so they never sit off-canvas */
  .car-prev{left:8px}
  .car-next{right:8px}
  .testi-car .car-prev{left:8px}
  .testi-car .car-next{right:8px}
  .site-pair{grid-template-columns:1fr;gap:20px;max-width:520px}
  .phone{max-width:250px;margin:0 auto}
  .results-grid{gap:12px}
  .rcard{padding:26px 14px}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:600px){
  /* 30px gutters: text should never sit tight to the screen edge */
  .wrap{padding:0 30px}
  .capsule{width:calc(100% - 32px);padding-left:22px}
  .hero{padding-top:120px;min-height:92dvh}
  .hero-cta{flex-direction:column;width:100%;max-width:330px;margin-inline:auto}
  .hero-cta .btn{width:100%}
  .stats{padding-top:80px}
  .stat-row{grid-template-columns:1fr}
  .stat{padding:0}
  .stat + .stat{border-left:0;border-top:1px solid var(--on-dark-line);padding-top:32px;margin-top:32px}
  .stat:nth-child(3),.stat:nth-child(4){padding-top:32px}
  .svc-cols{grid-template-columns:1fr;gap:20px}
  .audit-grid{grid-template-columns:1fr}
  .svc-btn,.svc-panel-in{padding-left:16px}
  .svc-row.open .svc-btn,.svc-row.open .svc-panel-in{padding-left:20px}
  /* one reel per view, sized off the 30px gutters */
  .car-reels .car-item{width:calc(100vw - 120px)}
  .results-grid{grid-template-columns:1fr;max-width:none}
  .subfilter{flex-wrap:wrap;justify-content:center}
  .laptop-base{height:10px}
  .tcard{width:calc(100vw - 90px);max-width:320px;height:auto;min-height:330px}
  .testi-car .car-track{padding-inline:calc((100% - min(320px, 100vw - 90px)) / 2)}
  /* arrows tuck inside so they never overlap the 30px gutter */
  .car-arrow{width:38px;height:38px}
  .car-prev{left:2px}
  .car-next{right:2px}
  .testi-car .car-prev{left:2px}
  .testi-car .car-next{right:2px}
  .f2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .f-bot{flex-direction:column;align-items:flex-start}
  .svc-item h3{font-size:1.16rem}
  .mock-cap{font-size:.88rem}
  .about-caption{font-size:.82rem}
  /* keep the availability pill on one line */
  .hero-badge{font-size:.72rem;padding:7px 13px;gap:7px}
  .car-prev{left:6px}
  .car-next{right:6px}
  .testi-car .car-prev{left:6px}
  .testi-car .car-next{right:6px}
}