/* Theme Name: Ecom Enable Theme URI: https://www.ecomenable.com/ Author: Ecom Enable Description: Custom theme for Ecom Enable — Amazon growth agency for DTC brands. "THE FIELD": Midnight Navy is the ground, not the ink. Bands alternate between navy and white with no third surface, and a page both opens and closes on navy. Photographs are full-bleed at 0px radius, graded to a navy black point. Every claim is a pair of terms with the lime arrow between them, set on a hairline. Manrope only, 9.3× dynamic range, zero animation. Built from the Ecom Enable Brand Book v1.0 and research/DIRECTION.md (20 Aug 2026). Version: 1.9.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ecomenable */ /* ========================================================================== Fonts — Manrope variable (self-hosted, weights 400–800) ───────────────────────────────────────────────────────────────────────── BUG 1 — U+2197 IS ABSENT FROM THE unicode-range BELOW, AND STAYS ABSENT. The latin subset covers U+2191 (↑) and U+2193 (↓) and does NOT cover U+2197 (↗). That is why all 78 `↗` and 36 `→` in the templates were drawn by whatever symbol font the visitor's OS supplied — the brand's one distinctive mark was the only thing on the site not set in Manrope. DO NOT "FIX" THIS BY ADDING U+2197 TO THE RANGE. `unicode-range` only declares which codepoints a file is asked for; it cannot put a glyph into a .woff2 that was subset without one. Widening the range would send the browser to a file that has no ↗ in it and it would fall back anyway — the same bug, now with a comment claiming it is fixed. THE FIX IS AN ASSET, NOT A FONT RANGE: inc/arrow.php ships a three-symbol inline SVG sprite at exactly 45° in `currentColor`, and the .ee-arrow cuts that size it are in the v1.8 block at the foot of this file. Never write ↗, →, \2197 or \2191 in CSS content or in markup again. ───────────────────────────────────────────────────────────────────────── ========================================================================== */ @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ========================================================================== Design tokens — THE FIELD Navy is the GROUND, not the ink. A band is --navy or it is --bg. There is no third surface. Lime is the arrow and the action, and nothing else. ───────────────────────────────────────────────────────────────────────── THIS BLOCK IS THE ONLY PLACE ANY OF THESE VALUES IS WRITTEN. Every repoint below (DIRECTION.md §3.2, build order Tier 0) fixes dozens of declarations at once. Do not restate a hex anywhere else in this file. The only literals permitted downstream are rgba() tints derived from a token here: navy 14,27,43 · on-dark 245,247,249. ───────────────────────────────────────────────────────────────────────── ========================================================================== */ :root{ /* Brand (locked — Brand Book v1.0) */ --navy:#0E1B2B; --navy-deep:#08121F; --lime:#C6F432; --soft-white:#F5F7F9; /* The fifth locked brand value, named at last — and given its first job in v1.9.1: the resting border of a secondary button on navy. 5.93:1 on --navy #0E1B2B and 5.35:1 on --surface-dark #13243A, so it clears the 3:1 WCAG 1.4.11 asks of a control boundary while leaving --on-dark-body free to be the hover step at 8.24:1. Two call sites, both in Buttons/CTA. */ --slate:#8C98A8; /* * BUG 2 — repointed. A mid-blue that is in no part of the brand book was * invented to fill the gap left by taking navy off the backgrounds, and it * became the dominant hue of the site across 68 var(--blue*) usages. * The token NAMES are kept on purpose: 68 call sites, 52 templates and * ~40 downstream rules already reference them, so repointing the value * here retires the colour in three lines instead of in 68 edits. * They now mean "the navy accent ramp", not "blue". * * THE RETIRED HEX IS NOT SPELLED ANYWHERE IN THIS FILE — NOT IN A VALUE * AND NOT IN A COMMENT. DIRECTION.md §11 item 13 makes a grep for it a * pre-deploy gate, and a "was …" note in a comment is a hit like any * other; a gate that reports five hits it is meant to ignore stops being * read. Its decimal rgba() spelling is retired with it — writing the * colour in decimal is exactly how it survived the first grep. */ --blue:#0E1B2B; /* was the invented mid-blue — kickers, card links, step numbers, FAQ marker */ --blue-dark:#3B4E66; /* was #17497F — hover. Links go LIGHTER: the only hue move left */ --blue-soft:#EDF0F4; /* was #E8F0FA — media placeholder ground, tag hover. Neutral cool grey */ /* Light surfaces (default) */ --bg:#FFFFFF; /* * --bg-tint is REPOINTED to brand Soft White and DEMOTED. * * IT IS NEVER A SECTION BAND AGAIN. (DIRECTION.md §3.2 / §3.4 rule 2) * * Its only remaining job is the fill of an INSET OBJECT sitting on white: * .toc, .legal-toc, .author-box, .form-shell, .empty-state, .cs-proof, * 
, and the .service-row / .next-prev hover. That is the whole list.
   *
   * .section--tint AND ITS ~50 DOWNSTREAM VARIANTS ARE DELETED (v1.9.2).
   * The note that used to sit here said they were retained "ONLY so interior
   * and legal templates do not break". That had stopped being true: no PHP
   * file in the theme emits .section--tint, so nothing could break. A band is
   * .section--navy or it is plain .section — see the usage note on
   * .section--navy in the "Section surfaces" block.
   */
  --bg-tint:#F5F7F9;
  --ink:#0E1B2B;      /* headings */
  --body:#2B3A4D;     /* was #44566E (7.9:1, read as washed/unfinished) → 11.6:1 on white */
  --muted:#5A6A7E;    /* was #5E7590 → 5.5:1 on white, safe at 12px */
  --line:#DFE8F2;
  --line-strong:#C8D7E7;

  /* Dark band surfaces */
  --surface-dark:#13243A;   /* also the architectural arrow fill: navy-on-navy, ~6% lighter */
  --line-dark:#22334A;
  --on-dark:#F5F7F9;
  --on-dark-body:#A8B4C2;

  /* Semantic — NONE OF THESE THREE IS REFERENCED BY ANY RULE IN THIS SHEET,
     or by any inline style in the PHP. They are kept as the agreed palette for
     validation and status messaging, which the theme does not render yet (no
     front-end form survives, and the demo importer styles its own admin
     notices with WordPress core's colours). Delete them or use them; do not
     assume a rule somewhere depends on them. */
  --success:#1F8A5B;
  --warning:#E5A94A;
  --danger:#E5484D;

  /* Type */
  --font-sans:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Spacing (8px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  /* was 72px. Fixes the "cramped vertically, empty horizontally" document feel.
     The clamp replaces the two breakpoint overrides that used to live in the
     Responsive block — see the note there. */
  --section:clamp(88px,9vw,144px);

  /* Radius — hard 0px is the commitment (DIRECTION.md §6).
     2px survives on interactive controls only, so a button still reads as a
     control rather than as a painted rectangle. */
  --radius-sm:2px;  /* was 8px  — buttons, inputs, share links */
  --radius-md:0;    /* was 12px — cards, media, panels, proof frames */
  --radius-lg:0;    /* was 16px — the CTA band and large panels */

  /* Elevation — deleted. Emphasis is a heavier EDGE, never a lift.
     Kept as tokens so the `box-shadow:var(--shadow-*)` call sites do not need
     editing and cannot reintroduce a shadow by accident. There are TWO such
     call sites, not the ~9 this note claimed, and both are --shadow-md
     (.pricing-card--featured and the sticky nav shade). --shadow-sm currently
     has no call site; it is kept only so the pair cannot diverge if one comes
     back. */
  --shadow-sm:none;
  --shadow-md:none;

  /* Layout */
  --container:1240px;   /* was 1160px — paired with .section--bleed */
  --gutter:24px;

  /*
   * Motion — ZERO. The client constraint is absolute and was stated three
   * times. Setting the duration tokens to 0s is how it is enforced in one
   * place: all 29 `transition:… var(--dur-fast)` declarations become
   * instant, and the tokens stay in the file so a future relaxation is a
   * one-line change rather than a re-audit.
   *
   * There are no @keyframes in this stylesheet, no `animation` property, and
   * no `transform` inside any :hover / :focus / :active rule. Transitions
   * are limited to color / background / border-color / outline-color.
   * Do not add a fourth property here.
   */
  --dur-fast:0s; --dur-base:0s;
  /* Unreferenced while the durations are 0s — an easing curve has nothing to
     ease. Kept with them so a future relaxation stays a one-line change. */
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* scroll-behavior is `auto`, not `smooth`. Smooth scroll is motion. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* ──────────────────────────────────────────────────────────────────────────
   TYPE SCALE — DIRECTION.md §4. Range 112 ÷ 12 = 9.3× (it was 5×).
   One family. The second register is tabular numerals and 12px letterspaced
   uppercase labels set against a 112px display — not a second typeface,
   which the brand book forbids.

   THE DESKTOP LADDER, in order. Read it before adding any size:

       12 · 13 · 17 · 18 · 20 · 26 ·  ✕✕✕ 26–40 ✕✕✕ · 40 · 42 · 52 · 72 · 112
       │    │    │    │    │    │                      │    │    │    │    │
       │    │    │    │    │    h3                     │    h1   h2  .tr__to
       │    │    │    │    h4 / .plate__name          .tr__to min       .display
       │    │    body │
       │    .micro    .lead-xl max = 26
       labels

   NOTHING MAY SIT BETWEEN 26px AND 40px. The hole is deliberate: it is what
   makes the system read as engineered rather than templated. Measured at the
   desktop end of every clamp — a clamp may pass through the hole while it
   scales down, but no element's desktop size may land in it. Three legacy
   components were repointed out of the hole; each is flagged at its rule.
   ────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  margin:0 0 var(--space-4);
  color:var(--ink);
  text-wrap:balance;
  font-weight:800;letter-spacing:-.022em;
}
h1{font-size:clamp(42px,6vw,80px);line-height:1.00;letter-spacing:-.030em}
/* FLOOR RAISED 30px -> 40px. §4 rule 1: "Nothing sits between 26px and 40px.
   The hole in the middle of the scale is deliberate." A 30px floor is inside
   the hole and the 4.4vw ramp crossed it rather than jumping it, so h2 free-
   floated through 40 -> 28px across the whole 720-909px band with no entry in
   the design table: 768px (iPad portrait, the commonest tablet width) landed
   on 33.8px, dead centre of the hole. This is the same correction already
   made to .post-card--featured .post-card__title further down the file, which
   carries the note "30px sits in the 26-40px gap".
   40px only governs 720-909px: below 720 the mobile block's `h2{font-size:28px}`
   takes over (§4's mobile column), above 909 the 4.4vw ramp is already clear. */
h2{font-size:clamp(40px,4.4vw,52px);line-height:1.06;letter-spacing:-.022em}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.25;font-weight:700;letter-spacing:-.012em}
h4{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}

/*
 * .display — EXACTLY ONE PER PAGE. The hero H1 and nothing else.
 * (0,1,0) beats `h1,h2,h3,h4{…}` at (0,0,1), so it may be dropped straight
 * onto an 
 without a wrapper. Colour is deliberately NOT set here: on a
 * navy field .hero-field paints it --on-dark at (0,2,0); on white it
 * inherits --ink from the h1 rule.
 */
/* LINE-HEIGHT .96 -> 1.02. §4's table says .96, and .96 is not physically
   available in this face: measured with canvas TextMetrics in the real loaded
   Manrope ExtraBold, the ink extent of "Thpgy" at 112px is 110.0px against a
   107.5px line step — the leading was 2.5px INSIDE its own ink. That is not a
   theoretical risk; on index.html the descender of the "p" in "profitable"
   and the ascender of the "h" in "channel." overlap horizontally by 4.6px and
   vertically by 0.48px. 1.02 gives a 114.2px step, +4.2px of clearance, and
   is still far tighter than body (1.65), so "tighter leading on display type"
   holds. h1 at 1.00 was measured too and is fine: +1.4px of clearance and no
   real glyph pair collides (worst measured pair on a 2-line h1: +20px). */
.display{
  font-size:clamp(56px,8.5vw,112px);
  font-weight:800;line-height:1.02;letter-spacing:-.035em;
  text-wrap:balance;
  margin:0 0 var(--space-5);
}

/*
 * .lead-xl — hero sub and section leads. Max 50ch, per §4.
 * (0,1,0). It carries no colour either: --body on white by inheritance from
 * , --on-dark-body on navy via the band rules further down.
 */
.lead-xl{
  font-size:clamp(19px,2.1vw,26px);
  font-weight:400;line-height:1.45;letter-spacing:0;
  max-width:50ch;
}

/* .micro — the line under a CTA, a plate date, a legal note. */
/* max-width added: unbounded, .micro under the homepage CTA measured a
   169-character line. 62ch is §4's body measure. */
.micro{font-size:13px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--muted);max-width:62ch}

/*
 * .lime — the ONE lime keyword permitted in a hero H1, on navy, once per
 * page (§3.4 rule 5, which also deletes the .hl swash from every template).
 * Scoped to a dark ground on purpose: lime on white is 1.2:1. On a light
 * band it falls back to --ink so a mis-placed span degrades to plain type
 * rather than to something illegible.
 */
.lime{color:var(--ink)}
.section--navy .lime,
.hero-field .lime,
.cta-band .lime{color:var(--lime)}

/* Accessibility */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:1000;font-weight:700}
.skip-link:focus{left:0}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section__lead{max-width:60ch;color:var(--body);font-size:18px}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION SURFACES — the ground rules (DIRECTION.md §3.4)

   1. A band is .section--navy or it is plain .section. THERE IS NO THIRD
      SURFACE.
   2. No two adjacent sections share a background. The ladder alternates
      navy → white → navy → white WITHOUT EXCEPTION and the page ENDS on
      navy (then the footer on --navy-deep, which is permitted: it is a
      different object, separated by a --line-dark rule).
   3. Target: ~55% of vertical pixels are Midnight Navy. Today it was one
      navy section on the homepage, which is why the brand never read as a
      COLOUR — only as dark type on white, the default state of the web.
   4. Every navy band is full-bleed: .section .section--navy .section--bleed.
      At least four full-bleed moments per page.
   5. Interior pages take the same ladder. Every page opens on a navy field
      and closes on the navy CTA.

   THERE IS NO .section--tint ANY MORE. It was retired from the templates
   first and its rules were left behind "so interior and legal templates keep
   working"; by the time that was checked, no template emitted it at all, so
   the class and its ~50 downstream variants were deleted in v1.9.2. --bg-tint
   survives and is unchanged, but only as the fill of an INSET OBJECT on white
   (.toc, .legal-toc, .author-box, .form-shell, .empty-state, .cs-proof, 
,
   and the .service-row / .next-prev hover) — never as a band. If you are
   reaching for a tint to break up two white sections, the answer is to make
   one of them navy or to merge them.
   ────────────────────────────────────────────────────────────────────────── */.section--navy{background:var(--navy);color:var(--on-dark-body)}
/*
 * h1 WAS MISSING FROM THIS LIST (fixed v1.8) — it read h2, h3, h4 only.
 *
 * The base rule `h1,h2,h3,h4{color:var(--ink)}` paints #0E1B2B, so ANY 

 * on a navy band rendered #0E1B2B on #0E1B2B: a 1:1 contrast ratio, i.e.
 * completely invisible. It went unnoticed because the homepage had exactly
 * one navy section and no h1 in it.
 *
 * THE DIRECTION IS WHAT MAKES IT URGENT: §7 puts every interior page's hero
 * on a navy field, so .page-hero and .cs-hero h1 are both about to land on
 * navy across ~10 templates. The homepage hero is already safe — .hero-field
 * sets its own h1 colour — which would have made this look like a template bug
 * on the interior pages only.
 *
 * (This note listed a third class, .archive-head, when it was written. That
 * component has since been retired — its rules are gone and no template emits
 * it; see the retirement note where they used to be.)
 *
 * The print block at the foot of this file already lists `.section--navy h1`
 * among the headings it forces back to ink, which is the tell that h1 was
 * always meant to be here and was simply dropped from the screen rule.
 */
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:var(--on-dark)}
.section--navy p{color:var(--on-dark-body)}
.section--navy .kicker__num{color:var(--on-dark-body)}
.section--navy .kicker__label{color:var(--on-dark-body)}
.section--navy .kicker__line{background:var(--line-dark)}
.section--navy .arrow{color:var(--lime)}
/* Section head formula (§7): eyebrow is lime on navy, --muted on white.
   (0,2,0) beats `.eyebrow{color:var(--muted)}` at (0,1,0). */
.section--navy .eyebrow{color:var(--lime)}
.section--navy .lead-xl,
.section--navy .micro{color:var(--on-dark-body)}

/* ──────────────────────────────────────────────────────────────────────────
   THE NAVY PALETTE, MEASURED ONCE

   Every `.section--navy` override in this file resolves to one of six paints.
   Their ratios are recorded here rather than repeated at each of the ~180
   rules that use them, so a component variant added later has a table to
   check itself against instead of a guess. WCAG 2.2, sRGB, computed not
   estimated.

     TEXT ON THE BAND ITSELF          against --navy #0E1B2B
       --on-dark       #F5F7F9       16.16:1   headings, card titles, links
       --on-dark-body  #A8B4C2        8.24:1   body copy, meta, labels
       --lime          #C6F432       13.54:1   eyebrows, arrows, link hover

     TEXT ON A CARD INSET IN THE BAND against --surface-dark #13243A
       --on-dark       #F5F7F9       14.58:1
       --on-dark-body  #A8B4C2        7.44:1
       --lime          #C6F432       12.22:1

   All six clear 4.5:1 for body text and 3:1 for large text with room to
   spare, so a component can ground to the band or to a card without its
   colours needing to change.

   NOT TEXT, AND NOT SUBJECT TO 4.5:1:
       --surface-dark on --navy        1.11:1   the card ground. It is a
                                                separation of two grounds; the
                                                CARD IS READ FROM ITS HAIRLINE,
                                                not from the 6% lift, which is
                                                why every card variant sets
                                                border-color as well.
       --line-dark  #22334A on navy    1.36:1   hairlines. Decorative dividers
                                                carry no minimum; where a
                                                border is the only thing
                                                marking an INTERACTIVE
                                                boundary (focus rings,
                                                :hover, .page-numbers.current)
                                                the variant lifts it to
                                                --on-dark-body 8.2:1 or
                                                --on-dark 16.2:1 instead, both
                                                well over the 3:1 that
                                                non-text UI needs.

   THE TRAP: `--blue` is #0E1B2B — the SAME VALUE AS `--navy`. It was
   repointed when the invented mid-blue was removed, so any light-mode rule
   painting `var(--blue)` renders navy-on-navy (1:1, invisible) the moment its
   component lands on a navy band. That is what `.post-card:focus-within` and
   `.cs-card:focus-within` were doing before v1.8.2. Grep `var(--blue)` before
   adding a component to a navy band.
   ────────────────────────────────────────────────────────────────────────── */

/*
 * .section--bleed — the full-bleed utility (§3.4 rule 3).
 * The 
 loses its own horizontal padding and runs edge to edge; the
 * inner .container re-establishes the reading measure. Use it on the hero,
 * the marketplace band, the team band, the proof field and the final CTA.
 */
.section--bleed{width:100%;max-width:none;padding-left:0;padding-right:0}
.section--bleed > .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/*
 * ANCHOR OFFSET FOR EVERY BAND THAT CAN BE LINKED TO.
 *
 * .site-header is `position:sticky; top:0` with a 76px min-height, so a jump
 * to `#calculator` or `#case-studies` parks the band's eyebrow and heading
 * UNDERNEATH the bar and the visitor lands mid-grid, on rows with no head
 * above them. template-parts/section-case-studies.php shipped this scoped to
 * its own band; it is promoted here because the bug is not that band's, it is
 * every id'd band's, and there was no global rule for it anywhere in the file.
 *
 * (0,2,0) — one class plus one attribute. Nothing else in the sheet declares
 * scroll-margin, so this contests nothing; it is written as an attribute
 * selector rather than a utility class so a band cannot acquire an id and
 * forget the offset.
 */
.section[id]{scroll-margin-top:calc(76px + var(--space-5))}

/* ==========================================================================
   Eyebrow / kicker / arrow motif
   ========================================================================== */
.eyebrow{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--space-4);
}

.kicker{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-5)}
.kicker__num{font-size:12.5px;font-weight:800;color:var(--blue);letter-spacing:.06em;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.kicker__line{width:36px;height:1px;background:var(--line-strong)}
.kicker__label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/*
 * .hl — THE LIME SWASH IS DELETED (§3.4 rule 5).
 * Used once it is a signature; it shipped three times in the first three
 * screens, which made it a template default. The 33 template occurrences are
 * being removed; until they are, `.hl` renders as plain --ink on white — the
 * exact behaviour §3.4 specifies — so no template can look broken mid-migration.
 * It is replaced by exactly ONE lime keyword in the hero H1, on navy, once
 * per page: use `.lime` (see the type scale block).
 */
/*
 * THE NAVY HALF OF THE DELETION WAS NEVER DONE. The comment above says the
 * swash is gone and that `.hl` renders as plain --ink "until the templates
 * are removed" — but that only ever applied on white. On navy the line below
 * still painted --lime, and the templates are still shipping .hl 17 times
 * across 14 pages, all of them in SECTION h2s and CTA h2s at 52px. §3.4 rule
 * 5 reserves lime for exactly one keyword, in the hero, once per page, and
 * that keyword is `.lime` — so 14 pages were spending it again below the
 * fold, 1-3 times each, which is the precise thing the rule exists to stop.
 *
 * --on-dark is what a heading is on navy, so this is the same "renders as
 * plain heading colour" behaviour the white branch already had. 16.16:1.
 * The templates can now drop the span at leisure with no visual change.
 */
.hl{color:var(--ink)}
.section--navy .hl{color:var(--on-dark)}

/*
 * .arrow - NOT LEGACY ANY MORE, AND NOT A FALLBACK. Read this before deleting
 * it: the name is the only thing about it that is still historical.
 *
 * It WAS the  that wrapped a `↗` / `→` HTML entity, and it
 * was BUG 1 - U+2197 is not in the shipped Manrope unicode-range, so the mark
 * fell through to whatever symbol font the OS supplied. That is over. No
 * template, template part or JS file in this theme emits either entity, or a
 * literal arrow glyph, any more; the five remaining mentions of `↗` and
 * `→` in the tree are all inside comments describing the state above, and
 * no element anywhere carries class="arrow" in its own markup.
 *
 * WHAT WEARS THIS CLASS TODAY is the sprite itself. ecomenable_get_arrow() in
 * inc/arrow.php appends whatever $class it is handed to `.ee-arrow` and the
 * cut class, so a call site written as
 *     ecomenable_arrow( 'ne', 'inline', 'arrow' )
 * emits .
 * Around fifty call sites pass 'arrow' and around thirty-five pass
 * 'btn-arrow', for exactly one reason: to keep the colour and sizing hooks in
 * this file - `.arrow`, `.section--navy .arrow`, `.btn--primary .arrow`,
 * `.site-logo .arrow` - pointing at something.
 *
 * WHICH IS WHY IT MUST BE `color` AND NOT `fill`. Each  inside the
 * s in ecomenable_arrow_sprite() carries fill="currentColor" as a
 * presentation attribute on the path, and author CSS cannot select into a
 *  shadow tree - so the path resolves currentColor against the `color`
 * it inherits from this . Setting `color` here is what paints the mark.
 * See the .ee-plate__arrow rule further down, where a `fill` was doing nothing
 * for exactly this reason.
 *
 * `font-weight:800` is gone with the : it did the work when the mark was
 * a text glyph in Manrope ExtraBold, and it is inert on an . The stem
 * weight is now drawn into the symbol geometry.
 *
 * NEW MARKUP STILL CALLS ecomenable_arrow() / ecomenable_get_arrow(). Do not
 * hand-write `class="arrow"` on anything, and never on a text node.
 */
.arrow{color:var(--blue)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:15px 30px;
  border-radius:var(--radius-sm);  /* was a hard-coded 8px */
  font-size:16px;font-weight:700;line-height:1;
  text-decoration:none;cursor:pointer;border:0;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.btn:hover{text-decoration:none}
/* Lime is the brand action colour — navy text on it clears AA by a mile */
.btn--primary{background:var(--lime);color:var(--navy)}
.btn--primary:hover{background:#B8E82A}
.btn--primary .arrow,.btn--primary .btn-arrow{color:var(--navy)}
.btn--secondary{background:transparent;color:var(--blue);border:1px solid var(--line-strong)}
.btn--secondary:hover{border-color:var(--blue)}
.btn--secondary .arrow{color:var(--blue)}
/* Reachable only via template-parts/empty-state.php, which concatenates
   btn--{primary|secondary|navy}. Invisible to a grep for "btn--navy". */
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:#16283C}
.btn--navy .btn-arrow{color:var(--lime)}

/*
 * ─── THE NAVY SECONDARY'S BORDER, REPAINTED (v1.9.1, findings 12 and 32) ──
 *
 * WAS: `border-color:var(--line-dark)`. --line-dark #22334A on --navy #0E1B2B
 * measures 1.36:1 — relative luminances 0.03204 and 0.01051, so
 * (0.03204+0.05)/(0.01051+0.05) = 1.36 — against the 3:1 WCAG 1.4.11 asks of
 * a UI component boundary. `.btn--secondary` sets `background:transparent`,
 * so that border is the ONLY thing separating the control from the band; at
 * 1.36:1 the button reads as a line of text that happens to be indented.
 * v1.9 flagged this and declined it as "a design call, not an integration
 * one". It is taken now, because the pricing estimator made it load-bearing:
 * the `.calc-submit` button in page-pricing.php — "Update the estimate" — is
 * the one control a visitor with JavaScript off must find to use that band at
 * all.
 *
 * NOW: --slate #8C98A8 on --navy #0E1B2B = 5.93:1 (L 0.30857 / 0.01051), and
 * 5.35:1 on the --surface-dark #13243A panels some navy bands inset (L
 * 0.01707). Both clear 3:1 with room to spare.
 *
 * WHY --slate AND NOT --on-dark-body, WHICH IS WHAT BOTH VERIFIERS PROPOSED.
 * --on-dark-body #A8B4C2 is 8.24:1 here, so it clears the bar — but it is the
 * value the NEXT line already uses for :hover. Painting the rest state with
 * the hover colour deletes the hover step: the button would answer a pointer
 * with nothing at all, on every navy band on the site. --slate is the fifth
 * locked brand value (see the token block) and had no job until now; it sits
 * between the two, so the rest state clears 1.4.11 and hover still moves
 * 5.93:1 -> 8.24:1. This is the whole fix — no per-control override.
 *
 * NOT ADDED: `.section--navy .calc-submit .btn--secondary{…}` at (0,3,0),
 * which the comment above page-pricing.php's `.calc-submit` paragraph names. It
 * was requested to lift
 * that one button while the site-wide rule stayed broken; with the site-wide
 * rule repainted it would only make one secondary button louder than every
 * other one — and pinning it to --on-dark-body would cost it its hover step
 * for the same reason as above. The `.calc-submit` wrapper is still
 * load-bearing (the print block hides it, and calculators bind to it), just
 * not for this.
 * ────────────────────────────────────────────────────────────────────────── */
.section--navy .btn--secondary{color:var(--on-dark);border-color:var(--slate)}   /* 16.16:1 ink · 5.93:1 border */
.section--navy .btn--secondary:hover{border-color:var(--on-dark-body)}           /* 8.24:1 */
.section--navy .btn--secondary .arrow{color:var(--lime)}                         /* 13.54:1 */

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base);
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  min-height:76px;
}
.site-logo{display:flex;align-items:center;gap:2px;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.site-logo:hover{text-decoration:none}
.site-logo .arrow{font-size:22px;margin:0 2px;color:var(--blue)}
.site-logo img{max-height:36px;width:auto}

.main-nav{display:flex;align-items:center;gap:var(--space-6)}
/* `>` is load-bearing: a descendant selector here also matches the nested