/* ============================================================================
   OVER THE FOLD — BRAND SYSTEM  (single source of truth for the whole site)
   Palette: black · red #bf1515 · beige #f8f7f3 · white
   Feel: Apple-clean, generous space, frosted glass, smooth ORGANIC motion.
   ============================================================================ */

/* ------------------------------- TOKENS ---------------------------------- */
:root{
  /* brand colors */
  --black:#0b0b0c;        /* rich near-black — surfaces & type */
  --ink:#141518;          /* body text */
  --ink-2:#44464c;        /* secondary text */
  --muted:#5e6167;        /* tertiary / captions — darkened to clear WCAG AA (4.5:1) */
  --red:#bf1515;          /* brand accent / primary CTA */
  --red-2:#a01212;        /* red hover/press */
  --red-tint:rgba(191,21,21,.08);
  --beige:#f8f7f3;        /* warm page background */
  --beige-2:#f1efe8;      /* raised beige */
  --beige-3:#e9e6dd;      /* sunken beige / borders */
  --white:#ffffff;

  /* lines & fills */
  --line:rgba(11,11,12,.12);
  --line-2:rgba(11,11,12,.07);
  --line-lt:rgba(255,255,255,.18);

  /* liquid glass (Apple-style: translucency + refraction + specular edge) */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.34));
  --glass-brd:rgba(255,255,255,.45);
  --glass-blur:blur(26px) saturate(200%) brightness(1.06);
  /* layered depth: inner top light + inner bottom bounce + soft drop + close contact */
  --glass-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -12px 24px -16px rgba(255,255,255,.55),
    0 20px 46px -22px rgba(11,11,12,.34),
    0 2px 6px -3px rgba(11,11,12,.14);
  /* specular rim: light catching the edge of the glass (top-left + bottom-right) */
  --glass-rim:linear-gradient(130deg,rgba(255,255,255,.95),rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 58%,rgba(255,255,255,.6));
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);
  --glass-dark-bg:linear-gradient(180deg,rgba(34,34,38,.62),rgba(18,18,20,.5));
  --glass-dark-brd:rgba(255,255,255,.14);
  --glass-dark-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 22px 52px -24px rgba(0,0,0,.62);
  --glass-dark-rim:linear-gradient(130deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 32%,rgba(255,255,255,0) 60%,rgba(255,255,255,.34));
  --glass-dark-sheen:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 44%);

  /* typography */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --display:"Outfit","Inter",-apple-system,BlinkMacSystemFont,sans-serif;  /* display face */
  --tracking-tight:-0.021em;
  --tracking-wide:0.16em;

  /* radii — soft, Apple-ish */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --pill:999px;

  /* shadows */
  --shadow-sm:0 1px 2px rgba(11,11,12,.06), 0 2px 8px rgba(11,11,12,.05);
  --shadow:0 10px 30px -12px rgba(11,11,12,.16);
  --shadow-lg:0 30px 70px -30px rgba(11,11,12,.3);

  /* motion — organic, smooth */
  --ease:cubic-bezier(.4,0,.2,1);          /* apple standard */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* soft deceleration */
  --spring:cubic-bezier(.34,1.4,.5,1);      /* gentle overshoot */
  --dur:.55s; --dur-fast:.28s; --dur-slow:.9s;

  /* layout */
  --maxw:1200px;
  --gutter:clamp(1.2rem,5vw,4rem);
}

/* ------------------------------- RESET ----------------------------------- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--beige);color:var(--ink);
  font-size:clamp(15px,.3vw+14px,17px);line-height:1.6;font-weight:400;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* `clip` (not `hidden`) — hidden makes body a scroll container and breaks position:sticky */
  overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------------------------- TYPOGRAPHY --------------------------------- */
h1,h2,h3,h4{font-weight:600;line-height:1.05;letter-spacing:var(--tracking-tight);color:var(--black)}
.d1{font-size:clamp(2.8rem,6.6vw,5.6rem);font-weight:600;line-height:1;letter-spacing:-.03em}
.d2{font-size:clamp(2.2rem,4.8vw,3.8rem);font-weight:600;line-height:1.02;letter-spacing:-.025em}
.h1{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.02em}
.h2{font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.016em}
.h3{font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.01em}
.lede{font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink-2);font-weight:400;letter-spacing:-.01em}
.body-lg{font-size:1.12rem;line-height:1.65}
/* distinctive display grotesk on the big headings */
.d1,.d2,.h1,.fh-title,.mqh-title,.svc-name,.pullquote,.tquote,.fh-metric b,.stat-v,.tier-price{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-optical-sizing:auto}
.d1,.fh-title,.mqh-title{font-weight:700;letter-spacing:-.035em}
.tquote{font-weight:600;letter-spacing:-.02em}
.small{font-size:.85rem}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.84rem;font-weight:700;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red);border-radius:2px}
.eyebrow.plain::before{display:none}
.eyebrow.ink{color:var(--ink-2)}.eyebrow.ink::before{background:var(--ink-2)}
.text-red{color:var(--red)}

/* ----------------------------- LAYOUT ------------------------------------ */
.wrap{width:min(100% - var(--gutter)*2, var(--maxw));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gutter)*2, 1360px);margin-inline:auto}
.section{padding:clamp(4rem,9vw,8.5rem) 0}
.section-sm{padding:clamp(2.5rem,5vw,4.5rem) 0}
.center{text-align:center}
.stack>*+*{margin-top:1rem}
.bg-beige{background:var(--beige)}.bg-beige-2{background:var(--beige-2)}
.bg-white{background:var(--white)}
.bg-black{background:var(--black);color:var(--beige)}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black .h1,.bg-black .h2{color:#fff}
.bg-black .lede,.bg-black .muted{color:rgba(248,247,243,.7)}
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ----------------------------- BUTTONS ----------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;padding:.85rem 1.55rem;border-radius:var(--pill);
  border:1px solid transparent;transition:transform var(--dur-fast) var(--spring),
    background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  will-change:transform}
.btn svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:hover svg{transform:translateX(3px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px -8px rgba(191,21,21,.6)}
.btn-red:hover{background:var(--red-2);box-shadow:0 12px 26px -10px rgba(191,21,21,.7)}
.btn-black{background:var(--black);color:#fff}
.btn-black:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,11,12,.03)}
.btn-glass{background:var(--glass-bg);color:var(--ink);border-color:var(--glass-brd);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.btn-glass:hover{background:rgba(255,255,255,.8)}
.btn-lg{padding:1.05rem 2rem;font-size:1.02rem}
.btn-sm{padding:.6rem 1.1rem;font-size:.85rem}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--red);
  transition:gap var(--dur-fast) var(--ease)}
.link-arrow:hover{gap:.75rem}
.link-arrow svg{width:16px;height:16px}

/* --------------------------- LIQUID GLASS --------------------------------- */
/* Apple-style: real translucency + saturated refraction behind, a soft top
   gloss, and a specular rim that catches light on the edges. Pseudo-elements
   paint above the frosted background but below content (::before) and at the
   very edge (::after), so text stays crisp and legible.                      */
.glass,.glass-dark{position:relative;isolation:isolate;border-radius:var(--r-lg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.glass{background:var(--glass-bg);border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow)}
.glass-dark{background:var(--glass-dark-bg);border:1px solid var(--glass-dark-brd);color:var(--beige);
  box-shadow:var(--glass-dark-shadow)}
/* top gloss sheen (the "wet" light on the surface) */
.glass::before,.glass-dark::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background:var(--glass-sheen)}
.glass-dark::before{background:var(--glass-dark-sheen)}
/* specular rim — a gradient hairline border that reads as light bending at the edge */
.glass::after,.glass-dark::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1.2px;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity var(--dur) var(--ease)}

/* over the film's opening the nav floats free — the pill only forms once the film
   starts scrubbing. White text + a soft shadow keep it legible on the footage. */
.nav-clear .nav-in{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-clear .nav-in::before,.nav-clear .nav-in::after{opacity:0}
.nav-clear .nav-links a:not(.btn),.nav-clear .nav-drop-toggle{color:rgba(255,255,255,.92);
  text-shadow:0 1px 14px rgba(10,6,4,.55)}
.nav-clear .nav-links a:not(.btn):hover,.nav-clear .nav-drop-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-clear .nav-brand,.nav-clear .nav-brand .brand-logo,.nav-clear .nav-brand .brand-mark{color:#fff;
  filter:drop-shadow(0 1px 10px rgba(10,6,4,.5))}
.glass-dark::after{background:var(--glass-dark-rim)}
/* keep real content above the gloss layer */
.glass>*,.glass-dark>*{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--beige);backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass-dark{background:#1a1a1c;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* card */
.card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.card.hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-pad{padding:clamp(1.4rem,2.4vw,2rem)}

/* pill badge */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:.35rem .75rem;border-radius:var(--pill);
  background:var(--red-tint);color:var(--red)}
.badge.ink{background:rgba(11,11,12,.06);color:var(--ink-2)}

/* rounded media */
.media{border-radius:var(--r-lg);overflow:hidden;background:var(--beige-3)}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media-16-9{aspect-ratio:16/9}.media-4-3{aspect-ratio:4/3}.media-1-1{aspect-ratio:1/1}.media-3-4{aspect-ratio:3/4}

/* ------------------------- CONTENT CARDS --------------------------------- */
.ecard{overflow:hidden;display:flex;flex-direction:column;height:100%}
.ecard .media{border-radius:0}
.ecard .card-pad{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:1.3rem 1.4rem 1.5rem}
.ecard .badge,.ecard .chips{align-self:flex-start}
.ecard:hover{text-decoration:none}
/* autoplay-loop thumbnail videos: fill the frame, let clicks reach the card link */
.thumb-video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.card-title{font-size:1.22rem;line-height:1.25;letter-spacing:-.012em;color:var(--ink);font-weight:600;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ecard:hover .card-title{color:var(--red)}
.card-ex{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;padding-top:.9rem;font-size:.82rem;color:var(--muted);
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}

/* thumbnail placeholder when no cover */
.media.ph{display:grid;place-items:center}
.media.ph::after{content:"OTF";font-weight:700;letter-spacing:.1em;color:var(--muted);opacity:.5;font-size:.9rem}

/* ------------------------------ BREADCRUMB / META ------------------------ */
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--red)}
.breadcrumb .sep{opacity:.45}
.meta-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.meta-row .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font-size:.78rem;font-weight:500;color:var(--ink-2);background:var(--beige-2);border:1px solid var(--line-2);
  padding:.32rem .75rem;border-radius:var(--pill);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
a.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.on span{opacity:.75!important}
.bg-black .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(248,247,243,.85)}

/* --------------------------------- PROSE --------------------------------- */
.prose{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.18;letter-spacing:-.016em;color:var(--ink);margin-top:2.2rem}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.4rem);letter-spacing:-.01em;color:var(--ink);margin-top:1.8rem}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--red-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.45em 0}
.prose li::marker{color:var(--red)}
.prose blockquote{margin:1.9rem 0;padding:.3rem 0 .3rem 1.4rem;border-left:3px solid var(--red);
  font-size:1.22rem;line-height:1.5;color:var(--ink);font-weight:500}
.prose figure{margin:2rem 0}
.prose figure img,.prose figure video{width:100%;border-radius:var(--r-lg);display:block;background:var(--beige-3)}
.prose figure figcaption{margin-top:.6rem;font-size:.85rem;color:var(--muted);text-align:center}
.prose figure.embed,.embed{position:relative;padding-top:56.25%;height:0;border-radius:var(--r-lg);overflow:hidden}
.prose figure.embed iframe,.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose pre{background:var(--ink);color:var(--beige);padding:1.1rem 1.3rem;border-radius:var(--r);overflow:auto;font-size:.9rem}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.prose p code,.prose li code{background:var(--beige-3);padding:.1rem .35rem;border-radius:5px}

/* ------------------------------ CASE GALLERY ----------------------------- */
/* big, full-width project visuals — landscape mockups fill the column, tall
   ones are capped so they don't dwarf the page; nothing is cropped. */
.case-gallery{display:flex;flex-direction:column;align-items:center;gap:clamp(1.2rem,3vw,2.4rem)}
.case-gallery img{max-width:100%;max-height:86vh;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow);background:var(--beige-3)}

/* --------------------------------- STATS --------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.stat .stat-v{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600;letter-spacing:-.025em;color:var(--red);line-height:1}
.stat .stat-l{margin-top:.5rem;color:var(--ink-2);font-size:.92rem;line-height:1.4}
.bg-black .stat .stat-v{color:#fff}.bg-black .stat .stat-l{color:rgba(248,247,243,.7)}

/* ------------------------------ AUTHOR CARD ------------------------------ */
.author-card{display:flex;gap:1.1rem;align-items:flex-start;margin-top:2.6rem;padding:1.5rem;
  background:var(--beige-2);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.author-mark{flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.author-kicker{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.author-name{font-weight:600;font-size:1.08rem;margin-top:.15rem}
.author-name a{color:var(--ink)}.author-name a:hover{color:var(--red)}
.author-name span{color:var(--muted);font-weight:400}
.author-bio{margin:.5rem 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.6}

/* ---------------------------------- FAQ ---------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 0;font-weight:600;font-size:1.08rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ink)}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1;transition:transform var(--dur) var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem;color:var(--ink-2);max-width:72ch;margin:0;line-height:1.65}

/* ------------------------- MARKETING SECTIONS ---------------------------- */
.bg-beige{background:var(--beige-2)}
/* two-column visual hero */
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-mediabox .media{width:100%;box-shadow:var(--shadow-lg)}
.hero-mediabox video{width:100%;height:100%;object-fit:cover;display:block}
.sec-head .eyebrow{margin-bottom:.2rem}
.ico{width:22px;height:22px}
/* feature cards */
.feat{display:flex;flex-direction:column;gap:.6rem}
.feat-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--red-tint);color:var(--red);margin-bottom:.4rem}
.feat-ico .ico{width:22px;height:22px}
.feat-title{font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);margin:0;font-weight:600}
.feat-text{color:var(--muted);font-size:.96rem;line-height:1.55;margin:0}
.feat-link{text-decoration:none;color:inherit}
.feat-link:hover{text-decoration:none;transform:translateY(-6px)}
.feat-link .feat-title{transition:color var(--dur-fast) var(--ease)}
.feat-link:hover .feat-title{color:var(--red)}
.feat-more{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--red);font-weight:600;font-size:.9rem}
.feat-more .ico{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease)}
.feat-link:hover .feat-more .ico{transform:translateX(4px)}
.member-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;background:var(--beige-3)}
.bg-black .feat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.bg-black .feat-title{color:#fff}.bg-black .feat-text{color:rgba(248,247,243,.68)}
.bg-black .feat-ico{background:rgba(191,21,21,.22);color:#ff6a6a}
/* steps */
.steps{display:grid;gap:1.4rem;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{display:flex;gap:1.1rem;align-items:flex-start}
.step-n{flex:none;font-size:1.05rem;font-weight:700;color:var(--red);background:var(--red-tint);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;letter-spacing:-.02em}
.step-title{margin:.1rem 0 .3rem;font-size:1.12rem;font-weight:600;color:var(--ink)}
.step-text{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}
/* split */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}.split.rev .split-text{order:2}}
.split-media .media{width:100%}
/* tick list */
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2);line-height:1.5}
.ticks li .ico{flex:none;color:var(--red);margin-top:2px}
.ticks.big li{font-size:1.05rem}
.bg-black .ticks li{color:rgba(248,247,243,.82)}.bg-black .ticks li .ico{color:#ff6a6a}
/* pricing tiers */
.tier{display:flex;flex-direction:column;align-items:flex-start}
.tier-feat{border-color:var(--red);box-shadow:0 30px 60px -30px rgba(191,21,21,.4)}
.tier-name{font-size:1.2rem;margin:0 0 .3rem;font-weight:600}
.tier-price{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tier-desc{color:var(--muted);font-size:.94rem;margin:.5rem 0 0}
.tp-sub{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.tier-price2{font-size:1.05rem;color:var(--ink-2);margin-top:.15rem}
.tier-price2 b{color:var(--red)}
.tier-note{font-size:.8rem;color:var(--muted);margin:.9rem 0 0}
/* à la carte price table */
.price-table{border-top:1px solid var(--line)}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.15rem .2rem;
  border-bottom:1px solid var(--line);color:inherit;transition:padding-left var(--dur-fast) var(--ease-out)}
.price-row:hover{text-decoration:none;padding-left:.7rem}
.pr-name b{display:block;font-size:1.08rem;color:var(--ink);transition:color var(--dur-fast) var(--ease)}
.price-row:hover .pr-name b{color:var(--red)}
.pr-name span{display:block;font-size:.85rem;color:var(--muted);margin-top:.15rem}
.pr-price{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);white-space:nowrap;flex:none;text-align:right}
.pr-price em{font-style:normal;font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--muted)}
@media(max-width:560px){.price-row{flex-direction:column;align-items:flex-start;gap:.3rem}.pr-price{text-align:left}}
.tier .ticks{width:100%}
/* ---- horizontal auto-marquee (work carousel + testimonial rows) ---- */
.hmarq{overflow:hidden;--hm-gap:clamp(1rem,1.8vw,1.4rem);
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.hmarq-track{display:flex;width:max-content;animation:hmarq-scroll 70s linear infinite}
.hmarq-track>*{flex:none;margin-right:var(--hm-gap)}
.hmarq-track.rev{animation-direction:reverse;animation-duration:82s}
.hmarq:hover .hmarq-track,.hmarq:focus-within .hmarq-track{animation-play-state:paused}
@keyframes hmarq-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hmarq-track{animation:none}.hmarq{overflow-x:auto;-webkit-mask:none;mask:none}}
/* content inside a marquee is always visible (reveal is for static flow) */
.hmarq .reveal{opacity:1;transform:none;filter:none}
.wmarq{padding:.4rem 0 1rem}
.wmarq .ecard{width:min(84vw,410px)}
.tmarq{padding:.35rem 0}
.tmarq+.tmarq{margin-top:var(--hm-gap)}
.tmarq .tcard{width:min(86vw,400px)}

/* ---- results: stacked sticky solution panels ---- */
.sol-stack{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vw,2rem);margin-bottom:clamp(2.4rem,5vw,4rem)}
.sol-panel{position:sticky;top:clamp(84px,11vh,120px);min-height:min(62vh,560px);
  border-radius:var(--r-xl);padding:clamp(2rem,5vw,4rem);display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;box-shadow:0 -18px 50px -30px rgba(11,11,12,.35)}
/* short windows: the sticky offset eats the height budget, so the card compresses to fit */
@media(max-height:760px){
  .sol-panel{top:64px;min-height:0;padding:clamp(1.5rem,3vw,2.2rem) clamp(2rem,5vw,4rem)}
  .sol-huge{font-size:clamp(2.2rem,6vw,4.4rem)}
  .sol-huge.sh-long{font-size:clamp(1.7rem,3.1vw,2.5rem)}
  .sol-sub{font-size:.95rem}
}
.sp-black{background:var(--black);color:var(--beige)}
.sp-red{background:radial-gradient(120% 120% at 80% 0%,#d92222 0%,var(--red) 45%,#8f1010 100%);color:#fff}
.sp-light{background:var(--white);border:1px solid var(--line-2);color:var(--ink)}
.sol-kick{display:flex;align-items:center;gap:.7rem;font-size:.84rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:clamp(1rem,2vw,1.6rem)}
.sp-black .sol-kick{color:#ff6a6a}.sp-red .sol-kick{color:rgba(255,255,255,.85)}.sp-light .sol-kick{color:var(--red)}
.sol-kick::after{content:"";height:1px;flex:1;background:currentColor;opacity:.3}
.sol-huge{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.95;margin:0 0 clamp(.9rem,2vw,1.4rem);
  font-size:clamp(2.6rem,7.5vw,6rem);
  max-width:18ch;
  clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out) .15s}
/* a two-sentence headline needs its own scale — the display size is cut for 5 words */
.sol-huge.sh-long{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.08;max-width:none}
.sol-panel.in .sol-huge{clip-path:inset(0 0 0 0)}
.sp-black .sol-huge{color:#fff}.sp-red .sol-huge{color:#fff}.sp-light .sol-huge{color:var(--ink)}
.sol-huge .hl{color:#ff5a5a}.sp-red .sol-huge .hl{color:var(--black)}.sp-light .sol-huge .hl{color:var(--red)}
.sol-sub{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.55;max-width:72ch;margin:0}
.sp-black .sol-sub{color:rgba(248,247,243,.78)}.sp-red .sol-sub{color:rgba(255,255,255,.9)}.sp-light .sol-sub{color:var(--ink-2)}
.sol-sub strong{font-weight:600}.sp-black .sol-sub strong{color:#fff}.sp-light .sol-sub strong{color:var(--ink)}
.sol-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.4rem,2.6vw,2rem)}
.sol-foot .chips .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
.sp-light .sol-foot .chips .chip{background:var(--beige-2);border-color:var(--line-2);color:var(--ink-2)}
.sol-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:inherit;font-size:1rem}
.sol-link .ico{width:18px;height:18px;transition:transform var(--dur-fast) var(--ease)}
.sol-link:hover{text-decoration:none}.sol-link:hover .ico{transform:translateX(5px)}
.sp-red .sol-link{color:#fff}.sp-black .sol-link{color:#ff8080}.sp-light .sol-link{color:var(--red)}
.sol-stars .ico{width:20px;height:20px;fill:currentColor}
.sp-light .sol-stars{color:var(--red)}
.ind-row{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;margin-top:clamp(1.8rem,3vw,2.4rem)}
.ind-row .tag-label{margin-right:.2rem}
.ind-row a.chip:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---- outcome bento ---- */
.res-bento{display:grid;gap:clamp(1rem,1.8vw,1.4rem)}
@media(min-width:860px){.res-bento{grid-template-columns:repeat(3,1fr)}
  .res-span2{grid-column:span 2}}
.res-dark{background:var(--black);border-color:var(--black);color:var(--beige)}
.res-dark .res-tag{color:rgba(248,247,243,.6)}
.res-dark .res-num{color:#ff5a5a}
.res-dark .res-txt{color:rgba(248,247,243,.78)}
.res-dark .res-txt strong{color:#fff}
.res-dark .bold-more{color:#ff8080}
.res-brands{margin:0 0 1.2rem}
.res-brands .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(248,247,243,.88)}
.res-ind-title{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;margin:0 0 .9rem;color:var(--ink)}
.res-ind .chips a.chip{padding:.55rem 1rem;font-size:.9rem}
.res-ind .chips a.chip:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---- three easy steps (sticky left + vertical scroll steps right) ---- */
.steps3-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(min-width:880px){.steps3-grid{grid-template-columns:.9fr 1.1fr}
  .steps3-head{position:sticky;top:120px}}
.steps3-head .lede{max-width:38ch}
.s3-vlist{position:relative;display:flex;flex-direction:column;gap:clamp(2.2rem,4.5vw,3.6rem);
  padding-left:clamp(3.4rem,5vw,4.6rem)}
.s3-vlist::before{content:"";position:absolute;left:calc(clamp(3.4rem,5vw,4.6rem)/2 - 1px);top:38px;bottom:38px;
  width:2px;background:linear-gradient(var(--red) 0%,var(--red-tint) 100%)}
.s3-vitem{position:relative;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.s3-vitem:hover{transform:translateX(6px);box-shadow:var(--shadow-lg)}
.s3-vitem .s3-num{position:absolute;left:calc(clamp(3.4rem,5vw,4.6rem)*-1 + clamp(3.4rem,5vw,4.6rem)/2);top:1.6rem;
  transform:translateX(-50%) scale(.55);opacity:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:1.45rem;
  box-shadow:0 10px 24px -10px rgba(191,21,21,.55),0 0 0 7px var(--beige);
  transition:transform .7s var(--spring) .15s,opacity .4s var(--ease) .15s}
.s3-vitem.reveal{transform:translateY(44px)}
.s3-vitem.reveal.in{transform:none}
.s3-vitem.in .s3-num{transform:translateX(-50%) scale(1);opacity:1}
.s3-title{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .45rem;color:var(--ink)}
.s3-text{color:var(--muted);line-height:1.6;margin:0;font-size:.97rem}
@media(max-width:879px){.s3-vlist{padding-left:2.9rem}
  .s3-vlist::before{left:calc(2.9rem/2 - 1px)}
  .s3-vitem .s3-num{left:calc(-2.9rem + 1.45rem);width:48px;height:48px;font-size:1.1rem}}

/* outcome result cards */
.res-card{display:flex;flex-direction:column;color:inherit}
a.res-card:hover{text-decoration:none}
.res-tag{font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.res-num{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1;color:var(--red);margin-bottom:.7rem}
.res-txt{color:var(--ink-2);font-size:.96rem;line-height:1.6;margin:0 0 1.1rem}
.res-card .bold-more{margin-top:auto}

/* pull quote */
.pullquote{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;letter-spacing:-.015em;
  font-weight:500;color:var(--ink);margin:0;font-family:var(--sans)}
.pullquote::before{content:"“";color:var(--red)}
.pullquote::after{content:"”";color:var(--red)}
/* logo strip */
.logo-strip{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.logo-chip{font-weight:600;color:var(--ink-2);background:var(--white);border:1px solid var(--line-2);
  padding:.6rem 1.1rem;border-radius:var(--pill);font-size:.92rem}
/* full-bleed rolling-image hero */
.marquee-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(600px,88vh,860px);padding:clamp(7rem,11vw,8.5rem) 0 clamp(3rem,6vw,4.5rem)}
.marquee-hero-bg{position:absolute;inset:0;z-index:0;display:flex;align-items:center}
.marquee-hero-bg .marquee{width:100%;justify-content:center}
/* soft light glow behind the text only — images stay vibrant everywhere else */
.marquee-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 64% at 50% 50%, rgba(248,247,243,.94) 0%, rgba(248,247,243,.82) 42%, rgba(248,247,243,.42) 70%, rgba(248,247,243,0) 92%)}
.mqh-content .lede{background:rgba(248,247,243,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.9rem 1.2rem;border-radius:var(--r,18px)}
.mqh-content .small{display:inline-block;background:rgba(248,247,243,.8);padding:.45rem .9rem;border-radius:var(--pill,999px)}
.mqh-content{position:relative;z-index:2;text-align:center;max-width:900px;
  text-shadow:0 2px 34px rgba(248,247,243,.85)}
.mqh-content .eyebrow{background:rgba(248,247,243,.72);padding:.5rem 1.05rem;border-radius:var(--pill);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mqh-title{color:var(--red);text-shadow:0 2px 30px rgba(248,247,243,.9),0 1px 4px rgba(248,247,243,.7)}
.mqh-content .lede{color:var(--ink)}
.mq-hero .marquee-img{width:clamp(270px,30vw,400px)}
.mq-hero .marquee-track{animation-duration:52s}
.mq-hero .marquee-track.rev{animation-duration:64s}

/* rolling image marquee (standalone strip) */
.marquee-sec{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,5rem)}
.marquee{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.1rem);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-row{overflow:hidden}
.marquee-track{display:flex;gap:clamp(.7rem,1.4vw,1.1rem);width:max-content;animation:otf-marquee 44s linear infinite}
.marquee-track.rev{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-img{flex:none;width:clamp(210px,24vw,300px);aspect-ratio:1/1;border-radius:var(--r-lg);
  overflow:hidden;background:var(--beige-3);box-shadow:var(--shadow-sm)}
.marquee-img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes otf-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - clamp(.35rem,.7vw,.55rem)))}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee-row{overflow-x:auto}}

/* carousel */
.carousel{overflow:hidden}
.carousel-track{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;
  padding:.4rem clamp(1.2rem,5vw,4rem) 1.2rem;scrollbar-width:none;-ms-overflow-style:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{flex:0 0 clamp(290px,82vw,380px)}
.carousel-nav{display:flex;gap:.5rem;flex:none}
.carousel-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.carousel-btn:hover{border-color:var(--ink);background:var(--beige-2)}
.carousel-btn:disabled{opacity:.3;cursor:default}
.carousel-btn svg{width:20px;height:20px}
@media(max-width:560px){.carousel-nav{display:none}}

/* testimonials */
.tcard{display:flex;flex-direction:column;height:auto}
.tstars{display:flex;gap:2px;color:var(--red);margin-bottom:.9rem}
.tstars .ico{width:18px;height:18px;fill:var(--red);stroke:var(--red)}
.tquote{font-size:1.15rem;line-height:1.35;letter-spacing:-.01em;font-weight:600;color:var(--ink);margin:0 0 .7rem}
.tbody{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0 0 1.3rem;
  display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tperson{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.tphoto{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:var(--beige-3)}
.tmeta{display:flex;flex-direction:column;min-width:0}
.tmeta b{font-size:.95rem;color:var(--ink)}
.trole{font-size:.8rem;color:var(--muted)}

/* contact page */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:.9rem}
.contact-list li{display:flex;align-items:center;gap:.75rem;color:var(--ink-2)}
.ci-ico{width:40px;height:40px;flex:none;border-radius:11px;background:var(--red-tint);color:var(--red);display:grid;place-items:center}
.ci-ico .ico{width:19px;height:19px}
.contact-form{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-lg)}
.contact-form .cf-row{display:grid;gap:0 1rem}
@media(min-width:560px){.contact-form .cf-row{grid-template-columns:1fr 1fr}}
.contact-form .field{margin-bottom:1rem}
.contact-form label{display:block;font-weight:600;font-size:.82rem;margin-bottom:.4rem;color:var(--ink)}
.cf-note{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;text-align:center}
.ghl-embed{width:100%;min-height:660px;border:0;border-radius:var(--r-lg)}
/* the “cool” floating layered shadow, on the submit button */
.btn-float{display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--ink);color:#fff;font:inherit;font-weight:600;font-size:1rem;
  padding:1.15rem 1.6rem;border:0;border-radius:var(--r);cursor:pointer;margin-top:.5rem;
  transition:transform var(--dur-fast) var(--spring),background var(--dur-fast) var(--ease);
  box-shadow:-2px 3px 1px rgba(0,0,0,.02),-6px 7px 2px rgba(0,0,0,.03),-12px 14px 4px rgba(0,0,0,.04),
    -23px 26px 7px rgba(0,0,0,.045),-38px 42px 12px rgba(0,0,0,.05),-60px 66px 20px rgba(0,0,0,.05),
    -95px 105px 33px rgba(0,0,0,.055),-150px 166px 55px rgba(0,0,0,.05)}
.btn-float:hover{background:#000;transform:translateY(-2px)}
.btn-float:active{transform:translateY(0)}

/* team members */
.member-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem}
.member-name{font-weight:600;font-size:1.15rem}
.member-role{color:var(--red);font-size:.85rem;font-weight:600;letter-spacing:.02em}
.member-bio{color:var(--ink-2);line-height:1.6;margin:0}

/* ====================== SIGNATURE: "THE FOLD" SYSTEM ===================== */
/* editorial label — small mono-ish uppercase, used like magazine marginalia */
.tag-label{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.tag-label.red{color:var(--red)}
/* the signature fold line — a ruled divider that names itself */
.fold-line{position:relative;height:1px;background:var(--ink);margin:clamp(1.8rem,4vw,3rem) 0}
.fold-line .fl-tag{position:absolute;left:0;top:50%;transform:translateY(-50%);
  background:var(--bg,var(--beige));padding-right:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
.fold-line .fl-tag::after{content:"";width:16px;height:16px;background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf1515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cpolyline points='6 13 12 19 18 13'/%3E%3C/svg%3E")}
.fold-line .fl-right{position:absolute;right:0;top:50%;transform:translateY(-50%);background:var(--bg,var(--beige));padding-left:1rem}
.bg-black .fold-line{background:rgba(255,255,255,.35)}
.bg-black .fold-line .fl-tag,.bg-black .fold-line .fl-right{background:var(--black);color:#ff6a6a}

/* editorial hero */
.fold-hero{position:relative;overflow:hidden;padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(2.5rem,5vw,4rem)}
.fh-labels{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1rem}
.fh-title{font-size:clamp(2.9rem,8.6vw,7.6rem);line-height:.92;letter-spacing:-.045em;font-weight:600;
  color:var(--ink);margin:clamp(1.6rem,3.5vw,2.6rem) 0 0;max-width:16ch}
.fh-title .red{color:var(--red)}
.fh-title .u{background:linear-gradient(var(--red),var(--red)) left bottom/100% 6px no-repeat;padding-bottom:.06em}
.fh-title .strike{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:.09em}
.fh-under{display:grid;gap:2rem;align-items:start}
@media(min-width:860px){.fh-under{grid-template-columns:1.15fr .85fr}}
.fh-lede{font-size:clamp(1.12rem,1.55vw,1.42rem);line-height:1.5;color:var(--ink-2);max-width:42ch;margin:0}
.fh-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.fh-aside{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
@media(min-width:860px){.fh-aside{align-items:flex-end;text-align:right}}
.fh-metric{line-height:1}
.fh-metric b{display:block;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:600;letter-spacing:-.03em;color:var(--red)}
.fh-metric span{font-size:.9rem;color:var(--muted)}
.fh-rating{display:flex;align-items:center;gap:.5rem;color:var(--ink-2);font-size:.9rem}
.fh-rating .tstars .ico{width:15px;height:15px}
.fh-rating .tstars{margin:0}

/* social-proof strip */
.proof-strip{padding:clamp(1.4rem,3vw,2rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-strip .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;justify-content:space-between}
.ps-shot{width:clamp(84px,9vw,116px);aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-sm);flex:none;
  box-shadow:var(--shadow-sm)}
@media(max-width:640px){.ps-shot{display:none}}
.proof-strip .ps-rating{display:flex;align-items:center;gap:.6rem;flex:none;font-weight:600;color:var(--ink)}
.proof-strip .ps-rating .tstars{margin:0}.proof-strip .ps-rating .tstars .ico{width:16px;height:16px}
.proof-names{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--muted);font-weight:600;font-size:.92rem}
.proof-names span{white-space:nowrap}

/* editorial numbered services list (replaces generic 3-up cards) */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem 1.6rem;align-items:center;
  padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);color:inherit;position:relative;
  transition:padding-left var(--dur) var(--ease-out)}
.svc-row:hover{text-decoration:none;padding-left:clamp(.5rem,1.5vw,1.4rem)}
.svc-num{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;color:var(--muted);letter-spacing:-.02em;transition:color var(--dur-fast) var(--ease)}
.svc-row:hover .svc-num{color:var(--red)}
.svc-main{grid-column:2}
.svc-name{display:block;font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;color:var(--ink);transition:color var(--dur-fast) var(--ease)}
.svc-row:hover .svc-name{color:var(--red)}
.svc-desc{display:block;margin-top:.4rem;color:var(--muted);font-size:1rem;max-width:52ch}
.svc-arrow{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:all var(--dur-fast) var(--ease)}
.svc-arrow .ico{width:20px;height:20px}
.svc-row:hover .svc-arrow{background:var(--red);border-color:var(--red);color:#fff;transform:translateX(4px)}
@media(max-width:620px){.svc-row{grid-template-columns:auto 1fr}.svc-arrow{display:none}}

/* why-us grid (asymmetric, on black) */
.why-grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:720px){.why-grid{grid-template-columns:1fr 1fr}}
.why-item{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16)}
.why-item h3{color:#fff;font-size:1.3rem;margin:0 0 .5rem;letter-spacing:-.01em}
.why-item p{color:rgba(248,247,243,.7);margin:0;line-height:1.6}
.why-item .wn{color:#ff5a5a;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}

/* ===== RED COLLAGE HERO (tilted image wall + giant wordmark) ===== */
.collage-hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;color:#fff;
  display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(125% 100% at 50% 20%, #db1d1d 0%, var(--red) 42%, #7d0f0f 100%)}
.collage{position:absolute;inset:-20% -12%;z-index:0;display:flex;gap:clamp(.6rem,1.1vw,1rem);
  transform:rotate(-7deg) scale(1.18);will-change:transform;transition:transform .5s var(--ease-out)}
.col-col{flex:1;overflow:hidden;height:100%}
.col-track{display:flex;flex-direction:column;gap:clamp(.6rem,1.1vw,1rem);will-change:transform;
  animation:col-scroll 46s linear infinite}
.col-col:nth-child(even) .col-track{animation-direction:reverse;animation-duration:52s}
.col-col:nth-child(3n) .col-track{animation-duration:60s}
.col-col:nth-child(4n) .col-track{animation-duration:40s}
.col-item{flex:none;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.18)}
.col-item img,.col-item video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes col-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.col-track{animation:none}}
.collage-veil{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(58% 46% at 50% 46%, rgba(92,8,8,.72) 0%, rgba(150,16,16,.32) 58%, rgba(110,10,10,.55) 100%),
    linear-gradient(rgba(191,21,21,.34),rgba(150,16,16,.5))}
.collage-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 46% at 50% 46%, transparent 38%, rgba(78,8,8,.4) 100%)}
.collage-content{position:relative;z-index:2;text-align:center;padding:5.5rem 1.2rem 0}
.ch-eyebrow{display:inline-block;font-size:.84rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.9);margin-bottom:1.1rem;background:rgba(255,255,255,.13);padding:.5rem 1.1rem;
  border-radius:var(--pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ch-title{font-family:var(--display);font-weight:700;color:#fff;line-height:.9;letter-spacing:-.04em;margin:0;
  font-size:clamp(2.9rem,10.5vw,9rem);text-shadow:0 10px 46px rgba(70,5,5,.55)}
.ch-lede{font-size:clamp(1.05rem,1.7vw,1.35rem);color:rgba(255,255,255,.94);margin:1.5rem auto 0;max-width:52ch;
  line-height:1.5;text-shadow:0 2px 22px rgba(70,5,5,.5)}
.ch-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.ch-solid{background:#fff;color:var(--red)}.ch-solid:hover{background:var(--beige);color:var(--red-2)}
.ch-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.55)}
.ch-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* ===== FILM HERO — scroll-scrubbed door film ===== */
.film-hero{position:relative;background:#2a0505}
@media(min-width:900px){.film-hero{height:420vh}
  .film-hero.fh-short{height:420vh}}
.fh-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;z-index:1}
/* the film is fixed so it can fly out of the hero and land in the page below */
.fh-vid{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;overflow:hidden;
  pointer-events:none;will-change:left,top,width,height}
/* always cover the card, and only ever scaled up — so the frame can crop in
   like a close-up without any chance of an uncovered edge */
.fh-vid video{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:50% 50%;will-change:transform}
.fh-flyimg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fh-vid video{will-change:transform,opacity}
@media(max-width:899px){.fh-vid{position:absolute;width:100%;height:100%}}
.fh-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(58,4,4,.95) 0%,rgba(74,6,6,.86) 26%,rgba(120,12,12,.5) 48%,rgba(80,8,8,.12) 68%,rgba(40,3,3,.42) 100%)}
.fh-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 60% 45%,transparent 40%,rgba(30,2,2,.55) 100%)}
.film-hero .wrap{position:relative;z-index:3}
.fh-copy{max-width:620px;will-change:transform}
.fh-copy .ch-eyebrow,.fh-copy .ch-lineb,.fh-copy .ch-lede,.fh-copy .ch-cta{width:fit-content;will-change:transform}
.fh-copy .ch-lede .lw{display:inline-block;will-change:transform}
.fh-vid{will-change:clip-path}
.fh-copy .ch-eyebrow{background:rgba(255,255,255,.15)}
.film-hero .ch-title{font-size:clamp(2.7rem,6.4vw,5.4rem)}
.film-hero .ch-lede{margin-left:0;max-width:44ch;text-align:left}
.film-hero .ch-cta{justify-content:flex-start}
.film-hero .collage-content,.film-hero .ch-title,.film-hero .ch-lede{text-align:left}

/* the four words — big, then their first letters fly together to spell BOLD */
.fh-words{position:absolute;z-index:2;left:72%;top:44%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.12em;pointer-events:none}
.fh-words .fw{display:block;opacity:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.035em;line-height:1.02;color:#fff;white-space:nowrap;will-change:transform,opacity;
  font-size:clamp(1.9rem,4.1vw,3.7rem);text-shadow:0 0 14px rgba(38,4,4,.45);
  transform-origin:center center}
.fh-words .fw b,.fh-words .fw i{font-weight:inherit;font-style:normal;display:inline-block}
.fh-words .fw b{transform-origin:center center;will-change:transform,opacity}
/* stacked lockup — "the" small, BOLD enormous, "System" small, all centred */
.fh-sys{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;color:#fff;
  line-height:.86;text-align:center;
  text-shadow:0 0 42px rgba(38,4,4,.42);
  will-change:transform,opacity;transform-origin:50% 50%}
.fh-sys em{font-style:normal;opacity:0;will-change:opacity,transform;font-size:clamp(1.5rem,3.2vw,2.9rem);
  letter-spacing:.02em;font-weight:600}
.fh-sys .sys-a{margin-bottom:.06em}
.fh-sys .sys-b{margin-top:.1em}
.fh-sys .boldword{display:inline-flex;font-size:clamp(5.5rem,19vw,16rem);letter-spacing:-.05em}
.fh-sys .boldword i{font-style:normal;opacity:0;will-change:opacity}  /* landing marks — the flying letters cross-fade onto these */

/* the assembled word morphs into the outline of the door (real geometry) */
/* the type dissolves into a bloom of light that hands off to the film's own door */
.fh-dust{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0}
/* near-camera atmosphere: warm motes floating in FRONT of the scene. Their blur and
   faster cursor-parallax are what sells the depth — everything else reads as the wall. */
/* the doorframe aperture: the visitor stands in a doorway looking into the room.
   Jambs + header cut from the film's own concrete; text (.wrap, z3, later in DOM)
   stays on top, so the frame surrounds the scene, not the UI. */
.fh-fg{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transform-origin:50% 50%;will-change:transform,opacity}
.ffr{position:absolute;display:block;filter:blur(2px)}
/* the jambs are wide PANELS: closed they meet at centre (dark screen), then slide
   apart until only a sliver remains — the doorway you're standing in. JS drives the
   slide; the CSS default is OPEN so a no-JS/reduced visit never sees a shut door. */
.ffr-l,.ffr-r{top:-6%;height:112%;width:56%;
  background:url(/uploads/brand/frame-jamb.webp) center/cover}
.ffr-l{left:-26px;box-shadow:28px 0 64px rgba(5,4,3,.5)}
.ffr-r{right:-26px;box-shadow:-28px 0 64px rgba(5,4,3,.5)}
/* black veil over the panels while shut — lifts as the doorway opens (--fgo 0→1) */
.ffr-l::before,.ffr-r::before,.ffr-t::before{content:"";position:absolute;inset:0;
  background:#060504;opacity:calc((1 - var(--fgo,1))*.72)}
/* the window beam comes from upper-left, so the right jamb's inner face catches it */
.ffr-r::after{content:"";position:absolute;left:0;top:5%;bottom:0;width:7px;
  background:linear-gradient(to right,rgba(255,226,190,.5),rgba(255,226,190,0))}
.ffr-t{left:-4%;right:-4%;top:-3%;height:calc(clamp(64px,7.5vw,124px) + 3%);
  background:url(/uploads/brand/frame-header.webp) center/cover;
  box-shadow:0 26px 58px rgba(5,4,3,.45)}
.fh-fg .bokeh{position:absolute;border-radius:50%;opacity:.28;filter:blur(13px);
  background:radial-gradient(circle,rgba(255,240,220,.9) 0%,rgba(255,236,214,0) 70%);
  animation:mote-drift var(--md,26s) ease-in-out infinite alternate;will-change:transform}
@media(max-width:899px),(prefers-reduced-motion:reduce){.fh-fg{display:none}}

.fh-depth{position:absolute;inset:-4%;z-index:5;pointer-events:none;will-change:transform}
.fh-depth .mote{position:absolute;border-radius:50%;opacity:var(--mo,.2);filter:blur(var(--mb,1px));
  background:radial-gradient(circle,rgba(255,244,230,.95) 0%,rgba(255,236,214,.4) 45%,rgba(255,236,214,0) 72%);
  animation:mote-drift var(--md,22s) ease-in-out infinite alternate;will-change:transform}
@keyframes mote-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--mx2,18px),var(--my2,-14px),0)}}
@media(max-width:899px),(prefers-reduced-motion:reduce){.fh-depth{display:none}}
.fh-bloom{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.35);opacity:0;
  pointer-events:none;width:clamp(240px,26vw,430px);aspect-ratio:1/1.45;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.98) 0%,rgba(255,240,224,.7) 38%,rgba(255,226,198,.28) 62%,rgba(255,220,190,0) 80%);
  filter:blur(10px);mix-blend-mode:screen}


/* idle state: floating glints in the empty space */
.fh-idle{position:absolute;z-index:2;left:72%;top:44%;transform:translate(-50%,-50%);pointer-events:none;
  width:min(30vw,390px);height:min(50vw,650px)}   /* JS sizes this to the film's doorway */
.fh-idle .glint{position:absolute;width:var(--gsz,4px);height:var(--gsz,4px);border-radius:50%;
  background:rgba(255,255,255,.92);opacity:0;will-change:transform,opacity;
  box-shadow:0 0 7px 1px rgba(255,255,255,.72),0 0 16px 4px rgba(255,225,205,.4);
  animation:glint var(--gdur,6s) ease-in-out infinite}
@keyframes glint{
  0%,100%{opacity:0;transform:translate(var(--mx,0px),var(--my,0px)) scale(calc(var(--gs,1)*var(--gp,1)*.62))}
  45%{opacity:var(--gop,.7);transform:translate(var(--mx,0px),var(--my,0px)) scale(calc(var(--gs,1)*var(--gp,1)))}}
@media(prefers-reduced-motion:reduce){.fh-idle .glint{animation:none;opacity:.6}}
@media(max-width:899px){
  .fh-words{left:50%;top:28%}
  .fh-sys{left:50%;top:28%;font-size:clamp(1.7rem,7vw,2.4rem)}
  .fh-sys .boldword i{opacity:1}}

/* progress + hint */
.fh-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16);z-index:4}
.fh-prog i{display:block;height:100%;width:0;background:#fff}
.fh-hint{position:absolute;left:50%;bottom:1.7rem;transform:translateX(-50%);z-index:4;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:.5rem;transition:opacity .4s}
.fh-hint::after{content:"↓";animation:ch-bob 2.2s ease-in-out infinite}
@media(max-width:899px){.fh-hint,.fh-prog{display:none}}
/* skip intro: quiet until offered, never in the way of the film */
.fh-skip{position:absolute;right:clamp(1rem,3vw,2.2rem);bottom:1.6rem;z-index:5;
  display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);cursor:pointer;
  padding:.6rem 1.05rem;border-radius:var(--pill);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),
             background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fh-skip.on{opacity:1;visibility:visible;transform:none}
.fh-skip:hover{background:rgba(255,255,255,.18);color:#fff}
.fh-skip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fh-skip .ico{width:14px;height:14px;transform:rotate(90deg)}
@media(max-width:899px),(prefers-reduced-motion:reduce){.fh-skip{display:none}}

/* hero text entrance choreography */
.ch-in{opacity:0;animation:ch-fade .9s var(--ease-out) var(--d,0s) forwards}
@keyframes ch-fade{to{opacity:1}}
.ch-lineb{display:block}
/* dust: each letter drifts in from a blurred speck */
.dust-word{display:inline-block;white-space:nowrap}
.dust-char{display:inline-block;opacity:0;filter:blur(12px);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0)) scale(var(--sc,1));
  animation:dust-in 1.1s var(--ease-out) var(--d,0s) forwards}
@keyframes dust-in{
  55%{opacity:.9;filter:blur(3px)}
  100%{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){
  .ch-in,.ch-eyebrow.ch-in{opacity:1;transform:none;animation:none}
  .dust-char{opacity:1;filter:none;transform:none;animation:none}}

.ch-scroll{position:absolute;bottom:1.6rem;left:50%;z-index:2;color:rgba(255,255,255,.85);text-decoration:none;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;
  transform:translateX(-50%);animation:ch-bob 2.2s ease-in-out infinite}
@keyframes ch-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(max-width:760px){.collage{transform:rotate(-8deg) scale(1.35)}.col-col:nth-child(n+5){display:none}}

/* ===== scroll-linked text reveal (Lanes-style) ===== */
.reveal-text{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.24;
  font-size:clamp(1.3rem,2.55vw,2.15rem);text-align:left;margin:0;color:var(--ink)}
.reveal-text.rt-ready .rw{opacity:.15}
.reveal-text .rw{transition:color .3s ease}
.reveal-text .rw.accent,.reveal-text .accent{color:var(--red)}
.reveal-block{max-width:min(94%,940px);margin:0 auto}
/* problem section: type left, the film's closing handshake carried over on the right */
.prob-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:960px){.prob-grid{grid-template-columns:1.02fr .98fr}
  .prob-grid .reveal-block{max-width:none;margin:0}}
.prob-media{position:relative}
.prob-media img{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 34px 60px rgba(11,11,12,.22),0 6px 14px rgba(11,11,12,.1)}
@media(max-width:959px){.prob-media{max-width:560px;margin-inline:auto}}

/* the section pins so the paragraph can finish revealing before it scrolls away —
   otherwise the copy is still half-faded by the time it leaves the screen */
.prob-pin{position:relative}
.prob-sticky{display:flex;align-items:center}
@media(min-width:960px){
  .prob-pin{height:265vh}
  .prob-sticky{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;
    padding-top:clamp(96px,12vh,132px);padding-bottom:clamp(1.5rem,4vh,3rem)}
}
@media(max-width:959px){
  .prob-pin{padding:clamp(5rem,10vw,8rem) 0}
}

/* the copy holds until the handshake has landed beside it — otherwise it reveals
   behind a full-screen video and nobody ever gets to read it */
@media(min-width:960px){
  .prob-grid .reveal-block{opacity:0;transform:translateY(16px);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .prob-grid.landed .reveal-block{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .prob-grid .reveal-block{opacity:1!important;transform:none!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- client logos: one continuous roll, never pauses ---------- */
.logo-strip{padding:clamp(2.6rem,6vw,4rem) 0 clamp(3rem,7vw,4.6rem);
  border-block:1px solid var(--line);overflow:hidden}
.ls-lead{display:flex;align-items:center;gap:.6rem;justify-content:center;
  margin:0 0 clamp(1.6rem,4vw,2.4rem);font-size:.92rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ls-track{display:flex;width:max-content;animation:ls-roll 132s linear infinite}
.ls-row{display:flex;align-items:center;gap:clamp(3.2rem,6vw,5.5rem);
  margin:0;padding:0 clamp(1.6rem,3vw,2.75rem);list-style:none}
/* fixed square cells: the logos are all 1:1 with their own padding baked in, so the
   track measures the same whether or not the files have arrived yet */
.ls-row li{flex:0 0 auto;width:clamp(46px,4.6vw,62px);display:grid;place-items:center}
.ls-row img{width:100%;height:auto;display:block;
  filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s}
.ls-row img:hover{filter:grayscale(0);opacity:1}
@keyframes ls-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .ls-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ls-track .ls-row:last-child{display:none}
  .ls-row{flex-wrap:wrap;justify-content:center;row-gap:2rem}
}
.rt-cta{margin-top:clamp(1.8rem,3.5vw,2.6rem);display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;font-size:1.05rem}
.rt-cta-lead{color:var(--muted)}

/* page header band — separates a page's title block from the content below it */
.page-head-band{position:relative;background:var(--beige-2);border-bottom:1px solid var(--line);
  padding:clamp(7rem,12vw,9rem) 0 clamp(2.6rem,5vw,3.6rem)}
.page-head-band::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red) 50%,transparent);opacity:.5}

/* ===== client-results stat strip — the numbers the lede promises ============ */
.res-stats{display:grid;grid-template-columns:1fr;gap:0;
  margin:clamp(1.4rem,3vw,2rem) 0 clamp(2.2rem,4vw,3rem);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--white);
  box-shadow:var(--shadow-sm);overflow:hidden}
@media(min-width:760px){.res-stats{grid-template-columns:repeat(3,1fr)}}
.rstat{padding:clamp(1.5rem,2.6vw,2rem) clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.rstat+.rstat{border-top:1px solid var(--line-2)}
@media(min-width:760px){.rstat+.rstat{border-top:0;border-left:1px solid var(--line-2)}}
.rstat>b{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(2.1rem,3.4vw,2.9rem);color:var(--ink)}
.rstat>span{font-size:.9rem;color:var(--muted);line-height:1.45;max-width:26ch}
/* the rating carries the stars rather than a bare figure */
.rs-stars{display:flex;gap:.18rem;color:var(--red)}
.rs-stars .ico{width:20px;height:20px}
.rstat-rating .rs-num{color:var(--ink);font-weight:700}

/* ===== the BOLD system — GRAND (brand red, editorial rows, giant numbers) ===== */
.bold-grand{position:relative;overflow:hidden;padding:clamp(5rem,10vw,8.5rem) 0;color:#fff;background:var(--red)}
.bold-grand>.wrap{position:relative;z-index:1}
/* three slow shadows drifting behind everything — just enough to stop a flat field of
   #bf1515 reading as glare. Durations share no factors, so they never resync. */
.bg-haze{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* black type sits on the red in two zones (headline top-left, CTA bottom-left).
   Rather than mask the blobs out of half the section, paint soft patches of the
   section's own red back over them there — invisible against the field, and the
   type keeps its base contrast no matter where the blobs drift. */
.bg-haze::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 46% at 34% 16%,var(--red) 0 50%,transparent 74%),
    radial-gradient(80% 34% at 26% 88%,var(--red) 0 45%,transparent 72%)}
.bg-haze i{position:absolute;display:block;will-change:transform;
  background:radial-gradient(closest-side,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 46%,transparent 72%)}
.bg-haze i:nth-child(1){width:62%;height:82%;left:-6%;top:-16%;opacity:.30;animation:haze-a 29s ease-in-out infinite alternate}
.bg-haze i:nth-child(2){width:54%;height:74%;right:-8%;top:14%;opacity:.25;animation:haze-b 39s ease-in-out infinite alternate}
.bg-haze i:nth-child(3){width:72%;height:66%;left:24%;bottom:-24%;opacity:.22;animation:haze-c 47s ease-in-out infinite alternate}
@keyframes haze-a{to{transform:translate3d(15%,17%,0) scale(1.28)}}
@keyframes haze-b{to{transform:translate3d(-18%,-13%,0) scale(1.2)}}
@keyframes haze-c{to{transform:translate3d(11%,-16%,0) scale(1.32)}}
@media(prefers-reduced-motion:reduce){.bg-haze i{animation:none}}
.bold-grand .fh-labels{border-color:rgba(255,255,255,.28)!important}
.bold-grand .tag-label.red{color:#fff}
.bg-title{font-family:var(--display);font-weight:700;color:var(--black);line-height:.92;letter-spacing:-.04em;
  font-size:clamp(3rem,9vw,7.5rem);margin:clamp(1.4rem,3vw,2.2rem) 0 clamp(.9rem,2vw,1.3rem)}
.bg-title .bt-l{display:block}
/* the line reserves its own height, and .hl contributes none, so BOLD can grow
   inline without pushing the line above or below it */
.bg-title .bt-big{line-height:1.42}
.bg-title .hl{color:#fff;line-height:0;will-change:font-size;position:relative;z-index:1}
.bg-lede{color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.55;
  max-width:62ch;margin:0 0 clamp(2.6rem,5vw,4rem)}
.bg-lede strong{color:#fff}
.bg-rows{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.bg-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem clamp(1.4rem,3.5vw,3rem);align-items:center;
  padding:clamp(1.4rem,3vw,2rem);border-radius:20px;background:#faf8f4;color:var(--black);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.bg-row:hover{text-decoration:none;transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,11,12,.18)}
.bg-letter{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(3.3rem,4.6vw,4.5rem);font-variant-numeric:tabular-nums;display:block;
  background:linear-gradient(180deg,var(--red) 0%,rgba(191,21,21,.18) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.8;transition:opacity .45s var(--ease)}
.bg-row:hover .bg-letter{opacity:1}
.bg-main{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.bg-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.bg-name{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--black)}
.bg-svc{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.bg-desc{color:rgba(11,11,12,.72);font-size:1rem;line-height:1.55;max-width:58ch}
.bg-chips{margin-top:.3rem}
.bg-chips .chip{background:rgba(11,11,12,.05);border-color:rgba(11,11,12,.14);color:rgba(11,11,12,.72);font-size:.75rem}
.bg-arrow{border-color:rgba(11,11,12,.22);color:var(--red)}
.bg-row:hover .bg-arrow{background:var(--red);border-color:var(--red);color:#fff;transform:translateX(4px)}
@media(max-width:680px){.bg-row{grid-template-columns:auto 1fr}.bg-arrow{display:none}
  .bg-letter{font-size:2.9rem}}
/* desktop: all four moves side by side, legible in one screen */
@media(min-width:1060px){
  .bg-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
  .bg-row{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    padding:clamp(1.5rem,2.2vw,2rem);height:100%}
  .bg-row:hover{transform:translateY(-8px)}
  .bg-letter{margin-bottom:1.1rem}
  .bg-head{flex-direction:column;align-items:flex-start;gap:.3rem}
  .bg-name{font-size:clamp(1.5rem,2vw,1.9rem)}
  .bg-desc{font-size:.95rem}
  .bg-main{gap:.6rem}
  .bg-arrow{width:44px;height:44px;margin-top:auto;padding-top:0}
  .bg-main{margin-bottom:1.2rem}
  .bg-arrow .ico{width:17px;height:17px}}
.bg-cta{margin-top:clamp(2.6rem,5vw,4rem)}
.bg-cta-line{font-family:var(--display);font-weight:600;letter-spacing:-.025em;color:#fff;line-height:1.1;
  font-size:clamp(1.6rem,3.2vw,2.5rem);margin:0 0 1.3rem;max-width:22ch}
.bg-cta-line span{color:var(--black)}
.bg-ghostbtn{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.6)}
.bg-ghostbtn:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.bg-price{margin:1.1rem 0 0;font-size:.9rem;color:rgba(255,255,255,.7)}

/* ===== the BOLD system (solution) — step boxes ===== */
.bold-sys{display:grid;gap:clamp(1rem,1.6vw,1.3rem)}
@media(min-width:640px){.bold-sys{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.bold-sys{grid-template-columns:repeat(4,1fr)}}
.bold-step{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.2vw,1.7rem);color:inherit;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease)}
.bold-step:hover{text-decoration:none;transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--red)}
.bold-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.bold-step-n{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--red);width:34px;height:34px;
  border-radius:9px;background:var(--red-tint);display:grid;place-items:center;flex:none}
.bold-svc{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.3}
.bold-name{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .4rem;color:var(--ink)}
.bold-desc{color:var(--muted);font-size:.94rem;line-height:1.5;margin:0 0 1.1rem}
.bold-step .ticks{margin:0 0 1.2rem;gap:.5rem}
.bold-step .ticks li{font-size:.88rem}
.bold-step .ticks li .ico{width:16px;height:16px;margin-top:2px}
.bold-more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--red);font-weight:600;font-size:.88rem}
.bold-more .ico{width:15px;height:15px;transition:transform var(--dur-fast) var(--ease)}
.bold-step:hover .bold-more .ico{transform:translateX(4px)}
/* lead-magnet form pending */
.form-pending{display:flex;gap:.9rem;align-items:flex-start;padding:1.2rem;border:1px dashed var(--line);
  border-radius:var(--r);background:var(--beige-2);color:var(--ink-2)}
.form-pending .ico{flex:none;color:var(--red);width:24px;height:24px}
.form-pending p{margin:0}

/* ------------------------------ FORMS ------------------------------------ */
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.02em}
.input,.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);transition:border var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.field textarea{resize:vertical;min-height:120px}

/* ------------------------------ HEADER ----------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:.9rem var(--gutter);transition:padding var(--dur) var(--ease);
  /* own compositing layer — without it the glass blur samples the hero's promoted layers
     (copy, video) and their edges show up as hard seams inside the pill */
  transform:translateZ(0)}
.nav-in{position:relative;isolation:isolate;max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .8rem .55rem 1.1rem;border-radius:var(--pill);
  background:var(--glass-bg);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);transition:all var(--dur) var(--ease)}
.nav-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--glass-sheen);
  transition:opacity var(--dur) var(--ease)}
.nav-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.1px;
  background:var(--glass-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity var(--dur) var(--ease)}

/* over the film's opening the nav floats free — the pill only forms once the film
   starts scrubbing. White text + a soft shadow keep it legible on the footage. */
.nav-clear .nav-in{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-clear .nav-in::before,.nav-clear .nav-in::after{opacity:0}
.nav-clear .nav-links a:not(.btn),.nav-clear .nav-drop-toggle{color:rgba(255,255,255,.92);
  text-shadow:0 1px 14px rgba(10,6,4,.55)}
.nav-clear .nav-links a:not(.btn):hover,.nav-clear .nav-drop-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-clear .nav-brand,.nav-clear .nav-brand .brand-logo,.nav-clear .nav-brand .brand-mark{color:#fff;
  filter:drop-shadow(0 1px 10px rgba(10,6,4,.5))}
.nav-in>*{position:relative;z-index:1}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--black)}
.nav-brand .brand-logo{height:26px;width:auto;display:block;color:var(--red)}
.nav-brand .brand-mark{height:30px;width:auto;display:block;color:var(--red)}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a:not(.btn){font-size:.92rem;font-weight:500;color:var(--ink-2);padding:.5rem .85rem;border-radius:var(--pill);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink);background:rgba(11,11,12,.05)}
.nav-links a.on{color:var(--red)}
/* services dropdown */
.nav-drop{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.92rem;font-weight:500;color:var(--ink-2);
  padding:.5rem .85rem;border-radius:var(--pill);cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.nav-drop-toggle .chev{width:13px;height:13px;transition:transform var(--dur-fast) var(--ease)}
.nav-drop-toggle:hover{color:var(--ink);background:rgba(11,11,12,.05)}
.nav-drop-toggle.on{color:var(--red)}
.nav-drop:hover .nav-drop-toggle .chev,.nav-drop:focus-within .nav-drop-toggle .chev{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:280px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:.5rem;opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);z-index:130}
.nav-menu::before{content:"";position:absolute;top:-.7rem;left:0;right:0;height:.7rem}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav-menu a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);color:var(--ink-2);font-size:.9rem;font-weight:500;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-menu a:hover{background:var(--beige-2);color:var(--red);text-decoration:none}
.nav-menu-all{color:var(--red)!important;font-weight:600!important;border-bottom:1px solid var(--line-2);border-radius:0!important;margin-bottom:.25rem}
@media(max-width:860px){.nav-links a:not(.btn),.nav-drop{display:none}}

/* ------------------------------ FOOTER ----------------------------------- */
.footer{background:var(--black);color:rgba(248,247,243,.7);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer a{color:rgba(248,247,243,.78);transition:color var(--dur-fast) var(--ease)}.footer a:hover{color:#fff}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.4rem;
  padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .foot-tag{margin:1rem 0 1.4rem;max-width:26ch;color:rgba(248,247,243,.7)}
.foot-col{display:flex;flex-direction:column;gap:.6rem;font-size:.94rem}
.foot-muted{color:rgba(248,247,243,.55)}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.6rem;font-size:.85rem;color:rgba(248,247,243,.55)}
.foot-base a{color:rgba(248,247,243,.62)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* slim footer for standalone landing pages */
.footer-slim{padding:2rem 0}
.foot-slim{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-slim .foot-mini{color:rgba(248,247,243,.6)}
.foot-slim .foot-mini a{color:rgba(248,247,243,.78)}

/* skip link (a11y) */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}

/* --------------------------- MOTION / REVEAL ----------------------------- */
.reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.blur{filter:blur(8px)}.reveal.blur.in{filter:blur(0)}
.reveal.scale{transform:translateY(24px) scale(.96)}.reveal.scale.in{transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}
.hover-lift{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.hover-lift:hover{transform:translateY(-4px)}

/* ---- Lenis smooth scroll base ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---- film grain (subtle premium texture) ---- */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
@media(prefers-reduced-motion:reduce){body::after{display:none}}

/* ---- hover-reveal image preview ---- */
.hover-preview{position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  width:clamp(210px,20vw,290px);aspect-ratio:4/3;margin:-118px 0 0 28px;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-lg);opacity:0;scale:.9;transition:opacity .28s var(--ease-out),scale .35s var(--spring)}
.hover-preview.on{opacity:1;scale:1}
.hover-preview img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:none){.hover-preview{display:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .btn,.card,.hover-lift{transition:none}
}

/* ===== OPTION C ONLY: a louder doorway and a handle you can actually turn ===== */
.fh-idle.optc .glint{box-shadow:0 0 11px 2px rgba(255,255,255,.85),0 0 26px 7px rgba(255,225,205,.5)}
.fh-idle.optc .glint{--gop:1}
.fh-knob{position:absolute;z-index:6;transform:translate(-50%,-50%);
  width:clamp(46px,3.6vw,60px);height:clamp(46px,3.6vw,60px);border:0;background:none;padding:0;
  cursor:pointer;opacity:0;display:block}
.knob-dots{position:absolute;inset:0;display:block}
.knob-dots i{position:absolute;width:var(--ks,3px);height:var(--ks,3px);border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.95);
  box-shadow:0 0 8px 2px rgba(255,255,255,.75),0 0 18px 5px rgba(255,226,190,.45);
  animation:knob-tw var(--kd,4s) ease-in-out infinite alternate}
@keyframes knob-tw{from{opacity:.45;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
/* the whole cluster brightens and opens slightly under the cursor */
.fh-knob:hover .knob-dots,.fh-knob:focus-visible .knob-dots{transform:scale(1.16)}
.knob-dots{transition:transform var(--dur) var(--ease-out)}
.fh-knob:hover .knob-dots i,.fh-knob:focus-visible .knob-dots i{
  box-shadow:0 0 12px 3px rgba(255,255,255,.95),0 0 26px 8px rgba(255,226,190,.7)}
.knob-hint{position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(10,6,4,.75);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.fh-knob:hover .knob-hint,.fh-knob:focus-visible .knob-hint{opacity:1}
.fh-knob:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:50%}
@media(max-width:899px),(prefers-reduced-motion:reduce){.fh-knob{display:none}}
.fh-more{position:absolute;left:50%;bottom:1.7rem;transform:translateX(-50%);z-index:5;opacity:0;
  display:inline-flex;align-items:center;gap:.5rem;pointer-events:none;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(10,6,4,.6)}
.fh-more .ico{width:14px;height:14px;transform:rotate(90deg);animation:ch-bob 2.2s ease-in-out infinite}

/* ===== THE CLOSE — a doorway of light opening behind the booking CTA ======= */
.cta-door{position:relative;overflow:hidden;background:var(--black);color:#fff;
  padding:clamp(6rem,13vw,10.5rem) 0 clamp(5rem,11vw,8.5rem);text-align:center;isolation:isolate}
.cd-in{position:relative;z-index:2;max-width:760px}
/* keeps the type on solid ground — without it the headline sits on the brightest
   part of the doorway and drops to roughly 1.2:1 */
.cd-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 52% at 50% 44%,rgba(11,11,12,.9) 0%,
             rgba(11,11,12,.66) 52%,rgba(11,11,12,0) 100%)}

/* the door itself: a slit that widens as the section arrives */
.cd-light{position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center}
.cd-slit{display:block;width:0;height:88%;border-radius:0 0 40% 40%/0 0 8% 8%;
  background:linear-gradient(180deg,rgba(255,240,220,0) 0%,rgba(255,238,214,.5) 16%,
             rgba(255,226,188,.34) 62%,rgba(255,226,188,0) 100%);
  filter:blur(34px);opacity:0;
  transition:width 1.9s var(--ease-out) .1s,opacity 1.3s ease .1s}
.cd-floor{position:absolute;left:50%;bottom:6%;translate:-50% 0;width:0;height:16%;
  background:radial-gradient(closest-side,rgba(255,232,198,.5),transparent 72%);
  filter:blur(26px);opacity:0;transition:width 2.1s var(--ease-out) .2s,opacity 1.5s ease .2s}
.cd-light.in .cd-slit{width:min(44vw,560px);opacity:1}
.cd-light.in .cd-floor{width:min(72vw,900px);opacity:1}

.cd-tag{display:block;color:rgba(255,255,255,.78);margin-bottom:clamp(1.1rem,2.4vw,1.6rem)}
.cd-title{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.94;
  font-size:clamp(3rem,9.5vw,7.5rem);margin:0 0 clamp(1rem,2.4vw,1.5rem);color:#fff}
.cd-lede{color:rgba(248,247,243,.82);font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;
  max-width:52ch;margin:0 auto clamp(2.2rem,4.5vw,3rem)}
.cd-ctas{display:flex;gap:1.4rem;align-items:center;justify-content:center;flex-wrap:wrap}

/* the button asks to be pressed: a slow ring, a light sweep, and it leans toward you */
.cd-go{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--red);color:#fff;font-weight:600;font-size:clamp(1rem,1.35vw,1.12rem);
  padding:clamp(1rem,1.8vw,1.25rem) clamp(1.9rem,3.2vw,2.6rem);border-radius:var(--pill);
  text-decoration:none;will-change:transform;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease);
  animation:cd-ring 3.6s ease-out infinite}
.cd-go:hover{background:#d21a1a;text-decoration:none;color:#fff}
.cd-go .ico{transition:transform var(--dur-fast) var(--ease)}
.cd-go:hover .ico{transform:translateX(5px)}
.cd-go::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);animation:cd-sheen 4.6s ease-in-out infinite}
@keyframes cd-ring{
  0%{box-shadow:0 0 0 0 rgba(191,21,21,.55),0 16px 34px rgba(191,21,21,.34)}
  70%{box-shadow:0 0 0 26px rgba(191,21,21,0),0 16px 34px rgba(191,21,21,.34)}
  100%{box-shadow:0 0 0 0 rgba(191,21,21,0),0 16px 34px rgba(191,21,21,.34)}}
@keyframes cd-sheen{0%,62%{left:-70%}100%{left:135%}}

.cd-ghost{color:rgba(248,247,243,.85);font-size:.98rem;text-decoration:none;
  border-bottom:1px solid rgba(248,247,243,.28);padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.cd-ghost:hover{color:#fff;border-color:#fff;text-decoration:none}
.cd-trust{margin:clamp(2rem,4vw,2.8rem) 0 0;font-size:.95rem;color:rgba(248,247,243,.68)}
.cta-door .dust-char{color:#fff}
@media(prefers-reduced-motion:reduce){
  .cd-go{animation:none}.cd-go::after{display:none}
  .cd-slit,.cd-floor{transition:none;opacity:1}
  .cd-light .cd-slit{width:min(44vw,560px)}
}



/* ===== creative blocks for service / industry / location pages (Sep 2026) ===== */
.band{padding:clamp(4.5rem,9vw,7.5rem) 0}
.band-title{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;margin:.6rem 0 1.2rem;
  font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:16ch;color:#fff}
.sp-black .band-title{color:var(--beige)}
.band-grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:760px){.band-grid{grid-template-columns:repeat(3,1fr)}}
.band-item{padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.28)}
.band-n{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.band-item h3{color:#fff;font-size:clamp(1.25rem,1.8vw,1.5rem);margin:.5rem 0 .5rem;letter-spacing:-.015em;line-height:1.15}
.band-item p{color:rgba(255,255,255,.82);margin:0;line-height:1.55;font-size:.98rem}
.band-item .band-fix{margin-top:.7rem;color:#fff;background:rgba(0,0,0,.18);padding:.6rem .8rem;border-radius:12px;font-size:.92rem}
.sp-black .band-item p{color:rgba(248,247,243,.72)}
.sp-black .band-item .band-fix{background:rgba(255,255,255,.08)}

/* map pack mockup */
.mp{background:#fff;border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:460px;margin-inline:auto;font-family:Inter,system-ui,sans-serif}
.mp-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:#f1f3f4;border-bottom:1px solid #e3e5e8}
.mp-dot{width:9px;height:9px;border-radius:50%;background:#d6d9dd}
.mp-q{margin-left:.5rem;flex:1;background:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.86rem;color:#333;box-shadow:inset 0 0 0 1px #e3e5e8}
.mp-map{position:relative;height:120px;background:
  linear-gradient(#e9eef1,#e9eef1) padding-box,
  repeating-linear-gradient(90deg,transparent 0 38px,#dfe5e9 38px 40px),repeating-linear-gradient(0deg,transparent 0 30px,#dfe5e9 30px 32px);
  background-color:#eef2f4}
.mp-map::before{content:"";position:absolute;left:0;right:0;top:56px;height:14px;background:#fff;opacity:.9;transform:rotate(-6deg)}
.mp-pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#bf1515;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.mp-pin.p1{left:52%;top:38%;width:22px;height:22px;background:var(--red)}
.mp-pin.p2{left:24%;top:60%;background:#9aa0a6}.mp-pin.p3{left:76%;top:28%;background:#9aa0a6}
.mp-row{padding:.85rem 1rem;border-top:1px solid #eceff1;display:flex;flex-direction:column;gap:.25rem}
.mp-row.you{background:var(--red-tint,#fbe9e9);border-left:4px solid var(--red)}
.mp-name{font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:.5rem;font-size:.98rem}
.mp-you{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff;padding:.18rem .5rem;border-radius:999px}
.mp-meta{font-size:.8rem;color:#5f6368;display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.mp-more{padding:.7rem 1rem;font-size:.82rem;color:#1a73e8;border-top:1px solid #eceff1}

/* phone text-back mockup */
.ph{width:min(320px,100%);background:#0b0b0c;border-radius:36px;padding:14px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,.4)}
.ph-top{height:22px;display:grid;place-items:center}.ph-top span{width:90px;height:8px;border-radius:999px;background:#1c1c1e}
.ph-hdr{color:#fff;text-align:center;font-size:.8rem;font-weight:600;padding:.3rem 0 .7rem;border-bottom:1px solid #1f1f22}
.ph-body{display:flex;flex-direction:column;gap:.5rem;padding:.8rem .2rem .6rem;min-height:300px}
.ph-m{max-width:82%;padding:.55rem .75rem;border-radius:16px;font-size:.84rem;line-height:1.35}
.ph-m.biz{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.ph-m.cust{align-self:flex-start;background:#26262a;color:#f2f2f2;border-bottom-left-radius:4px}
.ph-m.sys{align-self:center;background:transparent;color:#8e8e93;font-size:.72rem;padding:.2rem .5rem}

/* ===== visual blocks v2 ===== */
/* before/after slider */
.cmp{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/10;background:#111;user-select:none;touch-action:none;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cmp-a{clip-path:inset(0 0 0 var(--pos))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-1px)}
.cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cmp-knob .ico{width:22px;height:22px}
.cmp-tag{position:absolute;top:14px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .7rem;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px)}
.cmp-tag-b{left:14px}.cmp-tag-a{right:14px;background:var(--red)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
/* speed gauges */
.spd{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm)}
.spd-stack{display:flex;flex-direction:column;gap:1rem}
.spd-label{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.8rem;letter-spacing:.02em}
.spd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.spd-item{text-align:center}
.spd-ring{--c:#0cce6b;--bg:#e6f8ee;width:64px;height:64px;border-radius:50%;margin:0 auto .45rem;display:grid;place-items:center;font-weight:700;font-size:1.1rem;color:var(--c);
  background:radial-gradient(closest-side,#fff 74%,transparent 75% 100%),conic-gradient(var(--c) calc(var(--v)*1%),var(--bg) 0)}
.spd-ring.o{--c:#ffa400;--bg:#fff3db}.spd-ring.r{--c:#ff4e42;--bg:#ffe5e3}
.spd-name{font-size:.68rem;color:var(--muted);line-height:1.2}
.spd-note{margin-top:.8rem;font-size:.82rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:.7rem}
/* browser frame */
.brw{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-md);background:#fff}
.brw-bar{display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;background:#f1f1f0;border-bottom:1px solid var(--line-2)}
.brw-bar span{width:9px;height:9px;border-radius:50%;background:#d5d3cd}
.brw-bar em{margin-left:.5rem;flex:1;font-style:normal;font-size:.72rem;color:#777;background:#fff;border-radius:999px;padding:.25rem .7rem}
.brw-body{aspect-ratio:16/10;overflow:hidden}.brw-body img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* AI answer card */
.aic{background:#0f0f11;color:#f2f2f2;border-radius:18px;padding:1.1rem;box-shadow:var(--shadow-lg);font-size:.92rem;line-height:1.5}
.aic-q{background:#26262a;border-radius:14px 14px 4px 14px;padding:.6rem .85rem;margin:0 0 .9rem auto;max-width:88%;width:fit-content}
.aic-a{display:flex;gap:.7rem;align-items:flex-start}
.aic-dot{flex:none;width:22px;height:22px;border-radius:50%;background:conic-gradient(from 90deg,#ff5a5a,#bf1515,#ff8080,#ff5a5a);margin-top:.15rem}
.aic-a strong{color:#fff}
.aic-src{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.aic-src span{font-size:.68rem;background:#1e1e22;border:1px solid #2c2c31;border-radius:999px;padding:.2rem .55rem;color:#c8c8cc}
/* profile completeness card */
.gbp{background:#fff;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);font-size:.84rem}
.gbp-h{display:flex;justify-content:space-between;align-items:center;padding:.75rem .9rem;border-bottom:1px solid var(--line);font-size:.9rem}.gbp-h span{color:#f4b400;font-size:.78rem}
.gbp-row{display:flex;justify-content:space-between;padding:.5rem .9rem;border-bottom:1px solid var(--line)}
.gbp-row em{font-style:normal;font-weight:600;color:#137333;background:#e6f4ea;padding:.1rem .5rem;border-radius:999px;font-size:.74rem}
/* visual build grid */
.build-grid{display:grid;gap:clamp(1rem,1.8vw,1.4rem)}
@media(min-width:760px){.build-grid{grid-template-columns:repeat(2,1fr)}.build-card.wide{grid-column:span 2}}
@media(min-width:1100px){.build-grid{grid-template-columns:repeat(3,1fr)}.build-card.wide{grid-column:span 2}}
.build-card{display:flex;flex-direction:column;overflow:hidden;color:inherit}
a.build-card:hover{text-decoration:none}
.build-vis{background:var(--beige);padding:1.2rem 1.2rem 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;min-height:230px;overflow:hidden}
.build-vis>*{width:100%;max-width:420px;margin-bottom:-6px}
.build-vis .mp,.build-vis .aic,.build-vis .spd,.build-vis .gbp{margin-bottom:1.2rem}
.build-vis .ph-wrap{display:flex;justify-content:center;max-height:250px;overflow:hidden;align-items:flex-start}
.build-vis .ph{transform:scale(.82);transform-origin:top center}
.build-copy{padding:1.2rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.4rem}
.build-copy h3{font-size:1.25rem;letter-spacing:-.015em;margin:.2rem 0 0}
.build-copy p{color:var(--ink-2);margin:0 0 .6rem;line-height:1.55;font-size:.95rem}
.build-copy .bold-more{margin-top:auto}

/* dark tint variant of the collage hero + readable buttons on it */
.collage-hero.ch-dark{background:radial-gradient(125% 100% at 50% 20%, #2a2a2e 0%, #141518 45%, #050506 100%)}
.collage-hero.ch-dark .collage-veil{background:radial-gradient(58% 46% at 50% 46%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.6) 100%),linear-gradient(rgba(20,21,24,.35),rgba(5,5,6,.6));mix-blend-mode:normal}
.collage-hero.ch-dark::after{background:radial-gradient(62% 46% at 50% 46%, transparent 38%, rgba(0,0,0,.5) 100%)}
.collage-hero.ch-dark .ch-title{text-shadow:0 10px 46px rgba(0,0,0,.6)}
.collage-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.collage-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.collage-hero .btn-glass{color:var(--ink);background:rgba(255,255,255,.92)}
.collage-hero .btn-red{box-shadow:0 10px 30px rgba(191,21,21,.45)}
/* "what we build" as full-width rows: visual one side, copy the other, alternating */
.build-rows{display:grid;gap:clamp(1.2rem,2.2vw,1.8rem)}
.build-rows .build-card{display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:860px){.build-rows .build-card{grid-template-columns:1.15fr 1fr;align-items:stretch}.build-rows .build-card.alt .build-vis{order:2}}
.build-rows .build-vis{min-height:320px;padding:clamp(1.4rem,3vw,2.4rem);border-bottom:0;align-items:center}
.build-rows .build-vis>*{max-width:520px;margin-bottom:0}
.build-rows .build-vis .ph{transform:none}
.build-rows .build-vis .ph-wrap{max-height:none;align-items:center}
.build-rows .build-copy{padding:clamp(1.8rem,3.5vw,3rem);justify-content:center;gap:.6rem}
.build-rows .build-copy h3{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em}
.build-rows .build-copy p{font-size:1.05rem;line-height:1.6}

/* build rows restyled to the textback/split aesthetic (no card box, beige/white alternating, big visuals) */
.build-rows{gap:0;margin:0 calc(50% - 50vw);width:100vw}
.build-rows .build-card{border:0;border-radius:0;box-shadow:none;background:var(--white);padding:clamp(2rem,5vw,4.5rem) clamp(1.2rem,5vw,4rem)}
.build-rows .build-card.alt{background:var(--beige)}
.build-rows .build-card:hover{transform:none;box-shadow:none}
.build-rows .build-vis{background:transparent;padding:0;min-height:0;justify-content:center}
.build-rows .build-vis>*{max-width:560px}
.build-rows .build-copy{padding:clamp(1rem,2vw,1.6rem) 0}
@media(min-width:860px){.build-rows .build-card{grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);max-width:1180px;margin-inline:auto;width:auto;padding-inline:clamp(1.2rem,4vw,3rem)}
  .build-rows{margin:0;width:auto}
  .build-rows .build-card,.build-rows .build-card.alt{background:transparent}
  .build-rows .build-card.alt .build-vis{order:2}}
/* grand image CTA */
.cta-img{position:relative;min-height:min(78vh,720px);display:grid;align-items:center;background-size:cover;background-position:center;color:#fff;isolation:isolate}
.cta-img-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.55) 55%,rgba(5,5,6,.25) 100%)}
.cta-img-in{position:relative;z-index:1;padding:clamp(4rem,9vw,7rem) 0;max-width:1180px}
.cta-img h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.4rem,6vw,5rem);max-width:14ch;margin:.5rem 0 1rem;color:#fff}
.cta-img .lede{color:rgba(255,255,255,.85);max-width:48ch}
.cta-img .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
/* phone messages stagger in when visible */
.ph-m{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0)*.35s)}
.ph.go .ph-m{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ph-m{opacity:1;transform:none;transition:none}}
/* mobile first: hero, collage weight, mockups */
@media(max-width:700px){
  .collage-hero{min-height:100svh!important}
  .collage .col-col:nth-child(n+4){display:none}
  .ch-title{font-size:clamp(2.3rem,12vw,3.4rem)!important}
  .ch-lede{font-size:1rem}
  .collage-content .btn{width:100%;justify-content:center}
  .band-title{font-size:clamp(2rem,9vw,2.8rem)}
  .mp{max-width:100%}
  .spd-row{gap:.3rem}.spd-ring{width:52px;height:52px;font-size:.95rem}
  .cmp{aspect-ratio:4/3}
  .cta-img-veil{background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,.85))}
}
/* mobile overflow guards for the collage hero */
.ch-lede{max-width:min(52ch,100%)}
.ch-eyebrow{max-width:100%;white-space:normal;line-height:1.35}
.collage-content{padding-left:1rem;padding-right:1rem;box-sizing:border-box;max-width:100%}
.collage-hero .ch-title{overflow-wrap:anywhere}

/* ---- build rows v3: even 4:3 panels, alternating sides, check bullets ---- */
.build-rows{margin:0;width:auto;gap:clamp(2.6rem,6vw,4.5rem)}
.build-rows .build-card,.build-rows .build-card.alt{background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;max-width:1180px;margin-inline:auto;width:auto}
.build-rows .build-card{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,1.8rem);align-items:center}
.build-rows .build-vis{position:relative;background:var(--beige);border:1px solid var(--line);border-radius:24px;aspect-ratio:4/3;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:clamp(1.2rem,3vw,2.2rem);overflow:hidden}
.build-rows .build-vis>*{width:100%;max-width:min(100%,500px);max-height:100%;margin:0}
.build-rows .build-vis .spd,.build-rows .build-vis .gbp,.build-rows .build-vis .aic,.build-rows .build-vis .mp{max-width:min(100%,480px)}
.build-rows .build-vis.is-phone{padding:0}
.build-rows .build-vis .ph-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;max-height:none}
.build-rows .build-vis .ph{width:min(300px,84%);transform:scale(.92);transform-origin:center}
.build-rows .build-vis .ph-body{min-height:0}
.build-rows .build-vis.is-cmp{padding:0;cursor:ew-resize}
.build-rows .build-vis.is-cmp .cmp{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none;align-self:stretch;justify-self:stretch}
.cmp-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow-sm);pointer-events:none;white-space:nowrap}
.cmp-hint .ico{width:14px;height:14px;transform:rotate(180deg)}
.build-rows .build-copy{padding:0 clamp(0rem,1vw,.6rem);justify-content:center;gap:.55rem}
.build-rows .build-copy h3{font-size:clamp(1.45rem,2.3vw,2rem);letter-spacing:-.02em;line-height:1.12;margin:.3rem 0 .1rem}
.build-rows .build-copy p{font-size:1.02rem;line-height:1.6;margin:0 0 .3rem;max-width:46ch}
.build-list{list-style:none;margin:.2rem 0 .9rem;padding:0;display:grid;gap:.5rem}
.build-list li{position:relative;padding-left:1.7rem;color:var(--ink);font-size:.97rem;line-height:1.5;font-weight:500}
.build-list li::before{content:"";position:absolute;left:0;top:.3em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.6 3.6L18 8.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.build-rows .build-copy .bold-more{margin-top:.1rem}
@media(min-width:860px){
  .build-rows .build-card{grid-template-columns:1.12fr 1fr;gap:clamp(2rem,5vw,4.5rem);padding-inline:0}
  .build-rows .build-card.alt .build-vis{order:2}
}
@media(max-width:700px){
  .build-rows .build-vis{border-radius:18px;padding:1rem}
  .build-rows .build-vis .ph{transform:scale(.88)}
}
/* build rows v3 — sizing polish */
.build-rows .build-vis .spd{padding:1.5rem 1.7rem;max-width:min(100%,500px)}
.build-rows .build-vis .spd-row{gap:.9rem}
.build-rows .build-vis .spd-ring{width:84px;height:84px;font-size:1.35rem}
.build-rows .build-vis .spd-name{font-size:.8rem}
@media(max-width:700px){
  .build-rows .build-vis{aspect-ratio:auto;padding:1.2rem}
  .build-rows .build-vis.is-cmp{aspect-ratio:4/3;padding:0}
  .build-rows .build-vis.is-phone{aspect-ratio:1/1;padding:0}
  .build-rows .build-vis .ph{transform:scale(.82)}
  .build-rows .build-vis .spd-ring{width:60px;height:60px;font-size:1rem}
  .build-rows .build-vis .spd{padding:1.1rem 1rem}
}
/* ---- build rows v4: panels are the visual (no outline, edge to edge) ---- */
.build-rows .build-vis{border:0;padding:0;background:var(--beige-2)}
.build-rows .build-vis>*{width:100%;height:100%;max-width:none;max-height:none;justify-self:stretch;align-self:stretch}
.build-rows .build-vis.is-phone{background:radial-gradient(120% 90% at 20% 0%,#3a0d0d 0%,#141416 45%,#050506 100%)}
.build-rows .build-vis.is-phone .ph-wrap{align-items:flex-end;padding:2rem 0 0}
.build-rows .build-vis.is-phone .ph{width:min(320px,80%);transform:translateY(8%);border-radius:36px 36px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.build-rows .build-vis.is-phone .ph-body{min-height:0}
/* speed panel */
.spdp{background:#fff;display:grid;grid-template-rows:auto 1fr 1.35fr;padding:1.2rem 1.5rem 1.4rem;gap:.6rem;font-family:Inter,system-ui,sans-serif}
.spdp-top{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#5f6368;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.spdp-logo{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:#202124}
.spdp-logo i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#4285f4 0 25%,#ea4335 0 50%,#fbbc05 0 75%,#34a853 0);display:inline-block}
.spdp-dev{border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;font-size:.72rem}
.spdp-block{display:grid;grid-template-columns:1fr;align-content:center;gap:.5rem}
.spdp-lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:#5f6368}
.spdp-lbl b{color:#202124;font-weight:600}
.spdp-block.old{border-bottom:1px dashed var(--line);padding-bottom:.6rem;opacity:.85}
.spdp-block.old .spdp-lbl span{color:#d93025;font-weight:600}
.spdp-block.new .spdp-lbl span{color:#188038;font-weight:600}
.spdp .spd-row.sm .spd-ring{width:50px;height:50px;font-size:.9rem;margin-bottom:.3rem}
.spdp .spd-row.sm .spd-name{font-size:.62rem}
.spdp .spd-row:not(.sm) .spd-ring{width:78px;height:78px;font-size:1.3rem}
/* google profile panel */
.gbpp{background:#f1f3f4;display:grid;grid-template-rows:auto 1fr;padding:1rem 1.1rem 0;gap:.8rem;font-family:Inter,system-ui,sans-serif;overflow:hidden}
.gbpp-bar{background:#fff;border-radius:999px;box-shadow:0 1px 6px rgba(32,33,36,.28);display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;font-size:.86rem;color:#202124}
.g-word{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;display:inline-flex}
.g-word b:nth-child(1){color:#4285f4}.g-word b:nth-child(2){color:#ea4335}.g-word b:nth-child(3){color:#fbbc05}.g-word b:nth-child(4){color:#4285f4}.g-word b:nth-child(5){color:#34a853}.g-word b:nth-child(6){color:#ea4335}
.gbpp-q{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbpp-mic{width:14px;height:14px;border-radius:50%;background:#4285f4;flex:none}
.gbpp-card{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 1px 6px rgba(32,33,36,.18);overflow:hidden;display:grid;grid-template-rows:110px minmax(0,1fr);min-height:0}
.gbpp-photos{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3px;height:110px;overflow:hidden;min-height:0}
.gbpp-photos img{width:100%;height:110px;object-fit:cover;display:block;min-height:0}
.gbpp-body{padding:.7rem .95rem .6rem;display:flex;flex-direction:column;gap:.35rem;min-height:0;font-size:.8rem;color:#5f6368}
.gbpp-name{font-size:1.15rem;font-weight:600;color:#202124;letter-spacing:-.01em;display:flex;align-items:center;gap:.4rem}
.gbpp-v{width:16px;height:16px;border-radius:50%;background:#1a73e8;color:#fff;font-size:.62rem;display:inline-grid;place-items:center;font-weight:700}
.gbpp-stars b{color:#202124;font-weight:500}.gbpp-stars span{color:#fbbc04;letter-spacing:.02em}.gbpp-stars em{font-style:normal}
.gbpp-meta .ok{color:#188038;font-weight:500}
.gbpp-btns{display:flex;gap:.4rem;margin:.25rem 0 .35rem;flex-wrap:wrap}
.gbpp-btns span{border:1px solid #dadce0;border-radius:999px;padding:.28rem .7rem;font-size:.74rem;color:#1a73e8;font-weight:500;background:#fff}
.gbpp-rows{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem;border-top:1px solid #e8eaed;padding-top:.5rem}
.gbpp-rows div{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:#3c4043}
.gbpp-rows em{font-style:normal;font-weight:600;color:#137333;background:#e6f4ea;padding:.08rem .45rem;border-radius:999px;font-size:.68rem}
/* ai chat panel */
.aichat{background:#0f0f11;color:#ececf1;display:grid;grid-template-rows:auto 1fr auto;font-family:Inter,system-ui,sans-serif;font-size:.9rem;line-height:1.5}
.aichat-top{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid #26262a}
.aichat-dots{display:inline-flex;gap:.35rem}.aichat-dots i{width:10px;height:10px;border-radius:50%;background:#3a3a3f;display:block}
.aichat-dots i:nth-child(1){background:#ff5f57}.aichat-dots i:nth-child(2){background:#febc2e}.aichat-dots i:nth-child(3){background:#28c840}
.aichat-tabs{display:inline-flex;gap:.3rem;margin-left:auto}
.aichat-tabs b{font-weight:500;font-size:.72rem;color:#9a9aa3;padding:.25rem .6rem;border-radius:999px;border:1px solid transparent}
.aichat-tabs b.on{color:#fff;background:#232327;border-color:#2f2f35}
.aichat-body{padding:1.1rem 1.1rem .6rem;display:flex;flex-direction:column;gap:.9rem;overflow:hidden;min-height:0;justify-content:center}
.aichat-u{align-self:flex-end;background:#2a2a2f;border-radius:16px 16px 4px 16px;padding:.6rem .9rem;max-width:85%}
.aichat-a{display:flex;gap:.7rem;align-items:flex-start}
.aichat-a p{margin:0}
.aichat-a strong{color:#fff}
.aichat-av{flex:none;width:26px;height:26px;border-radius:50%;background:conic-gradient(from 90deg,#ff5a5a,#bf1515,#ff8080,#ff5a5a);margin-top:.1rem}
.aichat-src{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.aichat-src span{font-size:.66rem;background:#1e1e22;border:1px solid #2c2c31;border-radius:999px;padding:.18rem .55rem;color:#c8c8cc}
.aichat-in{margin:.4rem 1rem 1rem;border:1px solid #2f2f35;background:#18181b;border-radius:999px;padding:.55rem .6rem .55rem 1rem;display:flex;align-items:center;justify-content:space-between;color:#7d7d86;font-size:.82rem}
.aichat-in i{width:26px;height:26px;border-radius:50%;background:#ececf1;display:block;position:relative}
.aichat-in i::after{content:"";position:absolute;left:9px;top:7px;width:7px;height:7px;border-left:2px solid #0f0f11;border-top:2px solid #0f0f11;transform:rotate(45deg)}
/* dark FAQ */
.faq-dark .eyebrow{color:#ff5a4a}
.faq-dark .h1{color:#fff}
.faq-dark .faq,.faq-dark .faq details{border-color:rgba(255,255,255,.16)}
.faq-dark .faq summary{color:#fff}
.faq-dark .faq summary:hover{color:#ff5a4a}
.faq-dark .faq summary::after{color:#ff5a4a}
.faq-dark .faq details p{color:rgba(255,255,255,.72)}
@media(max-width:700px){
  .build-rows .build-vis.is-speedcmp,.build-rows .build-vis.is-gbpanel,.build-rows .build-vis.is-aichat{aspect-ratio:auto}
  .spdp{padding:1rem 1rem 1.1rem}.spdp .spd-row:not(.sm) .spd-ring{width:60px;height:60px;font-size:1rem}
  .gbpp{padding:.8rem .8rem 0}.gbpp-card{grid-template-rows:84px minmax(0,1fr)}.gbpp-photos{height:84px}.gbpp-photos img{height:84px}
  .build-rows .build-vis.is-phone{aspect-ratio:1/1}.build-rows .build-vis.is-phone .ph{transform:translateY(8%) scale(.9);transform-origin:bottom center}
}
/* ---- v5: hint pill fix, BOLD chips, ads panel, BOLD system card ---- */
.build-rows .build-vis>.cmp-hint{width:auto;height:auto;max-width:none;justify-self:center;align-self:end}
.bstep{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bstep b{width:26px;height:26px;border-radius:7px;background:var(--red);color:#fff;display:inline-grid;place-items:center;font-size:.9rem;letter-spacing:0;font-weight:800}
.bstep span{color:var(--ink)}
.bstep em{font-style:normal;color:var(--muted)}
.bstep em::before{content:"·";margin-right:.5rem}
/* ads panel */
.adsp{background:#f1f3f4;display:grid;grid-template-rows:auto auto 1fr;padding:1rem 1.1rem 0;gap:.7rem;font-family:Inter,system-ui,sans-serif;overflow:hidden;font-size:.8rem;color:#3c4043}
.adsp-lsa{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(32,33,36,.18);display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem}
.adsp-lsa>div{flex:1;min-width:0}
.adsp-lsa b{display:block;color:#202124;font-size:.95rem;font-weight:600}
.adsp-shield{flex:none;width:30px;height:30px;border-radius:8px;background:#188038;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.adsp-g{display:inline-block;color:#188038;font-weight:600;font-size:.72rem;margin:.1rem 0}
.adsp-meta{color:#5f6368;font-size:.74rem}.adsp-meta em{font-style:normal;color:#fbbc04}
.adsp-call{flex:none;background:#1a73e8;color:#fff;border-radius:999px;padding:.35rem .9rem;font-weight:600;font-size:.76rem}
.adsp-ad{background:#fff;border-radius:12px 12px 0 0;box-shadow:0 1px 6px rgba(32,33,36,.18);padding:.85rem .95rem .6rem;display:flex;flex-direction:column;gap:.25rem;min-height:0;overflow:hidden}
.adsp-sp{font-weight:700;color:#202124;font-size:.74rem}
.adsp-url{display:flex;align-items:center;gap:.45rem;color:#202124;font-size:.78rem}
.adsp-url i{width:18px;height:18px;border-radius:50%;background:var(--red);display:inline-block}
.adsp-h{color:#1a0dab;font-size:1.05rem;line-height:1.25;font-weight:500}
.adsp-d{color:#4d5156;line-height:1.45}
.adsp-links{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.3rem}
.adsp-links span{color:#1a0dab;font-size:.78rem}
/* BOLD system card */
.boldsys{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.6rem);background:var(--black);color:var(--beige);border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,3.2rem);align-items:center}
@media(min-width:900px){.boldsys{grid-template-columns:1.15fr 1fr}}
.boldsys .eyebrow{color:#ff5a4a}
.boldsys .h1{color:#fff;margin:.5rem 0 .7rem}
.boldsys .lede{color:rgba(255,255,255,.75);max-width:48ch}
.boldsys-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.boldsys .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.boldsys-card{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.3rem,2.5vw,1.9rem)}
.boldsys-price{display:flex;align-items:baseline;gap:.5rem}
.boldsys-price b{font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.03em;line-height:1}
.boldsys-price span{color:var(--muted);font-size:.9rem}
.boldsys-price2{color:var(--ink-2);margin:.35rem 0 1rem;font-size:1.05rem}.boldsys-price2 b{color:var(--ink)}
.boldsys-steps{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;border-top:1px solid var(--line);padding-top:1rem}
.boldsys-steps li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--ink-2)}
.boldsys-steps li b{flex:none;width:28px;height:28px;border-radius:8px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800}
.boldsys-steps strong{color:var(--ink)}
.boldsys-note{margin:1rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
@media(max-width:700px){.build-rows .build-vis.is-ads{aspect-ratio:auto}.boldsys{border-radius:22px}.boldsys-ctas .btn{width:100%}}
/* band: 4-up problems, letter badges, BOLD intro block */
@media(min-width:760px){.band-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.band-grid.four{grid-template-columns:repeat(4,1fr)}}
.band-letter{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--red);color:#fff;font-size:.78rem;letter-spacing:0;margin-left:.45rem;vertical-align:middle;font-family:var(--sans);font-weight:800}
.band-bold{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(2rem,4vw,3rem);display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:900px){.band-bold{grid-template-columns:1.05fr 1fr}}
.band-bold-copy h3{color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.025em;line-height:1.08;margin:.5rem 0 .7rem}
.band-bold-copy p{color:rgba(255,255,255,.78);max-width:46ch;line-height:1.6;margin:0 0 1.4rem}
.band-bold-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.band-bold-list li{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.75rem .9rem}
.band-bold-list b{flex:none;width:36px;height:36px;border-radius:9px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.band-bold-list strong{display:block;color:#fff;font-size:.98rem}
.band-bold-list span{color:rgba(255,255,255,.7);font-size:.86rem;line-height:1.4}
html{scroll-padding-top:110px}
/* hero type: more air, no widows */
.collage-hero .ch-title{line-height:.98;letter-spacing:-.03em;font-size:clamp(2.6rem,6.6vw,5.6rem)!important;text-wrap:balance}
.collage-hero .ch-lede{max-width:min(46ch,100%);text-wrap:balance;margin-top:1.4rem;line-height:1.55}
.collage-hero .ch-eyebrow{text-wrap:balance}
@media(max-width:700px){.collage-hero .ch-title{font-size:clamp(2.3rem,11vw,3.2rem)!important;line-height:1}}
/* phone panel: visible phone on a red-to-charcoal field */
.build-rows .build-vis.is-phone{background:radial-gradient(90% 70% at 50% 100%,rgba(255,90,74,.35) 0%,rgba(255,90,74,0) 60%),linear-gradient(160deg,#bf1515 0%,#5a0e0e 45%,#1d1d20 100%)}
.build-rows .build-vis.is-phone .ph{background:#1c1c1f;box-shadow:0 -24px 70px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.06)}
.build-rows .build-vis.is-phone .ph-top span{background:#3a3a3f}
.build-rows .build-vis.is-phone .ph-hdr{border-color:#34343a}
.build-rows .build-vis.is-phone .ph-m.cust{background:#3a3a40}
/* collage hero: breadcrumb/note defaults (dark tints) + white tint */
.collage-hero .ch-bc a{color:rgba(255,255,255,.8)}.collage-hero .ch-bc .sep{color:rgba(255,255,255,.5)}.collage-hero .ch-bc span:last-child{color:rgba(255,255,255,.9)}
.collage-hero .ch-note{color:rgba(255,255,255,.78)}
.collage-hero.ch-light{color:var(--ink);background:radial-gradient(125% 100% at 50% 20%,#fbfaf7 0%,#f8f7f3 50%,#efece4 100%)}
.collage-hero.ch-light .collage-veil{background:radial-gradient(72% 62% at 50% 46%,rgba(248,247,243,.94) 0%,rgba(248,247,243,.88) 38%,rgba(248,247,243,.62) 66%,rgba(248,247,243,.3) 86%,rgba(248,247,243,.14) 100%);mix-blend-mode:normal}
.collage-hero.ch-light::after{background:linear-gradient(rgba(248,247,243,.5) 0%,rgba(248,247,243,.08) 22%,rgba(248,247,243,0) 45%,rgba(248,247,243,.16) 82%,rgba(248,247,243,.5) 100%)}
.collage-hero.ch-light .ch-title{color:var(--red);text-shadow:0 2px 10px rgba(248,247,243,.95),0 10px 44px rgba(248,247,243,.9)}
.collage-hero.ch-light .ch-lede{color:var(--ink);text-shadow:0 1px 10px rgba(248,247,243,.98),0 4px 22px rgba(248,247,243,.9)}
.collage-hero.ch-light .ch-eyebrow{color:var(--ink);background:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.06)}
.collage-hero.ch-light .ch-bc a,.collage-hero.ch-light .ch-bc span:last-child{color:var(--ink-2)}.collage-hero.ch-light .ch-bc .sep{color:var(--muted)}
.collage-hero.ch-light .ch-note{color:var(--muted)}
.collage-hero.ch-light .btn-ghost{color:var(--ink);border-color:rgba(20,21,24,.4);background:rgba(255,255,255,.7)}
.collage-hero.ch-light .btn-ghost:hover{border-color:var(--ink);background:#fff}
.collage-hero.ch-light .collage img{filter:saturate(.94)}
.collage-hero.ch-light .ch-note{text-shadow:0 1px 10px rgba(248,247,243,.95)}
.collage-hero.ch-light .ch-bc{text-shadow:0 1px 10px rgba(248,247,243,.95)}

/* full-height collage hero: keep content centred, breathing room under the nav */
.collage-hero{display:flex;align-items:center}
.collage-hero .collage-content{padding-top:clamp(5rem,12vh,7.5rem);padding-bottom:clamp(3rem,8vh,5rem)}
/* light hero: keep the small type readable where the veil is thin */
.collage-hero.ch-light .ch-note{color:var(--ink-2)}
@media(max-width:700px){
  .collage-hero.ch-light .collage-veil{background:radial-gradient(96% 62% at 50% 46%,rgba(248,247,243,.95) 0%,rgba(248,247,243,.9) 46%,rgba(248,247,243,.68) 74%,rgba(248,247,243,.34) 92%,rgba(248,247,243,.18) 100%)}
}
/* form panel */
.frmp{background:linear-gradient(160deg,#f1efe8 0%,#e9e6dd 100%);display:grid;place-items:center;padding:clamp(1.2rem,3vw,2rem)}
.frmp-card{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:1.2rem 1.3rem;width:min(100%,410px);font-size:.86rem}
.frmp-hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.frmp-hd b{font-size:1.05rem;letter-spacing:-.01em}
.frmp-badge{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#e6f4ea;color:#137333;border-radius:999px;padding:.25rem .55rem;white-space:nowrap}
.frmp-f{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.6rem}
.frmp-f>span{font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.frmp-v{border:1px solid var(--line-2);border-radius:10px;padding:.5rem .7rem;font-weight:500;color:var(--ink);background:#fff}
.frmp-v.sel{background:var(--beige);position:relative}
.frmp-v.sel::after{content:"";position:absolute;right:.7rem;top:50%;width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.frmp-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.frmp-chips i{font-style:normal;border:1px solid var(--line-2);border-radius:999px;padding:.3rem .6rem;font-size:.76rem;color:var(--ink-2)}
.frmp-chips i.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.frmp-btn{background:var(--red);color:#fff;text-align:center;border-radius:999px;padding:.6rem;font-weight:700;margin-top:.85rem}
.frmp-note{margin-top:.6rem;font-size:.7rem;color:var(--muted);text-align:center;line-height:1.4}
/* catalog panel */
.catp{background:#fff;display:grid;grid-template-rows:auto 1fr;font-size:.84rem}
.catp-hd{border-bottom:1px solid var(--line);padding:.75rem 1rem}
.catp-crumb{font-size:.72rem;color:var(--muted);letter-spacing:.01em}
.catp-body{display:grid;grid-template-columns:1fr 1.05fr;min-height:0;overflow:hidden}
.catp-tree{list-style:none;margin:0;padding:.9rem 1rem;border-right:1px solid var(--line);display:grid;gap:.5rem;align-content:start}
.catp-tree>li>b{font-weight:600;color:var(--ink-2);font-size:.86rem}
.catp-tree>li.on>b{color:var(--red)}
.catp-tree ul{list-style:none;margin:.3rem 0 0;padding:0 0 0 .8rem;border-left:2px solid var(--beige-3);display:grid;gap:.25rem}
.catp-tree ul li{font-size:.78rem;color:var(--muted)}
.catp-tree>li.on ul{border-left-color:var(--red)}
.catp-tree>li.on ul li:first-child{color:var(--ink);font-weight:600}
.catp-prod{display:flex;flex-direction:column;min-height:0}
.catp-prod img{width:100%;height:58%;min-height:0;object-fit:cover;display:block}
.catp-meta{padding:.8rem .95rem;display:flex;flex-direction:column;gap:.25rem}
.catp-meta b{font-size:.98rem}
.catp-meta span{color:var(--muted);font-size:.76rem;line-height:1.35}
.catp-btns{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap}
.catp-btns i{font-style:normal;border:1px solid var(--line-2);border-radius:999px;padding:.32rem .7rem;font-size:.74rem;color:var(--ink)}
.catp-btns i.red{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
@media(max-width:700px){
  .build-rows .build-vis.is-form,.build-rows .build-vis.is-catalog{aspect-ratio:auto}
  .catp-body{grid-template-columns:1fr}.catp-tree{border-right:0;border-bottom:1px solid var(--line)}
  .catp-prod img{height:150px}
}

/* form panel: fit inside the 4:3 frame */
.frmp{padding:clamp(1rem,2.2vw,1.4rem)}
.frmp-card{padding:.95rem 1.05rem;font-size:.82rem;width:min(100%,392px)}
.frmp-hd{margin-bottom:.65rem}.frmp-hd b{font-size:.99rem}
.frmp-f{gap:.2rem;margin-bottom:.42rem}
.frmp-f>span{font-size:.64rem}
.frmp-v{padding:.4rem .65rem;border-radius:9px}
.frmp-chips i{padding:.26rem .55rem;font-size:.72rem}
.frmp-btn{padding:.52rem;margin-top:.6rem;font-size:.86rem}
.frmp-note{margin-top:.45rem;font-size:.65rem}
/* panels: let flex/grid children shrink so nothing overflows a narrow frame */
.adsp,.gbpp,.aichat,.spdp,.catp,.frmp{min-width:0;max-width:100%}
.adsp>*,.gbpp>*,.aichat>*,.spdp>*{min-width:0}
.gbpp-bar,.adsp-lsa,.adsp-ad,.gbpp-card,.gbpp-body,.aichat-body,.aichat-in{min-width:0}
.gbpp-q{flex:1 1 0;min-width:0}
.adsp-lsa>div{min-width:0}
.adsp-lsa b,.adsp-meta,.gbpp-name,.gbpp-stars,.gbpp-meta{overflow:hidden;text-overflow:ellipsis}
.adsp-h,.adsp-d,.aichat-u,.aichat-a p{overflow-wrap:anywhere}
@media(max-width:700px){
  .gbpp-q,.adsp .gbpp-q{white-space:nowrap}
  .adsp{font-size:.76rem}.adsp-h{font-size:.96rem}
  .adsp-links{gap:.6rem}.adsp-links span{font-size:.72rem}
  .gbpp-btns span{padding:.24rem .55rem;font-size:.7rem}
  .gbpp-rows{grid-template-columns:1fr}
}
/* Dropdown panels keep their own colors even when the nav is transparent over a
   dark hero. Without this, .nav-clear's white link color wins on specificity and
   the menu renders white-on-white. */
.nav-clear .nav-links .nav-menu a:not(.btn){color:var(--ink-2);text-shadow:none}
.nav-clear .nav-links .nav-menu a:not(.btn):hover{color:var(--red);background:var(--beige-2)}
.nav-clear .nav-links .nav-menu a.nav-menu-all{color:var(--red)!important}
.nav-clear .nav-links .nav-menu a.on{color:var(--red)}
/* current page inside a dropdown: red, tinted row, red rule on the left */
.nav-menu a.on{color:var(--red);background:var(--beige-2);font-weight:600;position:relative}
.nav-menu a.on::before{content:"";position:absolute;left:.15rem;top:.5rem;bottom:.5rem;width:3px;border-radius:999px;background:var(--red)}
.nav-menu a.nav-menu-all.on{background:var(--beige-2)}
.nav-clear .nav-links .nav-menu a.on{color:var(--red);background:var(--beige-2)}
/* feature cards with a photo on top */
.feat-img{overflow:hidden;padding:0;display:flex;flex-direction:column}
.feat-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--beige-2)}
.feat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
a.feat-img:hover .feat-media img{transform:scale(1.04)}
.feat-badge{position:absolute;left:.8rem;bottom:.8rem;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--red);box-shadow:var(--shadow-sm)}
.feat-badge .ico{width:17px;height:17px}
.feat-img .feat-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.feat-img .feat-title{margin-top:0}
.feat-img .feat-more{margin-top:auto;padding-top:.6rem}
/* "starting at" price row */
.pfrom{display:grid;gap:clamp(1rem,1.8vw,1.3rem);grid-template-columns:1fr}
@media(min-width:640px){.pfrom{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.pfrom{grid-template-columns:repeat(4,1fr)}}
.pfrom-card{display:flex;flex-direction:column;gap:.3rem;background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:1.3rem 1.35rem 1.4rem;color:inherit;box-shadow:var(--shadow-sm)}
a.pfrom-card:hover{text-decoration:none;border-color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pfrom-lbl{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pfrom-v{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1;color:var(--red);display:flex;align-items:baseline;gap:.35rem}
.pfrom-v em{font-style:normal;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.pfrom-card h3{font-size:1.02rem;margin:.5rem 0 0;letter-spacing:-.01em}
.pfrom-card p{color:var(--ink-2);font-size:.9rem;line-height:1.5;margin:.15rem 0 .5rem}
.pfrom-card .bold-more{margin-top:auto;font-size:.86rem}
.pfrom-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2rem)}
.pfrom-note{color:var(--muted);font-size:.9rem;margin:0;max-width:52ch}
.pfrom-ctas{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:560px){.pfrom-ctas{width:100%}.pfrom-ctas .btn{width:100%}}
/* video panel: a looping demo inside the browser frame */
.vidp{width:100%;display:flex;flex-direction:column;background:#fff}
.vidp .vidp-v{width:100%;display:block;background:#0f0f11;aspect-ratio:16/10;object-fit:cover}
.build-rows .build-vis.is-video{padding:clamp(1rem,2.4vw,1.8rem);background:linear-gradient(160deg,#f1efe8,#e6e2d8)}
.build-rows .build-vis.is-video>*{max-width:min(100%,560px);box-shadow:var(--shadow-lg);border-radius:14px;overflow:hidden}
@media(max-width:700px){.build-rows .build-vis.is-video{aspect-ratio:auto;padding:1rem}}
@media(prefers-reduced-motion:reduce){.vidp .vidp-v{display:none}.vidp::after{content:"";display:block;aspect-ratio:16/10;background:var(--beige-2)}}

/* ==========================================================================
   HOMEPAGE OPTION: THE DOOR
   A tall black door on beige with a red light breathing around it. One huge
   headline crosses the frame: brand red on the beige, white inside the door.
   Scroll drives --p (0 to 1); the door opens to full bleed by --o = 1.
   ========================================================================== */
.dr{--p:0;position:relative;background:var(--beige);height:320svh}
.dr-track{position:sticky;top:0;height:100svh;overflow:hidden}
.dr-stage{position:relative;height:100%;
  /* the door, closed then open. both the panel and the headline clip use these. */
  --dw:clamp(250px,23vw,360px); --dh:min(70svh,660px);
  --o:clamp(0,calc(var(--p) / .55),1);
  --w:calc(var(--dw) + (100vw - var(--dw)) * var(--o));
  --h:calc(var(--dh) + (100svh - var(--dh)) * var(--o))}

/* --- the door -------------------------------------------------------------- */
.dr-door{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:var(--w);height:var(--h);will-change:width,height}
.dr-panel{position:absolute;inset:0;display:block;overflow:hidden;
  background:#08080a center/cover no-repeat;
  border:1px solid rgba(255,120,96,calc(.30 * (1 - var(--o))));
  box-shadow:0 0 calc(120px * (1 - var(--o))) calc(30px * (1 - var(--o))) rgba(255,90,74,calc(.30 * (1 - var(--o))))}
.dr-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:clamp(0,calc((var(--p) - .18) / .3),1)}
.dr-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(6,6,7,calc(.55 - .20 * var(--o))) 0%, rgba(6,6,7,calc(.42 - .14 * var(--o))) 55%, rgba(6,6,7,calc(.66 - .18 * var(--o))) 100%)}

/* THE LIGHT.
   Built like a real flare rather than a soft cloud: a defined rim with bright
   arcs and dark gaps, spokes of light fanning out from it, and hot spots that
   orbit at their own speeds. Nothing shares a duration, so the pattern never
   repeats visibly and the dark gaps drift as much as the bright ones. */
.dr-glow{position:absolute;inset:0;z-index:-1;opacity:calc(1 - var(--o));
  --gs:calc((var(--w) + var(--h)) * 1.02)}
.dr-glow i{position:absolute;display:block}
.dr-glow .gl-rays,.dr-glow .gl-flare,.dr-glow .gl-shade{top:50%;left:50%;width:var(--gs);height:var(--gs);
  border-radius:50%;margin:calc(var(--gs) / -2) 0 0 calc(var(--gs) / -2);will-change:transform}

/* 0 · the shade. On a beige page a light ray has nothing to glow against, so the
      dark side of the flare does the work: soft warm shadow wedges turning under
      the bright ones. This is what makes the rays legible. */
.gl-shade{-webkit-mask:radial-gradient(closest-side,transparent 17%,#000 30%,rgba(0,0,0,.5) 60%,transparent 92%);
          mask:radial-gradient(closest-side,transparent 17%,#000 30%,rgba(0,0,0,.5) 60%,transparent 92%)}
.gl-shade.a{opacity:.55;filter:blur(22px);
  background:conic-gradient(from 0deg,
    rgba(74,26,18,0) 0deg, rgba(74,26,18,.20) 16deg, rgba(58,20,14,.30) 34deg, rgba(74,26,18,.16) 56deg,
    rgba(74,26,18,0) 86deg, rgba(74,26,18,0) 120deg, rgba(74,26,18,.22) 148deg, rgba(58,20,14,.32) 168deg,
    rgba(74,26,18,.14) 192deg, rgba(74,26,18,0) 226deg, rgba(74,26,18,0) 262deg,
    rgba(74,26,18,.24) 292deg, rgba(58,20,14,.28) 312deg, rgba(74,26,18,.12) 334deg, rgba(74,26,18,0) 360deg);
  animation:dr-turn-rev 34s cubic-bezier(.45,0,.55,1) infinite}
.gl-shade.b{opacity:.4;filter:blur(38px);
  background:conic-gradient(from 70deg,
    rgba(60,22,16,0) 0deg, rgba(60,22,16,.26) 44deg, rgba(44,16,12,.34) 78deg, rgba(60,22,16,.20) 116deg,
    rgba(60,22,16,0) 168deg, rgba(60,22,16,0) 214deg, rgba(60,22,16,.24) 258deg,
    rgba(44,16,12,.30) 292deg, rgba(60,22,16,.16) 326deg, rgba(60,22,16,0) 360deg);
  animation:dr-turn 51s linear infinite}

/* 1 · the base bloom, shaped by the door itself */
.gl-bloom{inset:0;border-radius:inherit;
  box-shadow:0 0 clamp(44px,5vw,78px) rgba(255,90,74,.26), 0 0 14px rgba(255,120,96,.34),
             0 0 26px 6px rgba(78,30,22,.20), 0 0 70px 14px rgba(78,30,22,.12);
  animation:dr-breathe 11s ease-in-out infinite}

/* 2 · spokes. Two regular fans at different pitches, plus one deliberately
      irregular pass so the rays never read as a machine-made star. */
.gl-rays{-webkit-mask:radial-gradient(closest-side,transparent 19%,#000 31%,rgba(0,0,0,.5) 62%,transparent 92%);
         mask:radial-gradient(closest-side,transparent 19%,#000 31%,rgba(0,0,0,.5) 62%,transparent 92%)}
.gl-rays.a{opacity:.85;filter:blur(4px);
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg 4.6deg, rgba(255,222,198,.62) 5deg 5.9deg, transparent 6.4deg 10.4deg,
    rgba(255,150,120,.34) 10.8deg 11.5deg, transparent 12deg 18deg);
  animation:dr-turn 28s linear infinite}
.gl-rays.b{opacity:.7;filter:blur(7px);
  background:repeating-conic-gradient(from 13deg,
    transparent 0deg 8deg, rgba(255,246,238,.55) 8.6deg 9.9deg, transparent 10.5deg 22deg,
    rgba(255,178,104,.42) 22.6deg 23.7deg, transparent 24.3deg 39deg);
  animation:dr-turn-rev 44s linear infinite}
.gl-rays.c{opacity:.8;filter:blur(5px);
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,232,210,.62) 3deg, transparent 7deg,
    transparent 24deg, rgba(255,170,130,.40) 27deg, transparent 33deg,
    transparent 58deg, rgba(255,255,255,.66) 60deg, transparent 64deg,
    transparent 96deg, rgba(255,190,140,.34) 101deg, transparent 108deg,
    transparent 141deg, rgba(255,244,232,.55) 143deg, transparent 148deg,
    transparent 187deg, rgba(190,214,255,.40) 190deg, transparent 196deg,
    transparent 223deg, rgba(255,214,180,.50) 226deg, transparent 231deg,
    transparent 268deg, rgba(255,255,255,.58) 270deg, transparent 275deg,
    transparent 304deg, rgba(255,160,120,.36) 308deg, transparent 315deg,
    transparent 337deg, rgba(255,236,214,.44) 340deg, transparent 345deg,
    transparent 360deg);
  animation:dr-turn 63s cubic-bezier(.45,0,.55,1) infinite}

/* 3 · hot spots. Each is a bright point parked on the edge of its own circle,
      so rotating the circle walks the flare around the frame. */
.gl-flare.f1{filter:blur(9px);
  background:radial-gradient(circle 78px at 50% 9%, rgba(255,255,255,.95), rgba(255,206,170,.48) 34%, transparent 70%);
  animation:dr-turn 16s cubic-bezier(.45,0,.55,1) infinite}
.gl-flare.f2{filter:blur(13px);
  background:radial-gradient(circle 64px at 50% 91%, rgba(255,218,160,.85), rgba(255,120,90,.40) 40%, transparent 74%);
  animation:dr-turn-rev 25s cubic-bezier(.4,0,.6,1) infinite}
.gl-flare.f3{filter:blur(16px);opacity:.7;
  background:radial-gradient(circle 54px at 8% 50%, rgba(198,220,255,.8), rgba(150,180,255,.28) 42%, transparent 76%);
  animation:dr-turn 37s cubic-bezier(.5,0,.5,1) infinite}

/* 4 · the rim: the line that makes the shape legible. Bright arcs, dark gaps,
      and a slow turn, so the edge itself looks lit rather than outlined. */
.gl-rim{inset:-1.5px;border-radius:inherit;padding:2.2px;
  filter:drop-shadow(0 0 6px rgba(255,150,110,.75)) drop-shadow(0 0 16px rgba(255,110,80,.45));
  background:conic-gradient(from var(--ra,0deg),
    rgba(255,90,74,.18) 0deg, rgba(255,143,106,1) 20deg, #fff6ec 40deg, rgba(255,214,150,1) 56deg,
    rgba(255,120,90,.70) 86deg, rgba(255,90,74,.14) 126deg, rgba(255,90,74,.10) 164deg,
    rgba(198,220,255,.95) 194deg, #ffffff 208deg, rgba(255,178,140,.80) 234deg,
    rgba(255,90,74,.16) 278deg, rgba(255,150,116,.90) 318deg, rgba(255,90,74,.18) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rim-turn 19s linear infinite}

@property --ra{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rim-turn{to{--ra:360deg}}
@keyframes dr-turn{to{transform:rotate(360deg)}}
@keyframes dr-turn-rev{to{transform:rotate(-360deg)}}
@keyframes dr-breathe{0%,100%{opacity:.74}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){.dr-glow i{animation:none}}

/* --- the crossing headline ------------------------------------------------ */
.dr-cross{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  padding:0 clamp(1rem,4vw,3rem);
  opacity:calc(1 - clamp(0,calc((var(--p) - .16) / .22),1))}
.dr-cross{z-index:1}                       /* the red pass, under the door */
.dr-cross-in{z-index:3;                    /* the white pass, clipped to the door */
  clip-path:inset(calc((100svh - var(--h)) / 2) calc((100vw - var(--w)) / 2))}
.dr-h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.9;
  font-size:min(clamp(2.6rem,7.6vw,7rem),11.5vh);margin:0;text-align:center;max-width:17ch;
  /* sits 30% of the way down the door, so the copy below always clears it */
  transform:translateY(calc(var(--h) * -0.20 - 30px * var(--o)))}
.dr-h1-out{color:var(--red)}
.dr-h1-in{color:#fff}

/* --- the copy inside the door -------------------------------------------- */
/* anchored to the bottom of the door, so it can never spill onto the beige */
.dr-inner{position:absolute;left:0;right:0;bottom:clamp(1.1rem,4.5%,2.2rem);z-index:4;
  padding-inline:clamp(1rem,8%,1.7rem);text-align:center;
  opacity:calc(1 - clamp(0,calc((var(--p) - .10) / .18),1))}
.dr-lede{color:rgba(255,255,255,.86);font-size:clamp(.86rem,.95vw,.96rem);line-height:1.5;margin:0}
.dr-ctas{display:flex;flex-direction:column;gap:.45rem;margin-top:1rem}
.dr-ctas .btn{width:100%;justify-content:center}
.dr-inner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.dr-inner .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.dr-proof{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:1rem}
.dr-faces{display:inline-flex}
.dr-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.dr-faces img+img{margin-left:-11px}
.dr-proof-txt{font-size:.74rem;line-height:1.4;color:rgba(255,255,255,.7)}
.dr-proof-txt b{color:#fff}
.dr-stars{color:#ffc53d;letter-spacing:.06em;margin-right:.3rem}

/* --- the problem copy, once the door is open ----------------------------- */
.dr-reveal{position:absolute;inset:0;z-index:5;display:grid;align-items:center;color:#fff;
  opacity:clamp(0,calc((var(--p) - .56) / .18),1);pointer-events:none}
.dr-reveal .wrap{max-width:860px;transform:translateY(calc(30px * (1 - clamp(0,calc((var(--p) - .56) / .18),1))))}
.dr-rv-eyebrow{color:#ff8f7a}
.dr-rv-h2{font-family:var(--display);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2rem,4.2vw,3.3rem);margin:.6rem 0 1.1rem;max-width:24ch;text-wrap:balance;
  text-shadow:0 6px 34px rgba(0,0,0,.55)}
.dr-rv-p{color:rgba(255,255,255,.88);font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.62;margin:0 0 .9rem;
  max-width:58ch;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.dr-rv-cta{margin-top:1.1rem;pointer-events:auto}

.dr-hint{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:6;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  opacity:calc(1 - clamp(0,calc(var(--p) / .08),1));animation:dr-bob 2.4s ease-in-out infinite}
@keyframes dr-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}

/* short laptops: trim the copy so the headline never lands on it */
@media(max-height:800px){
  .dr-h1{transform:translateY(calc(var(--h) * -0.26 - 30px * var(--o)))}
  .dr-lede{font-size:.82rem;line-height:1.45}
  .dr-ctas{margin-top:.8rem;gap:.4rem}
  .dr-ctas .btn{padding-block:.6rem}
  .dr-proof{margin-top:.75rem;gap:.3rem}
  .dr-faces img{width:30px;height:30px}
  .dr-proof-txt{font-size:.7rem}
}

/* --- no JS, or reduced motion -------------------------------------------- */
.dr-static{height:auto}
.dr-static .dr-track{position:static;height:auto}
.dr-static .dr-stage{height:auto;min-height:100svh;padding:clamp(5rem,10vh,7rem) 0 clamp(3rem,6vh,4rem)}
.dr-static .dr-cross,.dr-static .dr-inner{opacity:1}
.dr-static .dr-reveal{position:static;opacity:1;color:var(--ink);padding:clamp(3rem,7vw,4.5rem) 0 0;pointer-events:auto}
.dr-static .dr-reveal .wrap{transform:none}
.dr-static .dr-rv-h2,.dr-static .dr-rv-p{text-shadow:none}
.dr-static .dr-rv-h2{color:var(--ink)}
.dr-static .dr-rv-p{color:var(--ink-2)}
.dr-static .dr-rv-eyebrow{color:var(--red)}
.dr-static .dr-hint{display:none}

/* --- phones: the door widens, the headline still crosses it -------------- */
@media(max-width:700px){
  .dr{height:290svh}
  .dr-stage{--dw:min(64vw,280px); --dh:min(68svh,580px)}
  .dr-h1{font-size:min(clamp(1.9rem,9.4vw,2.8rem),9.5vh);max-width:14ch;transform:translateY(calc(var(--h) * -0.22 - 24px * var(--o)))}
  .dr-inner{bottom:clamp(1rem,4%,1.8rem);padding-inline:clamp(.9rem,7%,1.4rem)}
  .dr-lede{font-size:.82rem}
  .dr-ctas{margin-top:.9rem}
  .dr-proof{margin-top:.9rem}
  .dr-proof-txt{font-size:.7rem}
  .dr-reveal .wrap{padding-inline:1.3rem}
  .dr-rv-h2{font-size:clamp(1.65rem,7vw,2.15rem)}
  .dr-rv-p{font-size:.96rem}
}

/* ==========================================================================
   NAV: hamburger + menu panel
   Minimal mode (nav="minimal") drops the pill and the inline links: logo far
   left, CTA and menu on the right. Every page gets the panel on phones, where
   the inline links have always been hidden.
   ========================================================================== */
.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}

.nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  margin-left:.35rem;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);
  transition:background var(--dur-fast) var(--ease)}
.nav-burger:hover{background:rgba(11,11,12,.06)}
.nav-burger-box{position:relative;display:block;width:19px;height:12px}
.nav-burger-box i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease)}
.nav-burger-box i:first-child{top:0}
.nav-burger-box i:last-child{bottom:0}
.nav-burger[aria-expanded="true"] .nav-burger-box i:first-child{transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .nav-burger-box i:last-child{transform:translateY(-5px) rotate(-45deg)}

/* --- minimal mode: no pill, logo hard left --- */
.nav-min .nav-in{max-width:none;background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;
  padding:.4rem clamp(.4rem,1.6vw,1.4rem)}
.nav-min .nav-in::before,.nav-min .nav-in::after{opacity:0}
.nav-min .nav-links a:not(.btn),.nav-min .nav-drop{display:none}
.nav-min .nav-burger{display:inline-flex}
/* once you scroll, it becomes a full-width glass bar, so the logo never sits on bare
   content. The inner padding grows by exactly what the outer padding loses, so the
   logo and the button do not jump sideways. */
.nav-min.nav-scrolled{padding:0}
/* denser than the pill's glass: over the black FAQ a lighter frost turned grey and the
   red logo went muddy. This stays cream over any section and still blurs what passes under */
.nav-min.nav-scrolled .nav-in{background:linear-gradient(180deg,rgba(250,249,245,.9),rgba(248,247,243,.8));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-width:0 0 1px;border-color:rgba(20,21,24,.08);
  padding:.7rem calc(var(--gutter) + clamp(.4rem,1.6vw,1.4rem))}
.nav-min.nav-scrolled .nav-in::before{opacity:.7}
body.nav-open .nav-min.nav-scrolled .nav-in{background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
body.nav-open .nav-min.nav-scrolled .nav-in::before{opacity:0}

/* --- phones: the panel is the only menu, on every page --- */
@media(max-width:860px){ .nav-burger{display:inline-flex} }

/* --- the panel --- */
.nav-panel{position:fixed;inset:0;z-index:110;overflow-y:auto;overscroll-behavior:contain;
  background:var(--beige);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.nav-panel[hidden]{display:none}
.nav-open .nav-panel{opacity:1;visibility:visible}
.nav-panel-in{max-width:var(--maxw);margin-inline:auto;padding:clamp(6rem,13vh,8rem) var(--gutter) 3rem;
  display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
@media(min-width:760px){.nav-panel-in{grid-template-columns:repeat(3,1fr);align-items:start}}
.np-col{border-top:1px solid var(--line);padding-top:1rem;display:grid;gap:.45rem;align-content:start}
.np-plain{gap:.15rem}
.np-head{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--ink);margin-bottom:.15rem}
.np-head:hover,.np-head.on{color:var(--red);text-decoration:none}
.np-sub{display:grid;gap:.32rem;margin-top:.3rem}
.np-sub a{color:var(--ink-2);font-size:.95rem;padding:.18rem 0}
.np-sub a:hover,.np-sub a.on{color:var(--red);text-decoration:none}
.np-foot{border-top:1px solid var(--line);padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
@media(min-width:760px){.np-foot{grid-column:1/-1}}
.np-note{width:100%;margin:.4rem 0 0;font-size:.86rem;color:var(--muted)}
.np-note a{color:var(--ink-2)}
@media(max-width:560px){.np-foot .btn{width:100%}}
body.nav-open{overflow:hidden}

/* the header rides above the open panel, so the X is always reachable */
.nav-open .nav{z-index:130}
.nav-open .nav-in{background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.nav-open .nav-in::before,.nav-open .nav-in::after{opacity:0}
.nav-open .nav-links a:not(.btn),.nav-open .nav-drop{visibility:hidden}

/* ---- the same door on a dark ground: what the Apple references actually are.
   Light rays need darkness to read; on beige the shade layers do that job, here
   the ground does it and the shade is switched off. ---- */
.door-dark .dr{background:radial-gradient(125% 95% at 50% 38%, #17141a 0%, #0c0b0d 58%, #070607 100%)}
.door-dark .gl-shade{display:none}
.door-dark .gl-bloom{box-shadow:0 0 clamp(50px,6vw,96px) rgba(255,90,74,.34), 0 0 18px rgba(255,140,110,.45)}
.door-dark .dr-h1-out{color:#ff5a4a}
.door-dark .dr-panel{background-color:#050506;border-color:rgba(255,140,110,.22)}
.door-dark .dr-hint{color:rgba(255,255,255,.5)}
.door-dark .nav-burger{color:#fff}
.door-dark .nav-burger:hover{background:rgba(255,255,255,.10)}
.door-dark .nav-brand .brand-logo{filter:brightness(1.35)}
.door-dark .dr-static .dr-rv-h2{color:#fff}
.door-dark .dr-static .dr-rv-p{color:rgba(255,255,255,.8)}

/* ==========================================================================
   HOMEPAGE OPTION: THE LINE AT THE DOOR
   The page background IS the film's room, and the film's edges are masked away,
   so the people read as standing on the page instead of inside a video box.
   Copy sits centred above them.
   ========================================================================== */
.ql{background:#efe3d6;min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h,84px) + clamp(1rem,3.5vh,2.6rem));overflow:hidden}
/* the copy takes what it needs, the film takes everything that is left, so the
   feet always land inside the fold */
.ql-in{flex:1;width:100%;text-align:center;display:flex;flex-direction:column;min-height:0}

.ql-copy{flex:none;max-width:min(920px,92vw);margin:0 auto;padding-inline:1.2rem}
.ql-eyebrow{display:inline-block;margin-bottom:1.05rem;color:var(--ink-2)}
/* two lines of near-equal length, one colour each: the promise in red, the
   picture in ink. Slightly looser tracking than before so it does not read squished */
.ql-h1{font-family:var(--display);font-weight:700;color:var(--red);letter-spacing:-.022em;
  line-height:1.06;font-size:min(clamp(2.1rem,4.3vw,3.6rem),10.5vh);margin:0}
.ql-h1>span,.ql-h1 em{display:block;text-wrap:balance}
.ql-h1 em{font-style:normal;color:var(--ink)}
/* lede runs two lines, about three quarters of the headline's width */
.ql-lede{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;
  margin:1.2rem auto 0;max-width:38.5em;text-wrap:balance}
.ql-ctas{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.ql-copy .btn-ghost{color:var(--ink);border-color:rgba(20,21,24,.34);background:rgba(255,255,255,.85)}
.ql-copy .btn-ghost:hover{border-color:var(--ink);background:#fff}
/* faces on the left, a two-line block on the right: stars on top, who it is under */
.ql-proof{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.3rem}
.ql-faces{display:inline-flex;flex:none}
.ql-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
.ql-faces img+img{margin-left:-11px}
.ql-proof-txt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.12rem;min-width:0}
.ql-proof-top{display:flex;align-items:center;gap:.45rem;line-height:1}
.ql-stars{color:#f4b400;font-size:1.2rem;letter-spacing:.04em;line-height:1}
.ql-proof-top b{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.ql-proof-sub{font-size:.95rem;line-height:1.3;color:var(--ink)}

/* the film. Cropped to the band the people occupy, then feathered on every edge
   so there is no rectangle — the cream simply continues into the page. */
/* height comes from whatever the fold has left, width follows the aspect, so the
   whole queue always lands above the fold and simply gets smaller on short screens */
.ql-media{flex:1 1 0;min-height:0;max-height:498px;aspect-ratio:1280/540;
  width:auto;max-width:min(1180px,94vw);
  margin:clamp(.6rem,2.2vh,1.8rem) auto 0;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.ql-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}

/* short laptops: tighten the copy so the queue still fits above the fold */
@media(max-height:820px){
  .ql-copy .ql-lede{font-size:.98rem;margin-top:.85rem}
  .ql-ctas{margin-top:1.15rem}
  .ql-proof{margin-top:.9rem}
  .ql-h1{font-size:min(clamp(2rem,3.9vw,3.1rem),9.6vh)}
}
/* the hero's cream runs on through the problem, the testimonials and behind the BOLD box,
   so the film leaving the hero never crosses a colour change */
.ql-problem,.ql-testi,.ql-cream{background:#efe3d6}
/* the same story, every time: heading pinned left, the five leaks as cards on the right,
   then the BOLD System as the one fix, across the full width */
.qlp-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
@media(min-width:900px){.qlp-grid{grid-template-columns:1fr 1fr}}
.qlp-title{margin:.6rem 0 1.1rem;max-width:15ch;text-wrap:balance}
.qlp-title em{font-style:normal;color:var(--red)}
.qlp-head .lede{max-width:40ch}
.qlp-head .reveal-text{margin-top:clamp(1rem,2vw,1.4rem)}
/* the five problems now sit under the paragraph in the left column */
.qlp-main .qlp-list{margin-top:clamp(1.8rem,3.4vw,2.6rem)}
/* right column: a sticky box the hero film flies into (see the script in home-queue.php) */
.qlp-side{display:none}
@media(min-width:900px){
  .qlp-side{display:block;align-self:stretch;position:relative}
  .qlp-dock{position:sticky;top:clamp(100px,calc(50svh - 12rem),260px);width:100%;aspect-ratio:4/3}
}
.ql-flyer{--fl:8;--fr:8;--ft:14;--fb:4;position:fixed;left:0;top:0;width:0;height:0;z-index:3;overflow:hidden;
  pointer-events:none;visibility:hidden;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fl)*1%),#000 calc(100% - var(--fr)*1%),transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 calc(var(--ft)*1%),#000 calc(100% - var(--fb)*1%),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fl)*1%),#000 calc(100% - var(--fr)*1%),transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 calc(var(--ft)*1%),#000 calc(100% - var(--fb)*1%),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.ql-flyer.on{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .qlp-dock{background:url('/uploads/video/queue-poster-band.jpg') 100% 50%/cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
.qlp-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.qlp-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.15rem 1.3rem}
.qlp-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--red-tint);color:var(--red)}
.qlp-ico .ico{width:22px;height:22px}
.qlp-item h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.12rem;line-height:1.25;
  margin:.15rem 0 .3rem;color:var(--ink)}
.qlp-item p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
/* the problems light up one at a time as they reach the reading line (script in home-queue.php) */
.qlp-list[data-focus-list] .qlp-item{will-change:opacity,transform;transition:opacity .18s linear,transform .18s linear}
.qlp-fix{margin-top:clamp(2rem,4vw,3.2rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2.5rem;flex-wrap:wrap}
.qlp-fix-txt{margin:0;max-width:62ch;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--ink-2)}
.qlp-fix-txt strong{color:var(--ink)}
@media(max-width:560px){.qlp-item{padding:1rem 1.05rem;gap:.85rem}.qlp-ico{width:40px;height:40px}.qlp-fix .btn{width:100%}}
/* testimonials straight after the problem: no heading, same beige, tight spacing */
.ql-problem{padding-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.ql-testi{padding:clamp(.6rem,1.8vw,1.4rem) 0 clamp(1.2rem,2.4vw,2rem)}
/* the red BOLD section grows out of a rounded box to full screen as it scrolls in,
   so it reads as opening out of the section above. motion.js drives --open 0→1;
   without JS it simply sits full width. Inset stays inside the content gutter. */
/* v2: scale the whole section (type included) instead of clipping its sides, so it can
   start as a clearly smaller card without cutting anything off. Anchored at the top edge. */
.bg-openbox{--open:1;
  transform:scale(calc(.84 + .16 * var(--open)));transform-origin:50% 0;
  border-radius:calc((1 - var(--open)) * 48px);
  will-change:transform}

@media(max-width:860px){
  .ql{min-height:0;padding-bottom:clamp(1rem,4vh,2rem)}
  .ql-h1{font-size:clamp(1.95rem,8.2vw,2.8rem);line-height:1.08}
  .ql-lede{font-size:1rem}
  .ql-media{flex:none;width:100vw;margin-inline:calc(50% - 50vw);aspect-ratio:1280/540;min-height:0;max-height:none;height:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
}
/* phones: eyebrow on one line, buttons stacked, proof centred under the faces */
@media(max-width:560px){
  .ql-eyebrow{font-size:.68rem;letter-spacing:.1em;white-space:nowrap}
  .ql-ctas{flex-direction:column;align-items:stretch;padding-inline:.4rem}
  .ql-ctas .btn{width:100%}
  .ql-proof{gap:.6rem}
  .ql-faces img{width:32px;height:32px}
  .ql-faces img+img{margin-left:-10px}
  .ql-faces img:nth-child(n+5){display:none}
  .ql-stars{font-size:1rem}
  .ql-proof-top b{font-size:.74rem;white-space:nowrap}
  .ql-proof-sub{font-size:.8rem;text-wrap:balance}
}
/* BOLD rows lettered B, O, L, D (queue homepage only). Letters are not equal widths
   the way 1 to 4 were, so on phones a side column left every card's text starting
   at a different spot. Stack the letter on top instead, same as the desktop cards. */
@media(max-width:680px){
  .bg-lettered .bg-row{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
  .bg-lettered .bg-letter{font-size:2.6rem}
  .bg-lettered .bg-main{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ql-film{display:none}
  .ql-media{background:url('/uploads/video/queue-poster-band.jpg') center/cover no-repeat}
}


/* ==========================================================================
   BOLD SYSTEM, VERTICAL (home-queue): one cream card per move, the words on the
   left, the thing we build on the right. The graphic sits in the "what we build"
   frame (.build-rows .build-vis), so every panel fills it exactly as it does there.
   ========================================================================== */
.bgv-rows{display:grid;gap:clamp(1rem,2vw,1.5rem);margin:0;width:auto}
.bgv-row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  background:#faf8f4;color:var(--black);border-radius:24px;padding:clamp(1.1rem,2.6vw,2.2rem)}
@media(min-width:900px){.bgv-row{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);padding:clamp(1.6rem,2.8vw,2.6rem)}}
.bgv-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0;padding:clamp(.2rem,1vw,.8rem)}
.bgv-step{display:flex;align-items:baseline;gap:.75rem}
.bgv-step .bg-letter{font-size:clamp(3rem,4.4vw,4.2rem);opacity:1}
.bgv-name{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.15rem,1.7vw,1.45rem);color:rgba(11,11,12,.55)}
.bgv-h{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0;
  font-size:clamp(1.7rem,3vw,2.6rem);color:var(--black);max-width:18ch;text-wrap:balance}
.bgv-copy .bg-desc{margin:0}
.bgv-more{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--red);margin-top:.3rem}
.bgv-more .ico{width:17px;height:17px;transition:transform var(--dur-fast) var(--ease)}
.bgv-more:hover{text-decoration:none}.bgv-more:hover .ico{transform:translateX(4px)}
.bgv-rows .build-vis{border-radius:18px}
/* the phone sits higher here so the payoff message ("Booked · added to your CRM") is never cropped */
.bgv-rows .build-vis.is-phone .ph-wrap{padding-top:1rem}
.bgv-rows .build-vis.is-phone .ph{transform:translateY(2%)}
.bgv-rows .build-vis.is-phone .ph-body{gap:.42rem;padding-top:.6rem}
/* the map panel: let the map grow so the listing fills the frame */
/* an older rule caps .mp at 480px inside .build-vis; here it fills the frame like the other panels */
.bgv-rows .build-vis.is-mappack .mp{display:flex;flex-direction:column;max-width:none;width:100%;height:100%;
  border:0;border-radius:0;box-shadow:none}
.bgv-rows .build-vis.is-mappack .mp-map{flex:1 1 auto;min-height:110px}

/* ---- map pack: your listing climbs from third to #1 ---- */
.mp-rank{display:none}
.mp-climb .mp-name{min-height:1.5rem}
.mp-climb .mp-row{position:relative;background:#fff;
  transition:transform .95s cubic-bezier(.22,.8,.24,1) .45s,background-color .5s ease 1.2s,border-color .5s ease 1.2s}
.mp-climb .mp-row.you{z-index:2;background:var(--red-tint,#fbe9e9)}
.mp-climb:not(.go) .mp-row.you{transform:translateY(calc(200% + 2px));background:#fff;border-left-color:transparent}
.mp-climb:not(.go) .mp-row:not(.you){transform:translateY(calc(-100% - 1px))}
.mp-climb .mp-rank{display:inline-grid;place-items:center;height:1.4rem;padding:0 .45rem;border-radius:999px;
  background:var(--red);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  transition:opacity .35s ease 1.35s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.35s}
.mp-climb .mp-you{transition:opacity .35s ease 1.45s,transform .35s ease 1.45s}
.mp-climb:not(.go) .mp-rank,.mp-climb:not(.go) .mp-you{opacity:0;transform:scale(.4)}
.mp-climb .mp-pin{transition:transform .5s cubic-bezier(.3,1.6,.5,1) 1.25s,background-color .35s ease 1.25s}
.mp-climb:not(.go) .mp-pin.p1{background:#9aa0a6;transform:rotate(-45deg) scale(.7)}

/* ---- AI chat: the question arrives, the AI thinks, the answer streams in ---- */
.aichat-typing{display:none}
.aichat-anim .aichat-u{transition:opacity .5s ease .15s,transform .5s ease .15s}
.aichat-anim:not(.go) .aichat-u{opacity:0;transform:translateY(12px)}
.aichat-anim .aichat-a{transition:opacity .35s ease .75s}
.aichat-anim:not(.go) .aichat-a{opacity:0}
.aichat-anim .aichat-typing{display:flex;gap:5px;align-items:center;overflow:hidden;height:0;opacity:0}
.aichat-anim.go .aichat-typing{animation:aic-think 1.5s ease .8s both}
@keyframes aic-think{0%{height:18px;opacity:0;margin-bottom:.45rem}15%,80%{height:18px;opacity:1;margin-bottom:.45rem}100%{height:0;opacity:0;margin-bottom:0}}
.aichat-typing i{width:6px;height:6px;border-radius:50%;background:#9a9aa3;display:block;animation:aic-dot 1s ease-in-out infinite}
.aichat-typing i:nth-child(2){animation-delay:.15s}.aichat-typing i:nth-child(3){animation-delay:.3s}
@keyframes aic-dot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
.aichat-anim .aichat-a p{transition:clip-path 1.9s linear 2.3s}
.aichat-anim:not(.go) .aichat-a p{clip-path:inset(0 0 100% 0)}
.aichat-anim.go .aichat-a p{clip-path:inset(0 0 0 0)}
.aichat-anim .aichat-src span{transition:opacity .4s ease 4.2s,transform .4s ease 4.2s}
.aichat-anim .aichat-src span:nth-child(2){transition-delay:4.35s}.aichat-anim .aichat-src span:nth-child(3){transition-delay:4.5s}
.aichat-anim:not(.go) .aichat-src span{opacity:0;transform:translateY(6px)}

@media(prefers-reduced-motion:reduce){
  .aichat-anim .aichat-u,.aichat-anim .aichat-a,.aichat-anim .aichat-a p,.aichat-anim .aichat-src span,
  .mp-climb .mp-row,.mp-climb .mp-rank,.mp-climb .mp-you,.mp-climb .mp-pin{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .aichat-anim .aichat-typing{display:none!important}
  .mp-climb .mp-row.you{background:var(--red-tint,#fbe9e9)!important;border-left-color:var(--red)!important}
  .mp-climb .mp-pin.p1{background:var(--red)!important;transform:rotate(-45deg)!important}
}

/* ==========================================================================
   RESULT CARD between the two review rows (home-queue): big claim left, the
   leads chart right. .go (added on scroll-in by visual_js) plays the chart.
   ========================================================================== */
.qlr-wrap{margin-block:clamp(1.2rem,2.6vw,2rem)}
/* light (v2): no black block, it sits on the section's cream so the rolling reviews stay the focus */
.qlr{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,2.8rem);align-items:center;
  background:transparent;color:var(--ink);border-radius:0;padding:clamp(.6rem,1.6vw,1.2rem) 0}
@media(min-width:900px){.qlr{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.qlr .eyebrow{color:var(--red)}
.qlr-big{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:.6rem 0 .9rem;
  font-size:clamp(2.3rem,4.8vw,4rem);color:var(--ink);text-wrap:balance}
.qlr-big b{color:#1a9e52}
.qlr-sub{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;margin:0;max-width:42ch}
.qlr-chart{margin:0;background:#fff;border:1px solid rgba(20,21,24,.07);border-radius:20px;padding:clamp(1rem,2vw,1.5rem);box-shadow:0 18px 40px -26px rgba(20,21,24,.35)}
.qlr-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-2);margin-bottom:.6rem}
.qlr-top span{display:inline-flex;align-items:center;gap:.5rem}
.qlr-top span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.qlr-up{color:#1a9e52;font-weight:600}
.qlr svg{display:block;width:100%;height:auto;overflow:visible}
.qlr-grid line{stroke:rgba(20,21,24,.07);stroke-width:1}
.qlr-base{stroke:rgba(20,21,24,.18);stroke-width:1.5}
.qlr-area{fill:url(#qlrFill)}
.qlr-line{fill:none;stroke:#22b861;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.qlr-pt{fill:#22b861;stroke:#fff;stroke-width:4}
.qlr-val{fill:var(--ink);font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:30px}
.qlr-val.big{font-size:38px}
.qlr-x{fill:rgba(20,21,24,.55);font-family:Inter,sans-serif;font-weight:500;font-size:17px}
.qlr-src{margin:.5rem 0 0;font-size:.74rem;color:rgba(20,21,24,.45)}
/* the line draws, the area fills in behind it, each month's point and number pops in order */
.qlr .qlr-line{transition:stroke-dashoffset 1.9s cubic-bezier(.45,.05,.25,1) .25s}
.qlr:not(.go) .qlr-line{stroke-dashoffset:1}
.qlr .qlr-area{transition:opacity 1s ease 1.4s}
.qlr:not(.go) .qlr-area{opacity:0}
.qlr .qlr-p{transform-box:fill-box;transform-origin:50% 100%;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.qlr .qlr-p.p1{transition-delay:.25s}.qlr .qlr-p.p2{transition-delay:1.1s}.qlr .qlr-p.p3{transition-delay:2.05s}
.qlr:not(.go) .qlr-p{opacity:0;transform:translateY(10px) scale(.6)}
.qlr .qlr-up{transition:opacity .45s ease 2.4s}
.qlr:not(.go) .qlr-up{opacity:0}
@media(prefers-reduced-motion:reduce){
  .qlr .qlr-line,.qlr .qlr-area,.qlr .qlr-p,.qlr .qlr-up{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}

/* review platforms under the rolling reviews (home-queue) + hero proof link */
a.ql-proof-top{color:inherit;text-decoration:none}
a.ql-proof-top:hover b{text-decoration:underline;text-underline-offset:3px}

/* client logos above the first review row (home-queue): same roll as the homepage,
   no rule lines or big padding, sitting straight on the section's cream */
.ql-logos{padding:clamp(.4rem,1.2vw,1rem) 0 clamp(1.6rem,3.4vw,2.4rem);border:0}
.ql-logos .ls-lead{margin-bottom:clamp(1.2rem,3vw,1.8rem);color:var(--ink-2)}
.ql-logos .ls-row img{opacity:.6}
/* rolls to the right (the homepage strip rolls left) */
.ql-logos .ls-track{animation-direction:reverse}
/* phones: stars on their own line, a smaller centred lead that fits in two lines */
@media(max-width:560px){.ql-logos .ls-lead{flex-direction:column;gap:.35rem;font-size:.72rem;letter-spacing:.1em;text-align:center;padding-inline:1.2rem}}

/* HERO DEPTH (home-queue): the copy and the film lean from the pointer (script in the page) */
.ql{position:relative}
.ql-in{position:relative;z-index:1}
.ql-copy,.ql-media{will-change:transform}
@media(prefers-reduced-motion:reduce){.ql-copy,.ql-media{transform:none!important}}

/* ==========================================================================
   COMPARISON TABLE (sec_versus): us vs a generic agency, as a real table
   ========================================================================== */
.vs-wrap{overflow-x:auto;border-radius:22px;background:#fff;border:1px solid var(--line-2);box-shadow:0 18px 44px -32px rgba(20,21,24,.35)}
.vs{width:100%;border-collapse:collapse;min-width:520px;font-size:1rem}
.vs th,.vs td{padding:1rem clamp(.9rem,2vw,1.5rem);text-align:left;border-bottom:1px solid var(--line)}
.vs thead th{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);background:var(--beige-2)}
.vs thead th.vs-us{color:#fff;background:var(--red)}
.vs th.vs-us,.vs th.vs-them,.vs td.vs-us,.vs td.vs-them{text-align:center;width:22%}
.vs tbody th{font-weight:600;color:var(--ink)}
.vs td.vs-us{background:rgba(191,21,21,.045)}
.vs .vs-yes{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff}
.vs .vs-yes .ico{width:15px;height:15px}
.vs .vs-no{color:rgba(20,21,24,.32);font-weight:700;font-size:1.05rem}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}
/* phones: fit all three columns on screen instead of making people swipe the table */
@media(max-width:560px){
  .vs{min-width:0;font-size:.9rem}
  .vs th,.vs td{padding:.8rem .65rem}
  .vs th.vs-us,.vs th.vs-them,.vs td.vs-us,.vs td.vs-them{width:68px;padding-inline:.35rem}
  .vs thead th{font-size:.6rem;letter-spacing:.06em;line-height:1.25}
  .vs .vs-yes{width:24px;height:24px}.vs .vs-yes .ico{width:13px;height:13px}
}

/* ===== Sep 10 edits (home-queue) ===== */
/* "The BOLD System" in red in the line under the five problems */
.qlp-fix-txt .qlp-bold{color:var(--red)}
/* client logos now roll under the film in the hero, in their own colours */
/* display:block, not the shared .logo-strip flex centring: the track is far wider than the screen,
   and centring it pushed its start off to the left, leaving half the strip empty for part of the loop */
.ql .ql-logos{display:block;flex:none;width:100%;padding:clamp(.5rem,1.6vh,1.1rem) 0 clamp(.7rem,2.2vh,1.4rem)}
.ql .ql-logos .ls-row li{width:clamp(40px,3.6vw,54px)}
.ql .ql-logos .ls-row img,.ql .ql-logos .ls-row img:hover{filter:none;opacity:1}
/* the film is sized by the height left in the fold, so keep the strip slim on shorter screens */
.ql .ql-logos .ls-row{gap:clamp(2.4rem,4.4vw,4.4rem)}
@media(max-height:960px){.ql .ql-logos{padding:.35rem 0 .6rem}.ql .ql-logos .ls-row li{width:clamp(34px,3vw,44px)}}
@media(max-height:760px){.ql .ql-logos{padding:.2rem 0 .4rem}.ql .ql-logos .ls-row li{width:30px}}
/* industries: all six tiles fit one desktop screen */
@media(min-width:900px){
  .ql-ind{padding-block:clamp(2.2rem,5vh,3.6rem)}
  .ql-ind .sec-head{margin-bottom:clamp(1rem,2.4vh,1.6rem)!important}
  .ql-ind .sec-head .h1{font-size:clamp(1.8rem,2.8vw,2.5rem)}
  .ql-ind .sec-head .lede{font-size:1rem}
  .ql-ind .grid.g-3{gap:clamp(.7rem,1.2vw,1rem)}
  .ql-ind .feat-media{aspect-ratio:auto;height:clamp(84px,14vh,150px)}
  .ql-ind .feat-img .feat-body{padding:.75rem 1rem .85rem}
  .ql-ind .feat-title{font-size:1rem}
  .ql-ind .feat-text{font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ql-ind .feat-more{padding-top:.35rem;font-size:.86rem}
}

/* ==========================================================================
   HOMEPAGE: COSMOS HERO (index.php, was /home-cosmos)
   Headline (key words red), description and pill buttons over a slow spiral whirl
   of rounded image tiles drawn on a canvas (script in index.php).
   ========================================================================== */
.qlc{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#f7f4ef 0%,#f5f0e9 62%,#efe3d6 100%);
  padding-top:calc(var(--nav-h,84px) + 1rem)}
/* a clear ellipse behind the copy (Cosmos' own hero mask, rescaled from its 120%-wide layer) and
   the bottom 30% melting into the page, so the logo strip sits on calm ground */
.qlc-field{position:absolute;inset:0;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(54% 45% at 50% 50%,transparent 0 50.5%,#000 90%),linear-gradient(#000 70%,rgba(0,0,0,.55) 79%,rgba(0,0,0,.2) 86.5%,transparent 94%);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(54% 45% at 50% 50%,transparent 0 50.5%,#000 90%),linear-gradient(#000 70%,rgba(0,0,0,.55) 79%,rgba(0,0,0,.2) 86.5%,transparent 94%);
          mask-composite:intersect}
/* the spiral canvas fills the hero; tiles fade out toward the copy, and the canvas itself
   fades in once the first tiles are drawn */
.qlc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 2s ease-out}
.qlc-canvas.on{opacity:1}
.qlc-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.2rem}
/* a soft glow behind the copy so cards passing behind it never hurt legibility */
.qlc-in::before{content:"";position:absolute;left:50%;top:50%;width:min(1180px,96vw);height:min(600px,70vh);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,242,236,.95) 0%,rgba(246,242,236,.8) 52%,rgba(246,242,236,0) 100%)}
.qlc-h1{font-family:var(--display);font-weight:500;letter-spacing:-.045em;line-height:1.02;color:var(--ink);
  font-size:clamp(2.4rem,5.4vw,4.9rem);margin:0}
.qlc-h1>span{display:block;text-wrap:balance}
.qlc-h1 em{font-style:normal;color:var(--red)}
/* the description under the headline: two lines on desktop */
.qlc .qlc-lede{margin:clamp(.9rem,2.2vh,1.4rem) auto 0;max-width:40em}
.qlc-ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:clamp(1.4rem,3.2vh,2.2rem)}
.qlc-ctas .btn-ghost{background:#fff;color:var(--ink);border-color:rgba(20,21,24,.14)}
.qlc .ql-proof{margin-top:clamp(1rem,2.4vh,1.5rem)}
/* client logos along the bottom of the hero, in their own colours */
.qlc .ql-logos{position:relative;z-index:2;display:block;flex:none;width:100%;padding:.6rem 0 clamp(1rem,2.6vh,1.6rem);border:0}
/* each logo carries its own size (--lw/--lh, equal visual area, set in index.php) so wide
   wordmarks stay readable; --ls scales the whole strip down on short screens and phones */
.qlc .ql-logos{--ls:1}
.qlc .ql-logos .ls-row{gap:clamp(2.6rem,4.2vw,4.2rem)}
.qlc .ql-logos .ls-row li{width:auto;height:calc(54px * var(--ls))}
.qlc .ql-logos .ls-row img,.qlc .ql-logos .ls-row img:hover{filter:none;opacity:1;
  width:calc(var(--lw) * var(--ls) * 1px);height:calc(var(--lh) * var(--ls) * 1px);max-width:none}
@media(max-height:820px){.qlc .ql-logos{--ls:.86}}
@media(max-width:560px){.qlc .ql-logos{--ls:.78}.qlc .ql-logos .ls-row{gap:2.2rem}}
@media(max-width:760px){
  .qlc-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
}

/* no film on this page: the problem section is one centred column (paragraph, the five cards,
   then The BOLD System line and button stacked in the middle) */
.qlc-problem .qlp-grid{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
.qlc-problem .qlp-head{text-align:center}
.qlc-problem .qlp-readout{margin-inline:auto;max-width:31em;text-align:center;text-wrap:balance}
.qlc-problem .qlp-list{max-width:680px;margin-inline:auto}
.qlc-problem .qlp-fix{flex-direction:column;justify-content:center;text-align:center;max-width:760px;margin-inline:auto}
.qlc-problem .qlp-fix-txt{margin-inline:auto}
/* reduced motion: the site-wide logo strip wraps into a static grid, which would push a hero past
   the fold. In the heroes keep one still line, clipped at the edges, instead. */
@media(prefers-reduced-motion:reduce){
  .ql .ql-logos .ls-track,.qlc .ql-logos .ls-track{flex-wrap:nowrap;width:max-content;margin-inline:auto}
  .ql .ql-logos .ls-row,.qlc .ql-logos .ls-row{flex-wrap:nowrap}
  .ql .ql-logos,.qlc .ql-logos{overflow:hidden;display:flex!important;justify-content:center}
}

/* ==========================================================================
   STANDARD NAV (Sep 10 2026, v2): the header Dioni liked (logo near the left edge, links and
   button on the right, no box, no border) with cosmos.so's tint behind it: a soft page-colour
   fade that is solid at the very top and melts to transparent about 168px down, so the logo
   and links always sit on light ground without a visible bar. Stops copied from cosmos.so's
   header (100% → 92 → 78 → 60 → 42 → 26 → 13 → 5% → 0), no blur. Services, Industries, Work
   and Pricing sit inline; Blog, About and contact live in the menu (burger at every width).
   ========================================================================== */
.nav.nav-bar{padding:.9rem var(--gutter)}
.nav.nav-bar::before{content:"";position:absolute;inset:0 0 auto 0;height:168px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#f8f7f3 0%,#f8f7f3 15%,rgba(248,247,243,.92) 26%,rgba(248,247,243,.78) 36%,
    rgba(248,247,243,.6) 46%,rgba(248,247,243,.42) 55%,rgba(248,247,243,.26) 64%,rgba(248,247,243,.13) 73%,
    rgba(248,247,243,.05) 82%,rgba(248,247,243,0) 100%)}
.nav-bar .nav-in{max-width:none;border-radius:0;background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important;
  padding:.4rem clamp(.4rem,1.6vw,1.4rem)}
.nav-bar .nav-in::before,.nav-bar .nav-in::after{display:none}
.nav-bar .nav-links a:not(.btn),.nav-bar .nav-drop-toggle{color:var(--ink)}
.nav-bar .nav-links a:not(.btn):hover,.nav-bar .nav-drop-toggle:hover{color:var(--ink);background:rgba(11,11,12,.05)}
.nav-bar .nav-links a.on,.nav-bar .nav-drop-toggle.on{color:var(--red)}
.nav-bar .nav-cta{margin-left:.5rem}
.nav-bar .nav-burger{display:inline-flex}
/* the draft options whose film heroes still toggle .nav-clear: keep ink text on the tint */
.nav-bar.nav-clear .nav-links a:not(.btn),.nav-bar.nav-clear .nav-drop-toggle{color:var(--ink);text-shadow:none}
.nav-bar.nav-clear .nav-links a:not(.btn):hover,.nav-bar.nav-clear .nav-drop-toggle:hover{color:var(--ink);background:rgba(11,11,12,.05)}
.nav-bar.nav-clear .nav-brand,.nav-bar.nav-clear .nav-brand .brand-logo{filter:none}
/* over the homepage hero the tint is a little stronger (Dioni): a second fade that stays solid
   further down, cross-faded in while .nav-hero is on (set by the hero script in index.php) */
.nav.nav-bar::after{content:"";position:absolute;inset:0 0 auto 0;height:190px;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,#f8f7f3 0%,#f8f7f3 30%,rgba(248,247,243,.96) 40%,rgba(248,247,243,.88) 50%,
    rgba(248,247,243,.74) 60%,rgba(248,247,243,.56) 70%,rgba(248,247,243,.36) 80%,rgba(248,247,243,.18) 90%,
    rgba(248,247,243,0) 100%)}
.nav.nav-bar.nav-hero::after{opacity:1}
@media(max-width:560px){
  .nav.nav-bar{padding:.7rem var(--gutter)}
  .nav.nav-bar::before{height:132px}
  .nav.nav-bar::after{height:150px}
  .nav-bar .nav-in{padding:.3rem 0}
  .nav-bar .nav-cta{margin-left:0}
}