/* ============================================================
   HOLO DIGITAL - V2 "FOUND EVERYWHERE" DESIGN SYSTEM
   Shared component library for building the rest of the site in
   the approved v2 homepage language.

   LOAD ORDER (required):
     <link rel="stylesheet" href="holo-brand.css">   base tokens + nav/footer/buttons
     <link rel="stylesheet" href="v2.css">           this file, sits ON TOP

   This file deliberately does NOT redefine anything that already
   lives in holo-brand.css (tokens, .btn family, .card, .badge,
   .acc, nav, footer, marquee, inputs, focus rings). It only adds
   the v2 layer: section rhythm, hero pattern, floating chips,
   feature/stat/step/review components, the booking panel, and
   the full motion layer.

   Class names are IDENTICAL to the v2 homepage so markup patterns
   copy across directly. The homepage itself stays self-contained
   (its own inline <style>); new pages link this file instead.

   Accessibility ground rules baked in:
   - Nothing is hidden without JS. The .vin choreography only ever
     ANIMATES FROM a hidden state when the class is added; defaults
     are fully visible.
   - Every animation runs only under
     @media (prefers-reduced-motion: no-preference), with explicit
     reduce overrides for the few always-on spinners/pulses.
   ============================================================ */


/* ============================================================
   1. SECTION RHYTHM + BAND VARIANTS
   Sections use .holo-section (padding from holo-brand.css) plus
   one band class. Standard page rhythm:
   white -> grad -> white -> tint -> white -> grad ...
   ============================================================ */
.sec-white  { background:#fff; }
.sec-soft   { background:var(--holo-bg-soft); }
.sec-grad   { background:var(--holo-grad-light); }          /* soft teal gradient band */
.sec-tint   { background:linear-gradient(180deg,#f4fdfe 0%,#e9f9fc 100%); }  /* teal tint band */

/* width + alignment helpers for section heads and copy blocks */
.v2-narrow  { max-width:760px; }
.v2-center  { text-align:center; margin-left:auto; margin-right:auto; }
.v2-eyebrow { letter-spacing:.08em; text-transform:uppercase; }

/* Section head pattern (eyebrow -> h2 -> lead). The homepage sets
   these gaps inline; .sec-head codifies the same rhythm so new
   pages do not need inline styles. Combine with .v2-narrow and/or
   .v2-center for the centered variant:
     <div class="sec-head v2-narrow v2-center">
       <p class="eyebrow v2-eyebrow">Eyebrow</p>
       <h2 class="h-1">Headline with a <span class="t-teal">teal payoff.</span></h2>
       <p class="lead">Supporting sentence.</p>
     </div>                                                       */
.sec-head { margin-bottom:42px; }
.sec-head h1, .sec-head h2, .sec-head h3 { margin-top:10px; }
.sec-head .lead { margin-top:14px; }

/* current-page nav marker - every page sets aria-current="page" on its own
   nav link (dropdown items included); the highlight matches the hover state */
.holo-nav a[aria-current="page"] { background:#eef9fb; }


/* ============================================================
   2. HERO PATTERN (light)
   2-col editorial hero on the light gradient with an animated
   glow wash behind the headline. Collapses to one column <=980px.
   ============================================================ */
.v2-hero { padding:150px var(--holo-gutter) 90px; background:var(--holo-grad-light); position:relative; overflow:hidden; }
/* soft, LIGHT searchlight wash drifting behind the headline (bright, not neon).
   Geometry is a default; override top/left/width/height per page. */
.v2-hero .hero-glow { position:absolute; z-index:0; pointer-events:none; top:-8%; left:-6%; width:62%; height:78%;
  background:radial-gradient(closest-side, rgba(104,209,226,.34), rgba(120,194,62,.10) 58%, transparent 74%);
  filter:blur(18px); opacity:.9; }
@media (prefers-reduced-motion: no-preference){
  .v2-hero .hero-glow { animation:hero-drift 14s ease-in-out infinite alternate; }
}
@keyframes hero-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(7%,4%) scale(1.08); } }
.v2-hero .holo-container { position:relative; z-index:1; }
.v2-hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center; }

/* oversized editorial headline */
.v2-hero h1 { font-size:clamp(40px,6vw,76px); line-height:1.05; letter-spacing:-.02em; font-weight:800; }

/* curved-underline swoosh: wrap the payoff words in .ring with an inline
   svg path; the lime stroke draws in once on load.
     <span class="ring">wins you work<svg viewBox="0 0 320 36"
       preserveAspectRatio="none" aria-hidden="true">
       <path d="M6 27 C 70 12, 180 8, 314 16"/></svg></span>          */
.ring { position:relative; display:inline-block; color:var(--holo-primary); white-space:nowrap; }
.ring svg { position:absolute; left:-1%; bottom:-0.22em; width:102%; height:.38em; overflow:visible; pointer-events:none; }
.ring svg path { fill:none; stroke:var(--holo-lime); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340; animation:ring-draw 1.1s cubic-bezier(.6,.04,.2,1) .55s forwards; }
@keyframes ring-draw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .ring svg path { animation:none; stroke-dashoffset:0; } }

/* trust row under the hero CTAs: stars + review link + dot + stat */
.micro-trust { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:24px; color:var(--holo-gray-700); font-size:14px; }
.micro-trust .st { color:#f5b700; letter-spacing:1px; }
.micro-trust .dot { width:4px; height:4px; border-radius:50%; background:var(--holo-line-200); }
.micro-trust .mt-num { color:var(--holo-green); font-weight:800; font-size:15.5px; }

/* hero visual stage: browser mock + floating chips composed on top.
   .wash is a soft radial halo behind the device. */
.v2-stage { position:relative; }
.v2-stage .wash { position:absolute; inset:-6% -4% -10% -4%; border-radius:34px; z-index:0;
  background:radial-gradient(120% 90% at 70% 25%, rgba(104,209,226,.22), transparent 60%); }
.browser { background:#fff; border:1px solid var(--holo-line); border-radius:var(--r-card); box-shadow:var(--holo-shadow); overflow:hidden; position:relative; z-index:1; }
.browser .bar { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--holo-line); background:#fbfdfd; }
.browser .dot { width:11px; height:11px; border-radius:50%; background:#dbdde0; }
.browser .url { margin-left:10px; font-size:12px; color:var(--holo-gray-700); background:#f3f4f5; border-radius:30px; padding:5px 14px; }
.browser .shot { display:block; width:100%; height:auto; }


/* ============================================================
   3. FLOATING CHIP / CARD COMPONENTS
   Small white cards that float over a stage. Base .chip is
   position:absolute for stage composition; set position:static
   (or use the <=560px stacking below) to use one in normal flow.
   ============================================================ */
.chip { position:absolute; z-index:3; display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid var(--holo-line); border-radius:16px; box-shadow:var(--holo-shadow); padding:11px 15px; max-width:235px; }
/* icon square inside a chip */
.chip .ci { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; }
.chip .ci.lime { background:var(--holo-lime); }
.chip .ci.teal { background:var(--holo-primary); }
.chip .ci.plain { background:#fff; border:1px solid var(--holo-line); }
.chip .ci.gold { background:#fff6df; color:#f5b700; }
.chip b { display:block; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--holo-heading); line-height:1.15; }
.chip span { font-size:11.5px; color:var(--holo-gray-700); }
.chip .stars { display:block; color:#f5b700; letter-spacing:1.5px; font-size:12px; line-height:1.3; }

/* screen-reader-only text (e.g. "5 out of 5 stars" next to star glyphs) */
.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; }

/* Google "top result" card: header row (G mark + label + tag) over a
   mini search result (title / url / snippet). */
.gcard { top:-22px; left:-22px; flex-direction:column; align-items:stretch; gap:8px; width:226px; padding:13px 15px; }
.gcard .hd { display:flex; align-items:center; gap:8px; }
.gcard .hd .gx { width:20px; height:20px; flex:none; }
.gcard .hd .lbl { font-size:11px; color:var(--holo-gray); }
.gcard .tag-top { margin-left:auto; background:#eef7e6; color:#4f8a1f; font-family:var(--font-head); font-weight:700;
  font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; border-radius:30px; padding:3px 8px; white-space:nowrap; }
.gcard .res .t { font-family:var(--font-head); font-weight:700; font-size:13.5px; color:#1a5fc4; line-height:1.2; }
.gcard .res .u { font-size:10.5px; color:var(--holo-green); }
.gcard .res .sn { font-size:10.5px; color:var(--holo-gray); line-height:1.35; margin-top:3px; }

/* AI-answer card: sparkle header + quoted recommendation + lime check */
.aicard { bottom:-18px; left:-26px; flex-direction:column; align-items:stretch; gap:9px; width:248px; padding:13px 15px; }
.aicard .hd { display:flex; align-items:center; gap:8px; }
.aicard .hd .sp { width:24px; height:24px; border-radius:7px; background:var(--holo-grad-teal); display:grid; place-items:center; color:#fff; flex:none; }
.aicard .hd b { font-size:12px; }
.aicard .msg { display:flex; gap:9px; align-items:flex-start; }
.aicard .msg p { font-size:11.5px; color:var(--holo-gray-700); line-height:1.4; margin:0; }
.aicard .msg .ck { width:20px; height:20px; border-radius:50%; background:var(--holo-lime); display:grid; place-items:center; color:#fff; flex:none; margin-top:1px; }

/* default stage positions for the review + notification chips.
   These are a composable default layout; override per page. */
.chip.review-chip { top:128px; right:-26px; }
.chip.enquiry { bottom:34px; right:-22px; }

/* chip entrance + idle float + the enquiry "new lead" cycle.
   Entrance delays are load-timed (designed for an above-the-fold
   hero); retime with animation-delay if composed further down. */
@media (prefers-reduced-motion: no-preference){
  .chip { opacity:0; transform:translateY(12px); animation:chip-in .7s cubic-bezier(.22,.61,.36,1) forwards; }
  .gcard       { animation-delay:.7s; }
  .review-chip { animation-delay:1.0s; }
  .aicard      { animation-delay:1.3s; }
  .chip.enquiry{ animation:chip-in .7s cubic-bezier(.22,.61,.36,1) 1.6s forwards, enquiry-cycle 9s ease-in-out 2.4s infinite; }
  /* once revealed, each card gently floats */
  .gcard, .review-chip, .aicard { animation-name:chip-in, chip-float; animation-duration:.7s, 6s;
    animation-timing-function:cubic-bezier(.22,.61,.36,1), ease-in-out;
    animation-iteration-count:1, infinite; animation-fill-mode:forwards, none; }
  .review-chip { animation-delay:1.0s, 1.7s; }
  .gcard       { animation-delay:.7s, 1.4s; }
  .aicard      { animation-delay:1.3s, 2.0s; }
}
@keyframes chip-in { to { opacity:1; transform:none; } }
@keyframes chip-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
/* the enquiry chip slides away and back like a fresh lead landing */
@keyframes enquiry-cycle {
  0%,8% { opacity:1; transform:translateX(0); }
  14%   { opacity:0; transform:translateX(22px); }
  20%   { opacity:0; transform:translateX(22px); }
  26%,100% { opacity:1; transform:translateX(0); }
}


/* ============================================================
   4. TRUST STRIP
   Thin bordered band under the hero: stars + proof points
   separated by dots.
   ============================================================ */
.v2-trust { border-top:1px solid var(--holo-line); border-bottom:1px solid var(--holo-line); padding:18px var(--holo-gutter); background:#fff; }
.v2-trust .row { display:flex; gap:12px 30px; flex-wrap:wrap; justify-content:center; align-items:center;
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--holo-heading); }
.v2-trust .st { color:#f5b700; letter-spacing:2px; }
.v2-trust a { color:var(--holo-heading); }
.v2-trust a:hover { color:var(--holo-primary); }
.v2-trust .sep { width:5px; height:5px; border-radius:50%; background:var(--holo-line-200); }


/* ============================================================
   5. BENEFIT MARQUEE DIVIDER
   Teal band reusing .holo-marquee from holo-brand.css but with
   smaller, solid-white, legible copy. Mark aria-hidden="true".
   ============================================================ */
.v2-benefit-bar { background:var(--holo-grad-teal); padding:16px 0; overflow:hidden; }
.v2-benefit-bar .holo-marquee__track { animation-duration:34s; }
.v2-benefit-bar .holo-marquee__track span { font-family:var(--font-head); font-weight:800;
  font-size:clamp(18px,2.4vw,26px); line-height:1.3; letter-spacing:.02em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff; padding-right:.3em;
  display:inline-flex; align-items:center; gap:.45em; }
.v2-benefit-bar .holo-marquee__track span .d { color:var(--holo-cyan-50); }


/* ============================================================
   6. GENERIC LIGHT GRIDS
   ============================================================ */
.g2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }


/* ============================================================
   7. PAIN / SOLUTION CARDS
   .card.pain = red X + quoted pain on top, lime check + fix below
   a divider. Use inside .g3 for the choreographed reveal.
   ============================================================ */
.pain { padding:28px; display:flex; flex-direction:column; gap:14px; }
.pain .pq { display:flex; align-items:flex-start; gap:12px; }
.pain .x { width:38px; height:38px; border-radius:10px; background:#fdeceb; color:#d9534f; display:grid; place-items:center; flex:none; }
.pain .pa { display:flex; align-items:flex-start; gap:12px; padding-top:14px; border-top:1px solid var(--holo-line); }
.pain .v { width:38px; height:38px; border-radius:10px; background:#e4f3d6; color:#4f8a1f; display:grid; place-items:center; flex:none; }
.pain h4 { font-size:18px; }
.pain .pa b { color:var(--holo-heading); font-family:var(--font-head); font-weight:700; font-size:15.5px; }


/* ============================================================
   8. FEATURE / PACKAGE CARDS (the offer "spine")
   Two .card.feat-card side by side: picture on top, bold heading,
   copy, lime check list. .spine gets slide-in-from-sides motion.
   ============================================================ */
.spine { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.feat-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.feat-card .ftxt { padding:28px 28px 30px; }
.feat-card .pic { display:block; width:100%; height:auto; border-bottom:1px solid var(--holo-line); background:#fff; }
.feat-card h3 { font-size:26px; font-weight:800; line-height:1.15; }
.feat-list { display:grid; gap:9px; margin-top:14px; }
.feat-list .li { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--holo-gray-700); }
.feat-list .li svg { flex:none; margin-top:2px; }
/* small uppercase teal pill label for card corners / list headers */
.pilllabel { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--holo-primary);
  background:#eaf7f9; border-radius:30px; padding:5px 12px; }


/* ============================================================
   9. STACK TILES + STAT CARDS
   Tool-logo tiles with a BENEFIT-FIRST caption: logo (order 1),
   bold benefit line (order 2), small tool name (order 3).
   .stack-stat = trio of stat cards that get a sheen sweep on
   reveal (see motion layer).
   ============================================================ */
.stack-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px; }
.stack-tile { background:#fff; border:1px solid var(--holo-line); border-radius:16px; padding:18px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
  box-shadow:var(--holo-shadow); transition:transform .2s; }
.stack-tile:hover { transform:translateY(-3px); }
.stack-tile img { height:30px; width:auto; order:1; }
.stack-tile .ben { font-size:13px; color:var(--holo-heading); font-weight:700; font-family:var(--font-head);
  text-align:center; line-height:1.2; margin-top:0; order:2; }
.stack-tile .nm { font-size:10.5px; color:var(--holo-gray); font-weight:600; text-align:center; line-height:1.2; order:3; }
.stack-stat { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }
.stack-stat .s { background:#fff; border:1px solid var(--holo-line); border-radius:16px; box-shadow:var(--holo-shadow);
  padding:22px 20px; text-align:center; position:relative; overflow:hidden; }
.stack-stat b { font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--holo-heading); display:block; line-height:1.1; }
.stack-stat span { font-size:13px; color:var(--holo-gray-700); }
@media(max-width:900px){ .stack-row{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:480px){ .stack-row{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   10. AI-ANSWER EXPLAINER (phone-chat mock)
   2-col band (copy + code-built phone mock, razor-sharp, no
   baked-in text). .ai-shot-wrap gets the .vin bubble sequence.
   ============================================================ */
.ai-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.ai-shot-wrap { position:relative; max-width:330px; margin:0 auto; }
.ai-shot-wrap img { width:100%; height:auto; border-radius:26px; box-shadow:var(--holo-shadow); border:1px solid var(--holo-line); background:#fff; display:block; }
/* small floating confirmation chip pinned to the mock */
.ai-shot-wrap .float { position:absolute; bottom:18px; right:-18px; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--holo-line); border-radius:14px; box-shadow:var(--holo-shadow); padding:10px 13px; }
.ai-shot-wrap .float .ci { width:28px; height:28px; border-radius:8px; background:var(--holo-lime); display:grid; place-items:center; color:#fff; flex:none; }
.ai-shot-wrap .float b { font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--holo-heading); }

.ai-phone { width:100%; background:#fff; border:1px solid var(--holo-line); border-radius:34px;
  box-shadow:var(--holo-shadow); padding:18px 16px 26px; display:block; }
.ai-phone .notch { width:42%; height:6px; border-radius:6px; background:var(--holo-line-200); margin:2px auto 20px; }
.ai-phone .bub { border-radius:18px; padding:14px 16px; margin-bottom:14px; }
.ai-phone .bub.user { background:#eef0f2; margin-left:22%; border-bottom-right-radius:6px; }
.ai-phone .bub.ai { background:linear-gradient(180deg,#f3fbfc,#e6f7fa); border:1px solid #d6eef2; margin-right:14%; border-bottom-left-radius:6px; position:relative; }
.ai-phone .answer { background:var(--holo-grad-teal); color:#fff; border-radius:16px; padding:16px;
  margin-right:8%; display:flex; align-items:center; gap:12px; box-shadow:var(--holo-shadow); }
.ai-phone .answer .ac { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; }
.ai-phone .answer .at { display:grid; gap:6px; flex:1; }
.ai-phone .line { height:9px; border-radius:6px; background:currentColor; opacity:.85; }
.ai-phone .answer .line { background:#fff; opacity:.95; }
.ai-phone .answer .line.short { width:55%; opacity:.6; }
.ai-phone .bub .line { background:var(--holo-gray-700); }
.ai-phone .bub.ai .line { background:var(--holo-primary-600); }
.ai-phone .line.l1 { width:80%; }
.ai-phone .line.l2 { width:60%; }
.ai-phone .check { width:26px; height:26px; border-radius:50%; background:var(--holo-lime); display:grid; place-items:center; flex:none; }
/* typing dots are motion-only; hidden unless the .vin sequence runs */
.ai-phone .tdots { display:none; }
/* "same idea on Google" tie-back row under the copy column */
.tiehome { margin-top:20px; display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--holo-line);
  border-radius:14px; box-shadow:var(--holo-shadow); padding:16px 18px; }
.tiehome .gi { width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--holo-line); display:grid; place-items:center; flex:none; }


/* ============================================================
   11. STEP CARDS + DOTTED CONNECTOR
   3 .card.step tiles with circle icons, ghost numbers and a
   dotted line drawn across behind them on reveal.
   ============================================================ */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; position:relative; }
.steps-line { position:absolute; left:17%; right:17%; top:61px; height:3px; border-radius:3px; z-index:0;
  background:repeating-linear-gradient(90deg, rgba(28,129,145,.30) 0 10px, transparent 10px 20px);
  transform-origin:left center; }
@media (max-width:860px){ .steps-line { display:none; } }
.step { padding:30px 28px; text-align:center; position:relative; }
.step .num { position:absolute; top:18px; right:22px; font-family:var(--font-head); font-weight:800; font-size:30px; color:#eaf2f3; }
.step .ico { width:64px; height:64px; border-radius:50%; background:#eef9fb; display:grid; place-items:center; margin:0 auto 16px; color:var(--holo-primary); }
.step h4 { font-size:19px; }
.step p { margin-top:8px; font-size:14.5px; }


/* ============================================================
   12. PROOF: REVIEW BENTO + CLIENT MOMENT + STAT CARDS
   .bento = photo review tiles (image fill + dark gradient +
   quote + stars + name). .moment = big Ken Burns photo with a
   caption gradient. .proof-stats = icon stat cards.
   ============================================================ */
.proof-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:stretch; margin-bottom:24px; }
.moment { position:relative; border-radius:var(--r-card); overflow:hidden; min-height:340px; box-shadow:var(--holo-shadow); }
.moment img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.moment .cap { position:absolute; left:0; right:0; bottom:0; padding:24px; color:#fff; z-index:1;
  background:linear-gradient(180deg,transparent,rgba(8,35,40,.86)); }
.moment .cap b { font-family:var(--font-head); font-weight:700; font-size:20px; display:block; }
.bento { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:280px; gap:20px; }
.bento .span2 { grid-column:span 2; }
.review { position:relative; border-radius:var(--r-card); overflow:hidden; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; box-shadow:var(--holo-shadow); }
.review::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,var(--holo-ink-teal)); z-index:0; }
.review > * { position:relative; z-index:1; }
/* the photo layer (Ken Burns wrapper): set the image inline, e.g.
   <div class="ph-fill" style="background:url('...') center/cover;"></div> */
.review .ph-fill { position:absolute; inset:0; z-index:0; }
.review .gmark { position:absolute; top:18px; right:18px; width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center; z-index:1; box-shadow:var(--holo-shadow); padding:11px; }
.review .quote { font-family:var(--font-head); font-weight:700; font-size:19px; line-height:1.25; }
.review .rstars { color:#f5b700; letter-spacing:2px; }
.review .rname { font-family:var(--font-head); font-weight:700; font-size:18px; color:#fff; margin:0; }
/* solid brand tile (no photo) for the statement slot in the bento */
.review.solid-ink { background:var(--holo-grad-teal); justify-content:center; }
.review.solid-ink::after { display:none; }
.review.solid-ink .quote { font-size:21px; }
.proof-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.proof-stats .ps { background:#fff; border:1px solid var(--holo-line); border-radius:16px; box-shadow:var(--holo-shadow); padding:26px; text-align:center; }
.proof-stats .ps b { font-family:var(--font-body); font-weight:700; font-size:46px; color:var(--holo-heading); display:block; line-height:1; overflow-wrap:anywhere; }
/* :not(.pico) matters - without it this rule outweighs .proof-stats .pico below
   (one extra type selector) and flattens the icon chip to display:block, which
   drops the icon onto the text baseline at the top of the circle. */
.proof-stats .ps span:not(.pico) { font-size:14px; color:var(--holo-gray-700); margin-top:6px; display:block; }
.proof-stats .pico { width:46px; height:46px; border-radius:50%; background:#eef9fb; color:var(--holo-primary);
  display:grid; place-items:center; margin:0 auto 12px; }


/* ============================================================
   13. HUB "COMING SOON" STRIP
   Single centered .card.hub-strip: gradient icon tile + badge
   (badge/badge-dot come from holo-brand.css) + copy.
   ============================================================ */
.hub-strip { max-width:760px; margin:0 auto; padding:30px 34px; display:flex; align-items:center; gap:24px; }
.hub-strip .hb-ic { width:56px; height:56px; border-radius:16px; background:var(--holo-grad-teal); display:grid; place-items:center; color:#fff; flex:none; }
.hub-strip h3 { font-size:22px; }
.hub-strip .badge { margin-bottom:8px; }


/* ============================================================
   14. FINAL CTA BAND
   Teal gradient card with centered copy + button pair. A soft
   light drifts across it (motion layer). Buttons come from
   holo-brand.css; .btn-ghost is re-skinned white-on-teal here.
   ============================================================ */
.v2-cta { border-radius:var(--r-card); padding:56px 40px; text-align:center; background:var(--holo-grad-teal); color:#fff;
  box-shadow:var(--holo-shadow); position:relative; overflow:hidden; }
.v2-cta > * { position:relative; z-index:1; }
.v2-cta h2 { color:#fff; }
.v2-cta .btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.v2-cta .btn-ghost { background:#fff; color:var(--holo-primary); border-color:#fff; }


/* ============================================================
   15. BOOKING PANEL + CALENDAR SKELETON
   Branded tint panel that frames the GHL booking iframe, with a
   loading skeleton (spinner + shimmering calendar grid) behind
   it. The iframe sits on z-index:1 and covers the skeleton once
   the widget paints.
   ============================================================ */
.book-panel { position:relative; max-width:920px; margin:0 auto; border-radius:var(--r-card);
  background:linear-gradient(180deg,#f4fdfe 0%,#e9f9fc 100%); border:1px solid var(--holo-line);
  box-shadow:var(--holo-shadow); padding:14px; min-height:620px; overflow:hidden; }
.book-skeleton { position:absolute; inset:14px; border-radius:16px; background:#fff; border:1px solid var(--holo-line);
  padding:34px 30px; display:flex; flex-direction:column; gap:22px; z-index:0; }
.book-skeleton .sk-row { display:flex; align-items:center; gap:14px; color:var(--holo-primary-600);
  font-family:var(--font-head); font-weight:700; font-size:15px; }
.book-skeleton .sk-spin { width:22px; height:22px; border-radius:50%; border:2.5px solid #cfeaf0;
  border-top-color:var(--holo-primary); animation:sk-spin .9s linear infinite; flex:none; }
@keyframes sk-spin { to { transform:rotate(1turn); } }
@media (prefers-reduced-motion: reduce){ .book-skeleton .sk-spin { animation:none; } }
.book-skeleton .sk-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.book-skeleton .sk-cell { height:34px; border-radius:8px; background:linear-gradient(90deg,#eef3f4,#f6fafb,#eef3f4);
  background-size:200% 100%; animation:sk-shine 1.4s ease-in-out infinite; }
.book-skeleton .sk-bar { height:14px; border-radius:7px; background:linear-gradient(90deg,#eef3f4,#f6fafb,#eef3f4);
  background-size:200% 100%; animation:sk-shine 1.4s ease-in-out infinite; }
.book-skeleton .sk-bar.w50 { width:50%; } .book-skeleton .sk-bar.w70 { width:70%; }
@keyframes sk-shine { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@media (prefers-reduced-motion: reduce){ .book-skeleton .sk-cell,.book-skeleton .sk-bar { animation:none; } }
.book-panel iframe { position:relative; z-index:1; }


/* ============================================================
   16. FAQ (light reskin)
   White band, 2-col: head column + .acc accordions (accordion
   itself comes from holo-brand.css; this skins it light).
   ============================================================ */
.v2-faq { background:#fff; padding:100px var(--holo-gutter); }
.v2-faq-grid { display:grid; grid-template-columns:380px 1fr; gap:40px; align-items:start; max-width:var(--holo-maxw); margin:0 auto; }
.v2-faq .acc { background:#fff; border:1px solid var(--holo-line); }
.v2-faq .acc summary { font-weight:600; }


/* ============================================================
   17. CONTRAST + FOOTER POLISH
   ============================================================ */
/* teal/green text darkens on tinted bands (WCAG AA) */
.sec-grad .t-teal, .sec-tint .t-teal,
.sec-grad .eyebrow, .sec-tint .eyebrow,
.sec-grad a:not(.btn), .sec-tint a:not(.btn) { color:var(--holo-primary-600); }
.sec-grad .t-green { color:var(--holo-primary-600); }
/* footer: giant background wordmark goes near-invisible so the
   contact info stays crisp (part of the v2 language) */
.holo-footer .holo-marquee { opacity:.04; }


/* ============================================================
   18. RESPONSIVE (consolidated, mirrors the approved homepage)
   ============================================================ */
@media (max-width:980px){
  .v2-hero-grid,.ai-grid,.spine,.proof-grid,.v2-faq-grid { grid-template-columns:minmax(0,1fr); }
  .v2-hero { padding:120px 24px 64px; }
  .v2-stage { margin-top:8px; }
  /* keep the floating cards on-canvas (no negative pull off the device) */
  .gcard { top:-16px; left:0; }
  .chip.review-chip { top:118px; right:0; }
  .chip.enquiry { bottom:24px; right:0; }
  .aicard { bottom:-12px; left:0; }
  .bento { grid-auto-rows:auto; } .review { min-height:280px; }
  .v2-faq { padding:56px 24px; }
}
/* phones: stop overlay cards from causing overflow - stack them in flow under the device */
@media (max-width:560px){
  .v2-stage .chip { position:static; opacity:1 !important; transform:none !important; animation:none !important;
    width:auto; max-width:100%; margin-top:12px; }
  .v2-stage .gcard { margin-top:16px; }
  .v2-stage { display:flex; flex-direction:column; }
  .v2-stage .wash { display:none; }
}
@media (max-width:860px){ .g3,.steps,.stack-stat,.proof-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
  .g3,.steps,.proof-stats,.stack-stat{ grid-template-columns:minmax(0,1fr); }
  .proof-stats .ps b{ font-size:34px; }
  .bento{ grid-template-columns:minmax(0,1fr); } .bento .span2{ grid-column:auto; }
  .hub-strip{ flex-direction:column; text-align:center; }
  .v2-cta{ padding:44px 22px; }
  .book-panel{ min-height:600px; padding:10px; }
  .book-panel iframe{ min-height:600px; }
  .book-skeleton{ inset:10px; padding:24px 18px; }
}


/* ============================================================
   19. V2 MOTION LAYER
   Scroll-in choreography + micro-interactions. The shared page
   script (see the comment at the end of this file) adds .vin to
   a block as it scrolls into view; every animation below runs
   only under prefers-reduced-motion: no-preference, and nothing
   is ever hidden without JS - the defaults are fully visible.
   Sibling stagger: the script sets --d per child; the CSS feeds
   it into animation-delay.
   ============================================================ */

/* structural bits (always on, motion-free): nav underline track */
.holo-nav__links > a, .holo-dd__t { position:relative; }
.holo-nav__links > a::after, .holo-dd__t::after { content:''; position:absolute; left:14px; right:14px; bottom:5px;
  height:2px; border-radius:2px; background:var(--holo-primary); transform:scaleX(0); transform-origin:left center; }
.holo-nav__links > a:hover::after, .holo-dd__t:hover::after { transform:scaleX(1); }

/* keyframe vocabulary */
@keyframes v2-rise    { from { opacity:0; transform:translateY(18px); } }
@keyframes v2-fade    { from { opacity:0; } }
@keyframes v2-pop     { from { opacity:0; transform:scale(.9); } }
@keyframes v2-poprise { from { opacity:0; transform:translateY(14px) scale(.96); } }
@keyframes v2-slide-l { from { opacity:0; transform:translateX(-26px); } }
@keyframes v2-slide-r { from { opacity:0; transform:translateX(26px); } }
@keyframes v2-shake   { 0%,100% { transform:none; } 25% { transform:translateX(-2px) rotate(-5deg); }
                        50% { transform:translateX(2px) rotate(4deg); } 75% { transform:translateX(-1px) rotate(-2deg); } }
@keyframes v2-draw    { from { transform:scaleX(0); } }
@keyframes v2-sheen   { to { transform:translateX(340%) skewX(-18deg); } }
@keyframes v2-kb      { to { transform:scale(1.06); } }
@keyframes v2-blink   { 0%,100% { opacity:.25; transform:translateY(0); } 35% { opacity:1; transform:translateY(-2px); } }
@keyframes v2-out     { to { opacity:0; } }
@keyframes v2-cta-drift { from { transform:translate3d(-5%,-4%,0) scale(1); } to { transform:translate3d(8%,7%,0) scale(1.06); } }
@keyframes v2-accopen { from { opacity:0; transform:translateY(-6px); } }

@media (prefers-reduced-motion: no-preference){

  /* pain cards: the X gives one small shake, then the green fix row pops in */
  .g3.vin .pain .x { animation:v2-shake .5s ease both .55s; }
  .g3.vin .pain:nth-child(2) .x { animation-delay:.7s; }
  .g3.vin .pain:nth-child(3) .x { animation-delay:.85s; }
  .g3.vin .pain .pa { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both .8s; }
  .g3.vin .pain:nth-child(2) .pa { animation-delay:.95s; }
  .g3.vin .pain:nth-child(3) .pa { animation-delay:1.1s; }

  /* package cards: slide in from either side (plain rise on small screens) */
  .spine.vin .feat-card:first-child { animation:v2-slide-l .7s cubic-bezier(.22,.61,.36,1) both; }
  .spine.vin .feat-card:last-child  { animation:v2-slide-r .7s cubic-bezier(.22,.61,.36,1) both .12s; }
  @media (max-width:980px){
    .spine.vin .feat-card:first-child, .spine.vin .feat-card:last-child { animation-name:v2-rise; }
  }

  /* stack: tiles rise with a stagger (--d); stat cards rise then get one sheen sweep */
  .stack-row.vin .stack-tile { animation:v2-rise .55s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--d,0ms); }
  .stack-stat.vin .s { animation:v2-rise .55s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--d,0ms); }
  .stack-stat.vin .s::after { content:''; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none;
    background:linear-gradient(105deg, transparent 8%, rgba(104,209,226,.22) 50%, transparent 92%);
    transform:translateX(-170%) skewX(-18deg);
    animation:v2-sheen 1s ease forwards; animation-delay:calc(var(--d,0ms) + 600ms); }
  .stack-tile { transition:transform .2s ease, box-shadow .2s ease; }
  .stack-tile img { transition:transform .25s ease; }
  .stack-tile:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(13,59,66,.10); }
  .stack-tile:hover img { transform:scale(1.06); }

  /* phone-chat mock: bubbles land in sequence - typing dots, then the answer + lime check */
  .ai-shot-wrap.vin .bub.user { animation:v2-pop .45s cubic-bezier(.22,.61,.36,1) both .15s; }
  .ai-shot-wrap.vin .bub.ai { animation:v2-pop .45s cubic-bezier(.22,.61,.36,1) both .7s; }
  .ai-shot-wrap.vin .tdots { display:flex; align-items:center; gap:5px; position:absolute; inset:0; padding-left:16px;
    animation:v2-out .25s ease 1.6s forwards; }
  .ai-shot-wrap.vin .tdots i { width:7px; height:7px; border-radius:50%; background:var(--holo-primary-600);
    animation:v2-blink .9s ease infinite; }
  .ai-shot-wrap.vin .tdots i:nth-child(2){ animation-delay:.15s; }
  .ai-shot-wrap.vin .tdots i:nth-child(3){ animation-delay:.3s; }
  .ai-shot-wrap.vin .bub.ai .line { animation:v2-fade .35s ease both 1.75s; }
  .ai-shot-wrap.vin .answer { animation:v2-pop .5s cubic-bezier(.22,.61,.36,1) both 2.05s; }
  .ai-shot-wrap.vin .answer .check { animation:v2-pop .45s cubic-bezier(.34,1.56,.64,1) both 2.5s; }
  .ai-shot-wrap.vin .float { animation:v2-pop .5s cubic-bezier(.22,.61,.36,1) both 2.8s; }

  /* steps: dotted connector draws across, icons pop in sequence, numbers fade in */
  .steps.vin .steps-line { animation:v2-draw 1.1s cubic-bezier(.6,.04,.2,1) both .2s; }
  .steps.vin div.step:nth-of-type(1) .ico { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both .3s; }
  .steps.vin div.step:nth-of-type(2) .ico { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both .55s; }
  .steps.vin div.step:nth-of-type(3) .ico { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both .8s; }
  .steps.vin div.step:nth-of-type(1) .num { animation:v2-fade .6s ease both .45s; }
  .steps.vin div.step:nth-of-type(2) .num { animation:v2-fade .6s ease both .7s; }
  .steps.vin div.step:nth-of-type(3) .num { animation:v2-fade .6s ease both .95s; }

  /* proof: stat cards pop in with their icons; photos get a very slight slow Ken Burns zoom */
  .proof-stats.vin .ps { animation:v2-poprise .6s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--d,0ms); }
  .proof-stats.vin .ps .pico { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(var(--d,0ms) + 250ms); }
  .review .ph-fill { animation:v2-kb 16s ease-in-out infinite alternate; }
  .moment img { animation:v2-kb 18s ease-in-out infinite alternate; }

  /* hub strip slides in, icon pops (the lime dot already pulses via .badge-dot) */
  .hub-strip.vin { animation:v2-slide-l .65s cubic-bezier(.22,.61,.36,1) both; }
  .hub-strip.vin .hb-ic { animation:v2-pop .5s cubic-bezier(.34,1.56,.64,1) both .25s; }
  @media (max-width:980px){ .hub-strip.vin { animation-name:v2-rise; } }

  /* final CTA: a soft light drifts very slowly across the teal band */
  .v2-cta::before { content:''; position:absolute; inset:-30%; z-index:0; pointer-events:none;
    background:radial-gradient(42% 55% at 32% 30%, rgba(255,255,255,.16), transparent 70%);
    animation:v2-cta-drift 12s ease-in-out infinite alternate; }

  /* FAQ: heading column rises; open answers fade/slide in (the +/- already rotates) */
  .v2-faq-grid.vin > div:first-child { animation:v2-rise .6s cubic-bezier(.22,.61,.36,1) both; }
  .acc[open] .body { animation:v2-accopen .32s ease; }

  /* micro-interactions: consistent lift + shadow, arrow slide, nav underline, social nudge */
  .card { transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
  .stack-stat .s, .proof-stats .ps { transition:transform .25s ease, box-shadow .25s ease; }
  @media (hover:hover){
    .card:hover, .stack-stat .s:hover, .proof-stats .ps:hover { transform:translateY(-4px);
      box-shadow:0 2px 3px -1px rgba(30,32,36,.06), 0 16px 32px -8px rgba(13,59,66,.14); }
  }
  .btn .btn-arrow { transition:transform .25s ease; }
  .btn:hover .btn-arrow { transform:translateX(4px); }
  .btn-dark .btn-arrow { transition:background .25s ease, color .25s ease, transform .25s ease; }
  .btn-dark:hover .btn-arrow { transform:translateY(-50%) translateX(3px); }
  .holo-nav__links > a::after, .holo-dd__t::after { transition:transform .25s cubic-bezier(.22,.61,.36,1); }
  .foot-social a svg { transition:transform .2s ease; }
  .foot-social a:hover svg { transform:translateY(-2px) scale(1.08); }
}

/* reduced motion: neutralise the few always-on bits not already
   gated above (holo-brand.css handles its own animations) */
@media (prefers-reduced-motion: reduce){
  .stack-tile { transition:none; }
  .badge-dot::after { animation:none; opacity:0; }
}


/* ============================================================
   20. SHARED PAGE SCRIPT (REQUIRED for the .vin choreography)
   Every page using this stylesheet must inline the snippet below
   just before </body>, AFTER the holo.js include:

     <script src=[site-root]/holo.js >   (depth-correct path)
     <script> ...snippet... </script>

   It flags blocks with .vin as they scroll into view so the CSS
   above can choreograph their children, opts a few blocks out of
   holo.js's whole-block reveal (their children animate
   individually instead), and sets the --d per-child stagger.
   Content never depends on it: everything is visible by default
   and every .vin animation is gated behind prefers-reduced-motion.
   Pages may extend the `targets` selector list with their own
   blocks. Snippet (exact copy from the homepage; JS comments are
   written as // here so this CSS comment is not terminated):

(function(){
  function init(){
    // opt these out of holo.js's block fade - the CSS .vin rules animate them per child
    ['.spine','.spine .feat-card','.stack-row','.stack-stat','.proof-stats','.hub-strip'].forEach(function(sel){
      [].forEach.call(document.querySelectorAll(sel),function(el){
        el.__shown=1; el.style.opacity=''; el.style.transform=''; el.style.willChange='';
      });
    });
    // per-child stagger (--d feeds animation-delay in the CSS)
    [['.stack-row .stack-tile',70],['.stack-stat .s',120],['.proof-stats .ps',110]].forEach(function(p){
      [].forEach.call(document.querySelectorAll(p[0]),function(el,i){ el.style.setProperty('--d',(i*p[1])+'ms'); });
    });
    // drop holo.js's stagger transition-delay once a reveal has played, so hover lifts stay instant
    document.addEventListener('transitionend',function(e){
      var t=e.target;
      if(e.propertyName==='opacity'&&t.classList&&t.classList.contains('reveal')) t.style.transitionDelay='';
    });
    var targets=[].slice.call(document.querySelectorAll('.g3,.spine,.stack-row,.stack-stat,.steps,.proof-stats,.ai-shot-wrap,.hub-strip,.v2-faq-grid'));
    if(!targets.length) return;
    if(!('IntersectionObserver'in window)){ targets.forEach(function(t){t.classList.add('vin');}); return; }
    var io=new IntersectionObserver(function(es){
      es.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('vin'); io.unobserve(en.target); } });
    },{rootMargin:'0px 0px -8% 0px',threshold:0.1});
    targets.forEach(function(t){ io.observe(t); });
  }
  if(document.readyState!=='loading')init(); else document.addEventListener('DOMContentLoaded',init);
})();

   ============================================================ */