/* ============================================================================
   247 EXPAT — DESIGN SYSTEM v0.1  (staging)
   Platform-agnostic: these tokens and components port to WordPress blocks or a
   static generator unchanged. Nothing here presumes a platform.
   Spec: briefs/247expat-track1-component-spec.md §2 (component library), §7 (CWV).
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* ---- COLOUR · Mediterranean A+ (2026-08-23) --------------------------
     Three accents, three jobs, so nothing competes:
       navy      authority  — headings, wordmark, footer
       turquoise helpful    — key facts, route markers, active states
       coral     action     — a live CTA is the only orange on the page
     Contrast-checked against the page ground #fafaf7:
       ink 14.06:1 · ink-soft 6.23:1 · brand 8.69:1 — all AA
       --sea (#12a5a0) is 2.90:1 and is DECORATIVE ONLY: rails, markers,
         borders. Text uses --sea-ink (#0b7873, 5.09:1).
       --accent (#ef6c45) is 3.04:1 on white and is likewise decorative.
         Buttons use --accent-ink (#c9481f, 4.74:1 with white) as their
         GROUND. Never set coral as a text colour or a button background. */
  --bg:#fafaf7; --surface:#ffffff; --surface-2:#f1f8fa;
  --ink:#132a3e; --ink-soft:#4a6076; --ink-faint:#7d90a3;
  --rule:#dde9ee; --rule-strong:#bfd6de;
  --brand:#0f4c75; --brand-ink:#0b3a5c;
  --sea:#12a5a0; --sea-ink:#0b7873; --sea-soft:#e8f6f5;
  --accent:#ef6c45; --accent-ink:#c9481f; --accent-soft:#fdece6;
  --warn:#9a6b12; --warn-soft:#fbf1dc;
  --info:#0b7873; --info-soft:#e8f6f5;
  --sand:#fdf4e8;

  /* type */
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --step--1:clamp(.83rem,.8rem + .15vw,.9rem);
  --step-0: clamp(1rem,.97rem + .2vw,1.08rem);
  --step-1: clamp(1.2rem,1.1rem + .4vw,1.4rem);
  --step-2: clamp(1.45rem,1.3rem + .7vw,1.8rem);
  --step-3: clamp(1.8rem,1.5rem + 1.4vw,2.5rem);
  --step-4: clamp(2.1rem,1.6rem + 2.2vw,3.1rem);

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;

  --radius:12px; --radius-sm:8px;
  --measure:68ch;
  --shadow:0 1px 2px rgba(15,42,62,.05),0 6px 20px rgba(15,42,62,.07);
}
/* ---- NO AUTO DARK THEME (decision, 2026-08-23) -------------------------
   The previous dark block (#15120f ground, brown panels) is what read as
   "compliance portal at midnight" — it fires whenever the visitor's OS is in
   dark mode, which is most of them. A bright Mediterranean identity has no
   honest dark twin: inverting it produces exactly the mood the reset removed.
   The palette above therefore applies in every OS state. If a dark theme is
   wanted later it should be designed, not derived. Reversible: the previous
   block is in site.css.pre-mediterranean. */

h1,h2,h3{color:var(--brand)}
.cta h3{color:var(--brand)}

/* ---------- 2. BASE ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--accent-ink); text-underline-offset:.16em}
a:hover{color:var(--brand-ink)}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0 0 var(--s4)}
h1{font-size:var(--step-4); margin-bottom:var(--s5)}
h2{font-size:var(--step-2); margin-top:var(--s7)}
h3{font-size:var(--step-1); margin-top:var(--s6)}
p,ul,ol{margin:0 0 var(--s4)}
.prose{max-width:var(--measure)}
.prose > *{max-width:var(--measure)}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{width:100%; max-width:1200px; margin:0 auto; padding-inline:var(--s5)}
.article-grid{display:grid; gap:var(--s7); grid-template-columns:1fr; padding-block:var(--s6) var(--s8)}
/* Grid items default to min-width:auto, so a wide child (the 640px-min comparison
   table) blows the column out past the viewport. This is the fix — without it the
   whole page scrolls sideways on mobile instead of just the table. */
.article-grid > *{min-width:0}
/* Single column at every width. The second column held only the contents
   list, which now sits inline with the content it indexes; .prose is
   measure-capped independently, so removing the column does not lengthen
   a single line of text. */
@media (min-width:1024px){
  /* Centre it. Without this the measure-capped column hugs the left of a
     1200px wrap and leaves the old sidebar's 300px as dead space — trading
     one layout defect for another. Items that set no max-width of their own
     (the hub's route lists) still fill the column. */
  .article-grid{justify-items:center}
  .article-grid > *{width:100%}
}

/* ---------- 4. HEADER / FOOTER (spec §5) -------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.site-header .inner{display:flex; align-items:center; gap:var(--s5); min-height:64px}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.nav{display:none; gap:var(--s5); margin-left:auto; flex-wrap:wrap}
.nav a{font-size:var(--step--1); font-weight:600; color:var(--ink-soft); text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--brand)}
@media (min-width:900px){ .nav{display:flex} }
.header-cta{margin-left:auto}
@media (min-width:900px){ .header-cta{margin-left:0} }
.site-footer{border-top:1px solid var(--rule); background:var(--surface); margin-top:var(--s8)}
.site-footer .inner{padding-block:var(--s6); display:grid; gap:var(--s5)}
.footer-links{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:var(--step--1)}
.footer-links a{color:var(--ink-soft); text-decoration:none}
.footer-links a:hover{color:var(--accent)}
.footer-meta{font-size:var(--step--1); color:var(--ink-faint)}

/* ---------- 5. BREADCRUMBS (spec §4) ------------------------------------ */
.breadcrumb{font-size:var(--step--1); color:var(--ink-faint); margin-bottom:var(--s4)}
.breadcrumb a{color:var(--ink-soft); text-decoration:none}
.breadcrumb a:hover{color:var(--brand-ink)}
.breadcrumb span{margin-inline:var(--s2)}

/* ---------- 6. AUTHOR / REVIEWER STRIP (spec §2.4) ---------------------- */
.byline{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center;
  font-size:var(--step--1); color:var(--ink-soft);
  padding-block:var(--s3); border-block:1px solid var(--rule); margin-bottom:var(--s5);
}
.byline strong{color:var(--ink); font-weight:600}

/* ---------- 7. VERIFIED-DATE BADGE (spec §2.13) ------------------------- */
.verified-badge{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--step--1); font-weight:600; color:var(--info);
  background:var(--info-soft); border-radius:100px; padding:var(--s2) var(--s3);
  margin-bottom:var(--s5);
}

/* ---------- 8. KEY FACTS BOX (spec §2.1) -------------------------------- */
.key-facts{
  background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--sea);
  border-radius:var(--radius); padding:var(--s5); margin-bottom:var(--s6); box-shadow:var(--shadow);
}
.key-facts h2{
  font-size:var(--step--1); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sea-ink); margin:0 0 var(--s4);
}
.key-facts ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.key-facts li{position:relative; padding-left:1.5rem}
.key-facts li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--sea);
}

/* ---------- 9. TOC (spec §2.6) ------------------------------------------ */
.toc{background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s5)}
.toc h2{font-size:var(--step--1); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 var(--s3)}
.toc ol{list-style:none; counter-reset:t; margin:0; padding:0; display:grid; gap:var(--s2)}
.toc li{counter-increment:t; font-size:var(--step--1)}
.toc a{display:flex; gap:var(--s3); color:var(--ink-soft); text-decoration:none}
.toc a::before{content:counter(t); color:var(--sea-ink); font-weight:700; min-width:1.2em}
.toc a:hover{color:var(--sea-ink)}

/* ---------- 10. CTA BLOCK (spec §2.2) ----------------------------------- */
/* Cream, not white-on-white. Same decision as v2.css: a commercial card has to
   separate from its ground before anything else about it matters. 2026-10-02. */
.cta{
  background:#f7f4ef; border:1px solid #e4ded2; border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s5); margin-block:var(--s6); box-shadow:var(--shadow);
}
.cta h3{margin:0 0 var(--s2); font-size:var(--step-1)}
.cta p{margin:0 0 var(--s4); color:var(--ink-soft); font-size:var(--step--1)}
.btn{
  display:inline-block; background:var(--accent-ink); color:#fff; font-weight:700;
  font-size:var(--step--1); text-decoration:none; padding:var(--s3) var(--s5);
  border-radius:var(--radius-sm); border:0; cursor:pointer;
}
.btn:hover{background:#ad3d19; color:#fff}
.cta-options{display:grid; gap:var(--s2)}
@media (min-width:600px){ .cta-options{grid-auto-flow:column; grid-auto-columns:1fr} }

/* ---------- 11. DISCLOSURE (spec §2.3) ---------------------------------- */
.disclosure{
  font-size:var(--step--1); color:#4a6076; line-height:1.55;
  border-left:2px solid var(--rule-strong); padding-left:var(--s4); margin-top:calc(var(--s6) * -.6);
  margin-bottom:var(--s6);
}

/* ---------- 12. CALLOUTS (spec §2.9) ------------------------------------ */
.callout{border-radius:var(--radius); padding:var(--s5); margin-block:var(--s5); border:1px solid}
.callout p:last-child{margin-bottom:0}
.callout .label{
  display:block; font-size:var(--step--1); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:var(--s2);
}
.callout--warn{background:var(--warn-soft); border-color:var(--warn); }
.callout--warn .label{color:var(--warn)}
.callout--info{background:var(--info-soft); border-color:var(--info)}
.callout--info .label{color:var(--info)}
.callout--legal{background:var(--surface-2); border-color:var(--rule); color:var(--ink-soft); font-size:var(--step--1)}
.callout--legal .label{color:var(--ink-faint)}

/* ---------- 13. COMPARISON TABLE (spec §2.7) ---------------------------- */
.table-caption{font-size:var(--step--1); font-weight:600; color:var(--ink-soft); margin-bottom:var(--s3)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:var(--step--1)}
th,td{padding:var(--s3) var(--s4); text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{background:var(--surface-2); font-weight:700; position:sticky; top:0}
tbody th{font-weight:600; background:var(--surface); position:sticky; left:0; border-right:1px solid var(--rule)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
.table-source{font-size:var(--step--1); color:var(--ink-faint); margin-top:var(--s3)}

/* ---------- 14. FAQ (spec §2.5) ----------------------------------------- */
.faq{display:grid; gap:var(--s3); margin-bottom:var(--s6)}
.faq details{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius)}
.faq summary{
  cursor:pointer; padding:var(--s4) var(--s5); font-weight:600; list-style:none;
  display:flex; justify-content:space-between; gap:var(--s4); align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--sea-ink); font-weight:700; font-size:1.3em; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 var(--s5) var(--s4); color:var(--ink-soft)}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- 15. INTERNAL-LINK CARDS (spec §2.10) ------------------------ */
.cards{display:grid; gap:var(--s4); grid-template-columns:1fr; margin-block:var(--s6)}
@media (min-width:700px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:var(--s5); text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--sea); box-shadow:var(--shadow)}
.card .eyebrow{font-size:var(--step--1); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sea-ink); display:block; margin-bottom:var(--s2)}
.card h3{font-size:var(--step-0); margin:0 0 var(--s2)}
.card p{font-size:var(--step--1); color:var(--ink-soft); margin:0}

/* ---------- 16. CAPTURE (spec §2.11) ------------------------------------ */
.capture{background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s6); margin-block:var(--s6)}
.capture h3{margin-top:0}

/* ---------- 17. UTILITIES ------------------------------------------------ */
.eyebrow-pill{display:inline-block; font-size:var(--step--1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sea-ink); background:var(--sea-soft);
  border-radius:100px; padding:var(--s2) var(--s3); margin-bottom:var(--s4)}
.lede{font-size:var(--step-1); color:var(--ink-soft); max-width:56ch}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.staging-bar{background:var(--warn); color:#15120f; font-size:var(--step--1); font-weight:700;
  text-align:center; padding:var(--s2) var(--s4); letter-spacing:.04em}

/* ---------- 18. DEV-ONLY STATES (never valid in production) --------------- */
/* Spec: unresolved author/reviewer must look like development, not finished design.
   The production validator rejects any page rendering these. */
.byline--unresolved{
  background:repeating-linear-gradient(45deg,var(--warn-soft),var(--warn-soft) 10px,transparent 10px,transparent 20px);
  border:1px dashed var(--warn); border-radius:var(--radius-sm); padding:var(--s3) var(--s4);
}
.dev-flag{
  display:inline-block; background:var(--warn); color:#15120f; font-weight:700;
  font-size:.7rem; letter-spacing:.1em; padding:2px 8px; border-radius:4px; margin-right:var(--s2);
}
.dev-error{background:#c0392b; color:#fff; padding:var(--s3) var(--s4); border-radius:var(--radius-sm); font-weight:600}
.logo{display:block; max-height:34px; width:auto}
/* THE WORDMARK IS A PICTURE OF ITSELF (V3, 2026-10-02) — /assets/wordmark.svg,
   Archivo outlines, so the brand mark is identical on the 48 pages that render
   here and the 10 that render through v2.css. No font download either side. */
.brand picture{display:block; line-height:0}
.wordmark{display:block; height:26px; width:auto}
@media (max-width:619px){ .site-header .wordmark{height:34px} }
@media (min-width:900px){ .wordmark{height:29px} }
.brand{display:flex; align-items:center; text-decoration:none}

/* ---------- 19. MOBILE NAV (zero JS — native <details>) ------------------ */
.nav-toggle{margin-left:auto}
@media (min-width:900px){ .nav-toggle{display:none} }
.nav-toggle summary{
  list-style:none; cursor:pointer; padding:var(--s2) var(--s3); border:1px solid var(--rule-strong);
  border-radius:var(--radius-sm); font-size:var(--step--1); font-weight:600; color:var(--ink-soft);
}
.nav-toggle summary::-webkit-details-marker{display:none}
.nav-toggle[open] summary{color:var(--brand); border-color:var(--rule-strong)}
.nav-panel{
  position:absolute; left:0; right:0; top:100%; background:var(--surface);
  border-bottom:1px solid var(--rule); box-shadow:var(--shadow); padding:var(--s4) var(--s5);
  display:grid; gap:var(--s2);
}
.nav-panel a{padding:var(--s3) 0; font-weight:600; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule)}
.nav-panel a:last-child{border-bottom:0}

/* ---------- 20. HOMEPAGE — discovery archetype -------------------------- */
.hero{padding-block:var(--s8) var(--s7); text-align:left}
.hero h1{font-size:clamp(2.2rem,1.6rem + 2.8vw,3.6rem); max-width:16ch}
.hero .lede{margin-bottom:var(--s6)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3)}
.btn--ghost{background:transparent; color:var(--accent-ink); border:1px solid var(--rule-strong)}
.btn--ghost:hover{background:var(--accent-soft); color:var(--accent-ink)}
.section{padding-block:var(--s7)}
.section > h2{margin-top:0}
.section-kicker{font-size:var(--step--1); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sea-ink); margin-bottom:var(--s3)}
/* one card component, meaningful variants — no card proliferation */
.cards--journey{grid-template-columns:1fr}
@media (min-width:640px){ .cards--journey{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cards--journey{grid-template-columns:repeat(5,1fr)} }
.cards--hubs{grid-template-columns:1fr}
@media (min-width:600px){ .cards--hubs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .cards--hubs{grid-template-columns:repeat(4,1fr)} }
.card--muted{opacity:.55; pointer-events:none; border-style:dashed}
.card--muted .eyebrow{color:var(--ink-faint)}
.trust-strip{background:var(--surface-2); border-block:1px solid var(--rule); padding-block:var(--s7)}

/* ---------- 21. HUB / PILLAR — routing archetype ------------------------ */
/* A hub ROUTES; it does not explain its children. The visual hierarchy makes
   the routes the loudest thing on the page and caps the prose. */
.hub-intro{max-width:60ch; font-size:var(--step-1); color:var(--ink-soft)}
.route-list{display:grid; gap:var(--s3); margin-block:var(--s5) var(--s6)}
.route{
  display:grid; gap:var(--s1); grid-template-columns:auto 1fr auto; align-items:baseline;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s4) var(--s5); text-decoration:none; color:inherit;
}
.route:hover{border-color:var(--sea)}
.route .n{color:var(--sea-ink); font-weight:700; grid-row:span 2; align-self:center; min-width:1.6em}
.route .t{font-weight:600; color:var(--ink)}
.route .d{font-size:var(--step--1); color:var(--ink-soft); grid-column:2}
.route .go{color:var(--sea-ink); grid-row:span 2; align-self:center}
.route--secondary{background:transparent; border-style:dashed}

/* ---------- 22. COMPARISON — decision archetype ------------------------- */
.verdict-grid{display:grid; gap:var(--s4); grid-template-columns:1fr; margin-block:var(--s5)}
@media (min-width:700px){ .verdict-grid{grid-template-columns:repeat(2,1fr)} }
.verdict{background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--sea);
  border-radius:var(--radius); padding:var(--s5)}
.verdict h3{margin:0 0 var(--s2); font-size:var(--step-0)}
.verdict .who{font-size:var(--step--1); color:var(--ink-faint); display:block; margin-bottom:var(--s3)}
.verdict .answer{font-weight:700; color:var(--accent-ink)}

/* ---------- 23. CORE / TRUST — credibility archetype -------------------- */
.trust-lede{font-size:var(--step-2); line-height:1.35; letter-spacing:-.02em; max-width:24ch;
  color:var(--ink); margin-bottom:var(--s6)}
.promise-list{display:grid; gap:var(--s4); margin-block:var(--s5)}
.promise{display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start}
.promise .mark{color:var(--sea-ink); font-weight:700; font-size:1.2em; line-height:1.3}
.promise .mark--no{color:var(--warn)}
.people-grid{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:700px){ .people-grid{grid-template-columns:repeat(3,1fr)} }
.person--placeholder{
  background:repeating-linear-gradient(45deg,var(--warn-soft),var(--warn-soft) 10px,transparent 10px,transparent 20px);
  border:1px dashed var(--warn); border-radius:var(--radius); padding:var(--s5); font-size:var(--step--1);
}

/* ---------- 24. INTERNAL-LINK STATE ------------------------------------- */
/* A destination that is not live is not a link. It reads as ordinary emphasis —
   the reader is never shown internal governance language. */
.link-pending{color:var(--ink); font-weight:600; border-bottom:1px dotted var(--rule-strong)}

/* ---------- 25. SKIP LINK + FOCUS (accessibility) ----------------------- */
.skip-link{
  position:absolute; left:var(--s4); top:-4rem; z-index:100;
  background:var(--accent-ink); color:#fff; font-weight:700; padding:var(--s3) var(--s4);
  border-radius:var(--radius-sm); text-decoration:none; transition:top .15s;
}
.skip-link:focus{top:var(--s3); color:#fff}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}
.table-scroll:focus-visible{outline-offset:0}

/* ---------- 26. 404 ------------------------------------------------------ */
.notfound{padding-block:var(--s8); text-align:left; max-width:60ch}
.notfound h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem)}

/* ---------- 27. DISABLED CTA — honest, not dishonest --------------------- */
.cta--disabled{background:var(--surface-2); border-style:dashed}
.btn--inert{background:var(--rule); color:var(--ink-faint); cursor:not-allowed; pointer-events:none}
.route--pending{cursor:default; opacity:.72}
.route--pending:hover{border-color:var(--rule)}

/* ---------- 28. LONG-STRING DEFENCE (systemic) --------------------------- */
/* Spanish administrative vocabulary produces genuinely long unbreakable words
   (empadronamiento, Certificado-de-Registro…). Found by stress test: one long
   title blew a 320px layout out to 493px. These rules are global rather than
   per-component so no future template can reintroduce it. */
h1,h2,h3,p,li,td,th,summary,figcaption,.t,.d{overflow-wrap:break-word}
h1,h2,h3{hyphens:auto}
/* Grid/flex children cannot shrink below their content unless told they may. */
.route{grid-template-columns:auto minmax(0,1fr) auto}
.route > *,.card > *,.cta > *,.promise > *,.verdict > *{min-width:0}
.breadcrumb{overflow-wrap:break-word}
.cta--informational{background:var(--surface-2); border-style:solid}

/* ---------- 22. COMMERCIAL SERVICE PAGES -------------------------------- */
/* A buying surface, not an article: price and payment stages sit side by side
   directly under the lede, then inclusions, then the short body. Structure
   follows the PLS service pattern; length deliberately does not. */
.svc .kicker{font-size:var(--step--1); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sea-ink); margin:0 0 var(--s2)}
.svc h2{margin-top:var(--s6)}
.svc-h{margin:0 0 var(--s3); font:700 var(--step--1)/1.3 inherit; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft)}

.svc-offer{display:grid; gap:var(--s4); margin-block:var(--s5); padding:var(--s5);
  background:var(--surface-2); border:1px solid var(--rule);
  border-left:4px solid var(--accent); border-radius:var(--radius)}
@media (min-width:600px){.svc-offer{grid-template-columns:auto 1fr; gap:var(--s6); align-items:start}}
.svc-price-amount{font-size:var(--step-4); font-weight:700; letter-spacing:-.03em;
  color:var(--ink); margin:0; line-height:.95}
.svc-price-basis{margin:.4em 0 0; color:var(--ink-soft); font-size:var(--step--1)}
.svc-stages ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.svc-stages li{display:flex; gap:var(--s3); align-items:baseline; font-size:var(--step--1);
  padding-bottom:var(--s2); border-bottom:1px dashed var(--rule)}
.svc-stages li:last-child{border-bottom:0; padding-bottom:0}
.svc-stage-amt{font-weight:700; color:var(--ink); min-width:4.5em}
.svc-stage-when{color:var(--ink-soft)}

.svc-includes{margin-block:var(--s5)}
.svc-includes ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.svc-includes li{position:relative; padding-left:1.6em; line-height:1.55}
.svc-includes li::before{content:"\2713"; position:absolute; left:0; top:0;
  color:var(--sea-ink); font-weight:700}
.svc-positioning{font-size:var(--step-1); line-height:1.4; color:var(--ink);
  border-left:3px solid var(--sea-ink); padding-left:var(--s4); margin-block:var(--s5)}

.svc-thirdparty{margin-top:var(--s6); padding:var(--s4); background:var(--surface-2);
  border-radius:var(--radius); font-size:var(--step--1)}
.svc-thirdparty p:last-child{margin-bottom:0}

.svc-cards{display:grid; gap:var(--s3); margin-block:var(--s5)}
@media (min-width:640px){.svc-cards{grid-template-columns:1fr 1fr}}
.svc-card{display:block; padding:var(--s4); border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface); text-decoration:none}
.svc-card:hover{border-color:var(--sea-ink); box-shadow:var(--shadow)}
.svc-card-t{display:block; font-weight:700; color:var(--ink)}
.svc-card-p{display:block; margin-top:.25em; font-weight:700; color:var(--sea-ink)}
.svc-card-p em{font-style:normal; font-weight:400; color:var(--ink-soft); font-size:var(--step--1)}
.svc-card-d{display:block; margin-top:.35em; font-size:var(--step--1); color:var(--ink-soft)}

.svc-pricetable{margin-block:var(--s5); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden}
.svc-pricerow{display:grid; gap:.25em var(--s3); padding:var(--s4);
  border-bottom:1px solid var(--rule); background:var(--surface)}
@media (min-width:640px){.svc-pricerow{grid-template-columns:1fr auto; align-items:baseline}}
.svc-pricerow:last-child{border-bottom:0}
.svc-pricerow a{font-weight:700; font-size:var(--step-0)}
.svc-pricerow-amt{font-weight:700; font-size:var(--step-1); color:var(--ink)}
.svc-pricerow-basis{color:var(--ink-soft); font-size:var(--step--1)}
.svc-pricerow-stages{grid-column:1/-1; color:var(--ink-soft); font-size:var(--step--2); line-height:1.5}

.svc-enquiry{margin-top:var(--s6); padding:var(--s5); border:1px solid var(--rule);
  border-top:3px solid var(--accent); border-radius:var(--radius); background:var(--surface)}
.svc-enquiry h2{margin-top:0}
.svc-guide{margin-top:var(--s5); padding:var(--s4); background:var(--surface-2);
  border-radius:var(--radius); font-size:var(--step--1)}
.svc-guide-k{margin:0 0 .3em; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--step--2); color:var(--ink-soft)}

/* ---------- 23. CONVERSION: start-for, actions, enquiry ------------------ */
.svc-start{margin:.7em 0 0; font-size:var(--step-0); color:var(--ink)}
.svc-start strong{font-size:var(--step-1); color:var(--sea-ink)}
.svc-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s4) 0 0}
.svc-actions .btn{flex:1 1 auto; text-align:center}
.svc-card-start{display:block; margin-top:.2em; font-size:var(--step--1); font-weight:600; color:var(--sea-ink)}
.svc-pricerow-start{font-weight:600; color:var(--sea-ink); font-size:var(--step--1)}
.svc-lead-cta{margin-block:var(--s4)}
.svc-ask{margin-top:var(--s5); padding:var(--s4); background:var(--surface-2);
  border-radius:var(--radius); font-size:var(--step--1)}
.svc-ask p:last-child{margin-bottom:0}

.enq{margin-top:var(--s6); padding:var(--s5); background:var(--surface);
  border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:var(--radius)}
.enq-head h2{margin-top:0}
.enq-svc{display:flex; flex-wrap:wrap; gap:.5em var(--s3); align-items:baseline;
  margin:0 0 var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--rule)}
.enq-svc span{font:700 var(--step--2)/1 inherit; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft)}
.enq-svc strong{font-size:var(--step-0)}
.enq-grid{display:grid; gap:var(--s4)}
@media (min-width:600px){.enq-grid{grid-template-columns:1fr 1fr}}
.enq-f{display:flex; flex-direction:column; gap:.35em}
.enq-f--wide{grid-column:1/-1}
.enq-f span{font-size:var(--step--1); font-weight:600; color:var(--ink)}
.enq-f input,.enq-f select,.enq-f textarea{
  font:inherit; font-size:var(--step-0); padding:.65em .8em; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:8px; width:100%}
.enq-f input:focus,.enq-f select:focus,.enq-f textarea:focus{
  outline:2px solid var(--sea-ink); outline-offset:1px; border-color:var(--sea-ink)}
.enq-f input:disabled,.enq-f select:disabled,.enq-f textarea:disabled{
  background:var(--surface-2); color:var(--ink-soft); cursor:not-allowed}
.enq-consent{display:flex; gap:var(--s3); align-items:flex-start;
  margin-top:var(--s4); font-size:var(--step--1); line-height:1.5}
.enq-consent input{margin-top:.25em; flex:0 0 auto}
.enq-submit{margin-top:var(--s4); width:100%}
@media (min-width:600px){.enq-submit{width:auto; min-width:16em}}
.enq-form--pending{opacity:.85}
.enq-pending{margin-top:var(--s4); padding:var(--s4); font-size:var(--step--1);
  line-height:1.55; color:#78350f; background:#fffbeb; border:1px solid #fde68a;
  border-radius:var(--radius)}
.svc-promise{margin:var(--s3) 0 0; font-size:var(--step--1); font-weight:600; color:var(--sea-ink)}
.enq-promise{margin:.4em 0 0; font-size:var(--step-0); color:var(--sea-ink)}