/* ==========================================================================
   washd Exterior Cleaning — backend theme overrides
   One colour + font scheme per Pages CMS `theme` value. The Sunny Porch
   defaults live in assets/styles.css; every other theme below only
   overrides CSS custom properties (plus font-family swaps) so the layout,
   markup and behaviour stay identical across themes.
   Applied via <html data-theme="..."> (see src/_includes/base.njk) and
   loaded after assets/styles.css so these rules win the cascade.

   Every hex below is sampled from that option's own built stylesheet
   (ground truth, nothing invented):
     deep-navy   — preview-site/.../previews/v1/assets/styles.css
     aqua-ledger — preview-site/.../previews/v2/assets/styles.css
     deep-clean  — preview-site/.../previews/v3/assets/styles.css
     paper       — preview-site/.../previews/v4/assets/styles.css
     quote-card  — preview-site/.../previews/v5/assets/styles.css
     yardboss    — v6-direction branch assets/styles.css
     sunny-porch — assets/styles.css (no overrides needed)
     origin      — new theme built from the washd brand palette; cyan
                       sampled from logo.png (repo root). No prior built
                       stylesheet exists for this direction.

   Contrast (WCAG AA, measured, normal text needs 4.5:1):
   - Tokens marked DECORATION ONLY are never body text: sunny dot halos,
     sunny tabs, kicker dots, icon washes. They are exempt by design.
   - Bright brand accents (#00D5FF cyan, #FF4D00 safety orange, #FFC400
     hazard yellow, #0E7FB8 water blue, #FFD84D focus halo) are decoration
     only in every theme. Text/buttons always use the darker accessible
     sibling (cyan-deep/accent-ink/rust/ink), each measured below.
   ========================================================================== */

/* ------------------------- deep-navy ------------------------- */
/* Text pairs: ink #141F2B on card #FFFFFF 16.66; muted #55687B on card 5.75;
   kicker text #007A99 on tint #F3F7FB 4.60; white on button #0B1420 18.50;
   link #007A99 on page #FFFFFF 4.95; white on dark panel #0B1420 with
   #CBD8E6 12.78 / #94A8BD 7.57. All pass AA. */
html[data-theme="deep-navy"] {
  --cream: #FFFFFF;
  --cream-deep: #F3F7FB;
  --card: #FFFFFF;
  --tint-clay: #E8F8FF;
  --tint-leaf: #F3F7FB;
  --tint-sun: #E8F8FF;
  --ink: #141F2B;
  --muted: #55687B;
  --clay: #0B1420;
  --clay-deep: #007A99;
  --leaf: #0F1B2A;
  --leaf-deep: #007A99;
  --sun: #00D5FF; /* DECORATION ONLY — never body text */
  --line: #E3EAF2;
  --line-strong: #CBD8E5;
  --field-border: #55687B;
  --cocoa: #0B1420;
  --cocoa-2: #0F1B2A;
  --on-cocoa: #CBD8E6;
  --on-cocoa-mut: #94A8BD;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------- aqua-ledger ------------------------- */
/* Text pairs: ink #12262A on page #F5FAFA 14.92; muted #4E6A6E on page 5.52
   and on card 5.82; link #00707F on page 5.50; white on button #102A2E
   15.08; white on secondary #00707F 5.79; white on dark panel #0C1B1E with
   #DCEBEC 14.39 / #9BB6B9 8.22; danger #C0392B on white 5.44. All pass. */
html[data-theme="aqua-ledger"] {
  --cream: #F5FAFA;
  --cream-deep: #E8F4F5;
  --card: #FFFFFF;
  --tint-clay: #E1F6FA;
  --tint-leaf: #E8F4F5;
  --tint-sun: #D6ECEE;
  --ink: #12262A;
  --muted: #4E6A6E;
  --clay: #102A2E;
  --clay-deep: #00707F;
  --leaf: #00707F;
  --leaf-deep: #00707F;
  --sun: #00D5FF; /* DECORATION ONLY — never body text */
  --line: #DCE9EA;
  --line-strong: #C2D6D9;
  --field-border: #66807F;
  --cocoa: #0C1B1E;
  --cocoa-2: #102A2E;
  --on-cocoa: #DCEBEC;
  --on-cocoa-mut: #9BB6B9;
  --danger: #C0392B;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-hand: "Fraunces", Georgia, "Times New Roman", serif;
}

/* ------------------------- deep-clean ------------------------- */
/* Text pairs: ink #0A2A3D on page #EAF8FD 13.70; muted #3F647A on page 5.83
   and on card 6.33; link #006B8A on page 5.57; white on button #052A44
   14.78; white on secondary #093A5A (15+) ; white on dark panel #052A44
   with #D6EEF7 12.27 / #93C0D4 7.55; danger #C0392B on white 5.44. Pass. */
html[data-theme="deep-clean"] {
  --cream: #EAF8FD;
  --cream-deep: #D8F0FA;
  --card: #FFFFFF;
  --tint-clay: #D5F2FB;
  --tint-leaf: #D8F0FA;
  --tint-sun: #C2E4F3;
  --ink: #0A2A3D;
  --muted: #3F647A;
  --clay: #052A44;
  --clay-deep: #006B8A;
  --leaf: #093A5A;
  --leaf-deep: #006B8A;
  --sun: #00D5FF; /* DECORATION ONLY — never body text */
  --line: #CBE6F1;
  --line-strong: #A6D3E4;
  --field-border: #5E8496;
  --cocoa: #052A44;
  --cocoa-2: #093A5A;
  --on-cocoa: #D6EEF7;
  --on-cocoa-mut: #93C0D4;
  --danger: #C0392B;
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Onest", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-hand: "Sora", "Onest", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ------------------------- paper ------------------------- */
/* Text pairs: ink #131417 on page #FAFAF8 17.62; muted #5A5F63 on page 6.18;
   buttons/links reuse ink #131417 (18.42 white-on-ink); secondary text
   #5A5F63 on tints 6.18; white on dark panel #131417 with #FAFAF8 17.62 /
   #E5E5E0 14.57; danger #B3261E on paper 6.25. The brand cyan #00D5FF is
   used sparingly in this direction and stays DECORATION ONLY. All pass. */
html[data-theme="paper"] {
  --cream: #FAFAF8;
  --cream-deep: #FFFFFF;
  --card: #FFFFFF;
  --tint-clay: #E5E5E0;
  --tint-leaf: #FAFAF8;
  --tint-sun: #E5E5E0;
  --ink: #131417;
  --muted: #5A5F63;
  --clay: #131417;
  --clay-deep: #131417;
  --leaf: #131417;
  --leaf-deep: #5A5F63;
  --sun: #00D5FF; /* DECORATION ONLY — never body text */
  --line: #E5E5E0;
  --line-strong: #D6D6D0;
  --field-border: #8A8A84;
  --cocoa: #131417;
  --cocoa-2: #131417;
  --on-cocoa: #FAFAF8;
  --on-cocoa-mut: #E5E5E0;
  --danger: #B3261E;
  --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------- quote-card ------------------------- */
/* Text pairs: ink #15211C on card #FFFFFF 16.59; muted #3E5349 on card 8.27;
   white on button #0B6B37 6.62; link #084E29 on card 9.85; white on dark
   panel #15211C with #E9F1EA 14.40 / #A9BEB2 8.45; danger #B3261E on white
   6.54. Focus halo #FFD84D stays DECORATION ONLY. All pass AA. */
html[data-theme="quote-card"] {
  --cream: #FFFFFF;
  --cream-deep: #F1F4EF;
  --card: #FFFFFF;
  --tint-clay: #DDEEDF;
  --tint-leaf: #F1F4EF;
  --tint-sun: #DDEEDF;
  --ink: #15211C;
  --muted: #3E5349;
  --clay: #0B6B37;
  --clay-deep: #084E29;
  --leaf: #0B6B37;
  --leaf-deep: #084E29;
  --sun: #FFD84D; /* DECORATION ONLY — never body text */
  --line: #D8DFD8;
  --line-strong: #B9C6BC;
  --field-border: #5A6F63;
  --cocoa: #15211C;
  --cocoa-2: #15211C;
  --on-cocoa: #E9F1EA;
  --on-cocoa-mut: #A9BEB2;
  --danger: #B3261E;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------- yardboss ------------------------- */
/* Text pairs: ink #16130E on page #F6F1E5 16.44; muted #4B4234 on page 8.76
   and on card 9.87; white on button #9C2F00 7.45; link #9C2F00 on page 6.61;
   white on secondary #26211A 15.97; white on dark panel #16130E with
   #F6F1E5 16.44 / #CFC2A6 10.52; danger #B42318 on white 6.57. Safety
   orange #FF4D00, hazard #FFC400 and water blue #0E7FB8 stay DECORATION
   ONLY. All pass AA. */
html[data-theme="yardboss"] {
  --cream: #F6F1E5;
  --cream-deep: #ECE3CF;
  --card: #FFFFFF;
  --tint-clay: #FFE3D2;
  --tint-leaf: #ECE3CF;
  --tint-sun: #D9EFF8;
  --ink: #16130E;
  --muted: #4B4234;
  --clay: #9C2F00;
  --clay-deep: #9C2F00;
  --leaf: #26211A;
  --leaf-deep: #4B4234;
  --sun: #FFC400; /* DECORATION ONLY — never body text */
  --line: #16130E;
  --line-strong: #16130E;
  --field-border: #16130E;
  --cocoa: #16130E;
  --cocoa-2: #26211A;
  --on-cocoa: #F6F1E5;
  --on-cocoa-mut: #CFC2A6;
  --danger: #B42318;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Anton", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-hand: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------- sunny-porch ------------------------- */
/* The default theme. All values live in assets/styles.css, so this block
   intentionally declares nothing: with data-theme="sunny-porch" the page
   renders pixel-identical to today. Reference pairs: ink #3B2A1E on cream
   #FFF7EC 12.87; muted #5C4634 on cream 8.30; white on clay #A63E14 6.32;
   clay-deep #7C2E0E on cream 8.77; white on leaf #2E6B4E 6.31; leaf-deep
   #1F4D37 on cream 9.09; on-cocoa #FBEFD9 / #D9C4A6 on cocoa #33241A
   13.10 / 8.80; danger #A93226 on white 6.62. Sun #F2A93B is DECORATION
   ONLY. All pass AA. */
html[data-theme="sunny-porch"] {
  /* No overrides — Sunny Porch is the base stylesheet. */
}

/* ------------------------- origin ------------------------- */
/* NEW THEME — no prior stylesheet to sample. Built from the washd brand
   palette in logo.png (repo root): white page, true-black ink, and the logo's
   cyan #00D5FF (read off the final "d" and the "Exterior Cleaning" tagline).
   Colour split: cyan owns everything that is NOT small text — solid fills
   (with near-black text on top), hairlines, the heading squiggle, icon
   strokes, tint washes, glows, hover fills, the dot texture and section
   accents. Black / white / ink carries every piece of text and every panel.
   There is NO teal left in the origin scope: the base teal tokens are
   re-pointed to ink or cyan, and --clay (which the base uses as BOTH the
   primary fill and a hover text colour) is handled by explicit rules in the
   override block below rather than by the token alone.
   Text pairs (measured): ink #000000 on cream #FFFFFF 21.00; ink on card
   21.00; muted #4A5660 on cream 7.52 and on band #F2F9FC 7.07; ink #000000 on
   cyan #00D5FF 11.96 (button / step disc / badge fills); white #FFFFFF on
   black #000000 21.00 (primary-button hover); on-cocoa #FFFFFF on cocoa 21.00;
   on-cocoa-mut #B8C6CD on cocoa 12.00; footer cyan #00D5FF on black 11.96;
   danger #B3261E on white 6.54. All pass AA. */
html[data-theme="origin"] {
  --cream: #FFFFFF;
  --cream-deep: #F2F9FC;   /* faint cyan band (was steel) */
  --card: #FFFFFF;
  --tint-clay: #E2F5FB;    /* cyan wash */
  --tint-leaf: #E7F6FC;    /* cyan wash (was steel) */
  --tint-sun: #D8F1FA;     /* cyan wash */
  --ink: #000000;
  --muted: #4A5660;
  --clay: #00D5FF;         /* logo cyan — fills / strokes only, never small text */
  --clay-deep: #000000;    /* text + button-hover ink (was teal #075B6B) */
  --leaf: #0A0F12;         /* icon / secondary-fill ink (was teal #0E7490) */
  --leaf-deep: #000000;    /* text ink (was teal #0A5E72) */
  --sun: #00D5FF;          /* logo cyan — decoration only on light surfaces */
  --line: #CFEBF6;         /* cyan hairline (was grey) */
  --line-strong: #96D9EE;  /* cyan hairline (was grey) */
  --field-border: #14181B; /* near-black field border (was teal #00566A) */
  --cocoa: #000000;
  --cocoa-2: #0C1216;
  --on-cocoa: #FFFFFF;
  --on-cocoa-mut: #B8C6CD;
  --danger: #B3261E;
  /* Cool ink shadows (same offsets / blur / alpha as the Sunny Porch tokens). */
  --shadow-sm: 0 1px 2px rgba(9, 27, 34, .07);
  --shadow-md: 0 18px 38px -26px rgba(9, 27, 34, .45);
  --shadow-lg: 0 32px 64px -38px rgba(9, 27, 34, .5);
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Hanken Grotesk", "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* --- Origin only: recolour the Sunny Porch hexes hard-coded inside rules ---
   assets/styles.css bakes a handful of warm hexes directly into rules, so the
   token block above can't reach them and they bled through as off-palette
   warm/rainbow decoration. The rules below are scoped to
   html[data-theme="origin"] and change COLOUR VALUES ONLY — every geometry,
   position, size, opacity and animation value is deliberately left untouched,
   so the composition is identical to the default, just on-palette.
   Alpha glows are expressed with color-mix() on var(--sun) so the brand cyan
   stays the single source of truth. */

/* Focus ring: handled by the shared two-tone ring in assets/styles.css
   (dark inner outline + light outer ring), which reads on the black header,
   mobile menu, CTA panel and footer too — no origin-specific override needed. */

/* Kicker pill: pale gum-green border -> neutral line. */
html[data-theme="origin"] .kicker {
  border-color: var(--line-strong);
}

/* Hero glow: yellow -> cyan sheen (same circle/40% 35% shape, 0/55/72% stops,
   .55 opacity on the element itself). */
html[data-theme="origin"] .hero::before {
  background: radial-gradient(circle at 40% 35%, var(--tint-clay) 0%, var(--sun) 55%, color-mix(in srgb, var(--sun) 0%, transparent) 72%);
}
/* Hero arch: apricot wash -> faint cyan wash (same 10% alpha and 68% stop). */
html[data-theme="origin"] .hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 10%, transparent), color-mix(in srgb, var(--sun) 0%, transparent) 68%);
}

/* Form success box: sage border -> neutral line. */
html[data-theme="origin"] .form-success {
  border-color: var(--line-strong);
}

/* Service icon tiles: sand/peach/green borders -> neutral line. The nth-child
   rules below must be listed too or their higher specificity wins. */
html[data-theme="origin"] .service-ico,
html[data-theme="origin"] .service-card:nth-child(3n+2) .service-ico,
html[data-theme="origin"] .service-card:nth-child(3n) .service-ico {
  border-color: var(--line-strong);
}

/* Check-list tick: sage border -> neutral line. */
html[data-theme="origin"] .check-list .tick {
  border-color: var(--line-strong);
}

/* Hello-card glow: amber -> cyan (same 35% alpha and 68% stop). */
html[data-theme="origin"] .hello-card::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 35%, transparent), color-mix(in srgb, var(--sun) 0%, transparent) 68%);
}

/* Area pin: peach border -> neutral line. */
html[data-theme="origin"] .area-pin {
  border-color: var(--line-strong);
}

/* CTA panel glow (sits on the now-black panel): amber -> cyan, same .55 alpha
   and 68% stop. */
html[data-theme="origin"] .cta-panel::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 55%, transparent), color-mix(in srgb, var(--sun) 0%, transparent) 68%);
}

/* CTA body copy + phone label: peach #FBE3D3 -> light cyan near-white #EDFBFE,
   measured 19.83:1 on the black #000000 panel. */
html[data-theme="origin"] .cta-panel > p,
html[data-theme="origin"] .cta-phone .lbl {
  color: #EDFBFE;
}

/* --- Origin only: remaining warm hexes baked directly into assets/styles.css ---
   Same rule as above — scoped to html[data-theme="origin"], colour values only.
   Every alpha, offset, blur, spread, dot size and grid size is kept identical. */

/* ---- Origin only: BLACK header bar so the logo reads as the artwork ---- */
/* The origin logo is white + cyan drawn for a black field. On the base light
   bar the brand accents pull from --clay / --leaf-deep (teal), so the "d",
   roof line and tagline lost their cyan. A black header reproduces the
   artwork exactly; every other theme is untouched. Colour values only. */

/* Bar surface: translucent black matching the logo field (keeps the 14px
   blur); scrolled tightens to near-opaque and stays fully legible. */
html[data-theme="origin"] .site-header {
  background: rgba(0, 0, 0, .94);
  border-bottom-color: rgba(255, 255, 255, .14);
}
html[data-theme="origin"] .site-header.is-scrolled {
  background: rgba(0, 0, 0, .98);
  border-bottom-color: rgba(255, 255, 255, .22);
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .55);
}

/* Brand lockup: white wordmark + house, with the logo's TRUE cyan #00D5FF on
   the "d", the roof line and the tagline (not --clay). Header-scoped so the
   black footer logo keeps its current treatment. */
html[data-theme="origin"] .site-header .brand,
html[data-theme="origin"] .site-header .brand-mark,
html[data-theme="origin"] .site-header .brand-word { color: #FFFFFF; }
html[data-theme="origin"] .site-header .brand-mark .m-cyan { stroke: #00D5FF; }
html[data-theme="origin"] .site-header .brand-word .brand-d { color: #00D5FF; }
html[data-theme="origin"] .site-header .brand-tag { color: #00D5FF; }

/* Nav links: light text on black; cyan-washed pill on hover. */
html[data-theme="origin"] .nav-link { color: rgba(255, 255, 255, .86); }
html[data-theme="origin"] .nav-link:hover { color: #FFFFFF; background: rgba(0, 213, 255, .16); }

/* Header actions: phone = outline (the on-dark button look); CTA is the cyan
   --clay primary with near-black text (set in the fills/text block below), so
   it stays the obvious action. */
html[data-theme="origin"] .header-actions .btn--ghost {
  color: #FFFFFF; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .40);
}
html[data-theme="origin"] .header-actions .btn--ghost:hover {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--clay-deep);
}

/* Burger: outline-on-dark instead of a white disc. */
html[data-theme="origin"] .burger {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .40); color: #FFFFFF;
}

/* Mobile menu: dark panel to match the bar, with light links. */
html[data-theme="origin"] .mobile-nav {
  background: var(--cocoa); border-color: rgba(255, 255, 255, .16);
}
html[data-theme="origin"] .mobile-nav a { color: #FFFFFF; }
html[data-theme="origin"] .mobile-nav a:hover { background: rgba(0, 213, 255, .16); color: #FFFFFF; }

/* Page dot texture: warm-brown speckle -> cyan speckle (same 1.1px dot / 26px
   grid; alpha nudged up so the lighter cyan still reads). */
html[data-theme="origin"] body {
  background-image: radial-gradient(rgba(0, 213, 255, .10) 1.1px, transparent 1.1px);
}

/* Kicker dot inner ring: warm brown -> cool ink (same inset 2px / .18 alpha). */
html[data-theme="origin"] .kicker::before {
  box-shadow: inset 0 0 0 2px rgba(9, 27, 34, .18);
}

/* Form fields: warm off-white #FFFDF8 -> cool near-white (background-color
   only, so the select keeps its base background-repeat/-position longhands). */
html[data-theme="origin"] .field input,
html[data-theme="origin"] .field select,
html[data-theme="origin"] .field textarea {
  background-color: #F7FBFD;
}
/* Placeholder: warm taupe #8A7560 -> cool grey #5E6A73 (5.33:1 on #F7FBFD). */
html[data-theme="origin"] .field input::placeholder,
html[data-theme="origin"] .field textarea::placeholder {
  color: #5E6A73;
}
/* Select chevron: brown #7C2E0E -> near-black ink (cyan would be too faint as a
   control on the light field; same 16px icon / 2.6 stroke). */
html[data-theme="origin"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314181B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Honest-note callout: gold dashed border #D9A83F -> ink (cyan would vanish on
   the pale cyan callout; same 1.5px dashed). */
html[data-theme="origin"] .services-honest {
  border-color: var(--clay-deep);
}

/* FAQ summary hover: warm near-white #FFFDF6 -> soft cyan wash. */
html[data-theme="origin"] .faq summary:hover {
  background: var(--tint-clay);
}

/* Thank-you seal ring: sage green #BFD9C7 -> theme hairline (same 2px). */
html[data-theme="origin"] .thanks-seal {
  border-color: var(--line-strong);
}

/* --- Origin only: cyan fills + ink text, and the footer logo artwork ------ */
/* The base rules hard-code white text on --clay fills; once --clay is the logo
   cyan that white text would be 1.76:1, so the text flips to ink (cyan fill +
   near-black is 10.97:1). Where the base used --clay as a hover TEXT colour
   (also invisible on white) the text stays ink. Colour values only. */

/* Primary button (header, mobile CTA, forms, thank-you): cyan + near-black;
   hover inverts to black + white. */
html[data-theme="origin"] .btn--primary { color: #0A0F12; }
html[data-theme="origin"] .btn--primary:hover { color: #FFFFFF; }

/* Step discs: all three cyan with near-black numerals. */
html[data-theme="origin"] .step-num,
html[data-theme="origin"] .step:nth-child(2) .step-num,
html[data-theme="origin"] .step:nth-child(3) .step-num { background: var(--sun); color: #0A0F12; }

/* Open FAQ plus glyph: cyan fill, near-black glyph. */
html[data-theme="origin"] .faq[open] .faq-plus { color: #0A0F12; }

/* Phone link hover: base flips the text to --clay (cyan) — keep the ink text
   and move the cyan to the underline instead. */
html[data-theme="origin"] .phone-link:hover { color: var(--clay-deep); text-decoration-color: var(--sun); }

/* CTA band: black panel (was teal) with a cyan primary button. */
html[data-theme="origin"] .cta-panel { background: var(--cocoa); }
html[data-theme="origin"] .cta-actions .btn--primary { background: var(--sun); color: var(--cocoa); }
html[data-theme="origin"] .cta-actions .btn--primary:hover { background: #FFFFFF; color: var(--cocoa); }

/* Thank-you step badges (from thank-you.njk's inline sheet): cyan + ink. */
html[data-theme="origin"] .thanks-card .steps .n { background: var(--sun); color: #0A0F12; }

/* Footer logo: the same artwork as the header — white wordmark + house with
   the true cyan #00D5FF on the "d", the roof line and the tagline. */
html[data-theme="origin"] .site-footer .brand,
html[data-theme="origin"] .site-footer .brand-word,
html[data-theme="origin"] .site-footer .brand-mark { color: #FFFFFF; }
html[data-theme="origin"] .site-footer .brand-mark .m-cyan { stroke: #00D5FF; }
html[data-theme="origin"] .site-footer .brand-word .brand-d { color: #00D5FF; }
html[data-theme="origin"] .site-footer .brand-tag { color: #00D5FF; }

/* Dark-surface primary buttons (header bar + mobile menu): the base hover is
   --clay-deep (black), which would erase the button into the black bar. Invert
   to white instead so the primary action stays obvious on hover. */
html[data-theme="origin"] .header-actions .btn--primary:hover,
html[data-theme="origin"] .mobile-nav .btn--primary:hover { background: #FFFFFF; color: #0A0F12; }

/* --- Origin only: real client logo artwork (raster) ----------------------- */
/* The client's actual logo (white + cyan on transparent) replaces the drawn
   chevron + wordmark lockup in this theme only; the drawn lockup stays in the
   markup for the other seven themes. Height is a ~2x-safe downscale (source art
   is 137px tall) and width:auto keeps the stacked aspect ratio, so no space is
   reserved incorrectly. */
html[data-theme="origin"] .brand-logo { display: block; width: auto; height: 59.4px; }
html[data-theme="origin"] .site-footer .brand-logo { height: 63.8px; }
html[data-theme="origin"] .brand .brand-mark,
html[data-theme="origin"] .brand .brand-text { display: none; }

/* --- Origin only: black quote panel -------------------------------------- */
/* The hero quote form was a white card on a white page. On this theme it takes
   the same solid black surface as .hello-card, so the first screen is broken up
   by a dark block instead of another pale panel. The field fills deliberately
   stay near-white: the form is the one thing on the page a visitor must fill in,
   so legibility beats tonal consistency. */
html[data-theme="origin"] .hero-form {
  background: var(--cocoa);
  border-color: rgba(255, 255, 255, .14);
  color: var(--on-cocoa);
}
html[data-theme="origin"] .form-title { color: #FFFFFF; }
html[data-theme="origin"] .form-sub { color: var(--on-cocoa-mut); }
html[data-theme="origin"] .form-sub strong { color: var(--sun); }

/* Labels + helper text: the base colours are --ink and --muted, both unreadable
   on black. The asterisk moves to the logo cyan (11.96:1). */
html[data-theme="origin"] .hero-form .field label { color: var(--on-cocoa); }
html[data-theme="origin"] .hero-form .field label .req { color: var(--sun); }
html[data-theme="origin"] .hero-form .field .hint { color: var(--on-cocoa-mut); }

/* Focus ring: the base outline is --clay-deep (black here), invisible against
   the black panel. Cyan reads at 11.96:1. */
html[data-theme="origin"] .hero-form .field input:focus,
html[data-theme="origin"] .hero-form .field select:focus,
html[data-theme="origin"] .hero-form .field textarea:focus {
  outline-color: var(--sun);
  border-color: var(--sun);
}

/* Validation text: --danger #B3261E is only 3.3:1 on black; lighten it. */
html[data-theme="origin"] .hero-form .field-error { color: #FF9B90; }

/* Note under the submit button. */
html[data-theme="origin"] .hero-form .form-note { color: var(--on-cocoa-mut); }
html[data-theme="origin"] .hero-form .form-note svg { color: var(--sun); }

/* Submit hover: the base hover is --clay-deep (black) and would erase the
   button into the black panel. Invert to white instead. */
html[data-theme="origin"] .hero-form .btn--primary:hover { background: #FFFFFF; color: #0A0F12; }