/*
Theme Name: Drealm
Theme URI: https://drealm.sg
Author: Drealm
Description: Custom Drealm marketing website theme (v3 redesign) — fully coded, Elementor-free.
Version: 0.3
Requires at least: 6.0
Tested up to: 6.6
*/

/* ---- Embedded fonts (base64 woff2, self-contained) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ac6d71b4d5fd.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/0da2d17e738f.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/179f97ec0275.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cb726212d5d5.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/2ac78601179c.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/898d9808304d.woff2) format('woff2');}

/* ============================================================================
   DREALM DESIGN SYSTEM ,  Phase 0
   Light-led (Stripe/Klaviyo tone). Colour B: navy->blue gradient on accents,
   orange CTA. Cyan minimal. Lato (display/numbers) + Poppins (body).
   Inline this whole file into every page's <style> for guaranteed consistency.

   ---------------------------------------------------------------------------
   SIGNATURE MOTIF, "The Growth Plot"
   ---------------------------------------------------------------------------
   Drealm's promise is *measurable growth*. The ownable visual language is a
   data-viz system, not decoration:

   1. MEASUREMENT GRID (.motif-grid / .motif-grid--navy)
      A faint plotted graph-paper grid sits behind hero + band moments. It reads
      as an analytics canvas, the surface every claim is charted on.

   2. GROWTH ARC (.growth-arc, hand-coded SVG)
      An ascending plotted curve with an area fill and node markers at each data
      point, stroked in the navy->blue accent gradient. The end node carries a
      real metric tile. This is the hero's signature object and recurs small in
      cards/stats.

   3. GROWTH LOOP (.growth-loop, hand-coded SVG)
      A four-node flywheel, Audience -> Content -> Conversion -> Data -> back -
      the closed TikTok-commerce loop Drealm can run end to end. Used once per
      page as the "system" explainer.

   4. PLOT NODE (.plot-node)
      A small crosshair/target marker (the arc's node, extracted) used as the
      bullet, list marker, and eyebrow tick across the site. It is the atom that
      ties grid, arc and loop into one family.

   Rule of use: spend the motif boldly ONCE per section (arc in hero, loop in the
   system band), keep everything else quiet. All hand-coded SVG, no emoji.
   ============================================================================ */

/* ---------------- Tokens ---------------- */
:root{
  /* palette (locked) */
  --navy:#081f5c; --navy-mid:#192c6a; --blue:#2a84fa; --cyan:#01eaff;
  --orange:#fa6129; --orange-deep:#e14f1c; --cta-hover:#e14f1c;
  --light:#f5f7fd; --light-2:#eef2fb; --border:#e2e9f5;
  --ink:#0b1a44; --muted:#5b678a; --white:#ffffff;

  /* foreground tints on the deep-navy moment (AA on #081f5c) */
  --navy-fg:#c3cdec; --navy-fg-muted:#9fb0da; --navy-fg-dim:#8fa1cf;
  --navy-accent:#7fb0ff; --navy-accent-2:#8fb8ff;
  /* light chart / surface tint scale */
  --sky-1:#eaf1ff; --sky-2:#dfe7ff; --sky-3:#dbe8ff; --sky-4:#cfdcf4;

  /* gradients */
  --grad-accent:linear-gradient(95deg,#081f5c 0%,#2a84fa 100%);
  --grad-bar:linear-gradient(90deg,#081f5c,#2a84fa);
  --grad-navy:linear-gradient(150deg,#0b2570 0%,#081f5c 55%,#050f34 100%);
  --grad-cta:linear-gradient(180deg,var(--orange),var(--cta-hover));

  /* type */
  --font-display:'Lato',-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  --fs-display:clamp(2.5rem,5.2vw,4.05rem);
  --fs-h1:clamp(2.2rem,4.4vw,3.35rem);
  --fs-h2:clamp(1.75rem,3vw,2.5rem);
  --fs-h3:1.35rem;
  --fs-lg:1.15rem;
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.76rem;
  --fs-stat:clamp(2.6rem,5vw,3.9rem);
  --lh-tight:1.05; --lh-snug:1.22; --lh-body:1.62;
  --tr-display:-.022em; --tr-eyebrow:.16em;

  /* spacing (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-y:clamp(64px,9vw,116px);
  --container:1180px; --container-wide:1320px;

  /* radius / shadow */
  --r-card:18px; --r-panel:22px; --r-pill:999px; --r-btn:12px;
  --sh-sm:0 2px 10px rgba(8,31,92,.06);
  --sh-md:0 16px 44px rgba(8,31,92,.10);
  --sh-lg:0 34px 80px rgba(8,31,92,.18);
  --sh-cta:0 12px 26px rgba(250,97,41,.34);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink);background:var(--light);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:900;
  line-height:var(--lh-snug);letter-spacing:var(--tr-display);color:var(--navy)}
p{margin:0}
::selection{background:rgba(42,132,250,.22)}

/* keyboard focus (a11y), visible everywhere; light/offset variant on dark bands */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:inherit}
.band--navy a:focus-visible,.band--navy button:focus-visible,
.cta-band a:focus-visible,.site-footer a:focus-visible,
.btn--primary:focus-visible,.btn--on-dark:focus-visible,.nav-cta:focus-visible{
  outline-color:#fff;outline-offset:3px}

/* ---------------- Layout ---------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container.is-wide{max-width:var(--container-wide)}
.section{padding-block:var(--sec-y)}
.stack{display:flex;flex-direction:column}
.stack-2>*+*{margin-top:var(--s-2)} .stack-3>*+*{margin-top:var(--s-3)}
.stack-4>*+*{margin-top:var(--s-4)} .stack-5>*+*{margin-top:var(--s-5)}
.stack-6>*+*{margin-top:var(--s-6)}

/* ---------------- Type utilities ---------------- */
/* text-wrap:balance evens multi-line headings so no single word is orphaned on its own line
   (the recurring "…metric / each" widow inside the 640px band-head). Headings only, never leads. */
.display{font-family:var(--font-display);font-weight:900;font-size:var(--fs-display);
  line-height:var(--lh-tight);letter-spacing:var(--tr-display);color:var(--navy);text-wrap:balance}
.h1{font-size:var(--fs-h1);text-wrap:balance} .h2{font-size:var(--fs-h2);text-wrap:balance} .h3{font-size:var(--fs-h3);letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:var(--fs-lg);color:var(--muted);line-height:1.55;font-weight:400}
.small{font-size:var(--fs-sm)} .muted{color:var(--muted)}
.accent{background:linear-gradient(90deg,var(--navy),var(--blue),#7fb0ff,var(--blue),var(--navy));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:accent-sheen 9s linear infinite}
@keyframes accent-sheen{to{background-position:-200% 0}}
.mono-num{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* Eyebrow: plot-node tick + tracked uppercase label */
.eyebrow{display:inline-flex;align-items:flex-start;gap:var(--s-2);line-height:1.35;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--blue)}
/* bullseye sits on the FIRST line (align-items:flex-start), stays put when the
   eyebrow wraps to 2 lines; the small margin optically centres it on that line. */
.eyebrow::before{content:"";width:16px;height:16px;flex:none;margin-top:.05em;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<circle cx='8' cy='8' r='6.2' fill='none' stroke='%232a84fa' stroke-width='1.4'/>\
<circle cx='8' cy='8' r='2.9' fill='%23fa6129'/></svg>")}
.eyebrow.on-dark{color:var(--navy-accent-2)}
.eyebrow.on-dark::before{background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<circle cx='8' cy='8' r='6.2' fill='none' stroke='%238fb8ff' stroke-width='1.4'/>\
<circle cx='8' cy='8' r='2.9' fill='%23fa6129'/></svg>")}

/* Section heading cluster */
.band-head{max-width:640px}
.band-head.is-center{margin-inline:auto;text-align:center}
.band-head .h2{margin-top:var(--s-4)}
.band-head .lead{margin-top:var(--s-4)}

/* ---------------- Signature motif: measurement grid ---------------- */
.motif-grid{position:relative;isolation:isolate}
.motif-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(8,31,92,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,31,92,.045) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 100% at 78% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 78% 0%,#000 30%,transparent 78%)}
.motif-grid--navy::before{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(130% 120% at 15% 0%,#000 20%,transparent 70%);
  mask-image:radial-gradient(130% 120% at 15% 0%,#000 20%,transparent 70%)}

/* plot-node marker (list / accent atom) */
.plot-node{width:18px;height:18px;flex:none;display:inline-block;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>\
<circle cx='9' cy='9' r='7' fill='none' stroke='%232a84fa' stroke-width='1.5'/>\
<circle cx='9' cy='9' r='3.0' fill='%23fa6129'/></svg>")}

/* ---------------- Nav ---------------- */
.site-nav{position:sticky;top:0;z-index:60;
  background:rgba(245,247,253,.82);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:var(--s-6);
  height:72px;max-width:var(--container-wide);margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px)}
.nav-logo{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:900;font-size:1.28rem;
  letter-spacing:-.02em;color:var(--navy)}
.nav-logo .mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.nav-link{font-weight:500;font-size:.95rem;color:var(--ink);position:relative;
  padding-block:6px;transition:color .2s var(--ease)}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--grad-bar);border-radius:2px;transition:width .28s var(--ease)}
.nav-link:hover{color:var(--navy)} .nav-link:hover::after{width:100%}
.nav-cta{margin-left:var(--s-2)}
.nav-logo-img{height:32px;width:auto;display:block}
.nav-item{position:relative;display:inline-flex}
.nav-caret{margin-left:5px;width:12px;height:12px;transition:transform .25s var(--ease)}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  min-width:250px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease) .12s,transform .2s var(--ease) .12s,visibility 0s linear .34s;z-index:80}
/* invisible bridge over the 12px trigger→menu gap: moving the cursor down no longer
   crosses a dead zone that closes the dropdown. Only active while the menu is open. */
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s}
/* uniform vertical rhythm: group-label→item gap == item→item gap (symmetric 9px padding) */
.nav-dropdown a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink);transition:background .18s var(--ease),color .18s var(--ease)}
.nav-dropdown a:hover{background:var(--light);color:var(--navy)}
.nav-dropdown .nd-group{padding:9px 12px;font-family:var(--font-display);font-weight:900;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.nav-dropdown .nd-group:first-child{padding-top:3px}
.nav-dropdown .nd-group + a{margin-top:0}
.nav-dropdown .nd-group:not(:first-child){margin-top:6px;border-top:1px solid var(--border);padding-top:15px}
/* mobile hamburger, no border / no background, just the icon */
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;
  border-radius:12px;cursor:pointer;align-items:center;justify-content:center;color:var(--navy)}
.nav-toggle svg{width:36px;height:36px}
/* hamburger → X morph (driven by aria-expanded, no extra class) */
.nav-toggle svg line{transition:transform .40s var(--ease);transform-box:fill-box;transform-origin:center}
.nav-toggle[aria-expanded="true"] .ham-top{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .ham-bot{transform:translateY(-3px) rotate(-45deg)}
.nav-mobile{display:none}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:.98rem;line-height:1;
  padding:14px 24px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),
  box-shadow .22s var(--ease),background .22s var(--ease),color .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--grad-cta);color:#fff;box-shadow:var(--sh-cta)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(250,97,41,.42)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--blue);background:var(--white);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--on-dark{background:#fff;color:var(--navy)}
.btn--on-dark.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn--on-dark.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn--sm{padding:10px 18px;font-size:.9rem}
.btn--lg{padding:16px 30px;font-size:1.05rem}

/* ---------------- Hero pattern ---------------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 88% -10%,rgba(42,132,250,.10),transparent 60%),
  radial-gradient(90% 70% at 6% 108%,rgba(250,97,41,.06),transparent 62%),
  var(--light)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);align-items:center;
  padding-block:clamp(52px,8vw,104px)}
.hero-copy{max-width:600px}
.hero-title{margin-top:var(--s-5);font-size:var(--fs-display);line-height:var(--lh-tight)}
.hero-sub{margin-top:var(--s-5);font-size:var(--fs-lg);color:var(--muted);
  line-height:1.55;max-width:33em}
.hero-actions{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-proof{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid var(--border)}
.hero-proof .stat-num{font-size:2rem}
/* hero visual card holds the growth arc */
.hero-visual{position:relative}

/* ---------------- Cards ---------------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--s-6);box-shadow:var(--sh-sm);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--sky-4)}
.card-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--sky-1),var(--sky-3));color:var(--navy);margin-bottom:var(--s-5)}
.card-icon svg{width:26px;height:26px}
.card .h3{margin-bottom:var(--s-2)}
.card-index{font-family:var(--font-display);font-weight:900;font-size:.9rem;
  color:var(--blue);letter-spacing:.04em}
.card-grid{display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr))}
/* feature card: accent top bar */
.card--feature{position:relative;overflow:hidden}
.card--feature::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--orange) 100%);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.card--feature:hover::before{transform:scaleX(1)}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-4);
  font-weight:600;font-size:.92rem;color:var(--blue)}
.card-link svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.card:hover .card-link svg{transform:translateX(4px)}
.card:hover .card-link{color:var(--orange-deep)}
.card-icon--warm{background:linear-gradient(158deg,#fff4ee,#ffe3d3);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(250,97,41,.16)}

/* ---------------- Section bands ---------------- */
.band{background:var(--light)}
.band--white{background:var(--white)}
.band--alt{background:var(--light-2)}
.band--navy{position:relative;overflow:hidden;background:var(--grad-navy);color:var(--sky-2)}
.band--navy h1,.band--navy h2,.band--navy h3{color:#fff}
.band--navy .lead{color:var(--navy-fg)}
.band--navy .muted{color:var(--navy-fg-dim)}

/* ---------------- Stat tiles ---------------- */
.stat-row{display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.stat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--s-6) var(--s-5);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:var(--s-5);right:var(--s-5);bottom:var(--s-5);
  height:34px;opacity:.6;pointer-events:none;
  background:no-repeat left bottom/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'>\
<path d='M0 30 L26 22 L52 25 L78 12 L104 8 L120 2' fill='none' stroke='%23fa6129' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.stat-num{display:block;font-family:var(--font-display);font-weight:900;
  font-size:var(--fs-stat);line-height:1;letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.stat-num .u{background:var(--grad-accent);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{display:block;margin-top:var(--s-3);font-size:var(--fs-sm);
  color:var(--muted);font-weight:500;max-width:15em}
.band--navy .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.band--navy .stat-num{color:#fff}
.band--navy .stat-num .u{-webkit-text-fill-color:var(--navy-accent)}
.band--navy .stat-label{color:var(--navy-fg-muted)}

/* ---------------- Testimonial ---------------- */
.testimonial{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-panel);padding:clamp(28px,4vw,52px);box-shadow:var(--sh-sm);
  position:relative;max-width:820px}
.testimonial .quote-mark{font-family:var(--font-display);font-weight:900;
  font-size:5rem;line-height:.7;color:var(--orange);opacity:.16;height:.5em;display:block}
.testimonial blockquote{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;letter-spacing:-.01em;color:var(--navy)}
.testimonial .author{margin-top:var(--s-5);display:flex;align-items:center;gap:var(--s-4)}
.testimonial .avatar{width:48px;height:48px;border-radius:var(--r-pill);flex:none;
  background:var(--grad-accent);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:1.1rem}
.testimonial .who{font-weight:600;color:var(--ink);line-height:1.3}
.testimonial .role{font-size:var(--fs-sm);color:var(--muted)}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:var(--s-4);padding:var(--s-5) 0;font-family:var(--font-display);font-weight:700;
  font-size:1.12rem;color:var(--navy);letter-spacing:-.01em}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary .plot-node{margin-left:auto;transition:transform .3s var(--ease)}
.faq-item[open]>summary .plot-node{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 0 var(--s-5) calc(18px + var(--s-4));color:var(--muted);
  font-size:var(--fs-body);line-height:1.6;max-width:62ch}
.faq-item>summary::before{content:"";width:18px;height:18px;flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>\
<circle cx='9' cy='9' r='7' fill='none' stroke='%232a84fa' stroke-width='1.5'/>\
<circle cx='9' cy='9' r='3.0' fill='%23fa6129'/></svg>")}

/* ---------------- Chips / credentials ---------------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--border);font-size:var(--fs-sm);
  font-weight:600;color:var(--ink);box-shadow:var(--sh-sm)}
.chip svg{width:16px;height:16px;color:var(--blue)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.band--navy .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.band--navy .chip svg{color:var(--navy-accent)}

/* ---------------- Logo lockup (credentials), REUSABLE ----------------
   Fixed-height, greyscale-friendly placeholder slots. Jackson swaps the
   .lk-mark box for a real logo file and drops the .lk-hint. */
.logo-lockup{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
.logo-slot{height:66px;flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;
  padding:0 20px;background:var(--white);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--sh-sm)}
.logo-slot .lk-mark{width:34px;height:34px;flex:none;border-radius:9px;
  border:1px dashed var(--border);
  background:repeating-linear-gradient(135deg,var(--light-2) 0,var(--light-2) 5px,var(--light) 5px,var(--light) 10px)}
.logo-slot .lk-txt{display:flex;flex-direction:column;line-height:1.2}
.logo-slot .lk-name{font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);color:var(--navy)}
.logo-slot .lk-hint{margin-top:2px;font-size:var(--fs-xs);color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}

/* ---------------- Client-logo band ("Trusted by"), REUSABLE ----------------
   Uniform placeholder tiles; swap each for a client logo. */
.client-band{display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}
.client-slot{height:72px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px dashed var(--border);border-radius:12px;
  color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}

/* ---------------- Forte highlight (proven-forte emphasis) ----------------
   Elevated treatment for the Lead-Generation forte + verified $4 CPL proof. */
.card--forte{background:linear-gradient(180deg,var(--light) 0%,var(--white) 62%);
  border-color:var(--blue);box-shadow:var(--sh-md)}
.card--forte::before{height:4px}
.forte-stat{margin-top:var(--s-5);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.forte-stat .fs-num{font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.6rem,5.5vw,3.6rem);line-height:.9;letter-spacing:-.03em;color:var(--navy)}
.forte-stat .fs-num .u{background:var(--grad-accent);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.forte-stat .fs-cap{font-size:var(--fs-sm);color:var(--muted);font-weight:600;max-width:14em}
.forte-stat .fs-cap b{color:var(--navy);font-weight:700}
.tag--forte--lg{font-size:var(--fs-sm);padding:8px 15px}

/* ---------------- CTA band (the dark moment) ---------------- */
.cta-band{position:relative;overflow:hidden;background:var(--grad-navy);color:#fff;
  border-radius:var(--r-panel)}
.cta-band .inner{position:relative;z-index:2;padding:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:center}
.cta-band h2{color:#fff;max-width:16ch}
.cta-band .lead{color:var(--navy-fg);margin-top:var(--s-4)}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--navy);color:var(--navy-fg);padding-block:var(--s-9) var(--s-6)}
.footer-grid{display:grid;gap:var(--s-7);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.footer-brand .nav-logo{color:#fff}
.footer-brand p{margin-top:var(--s-4);color:var(--navy-fg-muted);font-size:var(--fs-sm);max-width:32ch}
.footer-col h4{font-family:var(--font-body);font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy-fg);margin-bottom:var(--s-4)}
.footer-col a{display:block;padding:5px 0;color:var(--navy-fg);font-size:var(--fs-sm);
  transition:color .2s var(--ease)}
.footer-col a:hover{color:#fff}
.footer-bottom{margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:var(--s-4);
  justify-content:space-between;align-items:center;color:var(--navy-fg);font-size:var(--fs-xs)}
.footer-bottom .creds{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:9px;background:rgba(255,255,255,.08);
  color:var(--navy-fg);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.footer-social a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;display:block}

/* ---------------- Motion ---------------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* scroll-reveal variety, auto-assigned by the reveal script (images slide from their side, tiles/cards pop-scale) */
.reveal--left{transform:translate(-44px,0)}
.reveal--right{transform:translate(44px,0)}
.reveal--scale{transform:scale(.9)}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- Growth arc / loop sizing ---------------- */
.growth-arc,.growth-loop{width:100%;height:auto;display:block}
.arc-panel{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-panel);box-shadow:var(--sh-lg);padding:var(--s-5);position:relative}
.arc-panel .arc-cap{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--s-3);padding-inline:var(--s-2)}
.arc-panel .arc-cap .k{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.arc-panel .arc-cap .v{font-family:var(--font-display);font-weight:900;color:var(--navy);font-size:1rem}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-7)}
  .hero-visual{order:-1}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta-band .inner{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (max-width:620px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  /* tighter header on mobile, the 72px desktop bar left too much padding around the icon */
  .nav-inner{height:60px}
  /* hero CTAs: full-width stacked on mobile (both buttons equal width, big tap targets) */
  .hero-actions,.about-hero-actions{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .hero-actions>.btn,.about-hero-actions>.btn{width:100%;justify-content:center}
  /* mobile menu = grid track that animates its own height, top-to-down (grows from
     under the sticky header). visibility flips after the collapse so the closed panel
     leaves the tab order. Driven by .is-open (toggled in JS), [hidden] can't transition. */
  .nav-mobile{display:grid;grid-template-rows:0fr;overflow:hidden;visibility:hidden;
    background:rgba(245,247,253,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid transparent;
    transition:grid-template-rows .42s var(--ease),border-color .42s var(--ease),visibility 0s linear .42s}
  .nav-mobile.is-open{grid-template-rows:1fr;visibility:visible;border-top-color:var(--border);
    transition:grid-template-rows .42s var(--ease),border-color .20s var(--ease),visibility 0s}
  /* vertical padding lives on the OPEN state only, otherwise mob-inner's own padding
     is part of its min-content and the 0fr grid track can't collapse below it, leaving
     a ~36px gap under the logo/burger when the menu is closed. */
  .nav-mobile .mob-inner{min-height:0;overflow:hidden;padding:0 clamp(20px,5vw,40px);
    display:flex;flex-direction:column;gap:2px;transition:padding .42s var(--ease)}
  .nav-mobile.is-open .mob-inner{padding-block:14px 22px}
  /* subtle staggered link entrance (delays apply only while open) */
  .nav-mobile .mob-inner>*{opacity:0;transform:translateY(-8px);
    transition:opacity .34s var(--ease),transform .34s var(--ease)}
  .nav-mobile.is-open .mob-inner>*{opacity:1;transform:none}
  .nav-mobile.is-open .mob-inner>*:nth-child(1){transition-delay:.08s}
  .nav-mobile.is-open .mob-inner>*:nth-child(2){transition-delay:.13s}
  .nav-mobile.is-open .mob-inner>*:nth-child(3){transition-delay:.18s}
  .nav-mobile.is-open .mob-inner>*:nth-child(4){transition-delay:.23s}
  .nav-mobile.is-open .mob-inner>*:nth-child(5){transition-delay:.28s}
  .nav-mobile.is-open .mob-inner>*:nth-child(6){transition-delay:.33s}
  .nav-mobile a:not(.btn){padding:11px 6px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border)}
  .nav-mobile a:not(.btn):last-of-type{border-bottom:none}
  /* Services accordion in the mobile menu (native <details>), gives mobile a path to the 8 service pages */
  .nav-mobile .mob-acc{border-bottom:1px solid var(--border)}
  .nav-mobile .mob-acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:11px 6px;font-weight:600;color:var(--ink)}
  .nav-mobile .mob-acc-sum::-webkit-details-marker{display:none}
  .nav-mobile .mob-acc-caret{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
  .nav-mobile .mob-acc[open] .mob-acc-caret{transform:rotate(180deg)}
  .nav-mobile .mob-acc-body{display:flex;flex-direction:column;padding:2px 0 10px 12px}
  .nav-mobile .mob-acc-body a{padding:8px 6px;font-weight:500;font-size:.95rem;color:var(--muted);border-bottom:none}
  .nav-mobile .mob-acc-body a:hover{color:var(--navy)}
  .nav-mobile .mob-subgroup{font-family:var(--font-display);font-weight:900;font-size:.6rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--blue);padding:9px 6px 1px}
  .nav-mobile .btn{margin-top:12px;justify-content:center}
  .nav-mobile .btn--primary{color:#fff}
  .footer-grid{grid-template-columns:1fr}
  .hero-proof{gap:var(--s-5)}
}
@media (prefers-reduced-motion: reduce){
  .nav-mobile,.nav-mobile .mob-inner>*,.nav-toggle svg line{transition:none}
  .nav-mobile.is-open .mob-inner>*{opacity:1;transform:none}
}

/* ===== Credential strip + client band, REAL logos (base64) ===== */
.cred-item{height:66px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:0 24px;background:var(--white);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-sm)}
.cred-item img{height:38px;width:auto;max-width:190px;object-fit:contain;display:block}
.client-band{grid-template-columns:repeat(4,minmax(0,1fr))}
.client-item{height:72px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border);border-radius:12px;padding:0 20px}
.client-item img{height:30px;width:auto;max-width:132px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.6;transition:filter .28s var(--ease),opacity .28s var(--ease)}
.client-item:hover img{filter:grayscale(0);opacity:1}
@media (max-width:620px){.client-band{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Testimonials: mobile auto-scroll marquee (shared) =====
   Desktop keeps each page's masonry/grid; on mobile it is hidden and a horizontal
   auto-scrolling track (duplicated cards for a seamless loop) takes over, fixing the
   cramped narrow-card wrap. Pages add a sibling:
     <div class="t-scroll" aria-hidden="true"><div class="t-track">{cards}{cards}</div></div> */
.t-scroll{display:none}
@media (max-width:720px){
  .t-masonry,.testi-masonry{display:none}
  .t-scroll{display:block;overflow:hidden;margin-top:clamp(28px,5vw,40px);
    -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .t-scroll .t-track{display:flex;width:max-content;gap:14px;align-items:stretch;
    animation:t-loop 48s linear infinite}
  .t-scroll .t-track > *{flex:0 0 82vw;max-width:340px;margin:0;opacity:1;transform:none}
  .t-scroll:hover .t-track,.t-scroll:active .t-track{animation-play-state:paused}
  @keyframes t-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .t-scroll .t-track{animation:none}
}
/* Mobile: body text -1px (17px -> 16px) */
@media (max-width:620px){:root{--fs-body:1rem}}