/* ============================================================
   TNZ Digital — MASTER STYLESHEET
   Version: 1.1.0 (2026-06-02)
   Single source of truth for every style across the site.
   Edit here once and it applies to every page.

   Load order matters and is preserved below:
     1. Design tokens (variables, reset, utilities)
     2. Site chrome + theme system (nav, footer, buttons…)
     3. Legal / policy pages
     4. Page-specific sections (home, services, work, 404)
   ============================================================ */


/* ████████████████████████████████████████████████████████████
   1 · DESIGN TOKENS  (was tokens.css)
   ████████████████████████████████████████████████████████████ */

/* ============================================================
   TNZ Digital — Design Tokens
   Extracted from logo + homepage screenshot.
   Single source of truth for both Design System and Homepage.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand palette (warm amber + ink) ---------- */
  --orange-50:  #FDF7EC;
  --orange-100: #FBEACB;
  --orange-200: #F6D9A4;
  --orange-300: #F0C079;
  --orange-400: #ECAD5B;
  --orange-500: #E8A24D; /* PRIMARY — logo wing */
  --orange-600: #D38B36; /* hover / pressed */
  --orange-700: #A86A23;

  --ink-900: #0B0F14;   /* deepest — banner stripe */
  --ink-800: #141A21;   /* nav, footer */
  --ink-700: #20262E;   /* body strong */
  --ink-600: #3A424B;
  --ink-500: #6B7480;   /* muted body */
  --ink-400: #9099A3;
  --ink-300: #C5CCD3;   /* hairlines */
  --ink-200: #E4E8EC;
  --ink-100: #F2F4F6;

  --paper:    #FFFFFF;
  --paper-50: #FBFAF6;  /* page tint */
  --cream:    #FDF1DA;  /* hero ribbon highlight */

  --success: #2E8B57;
  --danger:  #C24A3C;

  /* ---------- Type ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid-ish scale (1.250 ratio at desktop) */
  --fs-eyebrow: 12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  44px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tr-tight: -0.02em;
  --tr-flat:   0em;
  --tr-eye:    0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-1: 0 1px 2px rgba(11,15,20,0.06), 0 1px 1px rgba(11,15,20,0.04);
  --sh-2: 0 4px 12px rgba(11,15,20,0.06), 0 2px 4px rgba(11,15,20,0.04);
  --sh-3: 0 12px 32px rgba(11,15,20,0.10), 0 4px 8px rgba(11,15,20,0.05);
  --sh-glow: 0 8px 24px rgba(232,162,77,0.35);

  /* ---------- Borders ---------- */
  --bw: 1px;
  --bw-2: 2px;
  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 380ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 920px;
}

/* ============================================================
   Base reset (shared)
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Utility classes used by both pages
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eye);
  text-transform: uppercase;
  color: var(--ink-500);
}
.h-display {
  font-size: clamp(40px, 5.6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 800;
  color: var(--ink-900);
  margin: 0;
}
.h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 800; color: var(--ink-900); margin: 0; }
.h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); font-weight: 800; color: var(--ink-900); margin: 0; }
.h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); font-weight: 700; color: var(--ink-900); margin: 0; }
.h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: 700; color: var(--ink-900); margin: 0; }
.h5 { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: 700; color: var(--ink-900); margin: 0; }
.h6 { font-size: var(--fs-md);  line-height: var(--lh-snug);  font-weight: 700; color: var(--ink-900); margin: 0; }
.body-lg { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink-600); }
.body    { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-600); }
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-500); }
.mark    { color: var(--ink-900); background: var(--orange-300); padding: 0 .2em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brand-orange { color: var(--orange-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: var(--bw) solid transparent;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: transform var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--orange-500); color: var(--ink-900); }
.btn-primary:hover   { background: var(--orange-600); box-shadow: var(--sh-glow); }

.btn-dark      { background: var(--ink-900); color: var(--paper); }
.btn-dark:hover      { background: var(--ink-800); }

.btn-ghost     { background: transparent; color: var(--ink-900); border-color: var(--ink-300); }
.btn-ghost:hover     { border-color: var(--ink-900); }

.btn-on-dark   { background: var(--orange-500); color: var(--ink-900); }
.btn-on-dark:hover   { background: var(--orange-400); }

.btn-sm { padding: 10px 16px; font-size: var(--fs-xs); }
.btn-lg { padding: 18px 28px; font-size: var(--fs-base); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card-cream {
  background: var(--orange-100);
  border-radius: var(--r-xl);
  padding: var(--s-8);
}
.card-dark {
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: var(--s-8);
}

/* ---------- Form ---------- */
.field {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.input, .textarea, .select {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: var(--paper);
  border: var(--bw) solid var(--ink-300);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(232,162,77,0.25);
}
.input::placeholder { color: var(--ink-400); }

/* ---------- Chips / tags ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--orange-100);
  color: var(--orange-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.chip-dark { background: var(--ink-900); color: var(--orange-300); }

/* ---------- Icon plate (the orange rounded square seen in cards) ---------- */
.icon-plate {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--orange-500);
  display: grid; place-items: center;
  color: var(--ink-900);
}
.icon-plate.lg { width: 72px; height: 72px; border-radius: var(--r-lg); }
.icon-plate.dark { background: var(--ink-900); color: var(--orange-500); }

/* ---------- Star separator (used in marquee) ---------- */
.star {
  display: inline-block;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  background: var(--orange-500);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.39 6.96L22 9.27l-5.46 4.73L18.18 22 12 17.77 5.82 22l1.64-7.99L2 9.27l7.61-.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.39 6.96L22 9.27l-5.46 4.73L18.18 22 12 17.77 5.82 22l1.64-7.99L2 9.27l7.61-.3z'/></svg>") center/contain no-repeat;
}

/* ---------- Section spacing ---------- */
.section { padding: var(--s-24) 0; }
.section-tight { padding: var(--s-16) 0; }


/* ████████████████████████████████████████████████████████████
   2 · SITE CHROME + THEME  (was site.css)
   ████████████████████████████████████████████████████████████ */

/* ============================================================
   TNZ Digital — Shared site chrome + theme system
   Builds on tokens.css. Two themes: light (cream) / dark (midnight).
   Applied via [data-theme] on <html>.
   ============================================================ */

/* ---------------- LIGHT (cream) — default ---------------- */
:root,
[data-theme="light"] {
  --paper:    #FDF8EE;
  --paper-50: #F6EEDD;
  --paper-card: #FFFFFF;
  --cream:    #FBEACB;
  --border: #EADFC8;
  --border-strong: #DBCBAA;
  --ink-900: #16110A;
  --ink-800: #221A10;
  --ink-700: #2C2418;
  --ink-600: #4A4234;
  --ink-500: #756B59;
  --ink-400: #9A8F7A;
  --ink-300: #C8BCA3;
  --ink-200: #E3D8C0;
  --ink-100: #F0E7D4;
  --footer-bg: #16110A;
}

/* ---------------- DARK (midnight) ---------------- */
[data-theme="dark"] {
  --paper:    #0C0F14;
  --paper-50: #12161D;
  --paper-card: #161B23;
  --cream:    #1A2029;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --ink-900: #FBFAF6;
  --ink-800: #F0F2F5;
  --ink-700: #DEE3EA;
  --ink-600: #BAC2CD;
  --ink-500: #8A93A0;
  --ink-400: #69727F;
  --ink-300: #3C434E;
  --ink-200: #232A33;
  --ink-100: #161B23;
  --orange-50:  rgba(232,162,77,0.10);
  --orange-100: rgba(232,162,77,0.16);
  --footer-bg: #07090C;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink-700); transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }

/* color helpers that should follow theme */
.surface-card { background: var(--paper-card); }

/* ============================================================
   Brand / logo (theme-adaptive wordmark)
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.brand .wing { width: 34px; height: auto; flex: 0 0 auto; }
.brand .wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: inline-flex;
  gap: 0.34em;
}
.brand .wordmark .digital { color: var(--orange-500); }
.brand--footer .wordmark { color: var(--paper); }
.brand--sm .wing { width: 26px; }
.brand--sm .wordmark { font-size: 17px; }

/* ============================================================
   Top nav
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: var(--s-6); height: 74px; }
.nav-links { display: flex; gap: var(--s-6); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-left: var(--s-8); }
.nav-links a { position: relative; padding: 6px 2px; transition: color var(--d-fast) var(--ease-out); }
.nav-links a:hover { color: var(--orange-600); }
.nav-links a.is-active { color: var(--orange-600); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--orange-500); border-radius: 2px;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--paper-card);
  color: var(--ink-700);
  display: grid; place-items: center;
  transition: all var(--d-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--orange-600); border-color: var(--orange-400); transform: rotate(12deg); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.nav-burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--paper-card); color: var(--ink-800); place-items: center; }

/* mobile menu sheet */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }
.mobile-menu {
  position: fixed; inset: 74px 0 0; z-index: 55;
  background: var(--paper);
  padding: var(--s-8) var(--s-6);
  flex-direction: column; gap: var(--s-2);
  animation: sheetIn var(--d-base) var(--ease-out);
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-menu a { display: block; padding: var(--s-4); font-size: var(--fs-lg); font-weight: 700; color: var(--ink-900); border-bottom: 1px solid var(--border); }

/* ============================================================
   Buttons — refine over tokens.css
   ============================================================ */
.btn-primary { background: var(--orange-500); color: #1C1407; }
.btn-primary:hover { background: var(--orange-400); box-shadow: var(--sh-glow); }
.btn-dark { background: var(--ink-900); color: var(--paper); }
[data-theme="dark"] .btn-dark { background: var(--orange-500); color: #1C1407; }
[data-theme="dark"] .btn-dark:hover { background: var(--orange-400); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--orange-500); color: var(--orange-600); }

/* Client Login — text link in the nav-right cluster */
.nav-login {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
  padding: 8px 6px; transition: color var(--d-fast) var(--ease-out);
}
.nav-login svg { width: 15px; height: 15px; }
.nav-login:hover { color: var(--orange-600); }

/* ============================================================
   Container gutters
   Many sections set vertical padding inline (e.g. style="padding: 50px 0px"),
   which zeroes the container's horizontal padding. On desktop the max-width
   centering hides it; on mobile the content sits flush to the screen edge.
   Enforce side gutters so content never touches the edge.
   ============================================================ */
.container { padding-left: var(--s-6) !important; padding-right: var(--s-6) !important; }
@media (max-width: 600px) { .container { padding-left: var(--s-5) !important; padding-right: var(--s-5) !important; } }

/* ============================================================
   Section heads
   ============================================================ */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.sect-head { max-width: 720px; margin: 0 auto var(--s-12); text-align: center; }
.sect-head.left { text-align: left; margin-left: 0; }
.sect-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4); color: var(--orange-600); }
.sect-head .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--orange-500); }
.sect-head h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; color: var(--ink-900); margin: 0; }
.sect-head h2 em { font-style: normal; color: var(--orange-500); }
.sect-head p { margin: var(--s-4) 0 0; color: var(--ink-500); font-size: var(--fs-md); max-width: 56ch; }
.sect-head.center p { margin-left: auto; margin-right: auto; }

.eyebrow { color: var(--orange-600); }

/* ============================================================
   Marquee
   ============================================================ */
.marquee-strip { background: var(--ink-900); color: var(--paper); padding: var(--s-5) 0; overflow: hidden; }
[data-theme="dark"] .marquee-strip { background: var(--orange-500); color: #1C1407; }
.marquee-track { display: flex; gap: var(--s-10); align-items: center; white-space: nowrap; width: max-content; animation: marquee 34s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; gap: var(--s-10); }
.marquee-item span { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: var(--fs-sm); }
.marquee .star { background: var(--orange-500); }
[data-theme="dark"] .marquee .star { background: #1C1407; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,0.66); padding: clamp(56px,7vw,96px) 0 var(--s-8); }
.site-footer .f-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: var(--s-8) var(--s-10); align-items: start; }
.site-footer h5 { color: #fff; font-size: var(--fs-sm); margin: 0 0 var(--s-4); text-transform: uppercase; letter-spacing: 0.14em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.site-footer a { color: rgba(255,255,255,0.66); }
.site-footer a:hover { color: var(--orange-400); }
.site-footer .tagline { color: rgba(255,255,255,0.55); font-size: var(--fs-sm); margin: var(--s-4) 0 var(--s-6); max-width: 36ch; }
.site-footer .socials { display: flex; gap: var(--s-2); }
.site-footer .socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.07); display: grid; place-items: center; color: rgba(255,255,255,0.8); transition: all var(--d-fast) var(--ease-out); }
.site-footer .socials a:hover { background: var(--orange-500); color: #1C1407; transform: translateY(-2px); }
.site-footer .f-copy { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }

/* ============================================================
   Guarantee badge (shared)
   ============================================================ */
.guarantee-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: var(--r-pill);
  background: var(--orange-100);
  color: var(--orange-700);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .guarantee-badge { color: var(--orange-300); }
.guarantee-badge svg { width: 15px; height: 15px; }

/* ============================================================
   Tweaks panel (vanilla)
   ============================================================ */
.tk-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  height: 46px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--ink-900); color: var(--orange-400); border: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  box-shadow: var(--sh-3);
  transition: transform var(--d-fast) var(--ease-out);
}
[data-theme="dark"] .tk-fab { background: var(--orange-500); color: #1C1407; }
.tk-fab:hover { transform: translateY(-2px); }
.tk-fab svg { width: 16px; height: 16px; }
body.tk-open .tk-fab { display: none; }

.tk-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 201;
  width: 312px; max-height: calc(100vh - 44px); overflow-y: auto;
  background: var(--paper-card); color: var(--ink-700);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.28);
  display: none; font-family: var(--font-sans);
}
.tk-panel.open { display: block; animation: tkIn var(--d-base) var(--ease-out); }
@keyframes tkIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.tk-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.tk-head .t { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-900); }
.tk-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink-500); display: grid; place-items: center; cursor: pointer; }
.tk-x:hover { color: var(--ink-900); }
.tk-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.tk-grp { display: flex; flex-direction: column; gap: 9px; }
.tk-grp > .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500); }
.tk-seg { display: grid; gap: 5px; padding: 4px; background: var(--ink-100); border-radius: 11px; }
.tk-seg.c2 { grid-template-columns: 1fr 1fr; }
.tk-seg.c3 { grid-template-columns: 1fr 1fr 1fr; }
.tk-opt {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 9px 6px; border-radius: 8px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-500);
  transition: all var(--d-fast) var(--ease-out);
}
.tk-opt:hover { color: var(--ink-900); }
.tk-opt.on { background: var(--paper-card); color: var(--ink-900); box-shadow: var(--sh-1); }
[data-theme="dark"] .tk-opt.on { background: var(--orange-500); color: #1C1407; }

/* ============================================================
   Float CTA
   ============================================================ */
.float-cta { position: fixed; left: 22px; bottom: 22px; z-index: 190; height: 46px; padding: 0 18px; border-radius: var(--r-pill); background: var(--orange-500); color: #1C1407; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); box-shadow: var(--sh-3); transition: transform var(--d-fast) var(--ease-out); }
.float-cta:hover { transform: translateY(-2px); }
.float-cta svg { width: 18px; height: 18px; }

/* ============================================================
   Back to top (site-wide, sits above the chat widget)
   ============================================================ */
.back-top {
  position: fixed; right: 22px; bottom: 92px; z-index: 195;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-900); color: var(--orange-400); border: 1px solid var(--border-strong);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), background var(--d-fast) var(--ease-out);
}
[data-theme="dark"] .back-top { background: var(--orange-500); color: #1C1407; border-color: transparent; }
.back-top svg { width: 20px; height: 20px; }
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top.show:hover { transform: translateY(-3px); background: var(--ink-800); }
[data-theme="dark"] .back-top.show:hover { background: var(--orange-400); }
@media (max-width: 920px) { .back-top { bottom: 86px; right: 16px; } }

/* ============================================================
   Tweak: typography voice  (data-type)
   ============================================================ */
[data-type="editorial"] h1, [data-type="editorial"] h2, [data-type="editorial"] h3,
[data-type="editorial"] .sect-head h2, [data-type="editorial"] .hero h1,
[data-type="editorial"] .display, [data-type="editorial"] .pkg h3 {
  font-family: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  font-weight: 400; letter-spacing: -0.005em;
}
[data-type="editorial"] .sect-head h2 em, [data-type="editorial"] .hero .ribbon-word { font-style: italic; }

[data-type="technical"] body, [data-type="technical"] { --font-sans: "Space Grotesk", system-ui, sans-serif; }
[data-type="technical"] h1, [data-type="technical"] h2, [data-type="technical"] h3,
[data-type="technical"] .sect-head h2, [data-type="technical"] .hero h1,
[data-type="technical"] .display, [data-type="technical"] .pkg h3 {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.035em;
}
[data-type="technical"] .eyebrow { letter-spacing: 0.28em; }
[data-type="technical"] .btn { text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   Tweak: density  (data-density)
   ============================================================ */
[data-density="compact"] .section { padding: clamp(40px, 5vw, 68px) 0; }
[data-density="compact"] .sect-head { margin-bottom: var(--s-8); }

/* ============================================================
   Responsive
   ============================================================ */
/* never let a fixed-width heading push the page wider than its column */
h1, h2, h3 { max-width: 100%; }

.mobile-menu .menu-cta { margin-top: var(--s-6); }
.mobile-menu .menu-cta .btn { width: 100%; justify-content: center; border-bottom: none; padding: 14px 18px; font-size: var(--fs-md); }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .mobile-menu { display: none; }
  .mobile-menu.open { display: flex; }
  /* the long header CTA overflows the nav on phones — it lives in the menu instead */
  .site-nav .nav-right > .btn { display: none; }
  .site-nav .nav-login { display: none; }
  .site-footer .f-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 560px) {
  .site-footer .f-grid { grid-template-columns: 1fr; }
  .float-cta { display: none; }
}


/* ████████████████████████████████████████████████████████████
   3 · LEGAL / POLICY PAGES  (was legal.css)
   ████████████████████████████████████████████████████████████ */

/* ============================================================
   TNZ Digital — Legal / policy page styles
   Shared across Terms, Privacy, Cookie, Disclaimer, Accessibility.
   Builds on tokens.css + site.css.
   ============================================================ */

/* ---------------- HEADER BAND ---------------- */
.legal-head {
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  color: #fff;
  padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 72px);
}
.legal-head::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(232,162,77,0.06) 0 1px, transparent 1px 26px);
  pointer-events: none;
}
.legal-head::after {
  content: "";
  position: absolute; right: -8%; top: -30%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(232,162,77,0.18) 0%, transparent 68%);
  pointer-events: none;
}
.legal-head .container { position: relative; z-index: 1; }
.legal-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-5);
}
.legal-crumbs a { color: rgba(255,255,255,0.66); }
.legal-crumbs a:hover { color: var(--orange-400); }
.legal-crumbs svg { width: 13px; height: 13px; opacity: 0.5; }
.legal-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange-400); margin-bottom: var(--s-4);
}
.legal-head .eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--orange-400); }
.legal-head h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 800;
  color: #fff; margin: 0 0 var(--s-5); max-width: 18ch;
}
.legal-head .lede {
  font-size: var(--fs-md); color: rgba(255,255,255,0.72);
  max-width: 58ch; line-height: 1.6; margin: 0 0 var(--s-6);
}
.legal-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-2);
}
.legal-meta .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.01em;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
.legal-meta .pill svg { width: 14px; height: 14px; color: var(--orange-400); }
.legal-meta .pill b { color: #fff; font-weight: 700; }

/* ---------------- BODY: TOC + PROSE ---------------- */
.legal-body { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); }
.legal-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* sticky table of contents */
.legal-toc {
  position: sticky; top: 92px;
  align-self: start;
}
.legal-toc .toc-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-500);
  margin: 0 0 var(--s-4); padding-left: 14px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-500);
  border-left: 2px solid transparent;
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-400); flex: 0 0 auto;
}
.legal-toc a:hover { color: var(--ink-900); background: var(--ink-100); }
.legal-toc a.active {
  color: var(--orange-700); background: var(--orange-50);
  border-left-color: var(--orange-500); font-weight: 600;
}
[data-theme="dark"] .legal-toc a.active { color: var(--orange-300); }

/* prose */
.legal-prose { max-width: 760px; min-width: 0; }
.legal-prose > section { scroll-margin-top: 92px; padding-top: var(--s-4); }
.legal-prose > section + section {
  margin-top: var(--s-12);
  padding-top: var(--s-10);
  border-top: 1px solid var(--border);
}
.legal-prose h2 {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 800; color: var(--ink-900);
  margin: 0 0 var(--s-5);
}
.legal-prose h2 .sn {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--orange-600); flex: 0 0 auto; transform: translateY(-2px);
}
.legal-prose h3 {
  font-size: var(--fs-lg); font-weight: 700; color: var(--ink-900);
  margin: var(--s-8) 0 var(--s-3); letter-spacing: -0.01em;
}
.legal-prose p { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-600); margin: 0 0 var(--s-4); text-wrap: pretty; }
.legal-prose strong { color: var(--ink-900); font-weight: 700; }
.legal-prose a:not(.btn) { color: var(--orange-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--orange-300); }
.legal-prose a:not(.btn):hover { text-decoration-color: var(--orange-600); }
[data-theme="dark"] .legal-prose a:not(.btn) { color: var(--orange-300); }
.legal-prose ul, .legal-prose ol.list { margin: 0 0 var(--s-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-prose ul li { position: relative; padding-left: 26px; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-600); }
.legal-prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500);
}
.legal-prose ol.list { counter-reset: ol; }
.legal-prose ol.list > li { position: relative; padding-left: 30px; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-600); counter-increment: ol; }
.legal-prose ol.list > li::before {
  content: counter(ol) "."; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--orange-600);
}
.legal-prose li strong { color: var(--ink-900); }

/* callout / note box */
.legal-note {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5) var(--s-6); margin: var(--s-6) 0;
  background: var(--orange-50); border: 1px solid var(--orange-200);
  border-radius: var(--r-lg);
}
[data-theme="dark"] .legal-note { background: rgba(232,162,77,0.08); border-color: rgba(232,162,77,0.28); }
.legal-note .ni {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--orange-500); color: #1C1407; display: grid; place-items: center;
}
.legal-note .ni svg { width: 19px; height: 19px; }
.legal-note p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-700); }
.legal-note p strong { color: var(--ink-900); }

/* definition / key-value rows */
.legal-defs { display: flex; flex-direction: column; gap: 0; margin: var(--s-5) 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.legal-defs .row { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-5); padding: var(--s-4) var(--s-6); background: var(--paper-card); }
.legal-defs .row + .row { border-top: 1px solid var(--border); }
.legal-defs .row dt { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
.legal-defs .row dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }

/* data / cookie table */
.legal-table-wrap { margin: var(--s-5) 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-table thead th {
  text-align: left; padding: 13px 18px;
  background: var(--ink-900); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
[data-theme="dark"] .legal-table thead th { background: var(--orange-500); color: #1C1407; }
.legal-table tbody td { padding: 13px 18px; border-top: 1px solid var(--border); color: var(--ink-600); line-height: 1.55; vertical-align: top; background: var(--paper-card); }
.legal-table tbody tr:nth-child(even) td { background: var(--paper-50); }
.legal-table tbody td strong { color: var(--ink-900); font-weight: 700; }
.legal-table tbody td .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-700); }
.legal-table .tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-600);
}
.legal-table .tag.req { background: color-mix(in srgb, var(--orange-500) 18%, transparent); color: var(--orange-700); }
[data-theme="dark"] .legal-table .tag.req { color: var(--orange-300); }

/* contact card at end */
.legal-contact {
  margin-top: var(--s-12); padding: clamp(28px, 4vw, 44px);
  background: var(--paper-card); border: 1px solid var(--border);
  border-radius: var(--r-2xl); display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); align-items: center;
}
.legal-contact h3 { margin: 0 0 var(--s-2); font-size: var(--fs-xl); color: var(--ink-900); }
.legal-contact p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.6; }
.legal-contact .lc-lines { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.legal-contact .lc-lines a, .legal-contact .lc-lines span { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--ink-700); font-weight: 600; }
.legal-contact .lc-lines svg { width: 16px; height: 16px; color: var(--orange-600); flex: 0 0 16px; }

/* cross-links to sibling policies */
.legal-related { margin-top: var(--s-10); }
.legal-related .rl-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 var(--s-4); }
.legal-related .rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.legal-related a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper-card); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-800);
  transition: all var(--d-fast) var(--ease-out);
}
.legal-related a:hover { border-color: var(--orange-300); background: var(--orange-50); color: var(--orange-700); transform: translateY(-2px); }
[data-theme="dark"] .legal-related a:hover { color: var(--orange-300); }
.legal-related a svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.6; }
.legal-related a.current { border-style: dashed; opacity: 0.55; pointer-events: none; }

/* mobile TOC as a collapsible */
.legal-toc-mobile { display: none; }

@media (max-width: 920px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .legal-toc { display: none; }
  .legal-contact { grid-template-columns: 1fr; }
  .legal-defs .row { grid-template-columns: 1fr; gap: 4px; }
  .legal-toc-mobile { display: block; margin-bottom: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper-card); overflow: hidden; }
  .legal-toc-mobile summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 700; color: var(--ink-900); display: flex; align-items: center; justify-content: space-between; }
  .legal-toc-mobile summary::-webkit-details-marker { display: none; }
  .legal-toc-mobile summary svg { width: 18px; height: 18px; transition: transform var(--d-base) var(--ease-out); }
  .legal-toc-mobile[open] summary svg { transform: rotate(180deg); }
  .legal-toc-mobile ol { list-style: none; margin: 0; padding: 0 var(--s-3) var(--s-3); counter-reset: tocm; }
  .legal-toc-mobile li { counter-increment: tocm; }
  .legal-toc-mobile a { display: flex; gap: 10px; padding: 9px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-600); }
  .legal-toc-mobile a::before { content: counter(tocm, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
  .legal-toc-mobile a:hover { background: var(--ink-100); color: var(--ink-900); }
}


/* ████████████████████████████████████████████████████████████
   4a · HOMEPAGE  (was inline in index.html)
   ████████████████████████████████████████████████████████████ */

  /* ---------------- HERO ---------------- */
  .hero { position: relative; overflow: hidden; padding: clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px); }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-12); align-items: center; }
  .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-5); }
  .hero .eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--orange-500); }
  .hero h1 { font-size: clamp(38px, 5.4vw, 76px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; color: var(--ink-900); margin: 0 0 var(--s-5); }
  .hero h1 .ribbon-word { display: inline-block; background: var(--orange-500); color: #1C1407; padding: 0 .16em; border-radius: 8px; transform: rotate(-1.2deg); }
  .hero p.lede { font-size: var(--fs-md); color: var(--ink-500); max-width: 52ch; margin: 0 0 var(--s-8); line-height: 1.6; }
  .hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--border); }
  .hero-stats .n { font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); }
  .hero-stats .l { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 2px; line-height: 1.35; }

  .hero-art { aspect-ratio: 1/1; border-radius: var(--r-2xl); background: radial-gradient(ellipse at 60% 38%, var(--orange-100) 0%, var(--paper-50) 72%); display: grid; place-items: center; position: relative; border: 1px solid var(--border); }
  .hero-art::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-2xl); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--orange-500) 8%, transparent) 0 1px, transparent 1px 22px); }
  .hero-art .wing-big { width: 62%; filter: drop-shadow(0 16px 30px rgba(232,162,77,0.32)); animation: floaty 6s var(--ease-in-out) infinite; position: relative; z-index: 2; }
  .hero-badge { position: absolute; z-index: 3; background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sh-2); display: flex; align-items: center; gap: 10px; }
  .hero-badge .dot { width: 32px; height: 32px; border-radius: 9px; background: var(--orange-500); color: #1C1407; display: grid; place-items: center; flex: 0 0 32px; }
  .hero-badge .bt { font-weight: 800; color: var(--ink-900); font-size: var(--fs-sm); line-height: 1; }
  .hero-badge .bs { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 3px; }
  .hero-badge.tl { top: 8%; left: -4%; }
  .hero-badge.br { bottom: 9%; right: -5%; }
  @keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
  @media (prefers-reduced-motion: reduce){ .hero-art .wing-big{animation:none;} }

  [data-hero="centered"] .hero-grid { grid-template-columns: 1fr; text-align: center; max-width: 920px; margin: 0 auto; }
  [data-hero="centered"] .hero-art { display: none; }
  [data-hero="centered"] .hero .eyebrow, [data-hero="centered"] .hero-cta { justify-content: center; }
  [data-hero="centered"] .hero p.lede { margin-left: auto; margin-right: auto; }
  [data-hero="centered"] .hero-stats { max-width: 760px; margin-left: auto; margin-right: auto; }

  .hero-guarantee { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s-5); padding: 9px 15px; border-radius: var(--r-pill); background: var(--orange-50); border: 1px solid var(--orange-200); color: var(--orange-700); font-size: var(--fs-sm); font-weight: 700; }
  [data-theme="dark"] .hero-guarantee { color: var(--orange-300); border-color: rgba(232,162,77,0.3); }
  .hero-guarantee svg { width: 17px; height: 17px; flex: 0 0 17px; }

  /* ---------------- SCROLL CUE ---------------- */
  .hero-foot { display: flex; justify-content: center; margin-top: clamp(28px,4vw,52px); }
  .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-500); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: color var(--d-base) var(--ease-out); }
  .scroll-cue:hover { color: var(--orange-600); }
  .scroll-cue .sc-dot { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; animation: scrollBob 1.8s var(--ease-in-out) infinite; }
  .scroll-cue:hover .sc-dot { border-color: var(--orange-400); }
  .scroll-cue svg { width: 15px; height: 15px; }
  @keyframes scrollBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }
  @media (prefers-reduced-motion: reduce){ .scroll-cue .sc-dot { animation: none; } }

  /* ---------------- PROBLEM (name the pain) ---------------- */
  .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .pain { padding: var(--s-8) var(--s-6); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--paper-card); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); }
  .pain:hover { border-color: var(--orange-300); box-shadow: var(--sh-2); transform: translateY(-3px); }
  .pain .pain-ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ink-100); color: var(--ink-600); margin-bottom: var(--s-5); }
  .pain .pain-ic svg { width: 24px; height: 24px; }
  .pain h4 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); color: var(--ink-900); }
  .pain p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }
  .problem-turn { margin-top: var(--s-6); padding: var(--s-6) clamp(20px,3vw,40px); border-radius: var(--r-xl); background: var(--orange-50); border: 1px solid var(--orange-200); display: flex; align-items: center; justify-content: center; gap: var(--s-5) var(--s-8); flex-wrap: wrap; text-align: center; }
  [data-theme="dark"] .problem-turn { background: rgba(232,162,77,0.08); border-color: rgba(232,162,77,0.28); }
  .problem-turn p { margin: 0; font-size: var(--fs-md); color: var(--ink-700); max-width: 62ch; line-height: 1.55; }
  .problem-turn p b { color: var(--orange-700); font-weight: 800; }
  [data-theme="dark"] .problem-turn p b { color: var(--orange-300); }
  .problem-turn .btn { flex: 0 0 auto; }
  @media (max-width: 920px){ .problem-grid { grid-template-columns: 1fr; } }

  /* ---------------- PROOF / TRACK RECORD ---------------- */
  .proof-band { background: var(--footer-bg); color: #fff; border-radius: var(--r-2xl); padding: clamp(32px,4.5vw,68px); position: relative; overflow: hidden; }
  [data-theme="dark"] .proof-band { border: 1px solid var(--border); }
  .proof-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(232,162,77,0.05) 0 1px, transparent 1px 26px); pointer-events: none; }
  .proof-head { position: relative; z-index: 1; max-width: 760px; }
  .proof-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-400); margin-bottom: var(--s-4); }
  .proof-head .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--orange-400); }
  .proof-head h2 { font-size: clamp(28px,3.6vw,48px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 0; }
  .proof-head h2 em { font-style: normal; color: var(--orange-400); }
  .proof-head p { color: rgba(255,255,255,0.68); font-size: var(--fs-md); margin: var(--s-4) 0 0; max-width: 60ch; line-height: 1.6; }

  .proof-grid-lg { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-4); margin-top: var(--s-10); }
  .proof-grid-sm { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
  .proof-stat { padding: var(--s-6); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); background: rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: var(--s-3); transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); }
  .proof-stat:hover { border-color: rgba(232,162,77,0.4); background: rgba(255,255,255,0.06); }
  .proof-stat .pn { font-size: clamp(30px,3.2vw,46px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
  .proof-stat .pn .pu { font-size: 0.5em; color: var(--orange-400); margin-left: 2px; vertical-align: baseline; }
  .proof-stat .pl { font-size: var(--fs-sm); color: rgba(255,255,255,0.66); line-height: 1.5; }
  .proof-stat .pl b { color: rgba(255,255,255,0.92); font-weight: 700; }
  .proof-stat.feat { background: var(--orange-500); border-color: transparent; justify-content: space-between; }
  .proof-stat.feat .pn { color: #1C1407; font-size: clamp(48px,5.4vw,82px); }
  .proof-stat.feat .pl { color: rgba(28,20,7,0.82); font-size: var(--fs-md); }
  .proof-stat.feat .pl b { color: #1C1407; }
  .proof-stat.feat:hover { background: var(--orange-400); }
  .proof-foot { position: relative; z-index: 1; margin: var(--s-6) 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.4); letter-spacing: 0.01em; }

  /* ---------------- FOUNDER CREDENTIALS ---------------- */
  .cred-row { margin-top: var(--s-6); }
  .cred-row .cred-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s-3); }
  .cred-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .cred { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; padding: 6px 11px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--border); color: var(--ink-700); }

  /* ---------------- IMPACT BANDS ---------------- */
  .impact-list { display: flex; flex-direction: column; gap: var(--s-5); }
  .impact { display: grid; grid-template-columns: 240px 1fr auto; gap: var(--s-8); align-items: center; padding: var(--s-8); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--paper-card); transition: all var(--d-base) var(--ease-out); }
  .impact:hover { border-color: var(--orange-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .impact .tier-tag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); width: max-content; }
  .impact.high .tier-tag { background: color-mix(in srgb, var(--orange-500) 18%, transparent); color: var(--orange-700); }
  [data-theme="dark"] .impact.high .tier-tag { color: var(--orange-300); }
  .impact.med .tier-tag { background: color-mix(in srgb, var(--ink-500) 16%, transparent); color: var(--ink-700); }
  .impact.low .tier-tag { background: var(--ink-100); color: var(--ink-600); }
  .impact h3 { font-size: var(--fs-xl); margin: var(--s-3) 0 6px; color: var(--ink-900); }
  .impact .kpi { font-size: var(--fs-sm); color: var(--ink-500); }
  .impact .kpi b { color: var(--orange-600); font-weight: 700; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .schip { font-size: var(--fs-xs); font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-700); }
  .impact .go { width: 46px; height: 46px; border-radius: 50%; background: var(--ink-900); color: var(--orange-400); display: grid; place-items: center; flex: 0 0 46px; transition: all var(--d-base) var(--ease-out); }
  [data-theme="dark"] .impact .go { background: var(--orange-500); color: #1C1407; }
  .impact:hover .go { transform: translateX(4px); }

  /* ---------------- STEPS ---------------- */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .step { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); position: relative; transition: all var(--d-base) var(--ease-out); }
  .step:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--orange-300); }

  /* climbing trajectory: cards ascend left→right, with a soft dotted flight path behind */
  .steps.with-trajectory { position: relative; }
  .steps.with-trajectory .step { position: relative; z-index: 1; }
  @media (min-width: 921px) {
    .steps.with-trajectory { padding-top: 18px; }
    .steps.with-trajectory .step:nth-child(1) { margin-top: 54px; }
    .steps.with-trajectory .step:nth-child(2) { margin-top: 36px; }
    .steps.with-trajectory .step:nth-child(3) { margin-top: 18px; }
    .steps.with-trajectory .step:nth-child(4) { margin-top: 0; }
    .steps.with-trajectory::before {
      content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; top: 52%;
      height: 0; border-top: 2px dotted var(--orange-300);
      transform: rotate(-7deg); transform-origin: center; opacity: 0.55; pointer-events: none;
    }
  }

  /* gentle climb for the Method cards too */
  @media (min-width: 921px) {
    .method-grid.with-climb .method-card:nth-child(1) { margin-top: 36px; }
    .method-grid.with-climb .method-card:nth-child(2) { margin-top: 18px; }
    .method-grid.with-climb .method-card:nth-child(3) { margin-top: 0; }
  }

  /* ---------------- RISE ON SCROLL ---------------- */
  .rise .hero-stats > div,
  .rise .proof-grid-lg .proof-stat,
  .rise .proof-grid-sm .proof-stat {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .rise .hero-stats > div.lift,
  .rise .proof-stat.lift { opacity: 1; transform: none; }
  .step .num { font-size: 56px; font-weight: 800; color: var(--orange-500); line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s-4); opacity: 0.95; }
  .step h4 { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-900); margin: 0 0 var(--s-2); }
  .step p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }

  /* ---------------- WHY ---------------- */
  .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .why-item { display: flex; gap: var(--s-5); align-items: flex-start; padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper-card); transition: all var(--d-base) var(--ease-out); }
  .why-item:hover { border-color: var(--orange-300); background: var(--orange-50); }
  .why-item .icon-plate { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--orange-500); color: #1C1407; display: grid; place-items: center; }
  .why-item h4 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--ink-900); }
  .why-item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }

  /* ---------------- PACKAGES ---------------- */
  .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); align-items: stretch; }
  .pkg { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); position: relative; transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
  .pkg:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
  .pkg.featured { background: var(--ink-900); color: var(--paper); transform: translateY(-10px); border-color: transparent; }
  [data-theme="dark"] .pkg.featured { background: var(--orange-500); color: #1C1407; }
  .pkg.featured:hover { transform: translateY(-16px); }
  .pkg .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange-500); color: #1C1407; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 13px; border-radius: var(--r-pill); white-space: nowrap; }
  [data-theme="dark"] .pkg.featured .badge { background: #1C1407; color: var(--orange-400); }
  .pkg .pname { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ink-900); }
  .pkg.featured .pname { color: var(--paper); }
  [data-theme="dark"] .pkg.featured .pname { color: #1C1407; }
  .pkg .blurb { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; line-height: 1.55; min-height: 3em; }
  .pkg.featured .blurb { color: rgba(255,255,255,0.72); }
  [data-theme="dark"] .pkg.featured .blurb { color: rgba(28,20,7,0.72); }
  .pkg .price { display: flex; align-items: baseline; gap: 4px; }
  .pkg .price .amt { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); }
  .pkg.featured .price .amt { color: var(--paper); }
  [data-theme="dark"] .pkg.featured .price .amt { color: #1C1407; }
  .pkg .price .per { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); }
  .pkg.featured .price .per { color: rgba(255,255,255,0.6); }
  [data-theme="dark"] .pkg.featured .price .per { color: rgba(28,20,7,0.62); }
  .pkg .psub { font-size: var(--fs-xs); color: var(--ink-500); margin: -4px 0 0; }
  .pkg.featured .psub { color: rgba(255,255,255,0.6); }
  [data-theme="dark"] .pkg.featured .psub { color: rgba(28,20,7,0.6); }
  .pkg ul.feat { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
  .pkg.featured ul.feat { border-color: rgba(255,255,255,0.18); }
  [data-theme="dark"] .pkg.featured ul.feat { border-color: rgba(28,20,7,0.18); }
  .pkg ul.feat li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-700); }
  .pkg.featured ul.feat li { color: rgba(255,255,255,0.86); }
  [data-theme="dark"] .pkg.featured ul.feat li { color: rgba(28,20,7,0.86); }
  .pkg ul.feat li svg { width: 17px; height: 17px; color: var(--orange-500); flex: 0 0 17px; margin-top: 1px; }
  .pkg.featured ul.feat li svg { color: var(--orange-400); }
  [data-theme="dark"] .pkg.featured ul.feat li svg { color: #1C1407; }
  .pkg .gb-wrap { margin-top: auto; padding-top: var(--s-4); }
  .pkg .btn { justify-content: center; margin-top: var(--s-2); }

  /* compact packages variant */
  [data-packages="table"] .pkg-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  [data-packages="table"] .pkg { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-6); transform: none !important; padding: var(--s-6) var(--s-8); }
  [data-packages="table"] .pkg .blurb { min-height: 0; flex: 1 1 220px; }
  [data-packages="table"] .pkg ul.feat { display: none; }
  [data-packages="table"] .pkg .badge { position: static; transform: none; }
  [data-packages="table"] .pkg .gb-wrap { margin: 0; padding: 0; }

  /* ---------------- PPC TEASER ---------------- */
  .ppc-band { background: var(--footer-bg); color: var(--paper); border-radius: var(--r-2xl); padding: clamp(36px,5vw,72px); display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--s-12); align-items: center; overflow: hidden; position: relative; }
  [data-theme="dark"] .ppc-band { border: 1px solid var(--border); }
  .ppc-band h2 { font-size: clamp(28px,3.4vw,46px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 0 0 var(--s-4); }
  .ppc-band h2 em { font-style: normal; color: var(--orange-400); }
  .ppc-band p { color: rgba(255,255,255,0.7); font-size: var(--fs-md); margin: 0 0 var(--s-6); max-width: 46ch; }
  .ppc-mini { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); overflow: hidden; }
  .ppc-mini .row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .ppc-mini .row:last-child { border-bottom: none; }
  .ppc-mini .row .t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--orange-400); }
  .ppc-mini .row .s { font-size: var(--fs-sm); color: rgba(255,255,255,0.78); }
  .ppc-mini .row .f { font-size: var(--fs-md); font-weight: 800; color: var(--paper); }
  .ppc-mini .row.head { background: rgba(255,255,255,0.04); }
  .ppc-mini .row.head span { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

  /* ---------------- VERTICALS ---------------- */
  .verts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .vert { padding: var(--s-8); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--paper-card); }
  .vert .vh { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
  .vert .vh .icon-plate { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--orange-500); color: #1C1407; display: grid; place-items: center; flex: 0 0 48px; }
  .vert .vh h3 { margin: 0; font-size: var(--fs-xl); color: var(--ink-900); }
  .vert .vh small { color: var(--ink-500); font-size: var(--fs-xs); }
  .vert ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .vert ul li { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-700); }
  .vert ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); flex: 0 0 6px; }

  /* ---------------- CONTACT ---------------- */
  .contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-12); align-items: start; }
  .contact-info h2 { font-size: clamp(30px,3.6vw,48px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: var(--ink-900); margin: 0 0 var(--s-5); }
  .contact-info h2 em { color: var(--orange-500); font-style: normal; }
  .contact-info p { color: var(--ink-500); font-size: var(--fs-md); margin: 0 0 var(--s-8); max-width: 42ch; }
  .channels { display: flex; flex-direction: column; gap: var(--s-3); }
  .channel { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-md); }
  .channel .icon-plate { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--orange-100); color: var(--orange-700); display: grid; place-items: center; flex: 0 0 44px; }
  [data-theme="dark"] .channel .icon-plate { color: var(--orange-300); }
  .channel small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-bottom: 2px; }
  .channel strong { color: var(--ink-900); font-size: var(--fs-md); }
  .form-card { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: var(--s-4); }
  .form-card h3 { margin: 0; color: var(--ink-900); }
  .form-card .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .field label { color: var(--ink-700); }
  .input, .textarea, .select { background: var(--paper); border-color: var(--border-strong); color: var(--ink-900); }
  .chk-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .chk { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; }
  .chk input { width: 16px; height: 16px; accent-color: var(--orange-500); }

  @media (max-width: 920px) {
    .hero-grid, .ppc-band, .verts, .contact { grid-template-columns: 1fr; }
    .hero-art { display: none; }
    .steps, .why-grid, .pkg-grid { grid-template-columns: 1fr; }
    .pkg.featured { transform: none; }
    .impact { grid-template-columns: 1fr; gap: var(--s-4); }
    .impact .go { display: none; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
    .form-card .grid-2, .chk-row { grid-template-columns: 1fr; }
    .proof-grid-lg { grid-template-columns: 1fr; }
    .proof-grid-sm { grid-template-columns: 1fr 1fr; }
  }

  /* ---------------- METHOD (Impact Ladder) ---------------- */
  .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .method-card { position: relative; padding: var(--s-8) var(--s-6) var(--s-6); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--paper-card); overflow: hidden; transition: all var(--d-base) var(--ease-out); }
  .method-card:hover { border-color: var(--orange-300); box-shadow: var(--sh-2); transform: translateY(-3px); }
  .method-card .mnum { position: absolute; top: 10px; right: 18px; font-size: 72px; font-weight: 800; color: var(--ink-100); line-height: 1; letter-spacing: -0.04em; z-index: 0; }
  .method-card .step-n { position: relative; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-600); }
  .method-card h4 { position: relative; z-index: 1; margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-xl); color: var(--ink-900); }
  .method-card p { position: relative; z-index: 1; margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }

  /* ---------------- ABOUT / FOUNDER ---------------- */
  .about { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--s-12); align-items: center; }
  .about-photo { aspect-ratio: 4/5; border-radius: var(--r-2xl); border: 1px solid var(--border); background: var(--paper-50); display: grid; place-items: center; position: relative; overflow: hidden; }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
  .about-photo .ph { font-family: var(--font-mono); font-size: 12px; color: var(--ink-400); background: var(--paper-card); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); }
  .about-copy h2 { font-size: clamp(28px,3.4vw,46px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: var(--ink-900); margin: var(--s-3) 0 var(--s-4); }
  .about-copy h2 em { font-style: normal; color: var(--orange-500); }
  .about-copy p { color: var(--ink-500); font-size: var(--fs-md); margin: 0 0 var(--s-4); max-width: 56ch; line-height: 1.6; }
  .founder-note { margin-top: var(--s-6); padding: var(--s-5) var(--s-6); border-left: 3px solid var(--orange-500); background: var(--orange-50); border-radius: 0 var(--r-md) var(--r-md) 0; }
  .founder-note p { font-style: italic; color: var(--ink-700); margin: 0 0 var(--s-3); font-size: var(--fs-md); }
  .founder-sign { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
  .founder-sign span small { display: block; font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs); }

  /* ---------------- AUDIT + QUALIFIER ---------------- */
  .audit { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: stretch; }
  .audit-offer { background: var(--footer-bg); color: #fff; border-radius: var(--r-2xl); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; }
  [data-theme="dark"] .audit-offer { border: 1px solid var(--border); }
  .audit-offer .eyebrow { color: var(--orange-400); }
  .audit-offer h3 { color: #fff; font-size: clamp(24px,2.8vw,34px); letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-4); line-height: 1.1; }
  .audit-offer h3 em { font-style: normal; color: var(--orange-400); }
  .audit-offer ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .audit-offer li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-sm); color: rgba(255,255,255,0.82); }
  .audit-offer li svg { width: 18px; height: 18px; color: var(--orange-400); flex: 0 0 18px; margin-top: 1px; }
  .audit-offer .btn { margin-top: auto; align-self: flex-start; }
  .qual-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); background: var(--paper-card); }
  .qual-card + .qual-card { margin-top: var(--s-4); }
  .qual-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s-3); font-size: var(--fs-md); color: var(--ink-900); }
  .qual-card h4 svg { width: 20px; height: 20px; }
  .qual-card.good h4 svg { color: var(--success); }
  .qual-card.no h4 svg { color: var(--ink-400); }
  .qual-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .qual-card li { font-size: var(--fs-sm); color: var(--ink-600); display: flex; gap: 9px; line-height: 1.45; }
  .qual-card li::before { font-weight: 800; flex: 0 0 auto; }
  .qual-card.good li::before { content: "✓"; color: var(--success); }
  .qual-card.no li::before { content: "–"; color: var(--ink-400); }

  /* ---------------- WORK BAND ---------------- */
  .work-band { text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-2xl); padding: clamp(36px,5vw,64px); background: var(--paper-card); }
  .work-band .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); color: var(--orange-600); }
  .work-band h2 { font-size: clamp(26px,3.2vw,42px); letter-spacing: -0.025em; font-weight: 800; color: var(--ink-900); margin: 0 0 var(--s-3); }
  .work-band h2 em { font-style: normal; color: var(--orange-500); }
  .work-band p { color: var(--ink-500); font-size: var(--fs-md); margin: 0 auto var(--s-6); max-width: 52ch; }

  @media (max-width: 920px) {
    .method-grid { grid-template-columns: 1fr; }
    .about, .audit { grid-template-columns: 1fr; }
    .about-photo { max-width: 360px; }
  }

  /* trust strip (replaces marquee) */
  .trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--paper-card); padding: var(--s-5) 0; }
  .trust-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4) var(--s-8); flex-wrap: wrap; }
  .trust-lead { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
  .trust-lead b { color: var(--orange-600); font-weight: 800; }
  .trust-logos { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: center; }
  .trust-logos span { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-500); }

  /* testimonials */
  .tmony-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .tmony { padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--paper-card); display: flex; flex-direction: column; gap: var(--s-4); }
  .tmony .stars { display: flex; gap: 3px; color: var(--orange-500); }
  .tmony .stars svg { width: 15px; height: 15px; }
  .tmony blockquote { margin: 0; font-size: var(--fs-md); color: var(--ink-700); line-height: 1.55; font-style: italic; }
  .tmony .who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
  .tmony .who .av { width: 38px; height: 38px; border-radius: 50%; background: var(--orange-100); color: var(--orange-700); display: grid; place-items: center; font-weight: 800; flex: 0 0 38px; }
  [data-theme="dark"] .tmony .who .av { color: var(--orange-300); }
  .tmony .who .nm { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
  .tmony .who .nm small { display: block; font-weight: 500; color: var(--ink-500); }
  .tmony.slot { border-style: dashed; }
  .tmony.slot blockquote { color: var(--ink-400); }
  @media (max-width: 920px) { .tmony-grid { grid-template-columns: 1fr; } }

/* ████████████████████████████████████████████████████████████
   4b · SERVICES  (was inline in services.html)
   ████████████████████████████████████████████████████████████ */

  .s-hero { padding: clamp(44px,5vw,80px) 0 0; }
  .s-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom: var(--s-4); }
  .s-hero .eyebrow::before { content:""; width:20px; height:1.5px; background: var(--orange-500); }
  .s-hero h1 { font-size: clamp(34px,5vw,64px); line-height:1.04; letter-spacing:-0.03em; font-weight:800; color: var(--ink-900); margin: 0 0 var(--s-4); max-width: 16ch; }
  .s-hero h1 em { font-style: normal; color: var(--orange-500); }
  .s-hero p { font-size: var(--fs-md); color: var(--ink-500); max-width: 56ch; margin: 0; }

  /* impact band header */
  .band { margin-top: clamp(48px,6vw,88px); }
  .band-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-5); margin-bottom: var(--s-6); border-bottom: 2px solid var(--border); }
  .band-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
  .band.high .band-tag { background: color-mix(in srgb, var(--orange-500) 18%, transparent); color: var(--orange-700); }
  [data-theme="dark"] .band.high .band-tag { color: var(--orange-300); }
  .band.med .band-tag { background: color-mix(in srgb, var(--ink-500) 16%, transparent); color: var(--ink-700); }
  .band.low .band-tag { background: var(--ink-100); color: var(--ink-600); }
  .band-head h2 { font-size: clamp(24px,2.8vw,36px); letter-spacing: -0.02em; font-weight: 800; color: var(--ink-900); margin: 0; white-space: nowrap; }
  .band-head .bsub { color: var(--ink-500); font-size: var(--fs-sm); margin-left: auto; }
  .band-head .bsub b { color: var(--orange-600); font-weight: 700; }

  .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .svc-card { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--paper-card); padding: var(--s-6) var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); transition: all var(--d-base) var(--ease-out); }
  .svc-card:hover { border-color: var(--orange-300); box-shadow: var(--sh-2); transform: translateY(-3px); }
  .svc-top { display: flex; align-items: flex-start; gap: var(--s-4); }
  .svc-top .icon-plate { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--orange-500); color: #1C1407; display: grid; place-items: center; flex: 0 0 50px; }
  .svc-top .st-name { flex: 1; }
  .svc-top h3 { margin: 0; font-size: var(--fs-lg); color: var(--ink-900); line-height: 1.2; }
  .svc-top .price { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; }
  .svc-top .price b { color: var(--orange-600); font-weight: 800; font-size: var(--fs-sm); }
  .kpi-primary { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--orange-50); border: 1px solid var(--orange-100); color: var(--ink-900); font-size: var(--fs-sm); font-weight: 700; padding: 8px 13px; border-radius: var(--r-pill); }
  .kpi-primary svg { width: 15px; height: 15px; color: var(--orange-600); }
  [data-theme="dark"] .kpi-primary { color: var(--ink-800); }
  .kpi-secondary { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
  .kpi-secondary b { color: var(--ink-700); font-weight: 700; }
  .svc-focus { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px dashed var(--border); }
  .focus { font-size: var(--fs-xs); }
  .focus .fh { display: flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 5px; font-size: 10.5px; }
  .focus .fh svg { width: 13px; height: 13px; color: var(--orange-500); }
  .focus p { margin: 0; color: var(--ink-600); line-height: 1.5; }

  .svc-cta { margin-top: clamp(48px,6vw,88px); background: var(--footer-bg); color: var(--paper); border-radius: var(--r-2xl); padding: clamp(36px,5vw,64px); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center; }
  [data-theme="dark"] .svc-cta { border: 1px solid var(--border); }
  .svc-cta h2 { font-size: clamp(26px,3.2vw,42px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 0 0 var(--s-3); }
  .svc-cta h2 em { font-style: normal; color: var(--orange-400); }
  .svc-cta p { color: rgba(255,255,255,0.7); font-size: var(--fs-md); margin: 0; }
  .svc-cta .actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }

  @media (max-width: 920px) {
    .svc-grid { grid-template-columns: 1fr; }
    .band-head .bsub { margin-left: 0; width: 100%; }
    .svc-cta { grid-template-columns: 1fr; }
    .svc-cta .actions { justify-content: flex-start; }
  }
  @media (max-width: 520px) { .svc-focus { grid-template-columns: 1fr; } }

  /* pricing-model pill */
  .model-pill { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--ink-900); color: var(--orange-400); white-space: nowrap; flex: 0 0 auto; }
  [data-theme="dark"] .model-pill { background: var(--orange-500); color: #1C1407; }

  /* per-card deliverables */
  .svc-includes .fh { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); font-size: 10.5px; margin-bottom: 7px; }
  .svc-includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .svc-includes li { display: flex; gap: 7px; font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.4; }
  .svc-includes li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange-500); flex: 0 0 5px; margin-top: 6px; }

  /* PPC success-fee note + price sub-structure */
  .svc-guarantee { display: flex; align-items: center; gap: 9px; align-self: stretch; font-size: var(--fs-sm); font-weight: 800; color: var(--orange-700); background: var(--orange-50); border: 1px solid var(--orange-200); padding: 11px 14px; border-radius: var(--r-md); }
  [data-theme="dark"] .svc-guarantee { color: var(--orange-300); border-color: rgba(232,162,77,0.25); }
  .svc-guarantee svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .price .tiernote { display: block; color: var(--ink-400); font-weight: 600; font-size: 11px; margin-top: 2px; }

  /* analytics-included strip */
  .incl-strip { display: flex; align-items: center; gap: var(--s-4); margin-top: clamp(36px,5vw,64px); padding: var(--s-5) var(--s-6); border: 1px dashed var(--border-strong); border-radius: var(--r-xl); background: var(--paper-card); }
  .incl-strip .ic { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--orange-500); color: #1C1407; display: grid; place-items: center; flex: 0 0 42px; }
  .incl-strip p { margin: 0; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.55; }
  .incl-strip p b { color: var(--ink-900); font-weight: 800; }

  /* ===== merged from Pricing ===== */

  /* ---------- page hero ---------- */
  .p-hero { padding: clamp(44px,5vw,80px) 0 0; }
  .p-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom: var(--s-4); }
  .p-hero .eyebrow::before { content:""; width:20px; height:1.5px; background: var(--orange-500); }
  .p-hero h1 { font-size: clamp(34px,5vw,64px); line-height:1.04; letter-spacing:-0.03em; font-weight:800; color: var(--ink-900); margin: 0 0 var(--s-4); max-width: 18ch; }
  .p-hero h1 em { font-style: normal; color: var(--orange-500); }
  .p-hero p { font-size: var(--fs-md); color: var(--ink-500); max-width: 56ch; margin: 0; }

  /* ---------- calculator ---------- */
  .calc { display: grid; grid-template-columns: 1fr 0.95fr; gap: var(--s-8); margin-top: var(--s-12); align-items: stretch; }
  .calc-pane { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: clamp(24px,3vw,40px); }
  .calc-pane h3 { margin: 0 0 var(--s-2); color: var(--ink-900); font-size: var(--fs-xl); }
  .calc-pane .hint { font-size: var(--fs-sm); color: var(--ink-500); margin: 0 0 var(--s-6); }
  .spend-field { position: relative; margin-bottom: var(--s-5); }
  .spend-field .cur { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 800; color: var(--ink-400); pointer-events: none; }
  #spend-input { width: 100%; font-family: var(--font-sans); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 18px 20px 18px 44px; }
  #spend-input:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-500) 25%, transparent); }
  .spend-field .permo { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-400); }

  .slider-wrap { margin: var(--s-6) 0 var(--s-3); }
  input[type="range"]#spend-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--ink-200); outline: none; }
  #spend-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--orange-500); border: 3px solid var(--paper-card); box-shadow: var(--sh-2); cursor: pointer; }
  #spend-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--orange-500); border: 3px solid var(--paper-card); box-shadow: var(--sh-2); cursor: pointer; }
  .slider-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-400); margin-top: 8px; font-variant-numeric: tabular-nums; }

  .tier-track { display: flex; gap: 5px; margin: var(--s-6) 0 var(--s-5); }
  .tier-dot { flex: 1; height: 6px; border-radius: 999px; background: var(--ink-200); transition: background var(--d-fast) var(--ease-out); }
  .tier-dot.on { background: var(--orange-500); }

  .presets { display: flex; flex-wrap: wrap; gap: 8px; }
  .preset { appearance: none; border: 1px solid var(--border-strong); background: transparent; color: var(--ink-700); font-family: inherit; font-size: var(--fs-xs); font-weight: 700; padding: 8px 13px; border-radius: var(--r-pill); cursor: pointer; transition: all var(--d-fast) var(--ease-out); }
  .preset:hover { border-color: var(--orange-500); color: var(--orange-600); }

  .result { background: var(--footer-bg); color: var(--paper); border-radius: var(--r-2xl); padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; }
  [data-theme="dark"] .result { border: 1px solid var(--border); }
  .result .r-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .result .r-tierbig { font-size: clamp(40px,5vw,60px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; white-space: nowrap; }
  .result .r-band { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-400); background: rgba(232,162,77,0.14); padding: 7px 13px; border-radius: var(--r-pill); }
  .result .r-spend { color: rgba(255,255,255,0.6); font-size: var(--fs-sm); margin: var(--s-3) 0 var(--s-8); }
  .result .r-fee { display: flex; align-items: baseline; gap: 8px; }
  .result .r-fee .lab { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; }
  .result .r-feebig { font-size: clamp(44px,6vw,68px); font-weight: 800; letter-spacing: -0.03em; color: var(--orange-400); line-height: 1; margin-top: 6px; }
  .result .r-rows { margin-top: auto; padding-top: var(--s-6); display: grid; gap: 1px; background: rgba(255,255,255,0.1); border-radius: var(--r-md); overflow: hidden; }
  .result .r-row { display: flex; justify-content: space-between; padding: 14px 16px; background: rgba(255,255,255,0.03); font-size: var(--fs-sm); }
  .result .r-row .k { color: rgba(255,255,255,0.62); }
  .result .r-row .v { color: var(--paper); font-weight: 700; }
  .result .r-row.total { background: rgba(232,162,77,0.12); }
  .result .r-row.total .v { color: var(--orange-400); font-size: var(--fs-md); }
  .result .r-note { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); margin: var(--s-5) 0 0; line-height: 1.5; }

  /* ---------- tier table ---------- */
  .tier-table-wrap { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--paper-card); }
  table.tier-table { width: 100%; border-collapse: collapse; }
  table.tier-table thead th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); padding: 16px 22px; background: var(--paper-50); border-bottom: 1px solid var(--border); }
  table.tier-table thead th:last-child, table.tier-table tbody td.c-rate { text-align: right; }
  table.tier-table tbody td { padding: 15px 22px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ink-700); }
  table.tier-table tbody tr:last-child td { border-bottom: none; }
  table.tier-table tbody tr.active { background: var(--orange-50); }
  table.tier-table tbody tr.active td { color: var(--ink-900); }
  .tnum { font-weight: 800; color: var(--ink-900); }
  .tnote { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-600); background: var(--orange-100); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
  td.c-fee { font-weight: 800; color: var(--ink-900); }
  td.c-fee .permo { font-weight: 600; color: var(--ink-400); font-size: 12px; }
  td.c-rate { color: var(--ink-500); font-variant-numeric: tabular-nums; }
  tr.active td.c-fee { color: var(--orange-700); }
  [data-theme="dark"] tr.active td.c-fee { color: var(--orange-400); }

  /* ---------- packages ---------- */
  .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); align-items: stretch; }
  .pkg { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); position: relative; transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
  .pkg:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
  .pkg.featured { background: var(--ink-900); color: var(--paper); transform: translateY(-10px); border-color: transparent; }
  [data-theme="dark"] .pkg.featured { background: var(--orange-500); color: #1C1407; }
  .pkg.featured:hover { transform: translateY(-16px); }
  .pkg .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange-500); color: #1C1407; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 13px; border-radius: var(--r-pill); white-space: nowrap; }
  [data-theme="dark"] .pkg.featured .badge { background: #1C1407; color: var(--orange-400); }
  .pkg .ptag { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-600); }
  .pkg.featured .ptag { color: var(--orange-400); }
  [data-theme="dark"] .pkg.featured .ptag { color: #1C1407; }
  .pkg .pname { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 0; color: var(--ink-900); }
  .pkg.featured .pname { color: var(--paper); }
  [data-theme="dark"] .pkg.featured .pname { color: #1C1407; }
  .pkg .blurb { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; line-height: 1.55; min-height: 3em; }
  .pkg.featured .blurb { color: rgba(255,255,255,0.72); }
  [data-theme="dark"] .pkg.featured .blurb { color: rgba(28,20,7,0.72); }
  .pkg .price { display: flex; align-items: baseline; gap: 4px; }
  .pkg .price .amt { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); }
  .pkg.featured .price .amt { color: var(--paper); }
  [data-theme="dark"] .pkg.featured .price .amt { color: #1C1407; }
  .pkg .price .per { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); }
  .pkg.featured .price .per { color: rgba(255,255,255,0.6); }
  [data-theme="dark"] .pkg.featured .price .per { color: rgba(28,20,7,0.62); }
  .pkg .psub { font-size: var(--fs-xs); color: var(--ink-500); margin: -4px 0 0; }
  .pkg.featured .psub { color: rgba(255,255,255,0.6); }
  [data-theme="dark"] .pkg.featured .psub { color: rgba(28,20,7,0.6); }
  .pkg ul.feat { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
  .pkg.featured ul.feat { border-color: rgba(255,255,255,0.18); }
  [data-theme="dark"] .pkg.featured ul.feat { border-color: rgba(28,20,7,0.2); }
  .pkg ul.feat li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-700); }
  .pkg.featured ul.feat li { color: rgba(255,255,255,0.86); }
  [data-theme="dark"] .pkg.featured ul.feat li { color: rgba(28,20,7,0.88); }
  .pkg ul.feat li svg { width: 17px; height: 17px; color: var(--orange-500); flex: 0 0 17px; margin-top: 1px; }
  .pkg.featured ul.feat li svg { color: var(--orange-400); }
  [data-theme="dark"] .pkg.featured ul.feat li svg { color: #1C1407; }
  .pkg .gb-wrap { margin-top: auto; padding-top: var(--s-4); }
  .pkg .btn { justify-content: center; margin-top: var(--s-2); }
  .pkg.featured .guarantee-badge { background: rgba(255,255,255,0.16); color: #fff; }
  [data-theme="dark"] .pkg.featured .guarantee-badge { background: rgba(28,20,7,0.16); color: #1C1407; }

  [data-packages="table"] .pkg-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  [data-packages="table"] .pkg { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-6); transform: none !important; padding: var(--s-6) var(--s-8); }
  [data-packages="table"] .pkg .blurb { min-height: 0; flex: 1 1 220px; }
  [data-packages="table"] .pkg ul.feat { display: none; }
  [data-packages="table"] .pkg .badge { position: static; transform: none; }
  [data-packages="table"] .pkg .gb-wrap { margin: 0; padding: 0; }
  [data-packages="table"] .pkg .pname { margin: 0; }

  /* package value line + bundled-service rows */
  .pkg .pkg-alc { font-size: var(--fs-xs); color: var(--ink-500); margin: 2px 0 0; }
  .pkg .pkg-alc b { color: var(--ink-700); font-weight: 700; font-variant-numeric: tabular-nums; }
  .pkg.featured .pkg-alc { color: rgba(255,255,255,0.6); }
  .pkg.featured .pkg-alc b { color: rgba(255,255,255,0.85); }
  [data-theme="dark"] .pkg.featured .pkg-alc { color: rgba(28,20,7,0.62); }
  [data-theme="dark"] .pkg.featured .pkg-alc b { color: #1C1407; }

  .pkg .save-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-100); padding: 5px 11px; border-radius: var(--r-pill); }
  .pkg .save-pill svg { width: 13px; height: 13px; }
  .pkg.featured .save-pill { background: rgba(232,162,77,0.18); color: var(--orange-300); }
  [data-theme="dark"] .pkg.featured .save-pill { background: rgba(28,20,7,0.16); color: #1C1407; }

  .pkg ul.svc-list { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: var(--s-4); }
  .pkg.featured ul.svc-list { border-color: rgba(255,255,255,0.18); }
  [data-theme="dark"] .pkg.featured ul.svc-list { border-color: rgba(28,20,7,0.2); }
  .pkg .bsvc-top { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
  .pkg .bsvc-name { flex: 1 1 auto; font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); line-height: 1.3; }
  .pkg.featured .bsvc-name { color: var(--paper); }
  [data-theme="dark"] .pkg.featured .bsvc-name { color: #1C1407; }
  .pkg .bsvc-price { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--orange-600); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.5; }
  .pkg.featured .bsvc-price { color: var(--orange-400); }
  [data-theme="dark"] .pkg.featured .bsvc-price { color: #1C1407; }
  .pkg .bsvc-deliv { margin: 3px 0 0; font-size: 12px; color: var(--ink-500); line-height: 1.5; }
  .pkg.featured .bsvc-deliv { color: rgba(255,255,255,0.6); }
  [data-theme="dark"] .pkg.featured .bsvc-deliv { color: rgba(28,20,7,0.62); }

  .pkg ul.perks { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
  .pkg.featured ul.perks { border-color: rgba(255,255,255,0.18); }
  [data-theme="dark"] .pkg.featured ul.perks { border-color: rgba(28,20,7,0.2); }
  .pkg ul.perks li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-700); }
  .pkg.featured ul.perks li { color: rgba(255,255,255,0.86); }
  [data-theme="dark"] .pkg.featured ul.perks li { color: rgba(28,20,7,0.88); }
  .pkg ul.perks li svg { width: 16px; height: 16px; color: var(--orange-500); flex: 0 0 16px; margin-top: 2px; }
  .pkg.featured ul.perks li svg { color: var(--orange-400); }
  [data-theme="dark"] .pkg.featured ul.perks li svg { color: #1C1407; }

  [data-packages="table"] .pkg ul.svc-list, [data-packages="table"] .pkg ul.perks { display: none; }
  [data-packages="table"] .pkg .save-pill { margin-left: auto; }

  /* ---------- a la carte ---------- */
  .alc { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--paper-card); }
  .alc-row { display: grid; grid-template-columns: 1.4fr 1.6fr auto; gap: var(--s-6); align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); }
  .alc-row:last-child { border-bottom: none; }
  .alc-row:hover { background: var(--orange-50); }
  .alc-row .svc-name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-md); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .alc-row .alc-model { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-100); padding: 3px 8px; border-radius: 999px; }
  [data-theme="dark"] .alc-row .alc-model { color: var(--orange-300); background: rgba(232,162,77,0.16); }
  .alc-row .impact-pip { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
  .pip-high { background: var(--orange-500); }
  .pip-med { background: var(--ink-400); }
  .pip-low { background: var(--ink-300); }
  .alc-row .svc-kpi { font-size: var(--fs-sm); color: var(--ink-500); }
  .alc-row .svc-price { font-weight: 800; color: var(--ink-900); font-size: var(--fs-md); text-align: right; white-space: nowrap; }
  .alc-row .svc-price small { display: block; font-weight: 600; color: var(--ink-400); font-size: 11px; }
  .alc-legend { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center; margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--ink-500); }
  .alc-legend span { display: inline-flex; align-items: center; gap: 7px; }

  /* ---------- guarantees ---------- */
  .guar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .guar { padding: var(--s-8); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--paper-card); position: relative; }
  .guar .gdays { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--orange-500); line-height: 1; }
  .guar h4 { margin: var(--s-3) 0 6px; font-size: var(--fs-lg); color: var(--ink-900); }
  .guar p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }
  .guar .gtag { position: absolute; top: var(--s-6); right: var(--s-6); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

  /* ---------- faq ---------- */
  .faq-list { max-width: 820px; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); cursor: pointer; font-weight: 700; color: var(--ink-900); font-size: var(--fs-md); padding: var(--s-5) 0; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item .chev { width: 30px; height: 30px; border-radius: 50%; background: var(--orange-500); color: #1C1407; display: grid; place-items: center; transition: transform var(--d-base) var(--ease-out); flex: 0 0 30px; }
  .faq-item[open] .chev { transform: rotate(45deg); }
  .faq-item p { margin: 0 0 var(--s-5); color: var(--ink-500); font-size: var(--fs-sm); max-width: 70ch; line-height: 1.7; }

  /* ---------- cta ---------- */
  .cta-band { background: var(--orange-500); border-radius: var(--r-2xl); padding: clamp(40px,5vw,72px); text-align: center; }
  .cta-band h2 { font-size: clamp(28px,3.6vw,48px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: #1C1407; margin: 0 0 var(--s-3); }
  .cta-band p { color: rgba(28,20,7,0.78); font-size: var(--fs-md); margin: 0 auto var(--s-6); max-width: 48ch; }

  @media (max-width: 920px) {
    .calc, .guar-grid, .pkg-grid { grid-template-columns: 1fr; }
    .pkg.featured { transform: none; }
    .alc-row { grid-template-columns: 1fr auto; }
    .alc-row .svc-kpi { display: none; }
    table.tier-table td.c-rate, table.tier-table th:last-child { display: none; }
  }


  /* trust strip */
  .trust-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: var(--paper-card); padding: var(--s-5) 0; }
  .trust-inner { display:flex; align-items:center; justify-content:center; gap: var(--s-4) var(--s-8); flex-wrap:wrap; }
  .trust-lead { font-size: var(--fs-sm); font-weight:700; color: var(--ink-700); }
  .trust-lead b { color: var(--orange-600); font-weight:800; }
  .trust-logos { display:flex; flex-wrap:wrap; gap: var(--s-3) var(--s-5); align-items:center; justify-content:center; }
  .trust-logos span { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: var(--ink-500); }
  /* guarantee strip (replaces the platform trust strip) */
  .guarantee-strip .trust-lead svg { width:17px; height:17px; color: var(--orange-600); vertical-align:-3px; margin-right:8px; display:inline-block; }
  [data-theme="dark"] .guarantee-strip .trust-lead svg { color: var(--orange-400); }
  .guar-chips { display:flex; flex-wrap:wrap; gap: var(--s-3); align-items:center; justify-content:center; }
  .guar-chips span { display:inline-flex; align-items:center; gap:7px; font-family: var(--font-sans); text-transform:none; font-size: var(--fs-xs); font-weight:700; letter-spacing:0.01em; color: var(--orange-700); background: var(--orange-50); border:1px solid var(--orange-200); padding:6px 13px; border-radius: var(--r-pill); }
  .guar-chips span svg { width:13px; height:13px; flex:0 0 13px; }
  [data-theme="dark"] .guar-chips span { color: var(--orange-300); border-color: rgba(232,162,77,0.25); background: rgba(232,162,77,0.08); }
  /* tier table toggle */
  .tier-details { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--paper-card); }
  .tier-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); font-weight: 800; color: var(--ink-900); font-size: var(--fs-md); }
  .tier-summary::-webkit-details-marker { display: none; }
  .tier-summary .chev { transition: transform var(--d-base) var(--ease-out); color: var(--orange-500); flex: 0 0 18px; }
  .tier-details[open] .tier-summary .chev { transform: rotate(180deg); }
  .tier-details .tier-table-wrap { border: none; border-top: 1px solid var(--border); border-radius: 0; }

/* ████████████████████████████████████████████████████████████
   4c · CASE STUDIES  (was inline in case-studies.html)
   ████████████████████████████████████████████████████████████ */

  .cs-hero { padding: clamp(44px,5vw,80px) 0 0; }
  .cs-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom: var(--s-4); }
  .cs-hero .eyebrow::before { content:""; width:20px; height:1.5px; background: var(--orange-500); }
  .cs-hero h1 { font-size: clamp(34px,5vw,64px); line-height:1.04; letter-spacing:-0.03em; font-weight:800; color: var(--ink-900); margin: 0 0 var(--s-4); max-width: 18ch; }
  .cs-hero h1 em { font-style: normal; color: var(--orange-500); }
  .cs-hero p { font-size: var(--fs-md); color: var(--ink-500); max-width: 58ch; margin: 0; }

  .tpl-note { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--s-8); padding: var(--s-5) var(--s-6); border: 1px solid var(--orange-200); background: var(--orange-50); border-radius: var(--r-lg); }
  .tpl-note svg { width: 22px; height: 22px; color: var(--orange-600); flex: 0 0 22px; margin-top: 1px; }
  .tpl-note p { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }
  .tpl-note b { color: var(--ink-900); }

  .cs-list { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-12); }
  .cs-card { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--paper-card); overflow: hidden; }
  .cs-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; }
  .cs-head { padding: clamp(28px,3vw,40px); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  .cs-tagrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-5); }
  .cs-vert { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-100); padding: 6px 11px; border-radius: var(--r-pill); }
  [data-theme="dark"] .cs-vert { color: var(--orange-300); }
  .cs-sample { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); background: var(--ink-100); padding: 6px 11px; border-radius: var(--r-pill); }
  .cs-client { font-size: clamp(22px,2.6vw,30px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 6px; }
  .cs-sub { font-size: var(--fs-sm); color: var(--ink-500); margin: 0 0 var(--s-6); }
  .cs-kpi { margin-top: auto; }
  .cs-kpi .lab { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s-2); }
  .cs-kpi .ba { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .cs-kpi .before { font-size: clamp(22px,2.4vw,28px); font-weight: 700; color: var(--ink-400); text-decoration: line-through; text-decoration-thickness: 2px; }
  .cs-kpi .arrow { color: var(--orange-500); }
  .cs-kpi .arrow svg { width: 22px; height: 22px; }
  .cs-kpi .after { font-size: clamp(40px,5vw,58px); font-weight: 800; letter-spacing: -0.03em; color: var(--orange-600); line-height: 1; }
  [data-theme="dark"] .cs-kpi .after { color: var(--orange-400); }

  .cs-body { padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: var(--s-5); }
  .cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
  .cs-stats .n { font-size: clamp(20px,2.2vw,26px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); }
  .cs-stats .l { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 2px; line-height: 1.3; }
  .cs-block .h { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-600); margin-bottom: 5px; }
  .cs-block p { margin: 0; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }
  .cs-services { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: var(--s-4); }
  .cs-services .schip { font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-700); }

  .cs-cta { margin-top: clamp(48px,6vw,80px); background: var(--footer-bg); color: var(--paper); border-radius: var(--r-2xl); padding: clamp(36px,5vw,64px); text-align: center; }
  [data-theme="dark"] .cs-cta { border: 1px solid var(--border); }
  .cs-cta h2 { font-size: clamp(26px,3.2vw,42px); letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 0 0 var(--s-3); }
  .cs-cta h2 em { font-style: normal; color: var(--orange-400); }
  .cs-cta p { color: rgba(255,255,255,0.7); font-size: var(--fs-md); margin: 0 auto var(--s-6); max-width: 46ch; }

  .cs-report { margin-top: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--paper-card); padding: clamp(28px,3vw,40px); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); align-items: start; }
  .cs-report-head h3 { font-size: clamp(20px,2.2vw,26px); letter-spacing: -0.02em; color: var(--ink-900); margin: var(--s-3) 0 var(--s-2); }
  .cs-report-head p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; line-height: 1.6; max-width: 42ch; }
  .cs-report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
  .cs-report-grid .h { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-600); margin-bottom: 5px; }
  .cs-report-grid p { margin: 0; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }

  @media (max-width: 820px) {
    .cs-grid { grid-template-columns: 1fr; }
    .cs-head { border-right: none; border-bottom: 1px solid var(--border); }
    .cs-report { grid-template-columns: 1fr; gap: var(--s-6); }
    .cs-report-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) { .cs-stats { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ████████████████████████████████████████████████████████████
   4d · 404  (was inline in 404.html)
   ████████████████████████████████████████████████████████████ */

  .nf-wrap { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: clamp(48px,8vw,120px) 0; }
  .nf-code { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(96px, 18vw, 200px); line-height: 0.9; color: var(--orange-500); letter-spacing: -0.03em; }
  .nf-wrap h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; font-weight: 800; color: var(--ink-900); margin: var(--s-4) 0 var(--s-3); }
  .nf-wrap p { color: var(--ink-500); max-width: 46ch; margin: 0 auto var(--s-7); font-size: var(--fs-md); }
  .nf-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }