/* ==========================================================================
   Design Tokens - single source of truth for the entire site
   Transcribed from spec §3.1 (§3.1.1-3.1.14) and §3.2
   Build order: tokens.css → base.css → components.css → transitions.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   §3.1.1  Color - surfaces & elevation
   -------------------------------------------------------------------------- */
:root{
  /* Elevation ramp (near-black) */
  --surface-0:#050505;   /* page background (was --color-bg) */
  --surface-1:#0a0a0a;   /* recessed sections, footer */
  --surface-2:#111111;   /* default card (was --color-bg-card) */
  --surface-3:#161616;   /* card hover / raised */
  --surface-4:#1c1c1c;   /* popovers, mega-menu, modals, tooltips */
  --surface-inset: rgba(255,255,255,0.02); /* subtle fill for inputs, wells */

  /* Hairlines & dividers */
  --border:        rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --border-accent: rgba(167,139,250,0.30);

  /* Back-compat aliases (keep existing markup working) */
  --color-bg: var(--surface-0);
  --color-bg-secondary: var(--surface-1);
  --color-bg-card: var(--surface-2);
  --color-bg-card-hover: var(--surface-3);
}

/* --------------------------------------------------------------------------
   §3.1.2  Color - text
   -------------------------------------------------------------------------- */
:root{
  --text-strong:#ffffff;    /* headings, on near-black ~ 21:1  AAA */
  --text:       #e6e6e6;    /* default body on surface-0 ~ 16:1  AAA */
  --text-secondary:#a3a3a3; /* secondary copy ~ 7.3:1  AAA  (was #8a8a8a) */
  --text-muted: #6e6e6e;    /* labels/eyebrows ≥14px only ~ 3.9:1  AA-large */
  --text-on-accent:#0a0a0a; /* text on filled accent button ~ 8:1 */
  --text-link: var(--accent-300);
}

/* --------------------------------------------------------------------------
   §3.1.3  Color - brand accents (tonal ramps)
   -------------------------------------------------------------------------- */
:root{
  /* Purple ramp - primary accent */
  --accent-100:#ede9fe;  /* tint / text-on-dark for emphasis */
  --accent-300:#c4b5fd;  /* hover, links, focus ring (was --color-accent-hover) */
  --accent-500:#a78bfa;  /* DEFAULT accent (was --color-accent) */
  --accent-700:#7c3aed;  /* pressed, deep gradient stop */
  --accent-tint: rgba(167,139,250,0.06); /* card wash */

  /* Green ramp - secondary accent ("results / success / live") */
  --green-300:#6ee7b7;
  --green-500:#34d399;   /* was --color-accent-secondary */
  --green-700:#059669;
  --green-tint: rgba(52,211,153,0.06);

  /* Brand gradient (kept) */
  --color-gradient-1:#667eea;
  --color-gradient-2:#764ba2;
  --grad-brand: linear-gradient(135deg, var(--color-gradient-1), var(--color-gradient-2));
  --grad-accent: linear-gradient(135deg, var(--accent-500), var(--accent-700));

  /* Back-compat aliases */
  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-300);
  --color-accent-secondary: var(--green-500);
}

/* --------------------------------------------------------------------------
   §3.1.4  Color - semantic & state
   -------------------------------------------------------------------------- */
:root{
  --state-success: var(--green-500);
  --state-success-bg: var(--green-tint);
  --state-error:#f87171;     /* ~5.9:1 on near-black, AA */
  --state-error-bg: rgba(248,113,113,0.08);
  --state-warning:#fbbf24;
  --state-warning-bg: rgba(251,191,36,0.08);
  --state-info: var(--accent-500);

  /* Focus / selection */
  --ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent-300); /* offset ring on dark */
  --selection-bg: rgba(167,139,250,0.25);
}
::selection{ background: var(--selection-bg); color: var(--text-strong); }

/* --------------------------------------------------------------------------
   §3.1.5  Color - data-viz / illustration only
   -------------------------------------------------------------------------- */
:root{
  --viz-blue:#60a5fa;
  --viz-amber:#fbbf24;
  --viz-pink:#f0abfc;
}

/* --------------------------------------------------------------------------
   §3.1.6  Per-page accent theming
   -------------------------------------------------------------------------- */
:root{ --page-accent: var(--accent-500); --page-accent-soft: var(--accent-tint); }
body[data-page="cms"]       { --page-accent: var(--accent-500); --page-accent-soft: var(--accent-tint); }
body[data-page="seo"]       { --page-accent: var(--green-500);  --page-accent-soft: var(--green-tint); }
body[data-page="ecommerce"] { --page-accent: var(--accent-500); --page-accent-soft: var(--accent-tint); /* + amber spot in art */ }
body[data-page="local"]     { --page-accent: var(--green-500);  --page-accent-soft: var(--green-tint);  /* + blue spot in art */ }

/* --------------------------------------------------------------------------
   §3.1.7  Fluid type scale (clamp(), named steps)
   -------------------------------------------------------------------------- */
:root{
  --step--2: clamp(0.69rem, 0.66rem + 0.13vw, 0.75rem); /* fine print, legal */
  --step--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.94rem); /* captions, eyebrow */
  --step-0:  clamp(1.00rem, 0.93rem + 0.30vw, 1.13rem); /* body */
  --step-1:  clamp(1.25rem, 1.13rem + 0.52vw, 1.55rem); /* lead / large body */
  --step-2:  clamp(1.56rem, 1.37rem + 0.84vw, 2.11rem); /* h3 / card title */
  --step-3:  clamp(1.95rem, 1.65rem + 1.30vw, 2.89rem); /* h2 section title */
  --step-4:  clamp(2.44rem, 1.98rem + 1.98vw, 3.95rem); /* h1 / big section */
  --step-5:  clamp(3.05rem, 2.36rem + 2.96vw, 5.40rem); /* hero display */
  /* SYNTHESIZED: --step-6 not literally in spec; extrapolated from the major-third (~1.25)
     scale continuing above --step-5: min≈3.81rem, max≈6.75rem. Added so .step-6 utility
     class doesn't break if referenced by downstream JS/CSS. */
  --step-6:  clamp(3.81rem, 2.84rem + 3.70vw, 6.75rem); /* super-display / full-bleed numeral */

  /* Display tuning (Playfair) */
  --tracking-display:-0.025em;  /* tighten serif at large sizes */
  --tracking-tight:-0.01em;
  --tracking-eyebrow:0.18em;    /* uppercase eyebrows */
  --leading-display:1.05;
  --leading-tight:1.15;
  --leading-body:1.65;
  --measure:65ch;               /* optimal reading width for long-form */

  /* Weights actually used (after subsetting) */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
}

/* --------------------------------------------------------------------------
   §3.1.8  Spacing scale
   -------------------------------------------------------------------------- */
:root{
  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem;
  --space-s:1rem; --space-m:1.5rem; --space-l:2rem; --space-xl:3rem;
  --space-2xl:4.5rem; --space-3xl:7.5rem;
  --section-pad: clamp(5rem, 3rem + 8vw, 7.5rem); /* vertical section rhythm */
}

/* --------------------------------------------------------------------------
   §3.1.9  Layout - containers, grid, breakpoints
   -------------------------------------------------------------------------- */
:root{
  --container:1280px;        /* default content width */
  --container-wide:1480px;   /* full-bleed showcase rows */
  --container-narrow:760px;  /* ~65ch - articles & legal */
  --gutter: clamp(1rem, 0.6rem + 2vw, 1.5rem);
}
.container{ width:min(100% - 2*var(--gutter), var(--container)); margin-inline:auto; }
.container--narrow{ width:min(100% - 2*var(--gutter), var(--container-narrow)); }
.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }

/* --------------------------------------------------------------------------
   §3.1.10  Radii (kept, extended)
   -------------------------------------------------------------------------- */
:root{
  --radius-xs:4px;
  --radius-sm:8px;   /* inputs, chips (existing) */
  --radius-md:12px;  /* buttons, small cards (existing) */
  --radius-lg:20px;  /* cards (existing) */
  --radius-xl:28px;  /* feature panels, mega-menu (existing) */
  --radius-2xl:36px; /* hero media, CTA band */
  --radius-pill:999px;
}

/* --------------------------------------------------------------------------
   §3.1.11  Shadows & glows (tiered)
   -------------------------------------------------------------------------- */
:root{
  /* Ambient (depth on near-black) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-xl: 0 40px 100px rgba(0,0,0,.6);

  /* Accent glows (use --page-accent channel where themed) */
  --glow-sm: 0 0 24px rgba(167,139,250,.10);
  --glow-md: 0 0 60px rgba(167,139,250,.14);  /* ~ old --shadow-glow, brighter */
  --glow-lg: 0 0 120px rgba(167,139,250,.18);
  --glow-green: 0 0 60px rgba(52,211,153,.12);

  /* Composite recipe for raised cards */
  --elevation-card: var(--shadow-md), var(--glow-sm);
  --elevation-card-hover: var(--shadow-lg), var(--glow-md);

  /* Back-compat */
  --shadow-glow: var(--glow-md);
}

/* --------------------------------------------------------------------------
   §3.1.12  Z-index layers
   -------------------------------------------------------------------------- */
:root{
  --z-base:0;
  --z-grain:1;        /* body::after grain overlay */
  --z-content:10;
  --z-sticky:100;     /* sticky section sub-nav, breadcrumb */
  --z-nav:1000;       /* #navbar */
  --z-megamenu:1100;
  --z-overlay:5000;   /* mobile-nav backdrop, modals */
  --z-toast:6000;
  --z-cursor:9000;    /* custom cursor */
  --z-preloader:10000;
}

/* --------------------------------------------------------------------------
   §3.1.13  Motion tokens
   -------------------------------------------------------------------------- */
:root{
  /* Easings */
  --ease-brand: cubic-bezier(0.16,1,0.3,1); /* existing signature ease (--transition) */
  --ease-out:   cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* subtle overshoot, hovers only */

  /* Durations */
  --dur-fast:0.18s; --dur-base:0.3s; --dur-slow:0.6s; --dur-page:0.45s;
  --transition: var(--ease-brand); /* back-compat alias */
}

@font-face{ font-family:'Lexend'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/lexend-400.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/lexend-500.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/lexend-700.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/lexend-800.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/playfair-500.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/playfair-600.woff2') format('woff2'); }

/* ==========================================================================
   Base layer - reset, typography, layout primitives, focus ring, motion floor
   Build order: tokens.css → base.css → components.css → transitions.css
   NOTE: .container / .grid-12 / ::selection already defined in tokens.css - not repeated here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Modern reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }

/* --------------------------------------------------------------------------
   Base element typography (§3.2)
   Bound exclusively to tokens - no hard-coded colors or sizes.
   -------------------------------------------------------------------------- */
body{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  font-weight:var(--fw-regular);
  background:var(--surface-0);
  color:var(--text);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* --------------------------------------------------------------------------
   Headings - fluid scale + weights from §3.2 table
   -------------------------------------------------------------------------- */

/* Hero display - Playfair Display, --step-5, weight 700, tight leading */
.hero-display,
[class*="hero"] > h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-5);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-display);
  color:var(--text-strong);
}

/* H1 - Playfair Display, --step-4, weight 700 */
h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-4);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-display);
  line-height:1.1;
  color:var(--text-strong);
}

/* H2 - Playfair Display, --step-3, weight 600-700 */
h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  color:var(--text-strong);
}

/* H3 - Lexend, --step-2, weight 600 */
h3{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step-2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:1.25;
  color:var(--text-strong);
}

/* H4 - Lexend, --step-1, weight 600 */
h4{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-semibold);
  line-height:var(--leading-tight);
  color:var(--text-strong);
}

/* H5/H6 - Lexend, --step-0/--step--1, weight 600 */
h5{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  font-weight:var(--fw-semibold);
  line-height:var(--leading-tight);
  color:var(--text-strong);
}
h6{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  line-height:var(--leading-tight);
  color:var(--text-strong);
}

/* --------------------------------------------------------------------------
   Body copy, paragraphs, inline elements
   -------------------------------------------------------------------------- */
p{ max-width:var(--measure); }

/* Lead / intro paragraph (opt-in via class) */
.lead{
  font-size:var(--step-1);
  font-weight:var(--fw-regular);
  line-height:1.5;
  color:var(--text);
}

/* Eyebrow / kicker (§3.2) - Lexend 600 uppercase with tracking */
.eyebrow{
  font-family:'Lexend',system-ui,-apple-system,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--page-accent);
  line-height:1;
}

/* Fine print / legal (§3.2) */
.fine-print{
  font-size:var(--step--2);
  font-weight:var(--fw-regular);
  line-height:1.6;
  color:var(--text-muted);
}

/* Blockquote / pull-quote - Playfair italic (§3.2) */
blockquote{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:var(--step-2);
  font-weight:500;
  line-height:1.3;
  color:var(--text-secondary);
  border-left:3px solid var(--border-accent);
  padding-left:var(--space-m);
}

/* --------------------------------------------------------------------------
   Display font utility (Playfair Display for serif accents)
   -------------------------------------------------------------------------- */
.font-display{ font-family:'Playfair Display',Georgia,serif; }

/* --------------------------------------------------------------------------
   Type-scale utility classes (§ requirement - styleguide page uses these)
   Maps each class to its --step-* token.
   -------------------------------------------------------------------------- */
.step--2{ font-size:var(--step--2); }
.step--1{ font-size:var(--step--1); }
.step-0 { font-size:var(--step-0);  }
.step-1 { font-size:var(--step-1);  }
.step-2 { font-size:var(--step-2);  }
.step-3 { font-size:var(--step-3);  }
.step-4 { font-size:var(--step-4);  }
.step-5 { font-size:var(--step-5);  }
.step-6 { font-size:var(--step-6);  }

/* --------------------------------------------------------------------------
   Section vertical rhythm helper (§3.1.8 --section-pad)
   -------------------------------------------------------------------------- */
.section{
  padding-block:var(--section-pad);
}

/* Narrow reading width for articles/legal (§3.2) */
.prose{
  max-width:var(--measure);
  line-height:var(--leading-body);
}
.prose p + p{ margin-top:var(--space-m); }
.prose h2 + p,
.prose h3 + p{ margin-top:var(--space-s); }

/* --------------------------------------------------------------------------
   Accessible focus ring (uses token from §3.1.4)
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Respect OS reduced-motion at the CSS floor (JS gate in main.js mirrors this)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scroll only when motion is allowed (Lenis takes over in JS) */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }

/* ── Fixed-nav offset ───────────────────────────────────────
   The nav is position:fixed and overlays content. Content-first
   pages (legal, styleguide, 404, contact, blog) clear it by default;
   full-bleed hero pages (home, services, about) opt OUT by setting
   <body data-hero> so the hero sits behind the transparent nav. */
:root{ --nav-h: 4.5rem; }
.page-main{ padding-top: calc(var(--nav-h) + var(--space-l)); }
body[data-hero] .page-main{ padding-top: 0; }

/* The hidden attribute must win over explicit component display (e.g. .ma-btn{display:inline-flex})
   inside the wizard nav, so Back/Next/Submit show only on the right step. */
.wiz__nav [hidden]{ display:none; }

/* Skip-to-content link - first focusable; visible only when focused */
.skip-link{
  position:fixed; top:-200%; left:var(--space-s); z-index:9999;
  background:var(--accent-500); color:var(--text-on-accent);
  padding:var(--space-2xs) var(--space-m); border-radius:var(--radius-md);
  text-decoration:none; font-weight:600;
}
.skip-link:focus{ top:var(--space-s); outline:none; box-shadow:var(--ring); }

/* ==========================================================================
   Components - shared chrome
   Build order: tokens.css → base.css → components.css → transitions.css
   Authored from spec §3.3 descriptions; all colors/sizes reference tokens.
   Scope: buttons, nav + mega-panel, footer, CTA band, form base,
          badge/chip, card base + service variant.
   ========================================================================== */

/* ============================================================
   §3.3  BUTTONS  (.ma-btn)
   ============================================================ */

.ma-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  padding:0.75em 1.5em;
  min-height:44px;
  min-width:44px;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-0);
  font-weight:var(--fw-medium);
  line-height:1;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:
    background-color var(--dur-base) var(--ease-brand),
    color            var(--dur-base) var(--ease-brand),
    border-color     var(--dur-base) var(--ease-brand),
    box-shadow       var(--dur-base) var(--ease-brand),
    transform        var(--dur-base) var(--ease-spring);
  position:relative;
  white-space:nowrap;
  user-select:none;
}

.ma-btn:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* Primary - filled page-accent */
.ma-btn--primary{
  background:var(--page-accent);
  color:var(--text-on-accent);
  border-color:transparent;
  box-shadow:var(--glow-sm);
}
.ma-btn--primary:hover{
  background:var(--accent-700);
  box-shadow:var(--glow-md);
  transform:translateY(-2px);
}
.ma-btn--primary:active{
  background:var(--accent-700);
  transform:translateY(0);
  box-shadow:var(--glow-sm);
}
.ma-btn--primary:disabled,
.ma-btn--primary[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Secondary - outlined */
.ma-btn--secondary{
  background:transparent;
  color:var(--text-strong);
  border-color:var(--border-strong);
}
.ma-btn--secondary:hover{
  background:var(--surface-3);
  border-color:var(--border-accent);
  transform:translateY(-2px);
}
.ma-btn--secondary:active{
  background:var(--surface-2);
  transform:translateY(0);
}
.ma-btn--secondary:disabled,
.ma-btn--secondary[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

/* Ghost / text-link style */
.ma-btn--ghost{
  background:transparent;
  color:var(--text-link);
  border-color:transparent;
  padding-inline:0;
  position:relative;
}
.ma-btn--ghost::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform var(--dur-base) var(--ease-brand);
}
.ma-btn--ghost:hover::after{
  transform:scaleX(1);
}
.ma-btn--ghost:hover .icon{
  transform:translateX(4px);
}

/* Icon inside button - inherits text color */
.ma-btn .icon,
.ma-btn svg{
  flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-brand);
}

/* Magnetic hover - JS adds `.is-magnetic` via pointer proximity;
   the transform is driven by inline CSS vars set from JS */
@media (hover:hover) and (pointer:fine){
  .ma-btn.is-magnetic{
    transform:translate(var(--mx,0px), var(--my,0px));
  }
}

/* Loading state */
.ma-btn.is-loading{
  pointer-events:none;
  opacity:.75;
}
.ma-btn.is-loading .ma-btn__label{ visibility:hidden; }
.ma-btn.is-loading::before{
  content:'';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  margin:auto;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:var(--radius-pill);
  animation:ma-spin .7s linear infinite;
}
@keyframes ma-spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   §3.3  NAV  (.ma-nav)
   ============================================================ */

.ma-nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:var(--z-nav);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-brand),
    border-color     var(--dur-base) var(--ease-brand),
    backdrop-filter  var(--dur-base) var(--ease-brand);
}

/* Scrolled / condensed state - added by JS on scroll past ~80px */
.ma-nav.is-scrolled{
  background:var(--surface-1);
  border-color:var(--border);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
}

/* Inner flex container */
.ma-nav__inner{
  display:flex;
  align-items:center;
  height:72px;
  gap:var(--space-l);
}

/* Logo */
.ma-nav__logo{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  color:var(--text-strong);
  font-weight:var(--fw-bold);
  font-size:var(--step-0);
  flex-shrink:0;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-brand);
}
.ma-nav__logo:hover{ color:var(--page-accent); }
.ma-nav__mark{
  color:var(--page-accent);
  flex-shrink:0;
}

/* Centered nav list */
.ma-nav__list{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  list-style:none;
  margin:0;
  padding:0;
  margin-inline-start:auto;
}

/* Nav item */
.ma-nav__item{
  position:relative;
}

/* Nav link */
.ma-nav__link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  padding:0.5em var(--space-xs);
  color:var(--text-secondary);
  font-size:var(--step-0);
  font-weight:var(--fw-medium);
  text-decoration:none;
  border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-brand);
  min-height:44px;
}
.ma-nav__link:hover,
.ma-nav__link[aria-expanded="true"]{
  color:var(--text-strong);
}
.ma-nav__link:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* Chevron icon in nav link (rotates when panel open) */
.ma-nav__chev{
  transition:transform var(--dur-fast) var(--ease-brand);
  color:var(--text-muted);
}
.ma-nav__link[aria-expanded="true"] .ma-nav__chev{
  transform:rotate(180deg);
}

/* ── Mega-panel ──────────────────────────────────────────── */
.ma-nav__panel{
  position:absolute;
  inset-block-start:calc(100% + var(--space-xs));
  inset-inline-start:50%;
  width:min(860px, 90vw);
  background:var(--surface-4);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  z-index:var(--z-megamenu);
  padding:var(--space-l);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--space-m);
  /* closed state - JS removes [hidden] to open */
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand);
}
.ma-nav__panel:not([hidden]){
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.ma-nav__panel > .ma-card--service{
  flex:1 1 calc(50% - var(--space-m));
  min-width:200px;
}

/* Right rail */
.ma-nav__panel-rail{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  flex:0 0 auto;
  min-width:180px;
  padding-inline-start:var(--space-m);
  border-inline-start:1px solid var(--border);
}
.ma-nav__panel-rail a{
  color:var(--text-secondary);
  font-size:var(--step--1);
  text-decoration:none;
  padding:var(--space-3xs) 0;
  transition:color var(--dur-fast) var(--ease-brand);
}
.ma-nav__panel-rail a:hover{ color:var(--page-accent); }

/* CTA button in nav (right edge) */
.ma-nav__cta{
  margin-inline-start:auto;
  flex-shrink:0;
}

/* ── Hamburger toggle ────────────────────────────────────── */
.ma-nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color var(--dur-fast) var(--ease-brand);
}
.ma-nav__toggle:hover{ border-color:var(--border-accent); }
.ma-nav__toggle:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}
.ma-nav__toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--text-strong);
  border-radius:var(--radius-pill);
  transition:transform var(--dur-base) var(--ease-brand), opacity var(--dur-fast) var(--ease-brand);
  transform-origin:center;
}

/* Toggle "X" state when nav is open */
.ma-nav.is-open .ma-nav__toggle span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.ma-nav.is-open .ma-nav__toggle span:nth-child(2){
  transform:translateY(-7px) rotate(-45deg);
}

/* ── Mobile - full-screen drawer ────────────────────────── */
@media (max-width:768px){
  .ma-nav__toggle{
    display:flex;
    margin-inline-start:auto;
  }

  .ma-nav__list{
    position:fixed;
    inset:0;
    z-index:var(--z-overlay);
    background:var(--surface-0);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:var(--space-m);
    padding:var(--space-xl) var(--space-l);
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-brand);
    overflow-y:auto;
    margin-inline-start:0;
  }

  .ma-nav.is-open .ma-nav__list{
    transform:translateX(0);
  }

  .ma-nav__link{
    font-size:var(--step-2);
    font-weight:var(--fw-bold);
    color:var(--text-strong);
    padding:var(--space-xs) 0;
  }

  /* Hide CTA button in mobile (visible inside drawer instead) */
  .ma-nav__cta{
    display:none;
  }

  /* Mega-panel becomes a static block inside the drawer */
  .ma-nav__panel{
    position:static;
    width:100%;
    transform:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    padding:0 0 0 var(--space-m);
    opacity:1;
    pointer-events:auto;
    flex-direction:column;
    border-inline-start:1px solid var(--border);
    transition:none;
  }
  .ma-nav__panel[hidden]{
    display:none;
  }
  .ma-nav__panel-rail{
    border-inline-start:none;
    padding-inline-start:0;
  }
  .ma-nav__panel > .ma-card--service{
    flex:1 1 100%;
  }
}

/* ── Currency toggle (.ma-cur) ───────────────────────────── */
.ma-cur{
  display:inline-flex;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  overflow:hidden;
  flex-shrink:0;
}
.ma-cur__btn{
  font-size:var(--step--1);
  font-family:inherit;
  font-weight:var(--fw-medium);
  padding:4px 10px;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  border:none;
  line-height:1;
  min-height:32px;
  transition:background var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand);
}
.ma-cur__btn:hover{
  color:var(--text);
}
.ma-cur__btn:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  position:relative;
  z-index:1;
}
.ma-cur__btn[aria-pressed="true"]{
  background:var(--accent-500);
  color:var(--text-on-accent, #0a0a0a);
}

/* Mobile: keep toggle visible in bar next to hamburger */
@media (max-width:768px){
  .ma-cur{
    margin-inline-start:auto;
    font-size:var(--step--2, 0.75rem);
  }
  .ma-cur__btn{
    padding:4px 8px;
    min-height:36px;
  }
}

/* ============================================================
   §3.3  FOOTER  (.ma-footer)
   ============================================================ */

.ma-footer{
  background:var(--surface-1);
  border-top:1px solid var(--border);
  padding-block:var(--space-3xl) var(--space-xl);
}

/* 4-column grid */
.ma-footer__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-xl) var(--space-l);
  padding-block-end:var(--space-2xl);
}

/* Individual column */
.ma-footer__col h3{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  margin-block-end:var(--space-m);
}
.ma-footer__col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.ma-footer__col ul a{
  color:var(--text-secondary);
  font-size:var(--step--1);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-brand);
}
.ma-footer__col ul a:hover{ color:var(--page-accent); }

/* Brand column */
.ma-footer__brand{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.ma-footer__brand-head{
  display:flex;
  align-items:center;
  gap:var(--space-2xs);
  text-decoration:none;
  margin-block-end:var(--space-2xs);
}
.ma-footer__name{
  font-weight:var(--fw-bold);
  font-size:var(--step-1);
  color:var(--text-strong);
}
.ma-footer__brand p{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}
.ma-footer__brand a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-brand);
}
.ma-footer__brand a:hover{ color:var(--page-accent); }

/* Legal bar */
.ma-footer__legal{
  border-top:1px solid var(--border);
  padding-block-start:var(--space-m);
}
.ma-footer__legal p{
  font-size:var(--step--2);
  color:var(--text-muted);
  line-height:var(--leading-body);
}
.ma-footer__legal a{
  color:var(--text-muted);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-brand);
}
.ma-footer__legal a:hover{ color:var(--text-secondary); }

/* Responsive footer */
@media (max-width:900px){
  .ma-footer__grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:560px){
  .ma-footer__grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   §3.3  CTA BAND  (.ma-cta-band)
   ============================================================ */

.ma-cta-band{
  background:var(--surface-1);
  border-radius:var(--radius-2xl);
  box-shadow:var(--glow-lg);
  padding:var(--section-pad) var(--space-l);
  text-align:center;
  overflow:hidden;
  position:relative;
  margin-block-end:var(--space-2xl);
}

/* Subtle background mesh accent (static; drift added by JS in Task 10) */
.ma-cta-band::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, var(--accent-tint), transparent 70%);
  pointer-events:none;
}

.ma-cta-band .container{
  position:relative;
  z-index:1;
}

.ma-cta-band__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-tight);
  margin-block-end:var(--space-l);
}

.ma-cta-band__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-m);
}

/* ============================================================
   §3.3  FORM BASE
   ============================================================ */

/* Field wrapper */
.ma-field{
  display:flex;
  flex-direction:column;
  gap:var(--space-3xs);
  position:relative;
}

/* Label */
.ma-label{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-brand);
}

/* Input / textarea / select */
.ma-input{
  width:100%;
  background:var(--surface-inset);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:var(--space-xs) var(--space-s);
  font-size:var(--step-0);
  color:var(--text);
  min-height:44px;
  transition:
    border-color var(--dur-fast) var(--ease-brand),
    box-shadow   var(--dur-fast) var(--ease-brand),
    background   var(--dur-fast) var(--ease-brand);
}
.ma-input::placeholder{ color:var(--text-muted); }

.ma-input:focus-visible,
.ma-input:focus{
  outline:none;
  border-color:var(--border-accent);
  box-shadow:var(--ring);
}

/* Error state */
.ma-field--error .ma-input{
  border-color:var(--state-error);
  background:var(--state-error-bg);
}
.ma-field--error .ma-label{
  color:var(--state-error);
}

/* Success state */
.ma-field--success .ma-input{
  border-color:var(--state-success);
  background:var(--state-success-bg);
}
.ma-field--success .ma-label{
  color:var(--state-success);
}

/* Field message (error/hint) */
.ma-field__msg{
  font-size:var(--step--2);
  color:var(--text-muted);
  line-height:var(--leading-body);
}
.ma-field--error .ma-field__msg{
  color:var(--state-error);
}
.ma-field--success .ma-field__msg{
  color:var(--state-success);
}

/* Textarea */
textarea.ma-input{
  resize:vertical;
  min-height:120px;
}

/* ============================================================
   §3.3  BADGE + CHIP  (.ma-badge, .ma-chip)
   ============================================================ */

/* Badge - non-interactive label pill */
.ma-badge{
  display:inline-flex;
  align-items:center;
  padding:0.25em 0.75em;
  border-radius:var(--radius-pill);
  background:var(--surface-3);
  color:var(--text-secondary);
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  line-height:1;
  white-space:nowrap;
}
.ma-badge--accent{
  background:var(--accent-tint);
  color:var(--page-accent);
}
.ma-badge--success{
  background:var(--green-tint);
  color:var(--green-500);
}

/* Chip - interactive filter toggle */
.ma-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  padding:0.4em 1em;
  min-height:36px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-secondary);
  font-size:var(--step--1);
  font-weight:var(--fw-medium);
  cursor:pointer;
  text-decoration:none;
  transition:
    background-color var(--dur-fast) var(--ease-brand),
    border-color     var(--dur-fast) var(--ease-brand),
    color            var(--dur-fast) var(--ease-brand);
}
.ma-chip:hover{
  border-color:var(--border-accent);
  color:var(--text-strong);
}
.ma-chip:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}
.ma-chip.is-active,
.ma-chip[aria-pressed="true"]{
  background:var(--page-accent-soft);
  border-color:var(--border-accent);
  color:var(--page-accent);
}

/* ============================================================
   §3.3  CARD BASE  (.ma-card)
   ============================================================ */

.ma-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-l);
  box-shadow:var(--elevation-card);
  text-decoration:none;
  color:inherit;
  transition:
    background-color var(--dur-base) var(--ease-brand),
    border-color     var(--dur-base) var(--ease-brand),
    box-shadow       var(--dur-base) var(--ease-brand),
    transform        var(--dur-base) var(--ease-spring);
}
.ma-card:hover{
  background:var(--surface-3);
  border-color:var(--border-accent);
  box-shadow:var(--elevation-card-hover);
  transform:translateY(-3px);
}
.ma-card:focus-visible{
  outline:none;
  box-shadow:var(--ring), var(--elevation-card);
}

/* Card icon chip (optional, top-left) */
.ma-card .icon{
  color:var(--page-accent);
  margin-block-end:var(--space-3xs);
}

/* Card title */
.ma-card__title{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
}

/* Card description / body */
.ma-card__desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
  flex-grow:1;
}

/* ── Service card variant (.ma-card--service) ── */
.ma-card--service{
  padding:var(--space-m);
}
.ma-card--service .icon{
  width:1.5rem;
  height:1.5rem;
  color:var(--page-accent);
}
.ma-card--service .ma-card__title{
  font-size:var(--step-0);
  font-weight:var(--fw-semibold);
}
.ma-card--service .ma-card__desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
}
.ma-card--service .ma-card__price{
  display:inline-block;
  margin-block-start:auto;
  font-size:var(--step--1);
  font-weight:var(--fw-medium);
  color:var(--page-accent);
  padding-block-start:var(--space-3xs);
}

/* ============================================================
   §3.5.3  Icon utilities (referenced from §3.3 anatomy)
   ============================================================ */
.icon{
  width:1.5rem;
  height:1.5rem;
  flex-shrink:0;
  color:var(--page-accent);
}
.icon--inherit{ color:currentColor; }
.icon--duotone{ --icon-accent:var(--green-500); }

/* ── Footer price + brand mark ───────────────────────────── */
.ma-footer__price{ color:var(--text-muted); font-size:var(--step--2); margin-inline-start:var(--space-3xs); white-space:nowrap; }
.ma-footer__mark{ color:var(--accent-500); flex-shrink:0; }

/* ── Styleguide helpers (internal) ── */
.sg-swatches{ display:flex; flex-wrap:wrap; gap:var(--space-s); }
.sg-swatch{ display:flex; align-items:flex-end; min-width:120px; height:80px; padding:var(--space-2xs); border:1px solid var(--border); border-radius:var(--radius-md); font-size:var(--step--2); color:var(--text-strong); }
.sg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-m); }
.sg-icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:var(--space-m); }
.sg-icons figure{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2xs); color:var(--text-secondary); font-size:var(--step--2); }
.page-main > section{ margin-block:var(--space-2xl); }

/* ==========================================================================
   SERVICE PAGE COMPONENTS - shared across all 4 service pages
   All colors via tokens; per-page accent auto-flows from body[data-page="*"].
   Prefixes: .svc-* = service-page-specific layout; .ma-* = reusable chrome.
   ========================================================================== */

/* ============================================================
   1. SERVICE HERO  (.svc-hero)
   Two-col desktop (text left, illustration right); stacked mobile.
   No full-bleed - contained; nav offset applied via .page-main.
   ============================================================ */

.svc-hero{
  position:relative;
  padding-block: var(--space-xl) var(--space-2xl); /* .page-main already clears the fixed nav */
  overflow:clip;
}

/* Ambient gradient field fills the hero space (the bespoke illustration was removed) */
.svc-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55rem 38rem at 82% 16%, var(--page-accent-soft), transparent 60%);
  opacity:.7;
}
.svc-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:32vw; max-width:440px; aspect-ratio:1; border-radius:50%;
  top:34%; right:-6%; transform:translateY(-50%);
  background:radial-gradient(circle, var(--page-accent), transparent 70%);
  filter:blur(80px); opacity:.2;
}

/* Shared ambient wash for the other page-intro / hero sections so they fill the
   space (no empty right side) and feel designed rather than blog-like. */
.pricing-intro,
.services-hub__intro,
.contact-intro,
.article-hero{
  position:relative;
  overflow:clip;
}
.pricing-intro::before,
.services-hub__intro::before,
.contact-intro::before,
.article-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(48rem 32rem at 84% 14%, var(--page-accent-soft), transparent 62%);
  opacity:.55;
}
.pricing-intro > *,
.services-hub__intro > *,
.contact-intro > *,
.article-hero > *{
  position:relative; z-index:1;
}

/* Centred intro composition - a focal opening, distinct from the left-aligned body below */
.pricing-intro .container,
.services-hub__intro .container,
.contact-intro .container{
  text-align:center;
  max-width:62rem;
  margin-inline:auto;
}
.pricing-intro .answer-lead,
.services-hub__intro .services-hub__lead,
.contact-intro .answer-lead{
  border-inline-start:0;
  padding-inline-start:0;
  max-width:46rem;
  margin-inline:auto;
}
.services-hub__intro .services-hub__cta{ justify-content:center; }
.services-hub__intro .services-hub__title{ margin-inline:auto; }
.contact-form-section .wiz{ margin-inline:auto; }

.svc-hero__inner{
  /* asymmetric two-column: roomy text column + an "at a glance" facts card (no illustration) */
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-l), 5vw, var(--space-3xl));
  align-items:start;
}

/* Text column */
.svc-hero__text{
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
  min-width:0;
}

/* Eyebrow (breadcrumb or service category label) */
.svc-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--page-accent);
}

/* H1 - note: base.css [class*="hero"] > h1 (0,1,1) would force --step-5 (too big for
   these long service headlines), so the .svc-hero .svc-hero__title rule below (0,2,0) wins. */
.svc-hero__title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  color:var(--text-strong);
  line-height:1.1;
  letter-spacing:var(--tracking-display);
}
.svc-hero .svc-hero__title{
  font-size:clamp(2.4rem, 1.7rem + 2.2vw, 3.8rem);
}

/* Subhead */
.svc-hero__sub{
  font-size:var(--step-1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
  max-width:38rem;
}

/* Price chip - accent-tint bg, page-accent text, rounded-full, small */
.svc-hero__chip{
  display:inline-flex;
  align-self:flex-start;   /* content-width pill, not a stretched bar */
  align-items:center;
  gap:var(--space-2xs);
  padding:0.35em 1em;
  border-radius:var(--radius-pill);
  background:var(--page-accent-soft);
  color:var(--page-accent);
  border:1px solid var(--border-accent);
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  line-height:1.3;
  flex-wrap:wrap;            /* wrap on narrow phones instead of overflowing */
}

/* Button row */
.svc-hero__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-s);
}

/* Answer-lead block (reuses global .answer-lead; scoped here for spacing context) */
.svc-hero .answer-lead{
  margin-block-start:var(--space-xs);
}

/* Illustration removed per design direction - hidden in case markup lingers before cleanup */
.svc-hero__illustration{ display:none; }

/* "At a glance" facts card - the right-side content anchor that replaces the old illustration */
.svc-hero__facts{
  align-self:start;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-l);
  box-shadow:var(--shadow-md);
}
.svc-hero__facts-label{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--page-accent);
  margin-block-end:var(--space-s);
}
.svc-hero__facts-list{ display:flex; flex-direction:column; }
.svc-hero__facts-list > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-block:var(--space-s);
  border-block-end:1px solid var(--border);
}
.svc-hero__facts-list > div:last-child{ border-block-end:none; padding-block-end:0; }
.svc-hero__facts dt{ font-size:var(--step--1); color:var(--text-muted); }
.svc-hero__facts dd{ color:var(--text-strong); font-weight:var(--fw-medium); }
.svc-hero__facts-price{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3);
  line-height:1;
  color:var(--text-strong);
}
.svc-hero__facts-price .price{ color:var(--text-strong); }

@media (max-width: 900px){
  .svc-hero__inner{ grid-template-columns:1fr; gap:var(--space-l); }
  .svc-hero__text{ max-width:48rem; }
  .svc-hero__facts{ max-width:34rem; }
}

/* ============================================================
   2. SERVICE PROBLEM  (.svc-problem)
   "Is this you?" list - icon + short line items on a muted card bg.
   ============================================================ */

.svc-problem{
  /* full-width tinted band (was a viewport-wide rounded "card" that mismatched the
     container-constrained content); the inner .container handles width + gutters */
  background:var(--surface-1);
  padding-block:var(--space-2xl);
}

.svc-problem__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-m);
  margin-block-start:var(--space-l);
}
@media (max-width:600px){ .svc-problem__grid{ grid-template-columns:1fr; } }

.svc-problem__item{
  display:flex;
  align-items:flex-start;
  gap:var(--space-s);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-m);
  transition:border-color var(--dur-fast) var(--ease-brand);
}

.svc-problem__item:hover{
  border-color:var(--border-strong);
}

.svc-problem__item .icon{
  color:var(--text-muted);
  flex-shrink:0;
  margin-block-start:2px;
}

.svc-problem__text{
  font-size:var(--step-0);
  color:var(--text-secondary);
  line-height:var(--leading-tight);
}

/* ============================================================
   3. SERVICE DELIVERABLES  (.svc-deliverables)
   Responsive icon grid - icon + title + blurb per item.
   ============================================================ */

.svc-deliverables__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-l);
  margin-block-start:var(--space-l);
}
@media (max-width:1000px){ .svc-deliverables__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .svc-deliverables__grid{ grid-template-columns:1fr; } }

.svc-deliverables__item{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-l);
  box-shadow:var(--elevation-card);
  transition:
    background-color var(--dur-base) var(--ease-brand),
    border-color     var(--dur-base) var(--ease-brand),
    box-shadow       var(--dur-base) var(--ease-brand),
    transform        var(--dur-base) var(--ease-spring);
}

.svc-deliverables__item:hover{
  background:var(--surface-3);
  border-color:var(--border-accent);
  box-shadow:var(--elevation-card-hover);
  transform:translateY(-3px);
}

.svc-deliverables__item .icon{
  color:var(--page-accent);
  width:1.75rem;
  height:1.75rem;
  margin-block-end:var(--space-3xs);
}

.svc-deliverables__title{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
}

.svc-deliverables__desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
  flex-grow:1;
}

/* ============================================================
   4. COMPARE TABLE  (.ma-compare)
   Premium responsive table - not zebra-garish; hairline separators.
   Wrap in .ma-compare__wrap for mobile horizontal scroll.
   ============================================================ */

.ma-compare__wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  margin-block-start:var(--space-l);
}

.ma-compare{
  width:100%;
  border-collapse:collapse;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-0);
  color:var(--text);
}

/* Header row */
.ma-compare thead tr{
  background:var(--surface-3);
}

.ma-compare thead th{
  padding:var(--space-s) var(--space-m);
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-align:left;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}

/* First header cell - label column */
.ma-compare thead th:first-child{
  width:11rem;
}

/* Body cells */
.ma-compare tbody tr{
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}

.ma-compare tbody tr:last-child{
  border-bottom:none;
}

.ma-compare tbody tr:hover{
  background:var(--surface-3);
}

.ma-compare tbody td{
  padding:var(--space-s) var(--space-m);
  vertical-align:top;
  line-height:var(--leading-body);
  color:var(--text-secondary);
  border-right:1px solid var(--border);
}

.ma-compare tbody td:last-child{
  border-right:none;
}

/* First column - row label, emphasized */
.ma-compare tbody td:first-child{
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  white-space:nowrap;
  background:var(--surface-1);
}

/* Check / cross icons within table cells */
.ma-compare .icon--check{
  color:var(--state-success);
}
.ma-compare .icon--no{
  color:var(--text-muted);
}

/* ============================================================
   5. PROCESS STEPS  (.ma-process)
   Numbered step sequence - big Playfair number, title, blurb.
   Horizontal row on desktop, vertical on mobile.
   JS toggles .is-active on steps; CSS drives accent ignition.
   ============================================================ */

.ma-process{
  margin-block-start:var(--space-l);
}

.ma-process__track{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centre orphan steps (e.g. the 2 sitting below a row of 3) */
  gap:var(--space-m);
  list-style:none;
  margin-block-start:var(--space-l);
  padding:0;
}

.ma-process__step{
  flex:0 1 calc(33.333% - var(--space-m));
  min-width:13.5rem;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-l);
  transition:border-color var(--dur-base) var(--ease-brand);
}
.ma-process__step.is-active{ border-color:var(--border-accent); }
@media (max-width:960px){ .ma-process__step{ flex-basis:calc(50% - var(--space-m)); } }
@media (max-width:600px){ .ma-process__step{ flex-basis:100%; } }

/* Step number - big Playfair display */
.ma-process__n{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-4);
  font-weight:700;
  color:var(--text-muted);
  line-height:1;
  letter-spacing:var(--tracking-display);
  transition:color var(--dur-base) var(--ease-brand);
}

.ma-process__step.is-active .ma-process__n{
  color:var(--page-accent);
}

.ma-process__title{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
}

.ma-process__desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* ============================================================
   SERVICE DETAIL SECTIONS - rhythm + previously-unstyled blocks
   (svc-proof, svc-checklist, svc-aftercare, svc-why-us)
   ============================================================ */

/* Consistent vertical rhythm + alternating tint bands so sections stop reading flat */
.svc-deliverables,
.svc-proof,
.svc-checklist,
.svc-aftercare,
.svc-why-us,
.svc-pricing-section,
.svc-compare-section,
.svc-related{
  padding-block: var(--space-2xl);
}
.svc-proof,
.svc-aftercare{ background: var(--surface-1); }

/* Proof: testimonial card + stat cards */
.svc-proof__testimonial{
  margin-block-start: var(--space-l);
  max-width: 52rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--page-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-xl);
}
.svc-proof__quote-mark{ color: var(--page-accent); margin-block-end: var(--space-s); }
.svc-proof__quote{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--step-2);
  color: var(--text-strong);
  line-height: var(--leading-tight);
}
.svc-proof__attribution{ margin-block-start: var(--space-s); color: var(--text-muted); font-size: var(--step--1); }
.svc-proof__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}
.svc-proof__stat{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
}
.svc-proof__stat-value{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--text-strong);
}
.svc-proof__stat-label{ margin-block-start: var(--space-2xs); color: var(--text-secondary); font-size: var(--step--1); line-height: var(--leading-body); }
@media (max-width: 680px){ .svc-proof__stats{ grid-template-columns: 1fr; } }

/* Checklist: numbered cards (3-up; symmetric for 6 or 9 items) */
.svc-checklist__intro{
  margin-block-start: var(--space-s);
  max-width: 46rem;
  color: var(--text-secondary);
  font-size: var(--step-1);
  line-height: var(--leading-body);
}
.svc-checklist__list{
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-xl);
}
.svc-checklist__item{
  display: flex;
  gap: var(--space-s);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
}
.svc-checklist__num{
  flex-shrink: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--page-accent);
  line-height: 1;
}
.svc-checklist__item strong{ display: block; color: var(--text-strong); margin-block-end: var(--space-2xs); }
.svc-checklist__item p{ color: var(--text-secondary); font-size: var(--step--1); line-height: var(--leading-body); }
@media (max-width: 900px){ .svc-checklist__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .svc-checklist__list{ grid-template-columns: 1fr; } }

/* Aftercare: centred CTA band */
.svc-aftercare__body{
  margin-block-start: var(--space-m);
  max-width: 48rem;
  color: var(--text-secondary);
  font-size: var(--step-1);
  line-height: var(--leading-body);
}
.svc-aftercare__cta{ margin-block-start: var(--space-l); }

/* Why-us: 3-up cards (.why__grid grid is home-scoped, so define it here) */
.svc-why-us .why__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}
.svc-why-us .why__item{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
}
.svc-why-us .why__item .icon{ color: var(--page-accent); width: 1.75rem; height: 1.75rem; }
.svc-why-us .why__item h3{ font-size: var(--step-1); margin-block: var(--space-s) var(--space-2xs); color: var(--text-strong); }
.svc-why-us .why__item p{ color: var(--text-secondary); line-height: var(--leading-body); }
@media (max-width: 760px){ .svc-why-us .why__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   6. PRICING BLOCK  (.ma-pricing)
   Centered price block - Playfair number, "starting" label, trust copy, CTA.
   ============================================================ */

.ma-pricing{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-m);
  background:var(--surface-2);
  border:1px solid var(--border-accent);
  border-radius:var(--radius-2xl);
  padding:var(--space-2xl) var(--space-xl);
  text-align:center;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  max-width:36rem;
  margin-inline:auto;
}

/* Subtle accent blush behind the block */
.ma-pricing::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--page-accent-soft), transparent 70%);
  pointer-events:none;
}

.ma-pricing > *{
  position:relative;
  z-index:1;
}

.ma-pricing__label{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--page-accent);
}

.ma-pricing__price{
  display:flex;
  align-items:baseline;
  gap:var(--space-2xs);
  flex-wrap:wrap;
  justify-content:center;
}

.ma-pricing__amount{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-5);
  font-weight:700;
  color:var(--text-strong);
  letter-spacing:var(--tracking-display);
  line-height:1;
}

.ma-pricing__currency{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
}

.ma-pricing__qualifier{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1);
  color:var(--text-muted);
  align-self:flex-end;
  padding-block-end:0.2em;
}

.ma-pricing__trust{
  font-size:var(--step--1);
  color:var(--text-muted);
  line-height:var(--leading-body);
  max-width:24rem;
}

.ma-pricing__cta{
  margin-block-start:var(--space-2xs);
}

/* ============================================================
   7. FAQ ACCORDION  (.ma-faq)
   Native <details>/<summary> - JS-free, fully operable.
   Chevron rotates on [open]; page-accent on open.
   ============================================================ */

.ma-faq__list{
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  max-width:52rem;            /* reading width - was full-bleed/dull */
  margin-block-start:var(--space-l);
}

.ma-faq__item{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-brand);
}
.ma-faq__item[open]{
  border-color:var(--border-accent);
}

/* Remove native disclosure marker */
.ma-faq__item summary::-webkit-details-marker{ display:none; }
.ma-faq__item summary{ list-style:none; }

/* Summary = question row */
.ma-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-m);
  padding:var(--space-m) var(--space-l);
  cursor:pointer;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-1);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
  transition:
    color       var(--dur-fast) var(--ease-brand),
    background  var(--dur-fast) var(--ease-brand);
  user-select:none;
  min-height:56px;
}

.ma-faq__q::-webkit-details-marker{ display:none; }

/* Chevron icon - rotates when open */
.ma-faq__q::after{
  content:'';
  display:block;
  flex-shrink:0;
  width:1.25rem;
  height:1.25rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition:transform var(--dur-fast) var(--ease-brand);
}

/* Open state */
.ma-faq__item[open] .ma-faq__q{
  color:var(--page-accent);
  background:var(--page-accent-soft);
}
.ma-faq__item[open] .ma-faq__q::after{
  transform:rotate(180deg);
}

.ma-faq__q:hover{
  color:var(--text-strong);
  background:var(--surface-3);
}
.ma-faq__item[open] .ma-faq__q:hover{
  background:var(--page-accent-soft);
}

/* Focus ring */
.ma-faq__q:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* Answer body */
.ma-faq__a{
  padding:var(--space-m) var(--space-l) var(--space-l);
  font-size:var(--step-0);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* CSS height animation on open/close (no JS required) */
@media (prefers-reduced-motion: no-preference){
  .ma-faq__item:not([open]) .ma-faq__a{
    animation:none;
  }
  .ma-faq__item[open] .ma-faq__a{
    animation:faq-open var(--dur-base) var(--ease-brand);
  }
  @keyframes faq-open{
    from{ opacity:0; transform:translateY(-4px); }
    to  { opacity:1; transform:translateY(0); }
  }
}

/* ============================================================
   8. RELATED SERVICES  (.svc-related)
   3-up grid of sibling service cards; reuses .ma-card--service anatomy.
   ============================================================ */

.svc-related__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-l);
  margin-block-start:var(--space-l);
}
@media (max-width:800px){ .svc-related__grid{ grid-template-columns:1fr; } }

/* Individual related card - extends .ma-card--service */
.svc-related__card{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-l);
  text-decoration:none;
  color:inherit;
  box-shadow:var(--elevation-card);
  transition:
    background-color var(--dur-base) var(--ease-brand),
    border-color     var(--dur-base) var(--ease-brand),
    box-shadow       var(--dur-base) var(--ease-brand),
    transform        var(--dur-base) var(--ease-spring);
}

.svc-related__card:hover{
  background:var(--surface-3);
  border-color:var(--border-accent);
  box-shadow:var(--elevation-card-hover);
  transform:translateY(-3px);
}

.svc-related__card:focus-visible{
  outline:none;
  box-shadow:var(--ring), var(--elevation-card);
}

.svc-related__card .icon{
  color:var(--page-accent);
  width:1.5rem;
  height:1.5rem;
}

.svc-related__title{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-0);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
}

.svc-related__desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
  flex-grow:1;
}

.svc-related__price{
  display:inline-block;
  margin-block-start:auto;
  font-size:var(--step--1);
  font-weight:var(--fw-medium);
  color:var(--page-accent);
  padding-block-start:var(--space-3xs);
}

.svc-related__arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  font-size:var(--step--1);
  font-weight:var(--fw-medium);
  color:var(--page-accent);
  margin-block-start:var(--space-2xs);
  transition:gap var(--dur-fast) var(--ease-brand);
}
.svc-related__card:hover .svc-related__arrow{
  gap:var(--space-xs);
}

/* ==========================================================================
   VISUALLY-HIDDEN UTILITY  (.vh)
   Screen-reader accessible; removed from visual layout.
   ========================================================================== */

.vh{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   MULTI-STEP WIZARD  (.wiz)
   Markup-only styles - JS behavior is a separate task.
   Steps are shown/hidden via the [hidden] attribute (JS toggles it).
   Tokens: --surface-*, --border*, --text*, --accent-*, --page-accent,
           --radius-*, --space-*, --step-*, --ease-brand, --dur-*.
   ========================================================================== */

/* ── Wizard shell ──────────────────────────────────────────── */
.wiz{
  display:flex;
  flex-direction:column;
  gap:var(--space-l);
  width:100%;
}

/* ── Step (fieldset) ──────────────────────────────────────── */
.wiz__step{
  border:none;
  padding:0;
  margin:0;
  min-inline-size:0;
}

/* Hidden steps - JS removes [hidden] to reveal */
.wiz__step[hidden]{
  display:none;
}

/* Legend (step heading) */
.wiz__legend{
  display:block;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-2);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
  margin-block-end:var(--space-m);
  padding:0;
  /* legends are quirky in flex/grid; contain-display normalises it */
  width:100%;
}

/* ── Progress stepper ─────────────────────────────────────── */
.wiz__progress{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:0;
  counter-reset:wiz-step;
}

.wiz__progress li{
  flex:1;
  counter-increment:wiz-step;
  font-size:var(--step--2);
  color:var(--text-muted);
  text-align:center;
  padding-block-end:var(--space-xs);
  border-bottom:2px solid var(--border-strong);
  position:relative;
  transition:
    color var(--dur-fast) var(--ease-brand),
    border-color var(--dur-fast) var(--ease-brand);
}

/* Step number bubble via pseudo */
.wiz__progress li::before{
  content:counter(wiz-step);
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--2);
  font-weight:var(--fw-semibold);
  color:var(--text-muted);
  margin-inline:auto;
  margin-block-end:var(--space-3xs);
  transition:
    background var(--dur-fast) var(--ease-brand),
    color var(--dur-fast) var(--ease-brand),
    border-color var(--dur-fast) var(--ease-brand);
}

/* Active step - JS adds [data-active] */
.wiz__progress li[data-active]{
  color:var(--page-accent);
  border-color:var(--page-accent);
  font-weight:var(--fw-semibold);
}

.wiz__progress li[data-active]::before{
  background:var(--page-accent);
  color:var(--text-on-accent);
  border-color:var(--page-accent);
}

/* Completed step - JS adds [data-done] */
.wiz__progress li[data-done]{
  color:var(--text-secondary);
  border-color:var(--accent-500);
}

.wiz__progress li[data-done]::before{
  background:var(--accent-tint);
  color:var(--accent-300);
  border-color:var(--accent-500);
}

/* ── Hint text ────────────────────────────────────────────── */
.wiz__hint{
  font-size:var(--step--1);
  color:var(--text-secondary);
  margin-block-end:var(--space-m);
  margin-block-start:calc(var(--space-xs) * -1);
}

/* ── Service/location radio cards ────────────────────────── */
.wiz__cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-m);
  width:100%;
}

/* 2-column layout variant (location step) */
.wiz__cards--2{
  grid-template-columns:repeat(2,1fr);
  max-width:32rem;
}

/* Radio card label */
.wiz__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-xs);
  padding:var(--space-m);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  cursor:pointer;
  position:relative;
  transition:
    background-color var(--dur-fast) var(--ease-brand),
    border-color     var(--dur-fast) var(--ease-brand),
    box-shadow       var(--dur-fast) var(--ease-brand);
}

.wiz__card:hover{
  background:var(--surface-3);
  border-color:var(--border-strong);
}

/* Hide the native radio visually but keep it accessible */
.wiz__card input[type="radio"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Selected card - :has() support (>93% global coverage) */
.wiz__card:has(input:checked){
  background:var(--page-accent-soft, var(--accent-tint));
  border-color:var(--page-accent);
  box-shadow:0 0 0 1px var(--page-accent);
}

/* Focus-within ring for keyboard users */
.wiz__card:has(input:focus-visible){
  outline:none;
  box-shadow:var(--ring);
}

/* Card icon */
.wiz__card .icon{
  color:var(--page-accent);
}

/* Card title */
.wiz__card-title{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step-0);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
}

/* Card description */
.wiz__card-desc{
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* ── Per-service field group ─────────────────────────────── */
.wiz__svc-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
}

.wiz__svc-group[hidden]{
  display:none;
}

/* ── Navigation row ──────────────────────────────────────── */
.wiz__nav{
  display:flex;
  align-items:center;
  gap:var(--space-s);
  padding-block-start:var(--space-xs);
}

/* Push submit to the right when back is hidden */
.wiz__nav [data-wiz-submit]{
  margin-inline-start:auto;
}

/* ── Review summary (step 5, populated by JS) ──────────────── */
.wiz__review{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-m);
  font-size:var(--step--1);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* Empty state - no border/bg when JS hasn't populated it */
.wiz__review:empty{
  display:none;
}

/* ── Error banner ─────────────────────────────────────────── */
.wiz__error{
  font-size:var(--step--1);
  color:var(--state-error);
  background:var(--state-error-bg);
  border:1px solid rgba(248,113,113,0.20);
  border-radius:var(--radius-sm);
  padding:var(--space-xs) var(--space-s);
  margin:0;
}

.wiz__error[hidden]{
  display:none;
}

.wiz__error a{
  color:var(--state-error);
  text-decoration:underline;
}

/* ── Success / confirm panel ─────────────────────────────── */
.wiz__confirm{
  text-align:center;
  padding:var(--space-2xl) var(--space-l);
  background:var(--surface-1);
  border:1px solid var(--border-accent);
  border-radius:var(--radius-xl);
}

.wiz__confirm[hidden]{
  display:none;
}

/* ── Reduced-motion: skip step transitions ───────────────── */
@media (prefers-reduced-motion: reduce){
  .wiz__step,
  .wiz__card,
  .wiz__progress li,
  .wiz__progress li::before{
    transition:none;
  }
}

/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width:560px){
  .wiz__cards{
    grid-template-columns:1fr;
  }
  .wiz__cards--2{
    grid-template-columns:1fr;
    max-width:none;
  }
  .wiz__progress li{
    font-size:0;  /* hide text labels; show only bubbles */
  }
  .wiz__progress li::before{
    font-size:var(--step--2);
  }
}

/* ==========================================================================
   LEAD WIZARD MODAL  (.ma-modal)
   Focus-trapped dialog; token-based; mobile full-screen.
   z-index above --z-nav (1000) and --z-megamenu (1100); uses --z-overlay (5000).
   ========================================================================== */

.ma-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:grid;
  place-items:center;
  padding:var(--space-l);
}

.ma-modal[hidden]{
  display:none;
}

/* Semi-opaque backdrop */
.ma-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Scrollable panel - sits above overlay */
.ma-modal__panel{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-xl);
  width:min(640px,100%);
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;   /* iOS momentum */
  overscroll-behavior:contain;        /* don't chain scroll to the page */
  box-shadow:var(--shadow-lg);
}

/* Close button - top-right, 44 px tap target */
.ma-modal__close{
  position:absolute;
  top:var(--space-s);
  right:var(--space-s);
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-brand);
}

.ma-modal__close:hover{
  color:var(--text-strong);
}

.ma-modal__close:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* Modal title */
.ma-modal__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  margin-block-end:var(--space-l);
  padding-inline-end:var(--space-xl); /* clear the close button */
}

/* Mobile - full-screen panel that scrolls internally (the page stays locked) */
@media (max-width:640px){
  .ma-modal{
    padding:0;
  }
  .ma-modal__panel{
    width:100%;
    height:100dvh;       /* fill the viewport so the panel - not the page - scrolls */
    max-height:100dvh;
    border-radius:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}

/* Reduced-motion - suppress any fade transitions */
@media (prefers-reduced-motion: no-preference){
  .ma-modal__overlay,
  .ma-modal__panel{
    transition:opacity var(--dur-base) var(--ease-brand);
  }
}


/* ── Breadcrumb ────────────────────────────────────────────── */
.ma-breadcrumb{ margin-block-end:var(--space-l); }
.ma-breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2xs); list-style:none; margin:0; padding:0; font-size:var(--step--1); color:var(--text-muted); }
.ma-breadcrumb li{ display:inline-flex; align-items:center; gap:var(--space-2xs); }
.ma-breadcrumb li:not(:last-child)::after{ content:'/'; color:var(--text-muted); opacity:.55; }
.ma-breadcrumb a{ color:var(--text-secondary); text-decoration:none; transition:color var(--dur-fast) var(--ease-brand); }
.ma-breadcrumb a:hover{ color:var(--page-accent); }
.ma-breadcrumb li:last-child a{ color:var(--text); pointer-events:none; cursor:default; }

/* ── About page - scoped where needed; reuses global .why__grid, .ma-process, .svc-related__* ── */

/* ── Hero - single column, illustration removed; ambient gradient fills the space ── */
.about-hero{
  /* .page-main already clears the fixed nav - don't add the nav height again */
  position: relative;
  padding-block: var(--space-2xl);
  overflow: clip;
}
.about-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55rem 38rem at 82% 16%, var(--page-accent-soft), transparent 60%);
  opacity:.7;
}
.about-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:32vw; max-width:440px; aspect-ratio:1; border-radius:50%;
  top:34%; right:-6%; transform:translateY(-50%);
  background:radial-gradient(circle, var(--page-accent), transparent 70%);
  filter:blur(80px); opacity:.2;
}
.about-hero__inner{
  position: relative; z-index: 1;
  display: block;
}
/* Centred display hero - a strong editorial opening, distinct from the left-anchored
   section-splits below and the asymmetric service heroes (adds hero-system variety). */
.about-hero__text{ max-width: 60rem; margin-inline: auto; text-align: center; }
.about-hero .about-hero__title{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--step-6);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin-block: var(--space-s) var(--space-m);
}
.about-hero .answer-lead{
  border-inline-start: 0;
  padding-inline-start: 0;
  max-width: 48rem;
  margin-inline: auto;
}
.about-hero__illustration{ display: none; }
@media (max-width: 768px){
  .about-hero__title{ font-size: var(--step-4); }
}

/* ── Editorial split - sticky heading column + body prose column.
   Turns flat "heading + stacked paragraphs" sections into a structured,
   non-blog two-column layout. Reused by about-story / about-aeo / about-remote. ── */
.section-split__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(var(--space-l), 5vw, var(--space-3xl));
  align-items: start;
}
.section-split__head{ position: sticky; top: calc(var(--nav-h, 72px) + var(--space-l)); }
.section-split__head .eyebrow{ position: relative; padding-block-end: var(--space-xs); }
.section-split__head h2{ margin-block-start: var(--space-s); }
.section-split__body{
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 44rem;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.section-split__body p{ font-size: var(--step-0); }
.section-split__lead{ font-size: var(--step-1) !important; color: var(--text); }
@media (max-width: 860px){
  .section-split__grid{ grid-template-columns: 1fr; gap: var(--space-l); }
  .section-split__head{ position: static; }
}

/* ── Story ── */
.about-story{
  padding-block: var(--space-2xl);
  background: var(--surface-1);
}

/* ── Values - reuses .why__grid from home.css; scope to about ── */
.about-values{
  padding-block: var(--space-2xl);
}
body[data-page="default"] .about-values .why__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
  margin-block-start: var(--space-l);
}
@media (max-width:900px){ body[data-page="default"] .about-values .why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ body[data-page="default"] .about-values .why__grid{ grid-template-columns:1fr; } }

/* ── AEO section ── */
.about-aeo{
  padding-block: var(--space-2xl);
  background: var(--surface-1);
}
.about-aeo__inner{
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 44rem;
}
.about-aeo__inner p{
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.about-aeo__inner code{
  font-size: 0.9em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--page-accent);
}
.about-aeo__chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}
.about-aeo__chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: var(--space-2xs) var(--space-m);
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.about-aeo__chip .icon{
  color: var(--page-accent);
  flex-shrink: 0;
}

/* ── Remote / who we serve ── */
.about-remote{
  padding-block: var(--space-2xl);
}
.about-remote__inner{
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 44rem;
}
.about-remote__inner p{
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.about-remote__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-block-start: var(--space-l);
}
.about-remote__item{
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.about-remote__item .icon{
  color: var(--page-accent);
  flex-shrink: 0;
}

/* ── Services grid ── */
.about-services{
  padding-block: var(--space-2xl);
  background: var(--surface-1);
}

/* ── CTA ── */
.about-cta{
  padding-block: var(--space-2xl);
}
.about-cta__inner{
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.about-cta__inner h2{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.about-cta__inner p{
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.about-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}

/* ── Article / blog post (body[data-page="article"]) ──────────
   Reading-optimised: narrow measure, answer-first lead, rich prose,
   category + meta hero, closing CTA. Pairs with BlogPosting JSON-LD.
   ============================================================ */

/* Hero */
.article-hero{ padding-block: var(--space-2xl) var(--space-l); }
.article-hero__inner{ max-width: 52rem; }
.article-hero__cat{
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--1); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--page-accent);
}
.article-hero__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.1rem, 1.55rem + 1.95vw, 3.35rem);
  line-height:1.12; color:var(--text-strong);
  margin-block: var(--space-s) var(--space-m);
}
.article-hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-s);
  color:var(--text-muted); font-size:var(--step--1);
}
.article-hero__meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.article-hero__excerpt{
  margin-block-start:var(--space-m);
  font-size:var(--step-1); color:var(--text-secondary); line-height:var(--leading-body);
  max-width:46rem;
}

/* Body */
.article-body{ padding-block: var(--space-l) var(--space-2xl); }
.article-body .prose{
  max-width:52rem;
  font-size:var(--step-0);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}
.article-body .prose > * + *{ margin-block-start:var(--space-m); }
.article-lead{
  font-size:var(--step-1); color:var(--text); line-height:var(--leading-body);
  border-inline-start:3px solid var(--page-accent);
  padding-inline-start:var(--space-m);
}
.article-body .prose h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3); color:var(--text-strong); line-height:1.2;
  margin-block-start:var(--space-xl);
}
.article-body .prose h3{
  font-size:var(--step-1); color:var(--text-strong);
  margin-block-start:var(--space-l);
}
.article-body .prose a{ color:var(--page-accent); text-decoration:underline; text-underline-offset:2px; }
.article-body .prose a:hover{ text-decoration:none; }
.article-body .prose strong{ color:var(--text-strong); }
.article-body .prose ul,
.article-body .prose ol{ padding-inline-start:1.3em; display:flex; flex-direction:column; gap:var(--space-2xs); }
.article-body .prose li{ padding-inline-start:.2em; }
.article-body .prose li::marker{ color:var(--page-accent); }
.article-body .prose blockquote{
  border-inline-start:3px solid var(--page-accent);
  padding:var(--space-xs) var(--space-m);
  color:var(--text); font-style:italic;
  background:var(--surface-1); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.article-body .prose code{
  font-size:.9em; background:var(--surface-3); border:1px solid var(--border);
  border-radius:4px; padding:1px 6px; color:var(--page-accent);
}
/* Answer-box: tight, quotable summary blocks for AEO/GEO */
.article-body .prose .answer-box{
  background:var(--surface-1); border:1px solid var(--border-accent);
  border-radius:var(--radius-lg); padding:var(--space-l);
}
.article-body .prose .answer-box > * + *{ margin-block-start:var(--space-s); }
.article-body .prose .answer-box p:first-child{ color:var(--text-strong); font-weight:var(--fw-medium); }

/* Closing CTA band */
.article-cta{ padding-block: var(--space-2xl); background:var(--surface-1); border-block-start:1px solid var(--border); }
.article-cta__inner{ max-width:52rem; display:flex; flex-direction:column; gap:var(--space-m); align-items:flex-start; }
.article-cta__inner h2{ font-family:'Playfair Display',Georgia,serif; font-size:var(--step-3); color:var(--text-strong); line-height:1.2; }
.article-cta__inner p{ color:var(--text-secondary); line-height:var(--leading-body); }
.article-cta__actions{ display:flex; flex-wrap:wrap; gap:var(--space-s); }

/* ── Resources index (hub) ─────────────────────────────────── */
.resources-hub{ padding-block: var(--space-2xl); }
.resources-hub__intro{ max-width:52rem; }
body[data-page="article"] .resources__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-m);
  margin-block-start:var(--space-xl);
}
@media (max-width:680px){ body[data-page="article"] .resources__grid{ grid-template-columns:1fr; } }

/* ── Resources index - article cards ───────────────────────── */
.resources__card{ display:flex; flex-direction:column; gap:var(--space-2xs); position:relative; overflow:hidden; }
.resources__card::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--page-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-brand);
}
a.resources__card:hover{ transform:translateY(-6px); border-color:var(--border-accent); }
a.resources__card:hover::after{ transform:scaleX(1); }
.resources__cat{
  font-family:'Lexend',system-ui,sans-serif; font-size:var(--step--2);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--page-accent); font-weight:var(--fw-semibold);
}
.resources__card h3{ font-size:var(--step-2); color:var(--text-strong); margin-block:var(--space-2xs) 0; }
.resources__card p{ color:var(--text-secondary); }
.resources__meta{ margin-block-start:auto; padding-block-start:var(--space-s); color:var(--text-muted); font-size:var(--step--1); }

/* ── Contact page (body[data-page="default"]) ─────────────────
   The page shipped with .contact-intro / .contact-form-section classes but no
   styles. The lead wizard is included inline here (noModal), so it needs a card.
   ============================================================ */

.contact-intro{ padding-block: var(--space-2xl) var(--space-l); }
.contact-intro h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.1rem, 1.55rem + 1.95vw, 3.35rem);
  line-height:1.12;
  color:var(--text-strong);
  margin-block: var(--space-s) var(--space-m);
}
.contact-intro .answer-lead{ max-width:46rem; }
.contact-intro__nap{
  margin-block-start:var(--space-m);
  font-size:var(--step-0);
  color:var(--text-secondary);
  line-height:var(--leading-body);
}
.contact-intro__nap a{
  color:var(--page-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.contact-intro__nap a:hover{ text-decoration:none; }

.contact-form-section{ padding-block: var(--space-l) var(--space-2xl); }
/* The inline wizard sits on a contained card so it reads as a real form panel */
.contact-form-section .wiz{
  max-width:46rem;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-l), 4vw, var(--space-xl));
  box-shadow:var(--shadow-md);
}

/* ── Home page - scoped to body[data-page="home"] ── */
body[data-page="home"] .home-section{ padding-block: var(--space-2xl); }

#preloader{
  position:fixed; inset:0; z-index:var(--z-preloader);
  display:grid; place-items:center;
  background:var(--surface-0);
  transition:opacity .6s var(--ease-brand), visibility .6s var(--ease-brand);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:var(--space-s); }
.preloader__mark{ color:var(--accent-500); }
.preloader__word{ font-family:'Playfair Display',serif; color:var(--text-strong); letter-spacing:.02em; }

body[data-page="home"] .hero{ position:relative; min-height:min(80vh, 720px); display:grid; align-items:center; padding-block:var(--space-3xl) var(--space-2xl); overflow:clip; }
.hero__bg{ position:absolute; inset:-10% 0; z-index:0; pointer-events:none; }
.hero__mesh{ position:absolute; inset:0; background:var(--grad-brand); filter:blur(120px); opacity:.22; }
.hero__orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.hero__orb--1{ width:46vw; max-width:560px; aspect-ratio:1; background:radial-gradient(circle,var(--accent-500),transparent 70%); top:-8%; right:-6%; }
.hero__orb--2{ width:38vw; max-width:460px; aspect-ratio:1; background:radial-gradient(circle,var(--green-500),transparent 70%); bottom:-12%; left:-8%; opacity:.32; }
.hero__inner{ position:relative; z-index:1; max-width:54rem; }
.hero__title{ font-family:'Playfair Display',serif; font-size:var(--step-6); line-height:1.05; letter-spacing:-.01em; }
.hero__sub{ font-size:var(--step-1); color:var(--text-secondary); margin-block:var(--space-m) var(--space-l); max-width:42rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-s); }
.hero__trust{ margin-block-start:var(--space-m); color:var(--text-muted); font-size:var(--step--1); }

/* Services showcase - bold 4-up grid of service tiles (replaced the weak horizontal pin) */
body[data-page="home"] .services-grid__list{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--space-m);
  margin-block-start:var(--space-xl);
}
.svc-tile{ position:relative; gap:var(--space-s); overflow:hidden; }
.svc-tile::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--page-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-brand);
}
.svc-tile:hover{ transform:translateY(-6px); border-color:var(--border-accent); }
.svc-tile:hover::after{ transform:scaleX(1); }
.svc-tile__icon{
  display:inline-grid; place-items:center; width:3rem; height:3rem;
  border-radius:var(--radius-md); background:var(--page-accent-soft); color:var(--page-accent);
  margin-block-end:var(--space-2xs);
}
.svc-tile .ma-card__title{ font-size:var(--step-1); }
.svc-tile__price{ color:var(--text-secondary); font-size:var(--step--1); margin-block-start:auto; padding-block-start:var(--space-s); }
.svc-tile__price .price{ color:var(--text-strong); font-weight:var(--fw-semibold); }
.svc-tile__cta{ display:inline-flex; align-items:center; gap:6px; color:var(--page-accent); font-weight:var(--fw-medium); font-size:var(--step--1); }
/* Flagship service tile - featured accent treatment (keeps the 4-up grid symmetric) */
.svc-tile--flagship{ border-color:var(--border-accent); background:linear-gradient(160deg, var(--page-accent-soft), var(--surface-2) 62%); }
.svc-tile--flagship::after{ transform:scaleX(1); }
.svc-tile__badge{
  align-self:flex-start;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--2); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--page-accent); background:var(--page-accent-soft);
  border:1px solid var(--border-accent); border-radius:var(--radius-pill);
  padding:2px 10px; margin-block-end:var(--space-2xs);
}
@media (max-width:900px){ body[data-page="home"] .services-grid__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ body[data-page="home"] .services-grid__list{ grid-template-columns:1fr; } }

body[data-page="home"] .trust-bar{ border-block:1px solid var(--border); background:var(--surface-1); }
.trust-bar__row{ display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-l); justify-content:center; align-items:center; padding-block:var(--space-m); color:var(--text); font-size:var(--step--1); font-weight:var(--fw-medium); }
.trust-bar__row span{ display:inline-flex; align-items:center; gap:var(--space-2xs); }
.trust-bar__row .icon{ color:var(--green-500); width:1.1em; height:1.1em; }
body[data-page="home"] .why__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-l); margin-block-start:var(--space-l); }
.why__item .icon{ color:var(--page-accent); }
.why__item h3{ font-size:var(--step-1); margin-block:var(--space-s) var(--space-2xs); }
.why__item p{ color:var(--text-secondary); }
body[data-page="home"] .proof__stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-m); margin-block:var(--space-l); }
.ma-stat{ display:flex; flex-direction:column; gap:var(--space-2xs); padding:var(--space-l) var(--space-m); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-1); }
.ma-stat__value{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.12em; font-family:'Playfair Display',serif; font-size:var(--step-5); line-height:1; color:var(--text-strong); }
.ma-stat__suffix{ font-family:'Lexend',system-ui,sans-serif; font-size:.4em; font-weight:var(--fw-semibold); color:var(--page-accent); letter-spacing:.01em; white-space:nowrap; }
.ma-stat__label{ color:var(--text-secondary); font-size:var(--step--1); margin-block-start:var(--space-2xs); }
@media (max-width:760px){ body[data-page="home"] .proof__stats{ grid-template-columns:repeat(2,1fr); } }
body[data-page="home"] .proof__quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-l); }
.ma-testimonial{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-l); }
.ma-testimonial__mark{ color:var(--green-500); }
.ma-testimonial blockquote{ font-size:var(--step-1); margin-block:var(--space-s); }
.ma-testimonial figcaption{ color:var(--text-muted); font-size:var(--step--1); }
.answer-lead{ font-size:var(--step-2); color:var(--text); max-width:46rem; border-inline-start:3px solid var(--page-accent); padding-inline-start:var(--space-m); }
body[data-page="home"] .problem__inner{ max-width:52rem; }
body[data-page="home"] .process__steps{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-l); margin-block-start:var(--space-l); }
.process__n{ font-family:'Playfair Display',serif; font-size:var(--step-4); color:var(--page-accent); }
.process__step h3{ font-size:var(--step-1); margin-block:var(--space-2xs); }
.process__step p{ color:var(--text-secondary); }
/* Section bands - alternating surface tones give the page a curated rhythm (less flat) */
body[data-page="home"] .why,
body[data-page="home"] .process{ background:var(--surface-1); }
/* Spotlight - an arresting accent moment, not just centred text on the page bg */
.spotlight{
  text-align:center;
  background:linear-gradient(160deg, var(--page-accent-soft), var(--surface-1) 72%);
  border-block:1px solid var(--border-accent);
}
.spotlight__quote{ font-size:var(--step-5); max-width:46rem; margin-inline:auto; color:var(--text-strong); }
.spotlight__by{ color:var(--text-muted); margin-block-start:var(--space-s); }
body[data-page="home"] .resources__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-l); margin-block-start:var(--space-l); }
@media (max-width:900px){
  body[data-page="home"] .why__grid,
  body[data-page="home"] .process__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  body[data-page="home"] .proof__quotes,
  body[data-page="home"] .resources__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body[data-page="home"] .why__grid,
  body[data-page="home"] .process__steps{ grid-template-columns:1fr; }
}
.resources__card{ padding:var(--space-l); display:block; }
.resources__card h3{ font-size:var(--step-1); margin-block-end:var(--space-2xs); }
.resources__card p{ color:var(--text-secondary); }
.resources__soon{ display:inline-block; margin-block-start:var(--space-s); font-size:var(--step--2); color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:2px 10px; }
body[data-page="home"] .home-faq__list{ max-width:48rem; margin-block-start:var(--space-l); }
.home-faq__item{ padding-block:var(--space-m); border-block-end:1px solid var(--border); }
.home-faq__item dt{ font-weight:600; color:var(--text-strong); }
.home-faq__item dd{ color:var(--text-secondary); margin-block-start:var(--space-2xs); }

/* ── Pricing page (body[data-page="default"]) ─────────────────
   The page markup shipped without styles; this is the missing layer.
   Classes: .pricing-intro / .pricing-grid-section / .pricing-grid /
   .pricing-card(+__icon/__name/__descriptor/__from/__price/__includes/__cta)
   / .pricing-notes. (.ma-pricing is a different, service-page component.)
   ============================================================ */

.pricing-intro{ padding-block: var(--space-2xl) var(--space-xl); }
.pricing-intro h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-5);
  line-height:var(--leading-tight);
  color:var(--text-strong);
  margin-block: var(--space-s) var(--space-m);
}

.pricing-grid-section{ padding-block: var(--space-xl) var(--space-2xl); }
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--space-m);
  margin-block-start:var(--space-xl);
}

.pricing-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
  position:relative;
  overflow:hidden;
}
.pricing-card::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--page-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-brand);
}
.pricing-card:hover{ transform:translateY(-6px); border-color:var(--border-accent); }
.pricing-card:hover::after{ transform:scaleX(1); }

.pricing-card__icon{
  box-sizing:border-box;
  width:3rem; height:3rem; padding:.6rem;
  border-radius:var(--radius-md);
  background:var(--page-accent-soft);
  color:var(--page-accent);
  margin-block-end:var(--space-xs);
}
.pricing-card__name{ font-size:var(--step-1); color:var(--text-strong); }
.pricing-card__descriptor{ color:var(--text-secondary); font-size:var(--step--1); }
.pricing-card__from{
  margin-block-start:var(--space-s);
  font-size:var(--step--2);
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  color:var(--text-muted);
}
.pricing-card__price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.1em;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem, 1.6rem + 1.5vw, 2.9rem);
  line-height:1;
  color:var(--text-strong);
}
.pricing-card__per{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:.32em;
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  letter-spacing:.01em;
}
.pricing-card__includes{
  color:var(--text-secondary);
  font-size:var(--step--1);
  line-height:var(--leading-body);
  margin-block:var(--space-s) var(--space-m);
}
.pricing-card__cta{ margin-block-start:auto; width:100%; justify-content:center; }

/* Flagship pricing card - featured accent (keeps the 4-up grid symmetric) */
.pricing-card--flagship{ border-color:var(--border-accent); background:linear-gradient(160deg, var(--page-accent-soft), var(--surface-2) 62%); }
.pricing-card--flagship::after{ transform:scaleX(1); }
.pricing-card__badge{
  align-self:flex-start;
  font-family:'Lexend',system-ui,sans-serif;
  font-size:var(--step--2); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--page-accent); background:var(--page-accent-soft);
  border:1px solid var(--border-accent); border-radius:var(--radius-pill);
  padding:2px 10px; margin-block-end:var(--space-2xs);
}

@media (max-width:1100px){ .pricing-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .pricing-grid{ grid-template-columns:1fr; } }

/* Notes */
.pricing-notes{ padding-block: var(--space-2xl); background:var(--surface-1); }
.pricing-notes__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:var(--step-3);
  line-height:var(--leading-tight);
  color:var(--text-strong);
}
.pricing-notes .prose{ margin-block-start:var(--space-l); max-width:60rem; }
.pricing-notes .prose ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-m); }
.pricing-notes .prose li{ color:var(--text-secondary); line-height:var(--leading-body); padding-inline-start:var(--space-m); border-inline-start:2px solid var(--border-accent); }
.pricing-notes .prose strong{ color:var(--text-strong); }
.pricing-notes__cta{ display:flex; flex-wrap:wrap; gap:var(--space-s); margin-block-start:var(--space-xl); }
.container-narrow{ max-width:64rem; }

/* ── Service pages - shared layout lives in components.css; per-page tweaks here ──
   This file is intentionally minimal. All component anatomy (svc-hero, svc-problem,
   svc-deliverables, ma-compare, ma-process, ma-pricing, ma-faq, svc-related) lives in
   components.css so it can be bundled once and shared. Only genuine per-page layout
   deviations belong here.
   Per-page --page-accent is already handled by tokens.css body[data-page="*"] overrides.
   ── */

/* ── Service heroes are contained, not full-bleed.
      Nav offset (72px + space-2xl) is baked into .svc-hero padding-block-start.
      .page-main provides the outer horizontal padding via .container.          ── */
body[data-page="cms"] .svc-hero,
body[data-page="seo"] .svc-hero,
body[data-page="ecommerce"] .svc-hero,
body[data-page="local"] .svc-hero{
  /* Contained hero - no full-bleed override needed. Nav offset applied in
     .svc-hero via padding-block-start: calc(72px + var(--space-2xl)).
     This rule is intentional as a scoping anchor for future deviations. */
}

/* ── eCommerce: amber accent available as --viz-amber for illustration spot-color.
      No CSS override needed - the illustration SVG references --viz-amber directly.
      Documented here so future authors know where to add art tweaks.            ── */

/* ── Local Business: blue accent available as --viz-blue for illustration spot-color.
      Same pattern as eCommerce above.                                           ── */

/* ── SEO page: the flagship comparison table (.ma-compare) runs full-width to
      maximise its "citable HTML table" AEO value. Unwrap the default container
      narrowing so the table can breathe.                                        ── */
body[data-page="seo"] .svc-compare-section .ma-compare__wrap{
  margin-inline:calc(-1 * var(--gutter));
  border-radius:0;
}

/* ── CMS page: hero illustration uses amber as a spot highlight (--viz-amber).
      The SVG handles this internally; nothing to override in CSS.               ── */

/* ── Pricing block: on mobile, remove the inline max-width constraint so the
      block fills the column cleanly on narrow screens.                         ── */
@media (max-width:600px){
  .ma-pricing{
    max-width:none;
    border-radius:var(--radius-xl);
    padding:var(--space-xl) var(--space-m);
  }
}

/* ── Process track: on very narrow screens collapse to a clean 1-col list ── */
@media (max-width:480px){
  .ma-process__track{
    grid-template-columns:1fr;
  }
}

/* ── Services hub (/services/) ─────────────────────────────────────────────
   Uses data-page="default" (purple accent, no custom override needed).
   ── */

/* Intro section */
.services-hub__intro{
  padding-block:var(--space-2xl);
}
.services-hub__title{
  font-family:'Playfair Display',serif;
  font-size:var(--step-4);
  line-height:var(--leading-tight);
  color:var(--text-strong);
  max-width:36rem;
  margin-block:var(--space-s) var(--space-m);
}
.services-hub__lead{
  font-size:var(--step-1);
  color:var(--text-secondary);
  max-width:44rem;
  margin-block-end:var(--space-l);
}
.services-hub__cta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-s);
}

/* Cards section */
.services-hub__cards-section{
  padding-block:var(--space-2xl);
  background:var(--surface-1);
}
.services-hub__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-l);
  margin-block-start:var(--space-l);
}
@media (max-width:900px){ .services-hub__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.services-hub__card-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--page-accent);
  margin-block-start:var(--space-xs);
  font-size:var(--step--1);
}

/* Compare section */
.services-hub__compare-section{
  padding-block:var(--space-2xl);
}

/* Responsive: narrow screens */
@media (max-width:600px){
  .services-hub__title{
    font-size:var(--step-3);
  }
  .services-hub__grid{
    grid-template-columns:1fr;
  }
}

/* ── Utility pages: thank-you, 404, legal (privacy/terms) ───────
   These shipped with class names but little/no CSS. Token-based styling here.
   ============================================================ */

/* ── Thank-you ── */
.thank-you{ padding-block: var(--space-3xl); }
.thank-you__inner{
  max-width:40rem; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-m);
}
.thank-you__mark{
  display:inline-grid; place-items:center; width:4rem; height:4rem;
  border-radius:var(--radius-pill); background:var(--page-accent-soft); color:var(--page-accent);
}
.thank-you__inner h1{
  font-family:'Playfair Display',Georgia,serif; font-size:var(--step-4);
  color:var(--text-strong); line-height:var(--leading-tight);
}
.thank-you__inner p{ color:var(--text-secondary); line-height:var(--leading-body); }
.thank-you__actions{ display:flex; flex-wrap:wrap; gap:var(--space-s); justify-content:center; margin-block-start:var(--space-s); }

/* ── 404 ── */
.error-404{ padding-block: var(--space-3xl); }
.error-404__inner{
  max-width:42rem; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-s);
}
.error-404__code{ font-family:'Playfair Display',Georgia,serif; font-size:var(--step-6); line-height:1; color:var(--page-accent); }
.error-404__inner h1{ font-family:'Playfair Display',Georgia,serif; font-size:var(--step-4); color:var(--text-strong); line-height:var(--leading-tight); margin-block-start:var(--space-xs); }
.error-404__inner p{ color:var(--text-secondary); line-height:var(--leading-body); }
.error-404__actions{ display:flex; flex-wrap:wrap; gap:var(--space-s); justify-content:center; margin-block-start:var(--space-m); }

/* ── Legal pages (privacy, terms) ── */
.legal-page{ padding-block: var(--space-2xl); }
.legal-page .prose h1{
  font-family:'Playfair Display',Georgia,serif; font-size:var(--step-4);
  color:var(--text-strong); line-height:var(--leading-tight); margin-block: var(--space-s) var(--space-m);
}
.legal-page .prose h2{ font-size:var(--step-2); color:var(--text-strong); margin-block: var(--space-xl) var(--space-s); }
.legal-page .prose h3{ font-size:var(--step-1); color:var(--text-strong); margin-block: var(--space-l) var(--space-2xs); }
.legal-page .prose p{ color:var(--text-secondary); }
.legal-page .prose ul,
.legal-page .prose ol{ color:var(--text-secondary); padding-inline-start:1.3em; display:flex; flex-direction:column; gap:var(--space-2xs); margin-block-start:var(--space-s); }
.legal-page .prose a{ color:var(--page-accent); text-decoration:underline; text-underline-offset:2px; }
.legal-meta{ color:var(--text-muted); font-size:var(--step--1); margin-block-end:var(--space-l); }
.legal-counsel-note{
  background:var(--surface-1); border:1px solid var(--border-accent); border-radius:var(--radius-md);
  padding:var(--space-m); color:var(--text-secondary); margin-block-end:var(--space-l);
}

@media (prefers-reduced-motion: no-preference){ @view-transition{ navigation: auto; } }
#navbar{ view-transition-name: site-nav; }
#footer{ view-transition-name: site-footer; }
.page-main{ view-transition-name: page-content; }
::view-transition-old(page-content){ animation: ma-slide-out var(--dur-page, .4s) var(--ease-brand, cubic-bezier(.16,1,.3,1)); }
::view-transition-new(page-content){ animation: ma-slide-in  var(--dur-page, .4s) var(--ease-brand, cubic-bezier(.16,1,.3,1)); }
@keyframes ma-slide-out{ to  { opacity:0; transform:translateY(-12px); } }
@keyframes ma-slide-in { from{ opacity:0; transform:translateY(12px);  } }