/* ============================================================================
   Sharique - landing page. Light edition.
   Reference: motionsites.ai premium light templates - pale canvas, a big
   iridescent graphic centrepiece, bold tight type, soft shadows, real motion.
   Mobile-first. Change tokens, not rules.
   ========================================================================= */

/* --- fonts (self-hosted, variable, latin subset) ------------------------- */
@font-face{
  font-family:"Inter Tight";src:url("../fonts/inter-tight-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

/* --- tokens -------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#FCF8F4;
  --surface:#FFFFFF;
  --line:#E3E5EA;
  --line-soft:#EDEEF2;

  /* text - verified against both #F4F5F7 and #FFFFFF */
  --ink:#0D0E12;        /* 17.7:1 */
  --body:#4A4D57;       /* 7.7:1  */
  --soft:#6B6F7C;       /* 4.6:1  */

  /* accent. 3.99:1 on canvas - LARGE TEXT AND UI ONLY, never body copy. */
  --accent:#E03C0A;
  /* Same hue at 86% brightness. --accent is 3.99:1 on canvas, which fails AA
     for small text; this clears 4.5:1 on every surface it lands on. Use it
     wherever the accent is TEXT, keep --accent for fills, borders and icons. */
  --accent-text:#C13409;
  --accent-soft:rgba(224,60,10,.08);
  --accent-line:rgba(224,60,10,.22);

  /* Lighthouse score scale. Green = passing, same language Google uses, so
     the card reads as a real Lighthouse result rather than brand decoration.
     All three verified at or above 3:1 on white - they are UI graphics, and
     Google's own #0CCE6B green fails that at 2.09:1, so it is not used. */
  --score-good:#16A34A;   /* 90-100 : 3.3:1 on card  */
  --score-avg:#B45309;    /* 50-89  : 5.0:1 on card  */
  --score-poor:#D92D20;   /* 0-49   : 4.8:1 on card  */

  /* the iridescent set the hero graphic and soft washes are built from */
  --iris-1:#FFD3DD;   /* rose, pulled from the hero crimson */
  --iris-2:#FFE1D4;   /* blush */
  --iris-3:#F2DCFF;   /* soft violet-pink */
  --iris-4:#FFEDDF;   /* warm cream */

  --grad:linear-gradient(100deg,var(--accent) 0%,#FF7A3D 55%,var(--accent) 100%);

  /* type */
  --display:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;

  /* shape + rhythm */
  --r:1.25rem; --r-lg:1.75rem; --r-pill:999px;
  --wrap:1120px;
  --gut:clamp(1.25rem,5vw,2rem);
  --sec-y:clamp(4.5rem,11vw,7.5rem);
  --stack:2.25rem;      /* intro copy -> first content block, every section */

  /* elevation - light UI lives or dies on shadow quality */
  --sh-1:0 1px 2px rgba(74,10,40,.05), 0 2px 6px rgba(74,10,40,.04);
  --sh-2:0 2px 4px rgba(74,10,40,.05), 0 10px 26px rgba(74,10,40,.07);
  --sh-3:0 10px 20px rgba(74,10,40,.07), 0 28px 60px rgba(74,10,40,.12);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --fast:160ms; --base:300ms; --slow:620ms;
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* film grain across the page - what stops a light design reading as
   flat printer paper */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* --- primitives ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y);position:relative;z-index:2}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);background:var(--surface);
  border:1px solid var(--accent-line);border-radius:var(--r-pill);
  padding:.45rem .9rem;margin-bottom:1.5rem;box-shadow:var(--sh-1);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.display{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.038em;line-height:.86;
  font-size:clamp(2.9rem,13vw,6.5rem);
  text-wrap:balance;
}
h2.display{font-size:clamp(2.15rem,7.8vw,3.6rem);letter-spacing:-.032em;line-height:.94}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ital{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.01em;
}
.lede{
  color:var(--body);font-size:clamp(1.0625rem,3.8vw,1.25rem);line-height:1.55;
  max-width:34ch;margin-top:1.35rem;text-wrap:pretty;
}
.sec-lede{max-width:52ch;margin-top:1rem;color:var(--body)}

/* --- buttons ------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;min-height:54px;padding:.95rem 1.7rem;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  transition:transform var(--base) var(--spring),box-shadow var(--base) var(--ease),
             background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:#000;box-shadow:var(--sh-3);transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-full{width:100%}
/* The button keeps the page's black; only the glyph carries WhatsApp green,
   which is enough to recognise it and does not fight the warm palette. */
.btn-wa{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-wa:hover{background:#000;box-shadow:var(--sh-3);transform:translateY(-2px)}
.btn-wa .wa-ico{color:#25D366}
.btn .arw{transition:transform var(--base) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* --- hero ----------------------------------------------------------------
   Full-bleed clip behind the type. The asset is a dark character on a
   saturated ground, so the type inverts to white and the scrim DARKENS rather
   than whitens: white holds contrast against both the bright pink and the
   black bunny, and the pink keeps its saturation instead of washing out.
   ------------------------------------------------------------------------ */
.hero{
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  padding-top:clamp(5rem,16vw,7.5rem);
  padding-bottom:clamp(3.5rem,11vw,6rem);
  background:#E81B5A url("../video/hero-poster.webp") center/cover no-repeat;
  color:#fff;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 800ms var(--ease);
  /* counteracts the veiling the scrim unavoidably does */
  filter:saturate(1.50) contrast(1.14);
}
.hero-bg video.ready{opacity:1}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(74,0,34,.58) 0%,  rgba(74,0,34,.52) 52%,
                            rgba(74,0,34,.66) 88%, rgba(74,0,34,.60) 100%);
}
.hero > .wrap{position:relative;z-index:2}

/* type inverted for the dark ground */
.hero .eyebrow{
  color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);
  box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* a live indicator, in the same fluorescent green as the accent word below it.
   The ring expands and fades rather than the dot switching on and off, so it
   reads as a signal rather than a blinking error light. */
.hero .eyebrow::before{
  background:#9BFF00;
  animation:heroLive 2.2s ease-in-out infinite;
}
@keyframes heroLive{
  0%,100%{box-shadow:0 0 0 2px rgba(155,255,0,.35), 0 0 8px rgba(155,255,0,.55);opacity:1}
  50%    {box-shadow:0 0 0 8px rgba(155,255,0,0),   0 0 15px rgba(155,255,0,.95);opacity:.7}
}
.hero .display{color:#fff;text-shadow:0 2px 18px rgba(38,0,16,.45),0 1px 3px rgba(38,0,16,.35)}
/* the orange accent turns muddy on pink, so the accent word goes warm-cream */
.hero .grad{
  background:linear-gradient(100deg,#9BFF00 0%,#C8FF4A 45%,#5CFF2B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* The word inherits the headline's dark text-shadow, and on a transparent
     background-clip fill that halo is painted straight through the glyphs -
     which is what was dragging the green toward olive. Swapped for a green
     bloom so it reads as neon against the crimson instead. */
  text-shadow:0 0 28px rgba(155,255,0,.50), 0 0 8px rgba(155,255,0,.30);
}
.hero .lede{color:#fff;text-shadow:0 2px 14px rgba(38,0,16,.55),0 1px 3px rgba(38,0,16,.45)}
.hero .trustrow{color:rgba(255,255,255,.94);text-shadow:0 2px 12px rgba(38,0,16,.60),0 1px 3px rgba(38,0,16,.45)}
.hero .trustrow b{color:#fff}
.hero .trustrow li + li::before{background:rgba(255,255,255,.55)}

/* buttons on a dark ground */
.hero .btn-primary{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(30,0,12,.28)}
.hero .btn-primary:hover{background:#fff;box-shadow:0 16px 40px rgba(30,0,12,.34)}
.hero .btn-ghost{
  background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none;
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
.hero :focus-visible{outline-color:#fff}

.hero-cta{display:flex;flex-direction:column;gap:.75rem;margin-top:2.25rem;max-width:27rem}

.trustrow{margin-top:2rem;font-size:.8125rem;color:var(--body);line-height:2}

/* --- hero score chips: the proof, moved into the first screen ----------- */
.hero-scores{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1.1rem}
.hero-scores[hidden]{display:none}
.hero-score{display:inline-flex;align-items:baseline;gap:.35rem;padding:.4rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.75rem;line-height:1;color:#fff;white-space:nowrap}
.hero-score b{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}
.hero-score.is-good b{color:#7CF2A8}
.hero-score span{opacity:.85}
.hero-scores .hero-score-note{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px}
.hero-scores:hover .hero-score-note{color:#fff}
@media (max-width:420px){ .hero-score{padding:.35rem .55rem;font-size:.7rem} .hero-score b{font-size:.875rem} }
.trustrow li{display:inline}
.trustrow li + li::before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--body);margin:0 .6rem;vertical-align:middle;
}
.trustrow b{color:var(--ink);font-weight:600}

/* --- marquee ------------------------------------------------------------- */
.marquee{
  position:relative;z-index:2;overflow:hidden;
  border-block:1px solid var(--line);background:var(--surface);
  padding-block:.9rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  display:inline-flex;align-items:center;gap:1.75rem;padding-inline:.875rem;
  font-family:var(--display);font-weight:800;font-size:.9375rem;
  letter-spacing:-.01em;color:var(--body);white-space:nowrap;
}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- scorecard ----------------------------------------------------------- */
.dials{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:var(--stack)}
.dial{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem 1rem;display:flex;flex-direction:column;align-items:center;
  gap:.75rem;text-align:center;box-shadow:var(--sh-1);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease);
}
.dial:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.dial-ring{position:relative;display:grid;place-items:center}
.dial svg{width:82px;height:82px;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:7;stroke-linecap:round}
.dial .trk{stroke:var(--line-soft)}
.dial .val{
  stroke:var(--score-good);stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);
  transition:stroke-dashoffset 1.3s var(--ease);
}
.dial.in .val{stroke-dashoffset:var(--target)}
.dial-num{
  position:absolute;font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.dial-lbl{font-size:.75rem;color:var(--soft);letter-spacing:.02em;line-height:1.3}
/* the ring must never flatter a score - it colours itself from the number */
.dial-good .val{stroke:var(--score-good)}
.dial-avg  .val{stroke:var(--score-avg)}
.dial-poor .val{stroke:var(--score-poor)}

.verify{
  margin-top:1rem;display:flex;flex-direction:column;gap:1rem;
  padding:1.35rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);
}
.verify p{font-size:.9375rem;color:var(--body);max-width:46ch}
.verify strong{color:var(--ink);font-weight:600}

/* --- bento: what you get ------------------------------------------------- */
.gets{display:grid;gap:.75rem;margin-top:var(--stack)}

/* --- scroll stack --------------------------------------------------------
   Ported from the ScrollStack component. Once stack.js takes over, the grid
   collapses to one column: each card pins near the top of the viewport and
   the next slides over it. Without JS, or under reduced motion, the class is
   never added and the cards stay a plain responsive grid.
   ---------------------------------------------------------------------- */
.gets.is-stacking{
  display:block;max-width:34rem;margin-inline:auto;
}
.gets.is-stacking .get{
  margin-bottom:5.5rem;
  min-height:11.5rem;
  transform-origin:top center;
  backface-visibility:hidden;
  will-change:transform,filter;
  /* the pinned card must sit above the ones already stacked under it */
  box-shadow:var(--sh-2);
  transition:none;
}
/* the lift on hover would fight the transform the stack is driving */
.gets.is-stacking .get:hover{transform:none;box-shadow:var(--sh-2);border-color:var(--line)}
.gets.is-stacking .get:hover::before{opacity:0}
.stack-end{height:1px;margin-top:45vh}
.get{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.6rem 1.4rem;box-shadow:var(--sh-1);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),
             border-color var(--base) var(--ease);
}
.get:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:transparent}
/* a soft iridescent wash that only appears on hover */
.get::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity var(--base) var(--ease);
  background:radial-gradient(90% 70% at 15% 0%, var(--iris-1), transparent 70%),
             radial-gradient(80% 60% at 90% 100%, var(--iris-2), transparent 70%);
}
.get:hover::before{opacity:.5}
.get > *{position:relative}
.get-k{
  font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:2.75rem;margin-bottom:.6rem;
}
.get h3{font-size:1.0625rem;font-weight:600;margin-bottom:.4rem;letter-spacing:-.015em}
.get p{font-size:.9375rem;color:var(--body);line-height:1.55}


/* --- data panel ---------------------------------------------------------- */
.panel{
  margin-top:2.25rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.5rem 1.35rem;box-shadow:var(--sh-2);
}
.panel-hd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1.15rem;margin-bottom:1.35rem;border-bottom:1px solid var(--line-soft);
}
.panel-hd > span:first-child{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);font-weight:600;
}
.tagline{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.6875rem;color:var(--soft);
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.3rem .65rem;
}
.bars{display:flex;flex-direction:column;gap:1.1rem}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:.45rem .75rem;align-items:center}
.bar-lbl{font-size:.9375rem;color:var(--ink);font-weight:500}
.bar-val{font-size:.8125rem;color:var(--soft);font-variant-numeric:tabular-nums}
.bar-trk{grid-column:1/-1;height:8px;background:var(--bg);border-radius:var(--r-pill);overflow:hidden}
.bar-fill{
  height:100%;border-radius:var(--r-pill);background:var(--grad);
  width:0;transition:width 1.3s var(--ease);
}
.panel.in .bar-fill{width:var(--w)}
.bar-drop .bar-fill{background:var(--soft)}
.panel-ft{
  margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--line-soft);
  font-size:.8125rem;color:var(--soft);
}

/* --- work ---------------------------------------------------------------- */
.work-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:.85rem;
  margin-top:var(--stack);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem var(--gut) 1.25rem;margin-inline:calc(var(--gut) * -1);
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.work-scroll::-webkit-scrollbar{display:none}
.work-card{
  scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease);
}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
/* Without a URL the card is not a link, so it must not behave like one:
   no lift, no zoom, no pointer. */
.work-card-static,.work-card-static:hover{transform:none;cursor:default}
.work-card-static:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-1)}
.work-card-static:hover img,.work-card-static:hover video{transform:none}
.work-shot{
  position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--card-shot,#101114);
}
.work-card img,
.work-shot video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 640ms var(--ease);
}
.work-shot video{opacity:1;transition:transform 640ms var(--ease)}
.work-card:hover img,.work-card:hover video{transform:scale(1.03)}

/* marks a card whose media is a moving recording rather than a still */
.work-live{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(13,14,18,.62);border-radius:var(--r-pill);
  padding:.3rem .6rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.work-live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#4ADE80;
  animation:blip 2s ease-in-out infinite;
}
@keyframes blip{50%{opacity:.35}}
.work-meta{
  padding:1.05rem 1.15rem;display:flex;align-items:center;
  justify-content:space-between;gap:.75rem;
}
.work-meta h3{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.work-meta span{font-size:.75rem;color:var(--soft);display:block;margin-top:.15rem}
.work-go{font-size:.8125rem;color:var(--accent-text);white-space:nowrap;font-weight:600}
/* A card the exact width of the screen hides the fact that there are more.
   The next one now peeks, and the dots say how many there are. */
.work-nav{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.35rem}
.work-dots{display:flex;gap:0}
/* The dot is 8px, but the button around it is a full 44px tall so it can
   actually be tapped. The visual is drawn by the pseudo-element. */
.work-dot{
  width:30px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.work-dot::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background var(--fast) var(--ease),width var(--fast) var(--ease);
}
.work-dot.on::before{background:var(--accent);width:22px;border-radius:var(--r-pill)}
.scroll-hint{margin:0;font-size:.75rem;color:var(--body);letter-spacing:.04em}

/* --- steps --------------------------------------------------------------- */
/* --- how it works: pinned index cards -------------------------------------
   Ported from the supplied React/Tailwind component. Same idea - cards pinned
   to a ruled board, scattered left and right, joined by a dashed thread that
   marches - rebuilt on the page's own tokens. The handwriting face in the
   original becomes Instrument Serif italic, which is the accent voice this
   site already speaks in, and the three tints are the ones the capability
   chips further down already use.
   ------------------------------------------------------------------------- */
.hiw{position:relative;margin-top:var(--stack);isolation:isolate}

/* ruled paper, faded out at both edges */
.hiw-rules{
  position:absolute;inset:-1rem 0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,14,18,.06) 1px,transparent 1px);
  background-size:100% 32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}

.hiw-board{
  position:relative;z-index:1;list-style:none;margin:0 auto;padding:0;
  max-width:1000px;display:flex;flex-direction:column;gap:1.5rem;
}

/* --- the card ------------------------------------------------------------- */
.hiw-card{
  --c-bg:#FFEAE7; --c-ink:#C4301B; --c-line:rgba(196,48,27,.16);
  position:relative;width:100%;
  transition:transform var(--base) var(--ease);
}
.hiw-b{--c-bg:#EDE9FE; --c-ink:#4F3BE8; --c-line:rgba(79,59,232,.16)}
.hiw-c{--c-bg:#E3F7EC; --c-ink:#0E7C4A; --c-line:rgba(14,124,74,.16)}

.hiw-paper{
  background:var(--surface);border:1px solid var(--line);
  border-radius:25px;padding:.5rem;box-shadow:var(--sh-2);
}
.hiw-pin{
  display:block;width:30px;height:30px;margin:.35rem auto 1.1rem;
  color:var(--c-ink);
}
.hiw-panel{
  background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:15px;padding:1.1rem 1.15rem 1.25rem;
}
.hiw-num{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:2.25rem;line-height:1;color:var(--c-ink);margin-bottom:.85rem;
}
.hiw-panel h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:1.375rem;line-height:1.1;color:var(--ink);margin:0 0 .5rem;
}
.hiw-panel p{font-size:.875rem;line-height:1.45;color:var(--body);margin:0}

/* the thread only reads once the cards are scattered */
.hiw-thread{display:none}

@media (min-width:1000px){
  .hiw-board{display:block;height:900px}
  .hiw-card{position:absolute;width:280px}
  .hiw-a{top:0;left:150px;transform:rotate(8deg)}
  .hiw-b{top:120px;left:570px;transform:rotate(-8deg)}
  .hiw-c{top:450px;left:150px;transform:rotate(8deg)}
  .hiw-d{top:570px;left:620px;transform:rotate(-8deg)}
  .hiw-card:hover{z-index:3}
  .hiw-a:hover,.hiw-c:hover{transform:rotate(8deg) scale(1.05)}
  .hiw-b:hover,.hiw-d:hover{transform:rotate(-8deg) scale(1.05)}

  .hiw-thread{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;color:#BFC4CF;
  }
}
.hiw-thread path{animation:hiwThread 3s linear infinite}
@keyframes hiwThread{from{stroke-dashoffset:0}to{stroke-dashoffset:-140}}

/* a little character below the breakpoint, not enough to overflow */
@media (max-width:999px){
  .hiw-a,.hiw-c{transform:rotate(1.2deg)}
  .hiw-b,.hiw-d{transform:rotate(-1.2deg)}
}

@media (prefers-reduced-motion:reduce){
  .hiw-thread path{animation:none}
  .hiw-card,.hiw-card:hover{transition:none}
}

/* --- offer --------------------------------------------------------------- */
/* --- the offer card --------------------------------------------------------
   Built to the supplied pricing-card reference: a badge straddling the top
   border, plan name over a huge price with a small suffix, a rule, square
   bullets, and one full-width button closing the card.

   The reference is mustard and black. Here the fill is the page's own warm
   iris pair and the border is ink at 2px - thick enough to give the card the
   same "this is the thing you buy" weight, without importing a second palette
   into a page that only ever spends one accent.
   ------------------------------------------------------------------------- */
.offer{
  position:relative;margin-top:calc(var(--stack) + 17px);   /* the badge overhangs the card top by 17px */
  border:2px solid var(--ink);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--iris-4) 0%,var(--iris-2) 46%,#FFF6EF 100%);
  padding:2.75rem 1.5rem 1.75rem;box-shadow:var(--sh-3);
  max-width:34rem;margin-inline:auto;
}

/* the badge sits on the border, not inside it */
.offer-badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  margin:0;white-space:nowrap;
  background:var(--accent);color:#fff;
  border:2px solid var(--ink);border-radius:var(--r-pill);
  padding:.5rem 1.15rem;
  font-size:.6875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}

.offer-plan{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.25rem,5vw,1.6rem);letter-spacing:.01em;line-height:1;
  color:var(--ink);margin:0 0 .5rem;
}

.price{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0}
.price b{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.75rem,12vw,3.75rem);letter-spacing:-.045em;line-height:1;
  color:var(--ink);
}
.price-suf{
  font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);
}
.price-sub{margin:.7rem 0 0;font-size:.9375rem;line-height:1.45;color:var(--body)}

.offer-rule{
  border:0;border-top:2px solid var(--ink);opacity:.16;
  margin:1.5rem 0 1.4rem;
}

/* square bullets, as in the reference */
.incl{margin:0;padding:0;list-style:none;display:grid;gap:.95rem}
.incl li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  font-size:.9375rem;line-height:1.4;font-weight:600;color:var(--ink);
}
.incl li::before{
  content:"";width:11px;height:11px;margin-top:.36rem;
  background:var(--accent);border-radius:2px;
}

.offer-cta{margin-top:1.75rem;min-height:56px;font-size:1rem}

.guar{
  margin:1.15rem 0 0;text-align:center;
  font-size:.875rem;line-height:1.45;color:var(--body);
}
.guar b{color:var(--ink);font-weight:800}

@media (min-width:600px){
  .offer{padding:3.25rem 2.5rem 2.25rem}
  .incl li{font-size:1rem}
}

/* --- booking + faq ------------------------------------------------------- */
.cal-slot{
  margin-top:var(--stack);min-height:640px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  display:grid;place-items:center;box-shadow:var(--sh-2);
}
.cal-slot .calendly-inline-widget{width:100%;min-height:640px}
.cal-ph{padding:2rem 1.25rem;text-align:center;color:var(--soft);font-size:.875rem}
/* the two paths are a choice, not a primary and a consolation. the rule on
   either side of "or" gives the WhatsApp button its own weight instead of
   letting it read as a footnote to the calendar. */
.or-split{
  display:flex;align-items:center;gap:1rem;
  margin:1.5rem 0 1.15rem;
  color:var(--soft);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
}
.or-split::before,.or-split::after{content:"";flex:1;height:1px;background:var(--line)}
.wa-ico{width:20px;height:20px;flex:none}
.alt-note{margin-top:.7rem;text-align:center;font-size:.875rem;color:var(--soft)}
.wa-num{margin-top:.45rem;text-align:center;font-size:.875rem;color:var(--soft)}
.cal-alt{margin-top:1.25rem;text-align:center;font-size:.9375rem}
.cal-alt a{color:var(--soft);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cal-alt a:hover{color:var(--ink)}
.cal-alt a[aria-busy="true"]{opacity:.55;pointer-events:none}
.wa-copy{appearance:none;border:0;background:none;padding:.1rem .15rem;font:inherit;font-weight:600;
  color:var(--ink);cursor:pointer;border-bottom:1.5px dashed currentColor;border-radius:2px}
.wa-copy:hover{color:var(--accent,#e03c0a)}

.faq{margin-top:var(--stack);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 2rem 1.35rem 0;position:relative;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--base) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--accent)}
.faq p{padding-bottom:1.35rem;color:var(--body);font-size:.9375rem;max-width:60ch}



/* --- footer -------------------------------------------------------------- */


/* --- consent bar ----------------------------------------------------------
   Rebuilt after the server logs showed the pixel was seeing roughly a quarter
   of real visitors: most people never touched either button, so nothing ever
   fired for them.

   The old version was a tall card with three lines of explanation. On a phone
   it covered a third of the screen, which teaches people to scroll past it
   rather than answer it. This is a single slim row - one short sentence, two
   real buttons, about half the height. Both choices stay equally available
   and equally tappable; only the reading time changed.
   ------------------------------------------------------------------------- */
/* --- sticky contact dock, phones only ---------------------------------- */
.dock{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));
  z-index:70;display:flex;gap:.5rem;padding:.5rem;border-radius:18px;
  background:rgba(18,18,22,.86);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
  transform:translateY(calc(100% + 1.5rem));opacity:0;
  transition:transform .4s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity .3s}
.dock.is-up{transform:none;opacity:1}
.dock[hidden]{display:none}
.dock a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  border-radius:13px;font-weight:700;font-size:.9375rem;line-height:1}
.dock-wa{flex:1;background:#25D366;color:#07140B}
.dock-wa svg{width:19px;height:19px;flex:none}
.dock-wa:active{transform:scale(.98)}
.dock-book{flex:0 0 auto;padding:0 1rem;color:#fff;border:1px solid rgba(255,255,255,.26)}
.dock-book:active{transform:scale(.98)}
@media (min-width:760px){ .dock{display:none} }
@media (prefers-reduced-motion:reduce){ .dock{transition:none} }

.consent{
  position:fixed;left:var(--gut);right:var(--gut);
  bottom:calc(.75rem + env(safe-area-inset-bottom));
  z-index:80;max-width:640px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .7rem .7rem 1.05rem;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:.9rem;
  transform:translateY(140%);transition:transform 360ms var(--ease);
}
.consent.show{transform:translateY(0)}
.consent p{flex:1 1 auto;margin:0;font-size:.8125rem;color:var(--body);line-height:1.4}
.consent p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.consent-btns{display:flex;gap:.5rem;flex:none}
.consent .btn{min-height:40px;padding:.5rem 1.05rem;font-size:.8125rem}

/* narrow phones: the sentence gets its own line, the buttons share the next */
@media (max-width:520px){
  .consent{display:block;padding:.9rem 1rem}
  .consent-btns{margin-top:.8rem}
  .consent .btn{flex:1;min-height:44px}
}

/* --- cookie preferences sheet ---------------------------------------------
   Opened from Customise on the bar. Same three groups as a standard consent
   manager - essential locked on, analytics, marketing - but drawn in this
   site's own tokens rather than the dark chrome those tools ship with, so it
   does not look like a third-party widget dropped on the page.

   Both optional groups start off. The DPDP Act, like the GDPR, expects consent
   to be an affirmative act, and a pre-ticked box is not one. Saving without
   touching them is therefore a refusal, not a silent yes.
   ------------------------------------------------------------------------- */
/* The hidden attribute must win. Both of these set display in a class rule,
   and an author class rule beats the browser default for [hidden] - so
   without this the sheet stays laid out over the whole viewport at z-index
   90, invisible but swallowing every click on the page. */
.consent[hidden],.cprefs[hidden]{display:none!important}

.cprefs{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1rem}
.cprefs-back{
  position:absolute;inset:0;background:rgba(13,14,18,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 240ms var(--ease);
}
.cprefs.show .cprefs-back{opacity:1}

.cprefs-panel{
  position:relative;width:100%;max-width:520px;
  max-height:calc(100svh - 2rem);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:1.6rem 1.4rem 1.4rem;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease);
}
.cprefs.show .cprefs-panel{opacity:1;transform:none}

.cprefs-x{
  position:absolute;top:.85rem;right:.85rem;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--soft);cursor:pointer;border-radius:50%;
}
.cprefs-x svg{width:18px;height:18px}
.cprefs-x:hover{color:var(--ink);background:var(--wash-2,rgba(13,14,18,.05))}

.cprefs-panel h2{
  margin:0;font-size:1.375rem;letter-spacing:-.02em;line-height:1.15;padding-right:2rem;
}
.cprefs-sub{margin:.4rem 0 1.35rem;font-size:.875rem;color:var(--soft)}

.cgrp{
  border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;margin-bottom:.7rem;
}
.cgrp-top{display:flex;align-items:center;gap:.6rem}
.cgrp-ico{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;color:var(--accent-text);
  background:var(--accent-soft,rgba(193,52,9,.08));
}
.cgrp-ico svg{width:17px;height:17px}
.cgrp-name{flex:1;font-weight:600;font-size:.9375rem;letter-spacing:-.01em;cursor:pointer}
.cgrp-req{
  flex:none;font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;
}
.cgrp > p{margin:.6rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--body)}

/* the switch */
.tgl{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:44px;height:26px;border-radius:999px;background:var(--line);
  position:relative;cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.tgl::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,14,18,.35);
  transition:transform var(--fast) var(--ease);
}
.tgl:checked{background:var(--ink)}
.tgl:checked::after{transform:translateX(18px)}
.tgl:disabled{cursor:not-allowed;opacity:.5}
.tgl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.cprefs-btns{display:flex;gap:.6rem;margin-top:1.2rem}
.cprefs-btns .btn{flex:1;min-height:46px;font-size:.875rem}

@media (prefers-reduced-motion:reduce){
  .cprefs-back,.cprefs-panel{transition:none}
  .cprefs-panel{transform:none}
}

/* --- reveal on scroll ---------------------------------------------------- */
.js .rv{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
.js .rv.in{opacity:1;transform:none}
/* stagger the children of a revealed group */
.js .rv-g > *{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
.js .rv-g.in > *{opacity:1;transform:none}
.js .rv-g.in > *:nth-child(1){transition-delay:0ms}
.js .rv-g.in > *:nth-child(2){transition-delay:70ms}
.js .rv-g.in > *:nth-child(3){transition-delay:140ms}
.js .rv-g.in > *:nth-child(4){transition-delay:210ms}
.js .rv-g.in > *:nth-child(5){transition-delay:280ms}
.js .rv-g.in > *:nth-child(6){transition-delay:350ms}

/* --- hero entrance ------------------------------------------------------- */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln > span{display:block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
.ln:nth-child(1) > span{animation-delay:.06s}
.ln:nth-child(2) > span{animation-delay:.17s}
.ln:nth-child(3) > span{animation-delay:.28s}
@keyframes rise{to{transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .8s var(--ease) .46s forwards}
.fade-up.d2{animation-delay:.58s}
.fade-up.d3{animation-delay:.7s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* --- breakpoints --------------------------------------------------------- */
@media (min-width:700px){
  /* copy sits left on wider screens, so the veil clears off the character */
  .hero-scrim{
    background:
      linear-gradient(90deg,  rgba(74,0,34,.56) 0%,  rgba(74,0,34,.44) 40%,
                              rgba(74,0,34,.12) 68%, rgba(74,0,34,0)   84%),
      linear-gradient(180deg, rgba(74,0,34,.10) 0%,  rgba(74,0,34,0)   38%,
                              rgba(74,0,34,.16) 72%, rgba(74,0,34,.46) 100%);
  }
  .hero-bg video{object-position:74% center}
}
@media (min-width:600px){
  .hero-cta{flex-direction:row}
  .hero-cta .btn{flex:1}
  .dials{grid-template-columns:repeat(4,1fr)}
  .gets:not(.is-stacking){grid-template-columns:repeat(2,1fr)}
  .quotes:not(.is-stacking){grid-template-columns:repeat(2,1fr)}
  .work-scroll{
    grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;scroll-snap-type:none;
    padding:.5rem 0 0;margin-inline:0;
  }
  .about{grid-template-columns:auto 1fr;align-items:center}
  .verify{flex-direction:row;align-items:center;justify-content:space-between}
  .verify .btn{flex:none}
  .panel{padding:2rem 1.75rem}
}
@media (min-width:960px){
  .gets:not(.is-stacking){grid-template-columns:repeat(3,1fr)}
  .get-wide{grid-column:span 2}
  .work-scroll{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
  .panel{padding:2rem}
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .marquee-track{animation:none}
  .ln > span{transform:none}
  .fade-up{opacity:1;transform:none}
  .js .rv,.js .rv-g > *{opacity:1;transform:none}
  .dial .val{stroke-dashoffset:var(--target)}
  .bar-fill{width:var(--w)}
}

/* --- section washes ------------------------------------------------------ */
.sec{isolation:isolate}
.wash{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.wash::before,.wash::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);
}
.wash::before{
  width:min(78vw,560px);aspect-ratio:1;left:-22%;top:-14%;
  background:radial-gradient(circle,var(--iris-2) 0%,transparent 68%);opacity:.55;
}
.wash::after{
  width:min(66vw,460px);aspect-ratio:1;right:-18%;bottom:-10%;
  background:radial-gradient(circle,var(--iris-1) 0%,transparent 68%);opacity:.5;
}
.wash-b::before{background:radial-gradient(circle,var(--iris-3) 0%,transparent 68%);left:auto;right:-20%}
.wash-b::after{background:radial-gradient(circle,var(--iris-4) 0%,transparent 68%);right:auto;left:-16%}

/* --- shared page shell for thanks / 404 ---------------------------------- */
.shell{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  position:relative;overflow:hidden;padding-block:4rem;
}
.shell .wrap{position:relative;z-index:2;max-width:34rem}
.shell .lede,.shell .hero-cta{margin-inline:auto}
.shell .display{font-size:clamp(2.6rem,11vw,4.5rem)}

/* --- long-form doc page -------------------------------------------------- */
.doc{max-width:44rem;padding-block:clamp(4rem,12vw,6rem) 5rem;position:relative;z-index:2}
.doc h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:1.5rem;margin-top:2.75rem;margin-bottom:.75rem;
}
.doc p,.doc li{color:var(--body);font-size:.9375rem;line-height:1.7}
.doc p + p{margin-top:1rem}
.doc ul{margin-top:1rem;display:grid;gap:.7rem}
.doc li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.doc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.6rem}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--accent-text);font-weight:500;border-bottom:1px solid var(--accent-line)}
.doc .updated{font-size:.8125rem;color:var(--soft);margin-top:1.25rem}
.doc .back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:1.5rem;font-size:.875rem;color:var(--soft)}
.doc .back:hover{color:var(--ink)}

/* --- thanks page next-steps card ----------------------------------------- */
.next{
  margin-top:2.5rem;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;
  box-shadow:var(--sh-2);
}
.next h2{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:1.15rem;font-weight:600}
.next li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:.9375rem;color:var(--body);align-items:start}
.next li + li{margin-top:.85rem}
.next b{color:var(--ink);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.55rem;flex:none}

/* the carousel only exists on phones; from tablet up it is a plain grid */
@media (min-width:600px){ .work-nav{display:none} }

/* --- ambient depth -------------------------------------------------------
   A fixed wash sitting behind every section, toned to the hero. Because it
   does not scroll, the page reads as one lit room rather than a stack of flat
   panels - which is what makes the surfaces above it feel raised.
   ---------------------------------------------------------------------- */
/* The page backdrop. One fixed layer behind everything at z-index 0, so it
   shows through the middle of the page only: the hero and the footer both
   paint their own opaque backgrounds at z-index 2 and cover it completely.

   The artwork is used exactly as supplied - resized only, no veil, no crop,
   no tonal change. Note the deep red corners put body copy over them at about
   3.0:1 on a phone, under the 4.5 minimum; that is a deliberate call. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../img/backdrop.webp") center center / cover no-repeat;
}

/* Surfaces stop being flat white: a whisper of gradient plus a lit top edge
   gives each card a top and a face, which is most of what reads as 3D. */
.get,.quote,.dial,.work-card,.panel,.about,.verify,.cal-slot,.next{
  background-image:linear-gradient(176deg,#FFFFFF 0%,#FFFCFD 46%,#FDF7FA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-1);
}
.dial:hover,.quote:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-2)}
.get:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-3)}
.work-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-3)}
.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sh-2)}

/* the marquee is a band across the page, so it gets an edge instead of a face */
.marquee{
  background-image:linear-gradient(180deg,#FFFFFF,#FDF8FA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}


/* --- flow field ----------------------------------------------------------
   ONE field for the whole page, not a copy per section. A per-section layer
   restarts its pattern at every boundary, which is what reads as broken; this
   is a single fixed plane every section shares, so the texture is continuous
   top to bottom and cannot seam.

   It is also a SINGLE family of arcs from one far-off centre. Concentric
   curves from one focus never cross, which is what keeps it quiet - crossing
   fans produced a moire that pulled the eye away from the content.
   ---------------------------------------------------------------------- */
/* the hero paints its own world, so the field stays behind it */
.hero{z-index:2}

/* kept so a section can carry extra texture locally if ever needed */
.lines{display:none}

@media (max-width:600px){
  /* a phone sees a narrow slice, so the field is scaled to keep the arc
     spacing similar rather than blowing up into a few huge curves */
}

/* ============================================================================
   FOOTER  —  ported from the supplied React / GSAP / Tailwind component.
   This project is static HTML + vanilla JS, so the design is rebuilt with CSS
   animations and a small scroll handler rather than GSAP and React. Same
   visual language: aurora, masked grid, giant background word, diagonal
   marquee, glass pills, magnetic hover, heartbeat badge, back-to-top.
   ========================================================================= */
.foot{
  --f-bg:#230512;
  --f-ink:#FFFFFF;
  --f-muted:rgba(255,255,255,.74);
  --f-line:rgba(255,255,255,.12);
  --f-pill-1:rgba(255,255,255,.07);
  --f-pill-2:rgba(255,255,255,.02);
  --f-pill-line:rgba(255,255,255,.14);

  /* Above the gradual blur (z 70), below the consent bar (z 80). The blur is
     a device for page content softening as it leaves the screen; over the dark
     footer it just made the sign-off text look broken. backdrop-filter only
     affects what paints behind it, so lifting the footer exempts it. */
  position:relative;z-index:75;isolation:isolate;overflow:hidden;
  background:var(--f-bg);color:var(--f-ink);border-top:0;
  padding-block:clamp(3.5rem,9vw,5rem) clamp(3rem,7vw,4rem);
  min-height:min(100svh,760px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2.5rem,7vw,4rem);
}

/* breathing aurora */
.foot-aurora{
  position:absolute;left:50%;top:48%;width:80vw;height:56vh;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle at 50% 50%,
    rgba(224,60,10,.32) 0%, rgba(155,255,0,.10) 42%, transparent 70%);
  pointer-events:none;z-index:0;
  animation:footBreathe 8s ease-in-out infinite alternate;
}
@keyframes footBreathe{
  from{transform:translate(-50%,-50%) scale(1);opacity:.6}
  to  {transform:translate(-50%,-50%) scale(1.1);opacity:1}
}

/* masked grid */
.foot-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}

/* the giant word. --p is a 0..1 scroll progress set by main.js, standing in
   for the GSAP scrub in the original */
.foot-giant{
  position:absolute;left:50%;bottom:-4vh;z-index:0;
  transform:translateX(-50%) translateY(calc((1 - var(--p,0)) * 10vh))
            scale(calc(.82 + .18 * var(--p,0)));
  opacity:var(--p,0);
  font-family:var(--display);font-weight:900;letter-spacing:-.05em;line-height:.75;
  font-size:19.5vw;white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
  -webkit-background-clip:text;background-clip:text;
}

/* diagonal marquee band */
.foot-marquee{
  position:relative;z-index:1;overflow:hidden;
  border-block:1px solid var(--f-line);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding-block:.85rem;
  transform:rotate(-2deg) scale(1.06);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.foot-marquee-track{display:flex;width:max-content;animation:footMarquee 40s linear infinite}
.foot-marquee:hover .foot-marquee-track{animation-play-state:paused}
@keyframes footMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.foot-marquee span{
  display:inline-flex;align-items:center;gap:1.6rem;padding-inline:.8rem;
  font-size:.75rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--f-muted);white-space:nowrap;
}
.foot-marquee span::after{content:"\2726";color:rgba(155,255,0,.7);font-size:.7rem}

/* centre block */
.foot-mid{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding-inline:var(--gut);width:100%;max-width:64rem;margin-inline:auto;
  opacity:var(--p2,0);transform:translateY(calc((1 - var(--p2,0)) * 46px));
}
.foot-title{
  font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(2.5rem,8.5vw,5.25rem);text-align:center;text-transform:uppercase;
  margin-bottom:clamp(1.75rem,4.5vw,2.75rem);
  background:linear-gradient(180deg,#FFFFFF 0%, rgba(255,255,255,.5) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.16));
}
.foot-title em{
  font-style:normal;
  background:linear-gradient(100deg,#9BFF00,#C8FF4A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* glass pills */
.foot-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;width:100%}
.foot-pills + .foot-pills{margin-top:1rem}
.pill{
  display:inline-flex;align-items:center;gap:.7rem;
  border-radius:var(--r-pill);color:var(--f-ink);
  font-weight:700;letter-spacing:-.01em;text-decoration:none;
  background:linear-gradient(145deg,var(--f-pill-1) 0%,var(--f-pill-2) 100%);
  border:1px solid var(--f-pill-line);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.55),
             inset 0 1px 1px rgba(255,255,255,.12),
             inset 0 -1px 2px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  will-change:transform;
}
.pill:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 100%);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.22);
}
.pill-lg{padding:1.05rem 2.2rem;font-size:1rem;min-height:56px}
.pill-sm{padding:.75rem 1.4rem;font-size:.8125rem;font-weight:600;color:var(--f-muted);min-height:44px}
.pill-sm:hover{color:var(--f-ink)}
.pill-ico{width:48px;height:48px;padding:0;justify-content:center}
.pill svg{width:1.15rem;height:1.15rem;flex:none}

/* bottom bar */
.foot-btm{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}

.foot-badge{
  order:1;display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:var(--r-pill);min-height:44px;
  background:linear-gradient(145deg,var(--f-pill-1),var(--f-pill-2));
  border:1px solid var(--f-pill-line);
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f-muted);
}
.foot-brand{
  color:var(--f-ink);font-weight:900;letter-spacing:.02em;text-transform:none;
  font-size:.8125rem;text-decoration:none;position:relative;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.foot-brand:hover{color:#9BFF00;border-color:#9BFF00}
/* The credit text is only ~22px tall. This expands the hit area to 44px
   without changing the badge's size or the underline's position. */
.foot-brand::before{content:"";position:absolute;inset:-11px -8px;border-radius:8px}
.foot-heart{
  color:#FF7A90;font-size:.95rem;display:inline-block;
  animation:footBeat 2s cubic-bezier(.25,1,.5,1) infinite;
}
@keyframes footBeat{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,122,144,.5))}
  15%,45%{transform:scale(1.2);filter:drop-shadow(0 0 10px rgba(255,122,144,.85))}
  30%{transform:scale(1)}
}


.foot a:focus-visible,.foot button:focus-visible{outline-color:#9BFF00}

@media (min-width:760px){
  .foot-btm{flex-direction:row;justify-content:center}
  .foot-badge{order:2}
}
@media (prefers-reduced-motion:reduce){
  .foot-aurora,.foot-marquee-track,.foot-heart{animation:none}
  .foot-giant{opacity:.9;transform:translateX(-50%)}
  .foot-mid{opacity:1;transform:none}
}

/* ============================================================================
   WHO YOU ARE HIRING  —  rebuilt to the supplied design.
   Sentence-case headline with a warm gradient, a manifesto column split by a
   rule, three capability chips, tinted quote cards with a floating mark, and
   a monogram identity card.
   ========================================================================= */
.who-head{display:grid;gap:2rem;margin-bottom:clamp(2.25rem,6vw,3.25rem)}

.who-title{
  font-family:var(--display);font-weight:900;
  text-transform:none;                       /* sentence case, unlike other headings */
  letter-spacing:-.035em;line-height:.95;
  font-size:clamp(2.6rem,7.4vw,4.4rem);
  color:var(--ink);margin:0;
}
.who-title .who-grad{
  background:linear-gradient(95deg,#FF7A1A 0%,#F0402F 46%,#F2447A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.who-aside{display:flex;flex-direction:column;gap:1.5rem}
.who-manifesto{
  font-size:clamp(1rem,2.6vw,1.125rem);line-height:1.5;color:var(--body);
  max-width:34ch;margin:0;
}
.who-manifesto b{color:var(--ink);font-weight:700}

.who-feats{
  display:grid;gap:1.1rem 1.5rem;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.who-feat{display:flex;align-items:center;gap:.7rem}
.who-ico{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;
}
.who-ico svg{width:18px;height:18px}
.who-ico-a{background:#FFEAE7;color:#D6341F}
.who-ico-b{background:#EDE9FE;color:#5B46F5}
.who-ico-c{background:#E3F7EC;color:#0E7C4A}
.who-feat div b{display:block;font-size:.8125rem;font-weight:700;color:var(--ink);line-height:1.25}
.who-feat div span{display:block;font-size:.8125rem;color:var(--body);line-height:1.25}

/* --- quote cards --------------------------------------------------------- */
.quotes{display:grid;gap:1rem;margin-top:0}

/* the same scroll stack as the deliverables grid, two cards instead of six */
/* A pinned card must paint above whatever follows it. .about is not
   positioned, but .about-avatar is, so without this the avatar and name
   punched through the card pinned over them. */
.gets.is-stacking,.quotes.is-stacking{position:relative;z-index:2}
.about{position:relative;z-index:1}
.quotes.is-stacking{display:block;max-width:34rem;margin-inline:auto}
.quotes.is-stacking .quote{
  margin-bottom:5.5rem;
  transform-origin:top center;
  backface-visibility:hidden;
  will-change:transform,filter;
  transition:none;
}
.quotes.is-stacking .quote:hover{transform:none;box-shadow:var(--sh-1)}
.quote{
  position:relative;overflow:visible;
  border-radius:var(--r-lg);padding:1.6rem 1.5rem 1.5rem;
  border:1px solid var(--line);box-shadow:var(--sh-1);
}
/* the two cards carry different tints, exactly as in the design */
.quote:nth-child(odd){
  background:linear-gradient(150deg,#FFF0EE 0%,#FFF9F8 55%,#FFFDFC 100%);
  --q-accent:#C92D18; --q-mark:#F04438;
}
.quote:nth-child(even){
  background:linear-gradient(150deg,#F1EDFF 0%,#F9F7FF 55%,#FDFCFF 100%);
  --q-accent:#5B46F5; --q-mark:#7C6BF5;
}
.quote:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

.quote-mark{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:2.6rem;line-height:.6;color:var(--q-mark);
  margin-bottom:.85rem;user-select:none;
}
.quote p{
  font-size:1rem;line-height:1.55;color:var(--ink);
  text-wrap:pretty;max-width:34ch;margin:0;
}
/* the floating mark that sits off to the right of the text */
.quote-badge{
  position:absolute;right:1.5rem;top:50%;transform:translateY(-58%);
  width:60px;height:60px;border-radius:16px;background:#fff;
  display:none;place-items:center;
  box-shadow:0 8px 20px rgba(74,10,40,.10);
  font-family:var(--serif);font-style:italic;font-size:2rem;line-height:1;
  color:var(--q-mark);user-select:none;pointer-events:none;
}
.quote footer{
  display:flex;align-items:center;gap:.75rem;
  margin-top:1.35rem;padding-top:1.15rem;
  border-top:1px solid rgba(13,14,18,.08);
}
.q-avatar{
  position:relative;width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--q-line,rgba(13,14,18,.10));
  font-family:var(--display);font-weight:800;font-size:.875rem;letter-spacing:.01em;
  color:var(--q-accent);
}
.q-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote footer div b{display:block;font-size:.9375rem;font-weight:700;color:var(--q-accent);line-height:1.3}
/* scoped to the text column: .q-avatar is also a span in this footer */
.quote footer div span{display:block;font-size:.8125rem;color:var(--body);line-height:1.3}

/* --- identity card ------------------------------------------------------- */
.about{
  margin-top:1rem;display:grid;gap:1.25rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--sh-1);
}
.about-id{display:flex;align-items:center;gap:1rem}
.about-avatar{
  position:relative;width:66px;height:66px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,#3A3350 0%,#171426 70%);
  display:grid;place-items:center;overflow:visible;
  font-family:var(--display);font-weight:900;font-size:1.6rem;color:#fff;
}
.about-avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;
}
.about-dot{
  position:absolute;right:2px;bottom:4px;width:14px;height:14px;
  border-radius:50%;background:#12B76A;border:2.5px solid var(--surface);
}
.about-id h3{
  font-family:var(--display);font-weight:900;font-size:1.5rem;
  letter-spacing:-.025em;color:var(--ink);margin:0;
}
.about-lines{display:grid;gap:.6rem}
.about-lines p{font-size:.9375rem;color:var(--body);line-height:1.5;margin:0}
.about-lines p b{color:var(--accent-text);font-weight:700}

@media (min-width:860px){
  .who-head{
    grid-template-columns:1.05fr 1fr;gap:3rem;align-items:start;
  }
  .who-aside{
    border-left:1px solid var(--line);padding-left:2.5rem;padding-top:.5rem;
  }
  .quotes:not(.is-stacking){grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .quote{padding:1.9rem 1.8rem 1.6rem}
  .quote p{max-width:26ch}
  .quote-badge{display:grid}          /* only where there is room beside the text */
  .about{
    grid-template-columns:auto 1px 1fr;gap:2rem;padding:1.75rem 2rem;
  }
  .about-rule{background:var(--line);width:1px;align-self:stretch}
}
@media (max-width:859px){
  .about-rule{display:none}
}


/* ============================================================================
   THE BUYER JOURNEY  —  scroll-driven explainer in section 4.

   Scroll is the only input. .bj-scroll is a tall block; .bj-sticky pins inside
   it; how far you have travelled through the block is the story's playhead.
   Layers drift at different rates as you go, which is where the depth comes
   from - nothing here plays on a timer.

   Styled with the page's own tokens, not the source's: soft shadows instead of
   hard offsets, --line hairlines instead of 2.5px outlines, --iris gradients
   instead of hatching, Inter instead of a mono face. No frame, no border, no
   card - the stage sits directly on the section so it reads as part of it.
   Every coordinate inside .bj-stage is in 1600x900 stage pixels.
   ========================================================================= */
.bj{margin:var(--stack) 0 0;--bj-travel:400vh}
.bj-scroll{position:relative;height:calc(100svh + var(--bj-travel))}
.bj-sticky{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;
}
.bj-stack{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.1rem,3vw,2rem);width:100%;
}

/* --- the stage ----------------------------------------------------------- */
.bj-frame{
  position:relative;width:100%;
  max-width:min(var(--wrap), calc((100svh - 21rem) * 16 / 9));
  aspect-ratio:16/9;overflow:hidden;
  opacity:var(--bj-in,1);
  transform:scale(calc(.965 + .035 * var(--bj-in,1)));
}
.bj-stage{
  position:absolute;left:0;top:0;width:1600px;height:900px;
  transform-origin:0 0;transform:scale(var(--bj-s,1));
  font-family:var(--sans);color:var(--ink);line-height:1.2;
  font-variant-numeric:tabular-nums;
}
/* a soft iridescent bloom behind the mockups, drifting the other way */
.bj-glow{
  position:absolute;left:50%;top:52%;width:74%;height:70%;
  transform:translate(-50%,-50%) translateY(var(--bj-glow-y,0));
  border-radius:50%;filter:blur(70px);pointer-events:none;
  background:radial-gradient(circle at 42% 44%,
    var(--iris-1) 0%, var(--iris-3) 38%, transparent 68%);
  opacity:.55;
}
/* parallax layers */
.bj-mid{position:absolute;inset:0;transform:translateY(var(--bj-mid-y,0))}
#bj-summary{position:absolute;inset:0;opacity:0;z-index:4;transform:translateY(var(--bj-sum-y,0))}

/* --- browser-window mockups ---------------------------------------------- */
/* The mockups fill the stage edge to edge. Their interiors are still authored
   at roughly 810x460, then scaled up by --k, so every font, padding and radius
   inside grows together instead of being restated at a larger size. */
.bj-win{
  position:absolute;left:20px;top:16px;width:1560px;height:868px;--k:1.9;
  background:var(--surface);border:2px solid var(--line);border-radius:38px;
  box-shadow:0 24px 60px -24px rgba(74,10,40,.30);
  overflow:hidden;opacity:0;z-index:2;
}
.bj-inner{
  width:calc(100% / var(--k));height:calc(100% / var(--k));
  transform:scale(var(--k));transform-origin:0 0;
}
.bj-chrome{height:42px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px;padding:0 18px}
.bj-chrome i{width:9px;height:9px;border-radius:50%;background:#DCDFE5}
.bj-body{padding:26px 30px;height:calc(100% - 42px)}
.bj-sk{display:inline-block;background:var(--line);border-radius:4px}
.bj-sk.bj-ink{background:#C3C7D0}
.bj-hatch{
  background:linear-gradient(140deg,var(--iris-2) 0%,var(--iris-1) 45%,var(--iris-3) 100%);
  border-radius:16px;
}
.bj-cta{
  background:var(--grad);color:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.14em;font-weight:700;
  box-shadow:0 8px 18px -6px rgba(224,60,10,.45);
}
.bj-btn2{
  border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--body);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.14em;font-weight:700;
}
.bj-navrow{display:flex;justify-content:space-between;align-items:center}
.bj-logo{display:flex;align-items:center;gap:10px}
.bj-logodot{width:13px;height:13px;background:var(--grad);border-radius:4px}
.bj-navlinks{display:flex;gap:14px;align-items:center}
.bj-mono{font-family:var(--sans)}
.bj-tag{
  position:absolute;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  font-weight:700;letter-spacing:.1em;
}
.bj-strike{color:var(--soft);text-decoration:line-through}
.bj-sw{width:22px;height:22px;border:1px solid var(--line);border-radius:7px;display:inline-block}
.bj-sw-on{background:var(--accent);border-color:transparent;outline:1.5px solid var(--accent-line);outline-offset:2px}
.bj-card{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--surface)}
.bj-plan{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.bj-plan-last{border-bottom:0}
.bj-radio{width:13px;height:13px;border:1.5px solid var(--line);border-radius:50%;display:inline-block}
.bj-radio-on{background:var(--accent);border-color:var(--accent)}
.bj-flabel{font-size:10px;letter-spacing:.18em;margin-bottom:6px;color:var(--soft);font-weight:600}
.bj-field{height:38px;border:1px solid var(--line);border-radius:10px;background:#FBFBFC}
.bj-paid{
  position:absolute;inset:0;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transform:scale(0);opacity:0;
}
.bj-paid .bj-pt{font-size:13px;letter-spacing:.24em;font-weight:700;color:var(--accent-text)}

#bj-dots{position:absolute;inset:0;width:1600px;height:900px;z-index:3;pointer-events:none}

/* --- the running count -----------------------------------------------------
   It sits above the stage rather than on it, so it never covers the mockups
   and it is set in page units - legible at any screen size. Prominence comes
   from the live dot and the isolation, not from size. */
#bj-counter{
  display:flex;align-items:center;gap:.6rem;opacity:0;
  padding:.5rem 1.1rem .5rem .85rem;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transform:translateY(var(--bj-chip-y,0));
}
#bj-counter .bj-live{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px var(--accent-soft);
}
#bj-counter .bj-num{
  font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;
}
#bj-counter .bj-unit{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);
}

/* --- summary funnel -------------------------------------------------------- */
.bj-frow{position:absolute;left:120px;display:flex;align-items:center;gap:20px;height:44px}
.bj-frow .bj-fl{width:150px;font-size:13px;letter-spacing:.16em;font-weight:700;color:var(--soft)}
.bj-frow .bj-fl-win{color:var(--accent-text)}
.bj-frow .bj-barwrap{position:relative;width:980px;height:44px}
.bj-frow .bj-bar{height:44px;width:0;background:linear-gradient(90deg,#3A3D48,#0D0E12);border-radius:10px}
.bj-frow .bj-bar-win{background:var(--grad)}
.bj-frow .bj-cnt{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.03em;opacity:0;
}
.bj-frow .bj-drop{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;color:var(--soft);opacity:0}
#bj-bigstat{position:absolute;left:1150px;top:300px;width:400px;opacity:0}
#bj-bigstat .bj-big{
  font-family:var(--display);font-weight:900;font-size:190px;line-height:1;letter-spacing:-.055em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
#bj-bigstat .bj-ul{height:8px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;border-radius:var(--r-pill);margin-top:6px}
#bj-bigstat .bj-c1{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.025em;margin-top:22px;opacity:0}
#bj-bigstat .bj-c2{font-size:12px;letter-spacing:.14em;margin-top:12px;color:var(--soft);font-weight:600;opacity:0}

/* --- legend: real text, at page scale ------------------------------------- */
.bj-legend{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  text-align:center;padding-inline:var(--gut);width:100%;
}
.bj-step{
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);margin:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.bj-line{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.125rem,3.4vw,1.6rem);line-height:1.3;
  color:var(--ink);margin:0;max-width:30ch;text-wrap:balance;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.bj-legend.is-out .bj-step,
.bj-legend.is-out .bj-line{opacity:0;transform:translateY(8px)}
.bj-rail{
  width:min(320px,70%);height:2px;border-radius:var(--r-pill);
  background:var(--line);overflow:hidden;margin-top:.35rem;
}
.bj-rail span{display:block;height:100%;width:0;background:var(--grad);border-radius:var(--r-pill)}

.bj > .panel-ft{max-width:60ch;margin-inline:auto;text-align:center;color:var(--ink)}

/* --- phones ----------------------------------------------------------------
   The stage is one fixed 16:9 canvas, so on a phone it renders at about a
   fifth scale. The legend below carries the words; only the funnel finale has
   type inside the stage, so only that gets resized.
   ------------------------------------------------------------------------- */
@media (max-width:759px){
  .bj{--bj-travel:320vh}
  .bj-frame{max-width:none;width:auto;align-self:stretch;margin-inline:calc(var(--gut) * -1)}
  #bj-counter .bj-num{font-size:1.5rem}
  .bj-frow{left:80px;height:58px}
  .bj-frow:nth-of-type(1){top:130px !important}
  .bj-frow:nth-of-type(2){top:205px !important}
  .bj-frow:nth-of-type(3){top:280px !important}
  .bj-frow:nth-of-type(4){top:355px !important}
  .bj-frow:nth-of-type(5){top:430px !important}
  .bj-frow .bj-fl{width:300px;font-size:28px;letter-spacing:.12em}
  .bj-frow .bj-barwrap{width:1000px;height:58px}
  .bj-frow .bj-bar{height:58px;border-radius:14px}
  .bj-frow .bj-cnt{font-size:46px}
  .bj-frow .bj-drop{font-size:26px}
  #bj-bigstat{left:80px;top:530px;width:1440px}
  #bj-bigstat .bj-big{font-size:150px}
  #bj-bigstat .bj-ul{width:420px;height:12px}
  #bj-bigstat .bj-c1{font-size:52px;margin-top:24px}
  #bj-bigstat .bj-c2{font-size:26px;letter-spacing:.1em;margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  .bj-mid,#bj-summary,.bj-glow,#bj-counter{transform:none}
  .bj-frame{transform:none;opacity:1}
  .bj-step,.bj-line{transition:none}
}

/* --- gradual blur ----------------------------------------------------------
   Ported from the GradualBlur React component. The technique is entirely CSS:
   stack layers over the same box, give each one a stronger backdrop-filter,
   and mask each to a narrow band of the box. Because the bands overlap, the
   blur ramps smoothly instead of stepping - a single blurred layer would show
   a hard edge where it starts.

   The numbers below are the component's own maths precomputed for its default
   arguments (divCount 5, strength 2, curve bezier, exponential, bottom):
     progress   = smoothstep(i / 5)
     blur       = 2^(progress * 4) * 0.0625 * 2  rem
     mask bands = 20% wide, each offset 20% from the last
   Precomputing means no JS runs on scroll - the compositor does all of it.
   ------------------------------------------------------------------------- */
.gblur{
  position:fixed;left:0;right:0;bottom:0;height:7rem;
  z-index:70;                       /* under the consent bar, which stays sharp */
  pointer-events:none;isolation:isolate;
}
.gblur > div{position:absolute;inset:0}

.gblur > div:nth-child(1){
  -webkit-backdrop-filter:blur(.167rem);backdrop-filter:blur(.167rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 40%,transparent 60%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 40%,transparent 60%);
}
.gblur > div:nth-child(2){
  -webkit-backdrop-filter:blur(.332rem);backdrop-filter:blur(.332rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 20%,#000 40%,#000 60%,transparent 80%);
          mask-image:linear-gradient(to bottom,transparent 20%,#000 40%,#000 60%,transparent 80%);
}
.gblur > div:nth-child(3){
  -webkit-backdrop-filter:blur(.754rem);backdrop-filter:blur(.754rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 40%,#000 60%,#000 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 40%,#000 60%,#000 80%,transparent 100%);
}
.gblur > div:nth-child(4){
  -webkit-backdrop-filter:blur(1.499rem);backdrop-filter:blur(1.499rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 60%,#000 80%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 60%,#000 80%,#000 100%);
}
.gblur > div:nth-child(5){
  -webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 80%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 80%,#000 100%);
}

/* The component paints a dark tint where backdrop-filter is unsupported. On a
   pale page that reads as a bug, so the effect simply does not render. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gblur{display:none}
}

/* --- depth carousel --------------------------------------------------------
   Ported from the DepthCarousel component. The 3D rail, the tint that shades
   receding cards and the depth blur are kept as-is; the chrome is not. The
   original is built for a dark page - white-on-glass arrows, a dark dot pill -
   which would be the only dark UI on this site, so the controls are rebuilt
   from the page's own surfaces and the dots match the work carousel's.
   ------------------------------------------------------------------------- */
.dc{
  position:relative;height:clamp(270px,80vw,430px);
  width:auto;margin:var(--stack) calc(var(--gut) * -1) 0;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;perspective-origin:50% 50%;
  touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.dc:active{cursor:grabbing}
.dc:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r)}

/* the stack only fans one way, so nudge it back to sit optically centred */
.dc-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:translateX(var(--dc-shift,0px))}

.dc-card{
  position:absolute;top:50%;left:50%;
  width:340px;height:280px;border-radius:var(--r);
  transform-origin:center center;transform:translate(-50%,-50%);
  overflow:hidden;background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(74,10,40,.30), 0 8px 20px -12px rgba(74,10,40,.22);
  will-change:transform,opacity,filter;cursor:pointer;
}
.dc-card img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;pointer-events:none;-webkit-user-drag:none;
}
/* multiplied over the card so cards further back sit in shade */
.dc-tint{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:#2A0E1C;mix-blend-mode:multiply;
}

/* --- carousel controls (shared by both carousels) ------------------------------------------------------------
   The original floats the arrows over the artwork at the left and right
   edges. At phone width they sit in the empty margin either side of the front
   card and read as two stray buttons, so they join the dots in one row under
   the rail and the artwork gets that space back. */
.dc-nav{
  position:absolute;left:0;right:0;bottom:-4px;z-index:3000;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
/* Quiet by default: just a chevron, no chrome. The button surface grows in
   underneath only on hover, on keyboard focus, or on touch - so the control
   is invisible until it is wanted, and unmistakable the moment it is. The
   44px hit area never changes size, only what is drawn inside it. */
.nav-arrow{
  position:relative;width:44px;height:44px;padding:0;flex:none;
  display:grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--soft);
  border-radius:var(--r-pill);-webkit-tap-highlight-color:transparent;
  transition:color var(--fast) var(--ease);
}
.nav-arrow::before{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  opacity:0;transform:scale(.55);
  transition:opacity var(--fast) var(--ease),transform var(--base) var(--spring);
}
.nav-arrow svg{
  position:relative;width:17px;height:17px;
  transition:transform var(--base) var(--spring);
}
.nav-arrow:hover,.nav-arrow:focus-visible,.nav-arrow:active{color:var(--ink);outline:none}
.nav-arrow:hover::before,.nav-arrow:focus-visible::before,.nav-arrow:active::before{
  opacity:1;transform:scale(1);
}
.nav-arrow:hover svg,.nav-arrow:focus-visible svg{transform:scale(1.12)}
.nav-arrow:active svg{transform:scale(.96)}

.dc-dots{display:flex;gap:0}
.dc-dot{
  width:22px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.dc-dot::before{
  content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--line);
  transition:background var(--fast) var(--ease),width var(--fast) var(--ease);
}
.dc-dot.is-active::before{width:20px;background:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .dc-card{will-change:auto}
  .nav-arrow,.dc-dot::before{transition:none}
}

/* the carousel is a visual band, so it needs less air than a copy section */
.sec-tight{padding-block:clamp(3rem,7vw,4.5rem)}
/* Cards fanning off to the right count towards scrollable overflow, which
   would widen the whole page. Clipping at the section instead of at .dc lets
   the fan still bleed past the gutter to the screen edge. */
[data-section="showcase"]{overflow:hidden}

/* --- agentic browsing claim ------------------------------------------------
   Deliberately not a fifth dial: the four dials are Lighthouse results, and
   dropping a non-Lighthouse claim among them would imply Google measures it.
   ------------------------------------------------------------------------- */
.agentic{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-top:1rem;padding:1.1rem 1.25rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);
  font-size:.9375rem;line-height:1.5;color:var(--body);
}
.agentic b{color:var(--ink);font-weight:700}
.agentic-tick{
  flex:none;width:22px;height:22px;margin-top:.1rem;
  display:grid;place-items:center;border-radius:50%;
  background:var(--accent-soft);color:var(--score-good);
}
.agentic-tick svg{width:14px;height:14px}

/* --- anchor price ----------------------------------------------------------
   The struck figure sits above the real one, small and muted. Anchoring works
   by being read first and then dismissed - if it competes with the price you
   actually charge, the eye lands on the wrong number.
   ------------------------------------------------------------------------- */
.price-was{
  display:flex;align-items:baseline;gap:.5rem;margin:0 0 .3rem;
  font-size:.9375rem;line-height:1;
}
.price-was-label{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);
}
.price-was s{
  font-family:var(--display);font-weight:800;font-size:1.375rem;
  letter-spacing:-.02em;color:var(--soft);
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--accent);
}
/* the saving only lands if the reason for it is right there */
.price-why{
  margin:.65rem 0 0;font-size:.875rem;line-height:1.4;font-weight:700;color:var(--accent-text);
}

/* --- liquid metal buttons --------------------------------------------------
   The look of the supplied LiquidMetalButton, rebuilt without the shader.

   The original mounts a WebGL canvas per button. This page has 31 interactive
   controls and browsers drop WebGL contexts past roughly 8-16, so that approach
   cannot work here - and a live canvas behind every button would undo the LCP
   and blocking-time work the scorecard depends on.

   What produces the effect instead: a brushed-metal gradient for the body, a
   bevel highlight along the top edge, a specular streak that sweeps across on
   hover, and a press that sinks the surface. Every moving part is transform or
   opacity only, so it composites on the GPU and costs no layout or paint.
   ------------------------------------------------------------------------- */
.btn,.pill{position:relative;overflow:hidden;isolation:isolate}

/* the sweeping specular streak, shared by every button */
.btn::before,.pill::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,.42) 47%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.42) 53%,
    transparent 65%);
  transform:translateX(-130%);
  opacity:0;
  transition:opacity var(--fast) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before,
.pill:hover::before,.pill:focus-visible::before{
  opacity:1;
  animation:metalSweep .85s var(--ease);
}
@keyframes metalSweep{
  from{transform:translateX(-130%)}
  to  {transform:translateX(130%)}
}

/* bevel: a lit top edge and a shaded base, which is what reads as machined */
.btn::after,.pill::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.28);
}

/* --- dark primary: the closest match to the reference --------------------- */
.btn-primary{
  background:linear-gradient(180deg,#22242B 0%,#0D0E12 55%,#000 100%);
  color:#fff;
}
.btn-primary:hover{
  background:linear-gradient(180deg,#2A2D35 0%,#141620 55%,#000 100%);
}
.btn-primary::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -2px 3px rgba(0,0,0,.55);
}

/* --- light ghost: same machining, brushed pale instead of dark ------------ */
.btn-ghost{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFA 55%,#F2F0F1 100%);
}
.btn-ghost::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(13,14,18,.10);
}
/* the streak needs to be darker to register on a light face */
.btn-ghost::before{
  background:linear-gradient(105deg,
    transparent 35%,
    rgba(13,14,18,.06) 47%,
    rgba(13,14,18,.10) 50%,
    rgba(13,14,18,.06) 53%,
    transparent 65%);
}

/* --- hero sits on crimson, so its primary stays white --------------------- */
.hero .btn-primary{
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFBFB 55%,#F3F0F1 100%);
  color:var(--ink);
}
.hero .btn-primary:hover{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 55%,#F7F5F6 100%)}
.hero .btn-primary::before{
  background:linear-gradient(105deg,
    transparent 35%,
    rgba(13,14,18,.05) 47%,
    rgba(13,14,18,.09) 50%,
    rgba(13,14,18,.05) 53%,
    transparent 65%);
}
.hero .btn-primary::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(30,0,12,.14);
}

/* --- press: the surface sinks, the shadow tightens ------------------------ */
.btn:active,.pill:active{transform:translateY(1px) scale(.985)}
.btn:active::after,.pill:active::after{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38),
             inset 0 1px 2px rgba(0,0,0,.28);
}

/* --- the click ripple, positioned by button.js ---------------------------- */
.btn-ripple{
  position:absolute;z-index:-1;pointer-events:none;
  width:20px;height:20px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 70%);
  animation:btnRipple .6s var(--ease) forwards;
}
/* on pale faces the ripple has to be dark to be seen at all */
.btn-ghost .btn-ripple,.hero .btn-primary .btn-ripple{
  background:radial-gradient(circle,rgba(13,14,18,.18) 0%,rgba(13,14,18,0) 70%);
}
@keyframes btnRipple{
  from{transform:translate(-50%,-50%) scale(0);opacity:.9}
  to  {transform:translate(-50%,-50%) scale(4);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .btn::before,.pill::before{display:none}
  .btn-ripple{display:none}
  .btn:active,.pill:active{transform:none}
}