/* =============================================================================
   SPANISHDNVHEALTHINSURANCE.COM — design system
   Transcribed from portable-design-system.md. Values are the specified values.
   Do not invent alternatives, do not "improve" the palette, do not substitute a font.
   The only sanctioned variation is the six brand hex values in :root (§2).

   Deviation from the spec, on owner instruction: §1's Google Fonts <link> is replaced by
   self-hosted Montserrat below. Same family, same five weights, no third-party font request.
   ============================================================================= */

/* --- §1 FONT — self-hosted Montserrat. 400 · 500 · 600 · 700 · 800. No 300, no 900, no italics. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext-400-normal.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-400-normal.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:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext-500-normal.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-latin-500-normal.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:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext-600-normal.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-latin-600-normal.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:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext-700-normal.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-700-normal.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:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext-800-normal.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin-800-normal.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}

/* --- §2 COLOUR TOKENS ------------------------------------------------------- */
:root{
  /* brand — the ONLY six values to change for a new brand */
  --blue:#0079C8;    /* primary action, links, accents */
  --navy:#001846;    /* headings, dark sections, hero */
  --green:#1B883C;   /* success / positive badge */
  --orange:#DB3907;  /* urgency badge */
  --teal:#007D79;    /* secondary badge */
  --pink:#D02670;    /* "hot" badge — use sparingly */
  /* neutrals — keep these */
  --warm:#F1EFEB;    /* warm section background */
  --grey:#F3F5F8;    /* cool section background */
  --border:#e3e8ef;
  --text:#21272A;    /* body copy */
  --mid:#4A5568;     /* secondary copy */
  --muted:#718096;   /* tertiary / breadcrumb */
  /* radii */
  --r:8px; --rm:12px; --rl:16px; --rpill:999px;
}

/* --- §3 BASE ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:clip}
body{font-family:'Montserrat',sans-serif;color:var(--text);background:#fff;line-height:1.7;font-size:15px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
section,.wrap,.wrap-sm,main,header,footer,.container{max-width:100%;overflow-x:clip;position:relative}
section img,section video,section iframe,.wrap img,.wrap video,.wrap iframe{max-width:100%;height:auto}

/* --- §4 LAYOUT -------------------------------------------------------------- */
.wrap{max-width:1400px !important;margin:0 auto !important;padding:0 48px !important;width:100% !important;box-sizing:border-box !important}
@media(max-width:600px){.wrap{padding:0 24px !important}}
.wrap-sm{max-width:900px !important;margin:0 auto !important;padding:0 24px !important}
.sec{padding:60px 0}
.sec-grey{background:var(--grey)}
.sec-warm{background:var(--warm)}
.sec-navy{background:var(--navy)}
.sec-blue{background:var(--blue)}

/* --- §5 TYPOGRAPHY ---------------------------------------------------------- */
.hero h1{font-size:46px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.8px;margin-bottom:18px}
.hero-sub{font-size:16.5px;color:rgba(255,255,255,.82);line-height:1.7;margin-bottom:32px;max-width:580px}
.stag{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
h2.sh{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.4px;margin-bottom:10px;line-height:1.2}
h2.sh-w{color:#fff}
h2.sh-c{text-align:center}
h3{font-size:17px;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:8px}
p{font-size:15px;line-height:1.75;color:var(--mid)}
.small{font-size:13.5px;line-height:1.8;color:var(--mid)}
@media(max-width:700px){.hero h1{font-size:32px;letter-spacing:-.4px} h2.sh{font-size:24px}}

.anim{background:linear-gradient(270deg,var(--blue),#38BDF8,var(--navy),var(--blue),#38BDF8);
  background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shift 8s ease infinite}
@keyframes shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* --- §6 BUTTONS ------------------------------------------------------------- */
/* PRIMARY COMMERCIAL ACTION = MAGENTA, matched to SHI (owner ruling, 27 August 2026). The
   quote is the one thing every commercial page is asking for, so it gets one colour and
   keeps it everywhere: header, hero, cards, quote page, footer. Blue stays for the insurer's
   own controls (Mi Sanitas, Call Back), green for WhatsApp, outlined for Call Us and Contact.
   The footer's .ftr-btn-quote was already magenta — this is the rest of the site catching up. */
.btn-p{background:var(--pink);color:#fff;padding:16px 32px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:14px;border:none;cursor:pointer;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:all .2s}
.btn-p:hover{background:#b31f5d;color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-out{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);padding:14px 28px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
  border-radius:var(--r);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:all .2s}
.btn-out:hover{border-color:#fff;color:#fff;text-decoration:none;background:rgba(255,255,255,.08)}

/* --- §7 BADGES / PILLS ------------------------------------------------------ */
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.badge{padding:6px 16px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--rpill)}
.b-green{background:var(--green);color:#fff}
.b-blue{background:var(--blue);color:#fff}
.b-teal{background:var(--teal);color:#fff}
.b-orange{background:var(--orange);color:#fff}
.b-hot{background:var(--pink);color:#fff}

/* --- §8 CORE COMPONENTS ----------------------------------------------------- */
/* Hero (full-bleed, dark) */
.hero{background:var(--navy);padding:88px 0 80px;position:relative;overflow:hidden}
/* HERO PHOTOGRAPH. The slot has existed since the design system was written; this is the first
   image to occupy it. An <img> rather than a CSS background: the hero picture is the LCP element
   on the homepage, and only a real element can carry width/height, fetchpriority and decoding.

   TWO OVERLAYS, not one. The horizontal gradient dissolves the photo into the navy behind the
   copy; a flat navy wash over the whole panel then pulls the picture's own contrast down so the
   band reads as one dark surface rather than as a photo pasted beside a colour. Text contrast is
   therefore a property of the treatment, not of whichever photograph is in the slot. */
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:58%;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#001846 0%,#001846 14%,rgba(0,24,70,.72) 46%,rgba(0,24,70,.30) 78%,rgba(0,24,70,.18) 100%)}
.hero-in{position:relative;z-index:2;max-width:680px;width:100%;padding-left:32px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
/* Below 900px the panel is too narrow to show a subject, so the photo becomes a full-bleed
   backdrop at low opacity instead of being thrown away — the band keeps its depth and the copy
   keeps its contrast. */
@media(max-width:900px){
  .hero{padding:56px 0 48px}
  .hero-in{padding-left:0}
  .hero-photo{width:100%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(0,24,70,.88) 0%,rgba(0,24,70,.93) 45%,#001846 100%)}
}

/* Breadcrumb.
   The crumb text stays at the specified 12px in an 11px-padded bar — the row is not made taller.
   Each link carries an invisible 44px-tall hit area so the touch target meets the project's
   requirement without changing the visual density. */
/* BREADCRUMBS ARE SCHEMA-ONLY (owner instruction, 24 August 2026): the BreadcrumbList JSON-LD
   in partials/breadcrumb.njk still renders on every hierarchical page — Google keeps the trail —
   but the visual bar is not drawn. Restoring it is deleting the display:none below. */
.bc{display:none}
.bc-visual{background:#fff;border-bottom:1px solid #eee;padding:11px 0;font-size:12px;color:var(--muted)}
.bc a{color:var(--muted);position:relative;display:inline-block}
.bc a::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.bc .sep{margin:0 7px;opacity:.4}

/* Stats bar (dark band) — only real, verifiable numbers */
.stats-bar{background:var(--navy);padding:48px 0}
.stat-n{font-size:38px;font-weight:800;color:#fff;display:block;letter-spacing:-1.5px;line-height:1}
.stat-l{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;display:block}

/* Trust strip */
.trust-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 0}

/* Card grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--rm);padding:28px;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 30px rgba(0,0,0,.08)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* FAQ accordion — native <details>/<summary>.
   Visual spec is §8 unchanged; the control, keyboard handling and expanded state come from the
   browser, so every answer is reachable without JavaScript and no dead button is ever shipped.
   assets/js/ui.js adds only the single-open behaviour. */
.faq-item{border-bottom:1px solid #eee}
.faq-btn{width:100%;text-align:left;background:none!important;border:none;padding:16px 46px 16px 0;
  font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;
  display:block;position:relative;min-height:44px;line-height:1.4;white-space:normal!important;word-break:break-word;
  overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent;list-style:none}
.faq-btn::-webkit-details-marker{display:none}
.faq-btn::marker{content:''}
.faq-btn:hover{color:var(--blue)}
.faq-item[open] > .faq-btn{color:var(--blue)}
.faq-ico{width:30px;height:30px;background:var(--blue);color:#fff;border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;font-size:18px;font-weight:700;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.faq-ico::after{content:'+'}
.faq-item[open] .faq-ico{background:var(--navy)}
.faq-item[open] .faq-ico::after{content:'−'}
.faq-ans{font-size:13.5px;color:var(--mid);line-height:1.8;padding:0 0 20px}

/* Form section */
.qsec{background:var(--blue);padding:64px 0}
.qform{background:#fff;border-radius:var(--rl);padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
/* min-height 44px: the project's stricter interaction requirement (§9) wins over the 12px
   padding in §8, which measured 43px at every tested width. */
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;min-height:44px;border:1px solid var(--border);
  border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text);
  box-sizing:border-box;max-width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.fg input:focus,.fg select:focus{outline:2px solid var(--blue);outline-offset:-2px}
.fgr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.fgr{grid-template-columns:1fr}}

/* Related links footer block */
.rel-sec{background:var(--grey);padding:40px 0}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.rel-col h3{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--navy);margin-bottom:14px;padding-bottom:10px;border-bottom:3px solid var(--blue)}
.rel-col a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--mid);padding:6px 0;line-height:1.45}
.rel-col a:hover{color:var(--blue)}
@media(max-width:900px){.rel-grid{grid-template-columns:1fr;gap:22px}}

/* --- §10 ACCESSIBILITY ------------------------------------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--navy);color:#fff;
  padding:12px 20px;font-size:14px;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;text-decoration:none;color:#fff}
#content{scroll-margin-top:120px}
#content:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--navy)}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* --- §11 HEADER / FOOTER CHROME --------------------------------------------
   Scoped token set + system font stack, deliberately separate from page content.
   Layout beyond the spec's declarations follows the structure it specifies:
   dark utility top bar (contact + account link) → white main bar (logo, nav, CTA, burger).
   --------------------------------------------------------------------------- */
:root{--shi-blue:#0079C8;--shi-dark:#001846;--shi-light:#E6F2FB;--shi-text:#21272A;--shi-muted:#6a7380;--shi-wa:#25D366}

.hdr{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:sticky;top:0;z-index:9000;box-shadow:0 2px 6px rgba(0,0,0,.06);background:#fff;overflow:visible}
/* WITHOUT JAVASCRIPT THE HEADER MUST NOT STICK.
   The burger cannot collapse the primary nav, so every destination stacks inside a sticky,
   z-index:9000 bar that then covers the page and swallows clicks on it — `elementFromPoint` over the
   article returned a header link. It is a real barrier for no-JS visitors, not a test artefact.
   It stayed invisible because the nav renders only when `existingLinks` finds surviving
   destinations, and until R1 pages existed it found none: the no-JS suite was passing against a
   header with nothing in it. Any page that adds a nav destination triggers it, so the fix and its
   test land with the first wave that does. Static, not fixed — the header keeps its place in flow
   and scrolls away, which is the correct no-JS behaviour rather than a workaround. */
html:not(.js) .hdr{position:static}

/* Dark utility top bar. Must WRAP below 480px (§11) or the last item is clipped at 320px. */
.hdr-util{background:var(--shi-dark);color:#fff;font-size:12.5px}
.hdr-util-in{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding:4px 0;min-height:44px}
.hdr-util a{color:#fff;display:inline-flex;align-items:center;gap:6px;padding:5px 2px;min-height:44px;font-weight:500}
.hdr-util a:hover{text-decoration:underline}
@media(max-width:480px){.hdr-util-in{justify-content:center;gap:10px}}

/* White main bar */
.hdr-main{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;min-height:74px}
/* Visual order on the main bar is logo → nav → CTA → burger, independent of DOM order
   (the burger button must sit before .hdr-nav in the DOM: it is the control referenced by aria-controls, and the nav is positioned relative to the bar). */
.hdr-logo{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;order:0}
.hdr-nav{order:1}
.hdr-cta-group{order:2}
.hdr-logo img{height:54px;width:auto;display:block}
/* Header lockup: name over strapline. The strapline is the site's positioning line, so it is set
   at a readable size and KEPT on mobile — an owner ruling after the sister NLV site shipped it at
   10px, where it survived on desktop and was the first thing to become unreadable on a phone. */
/* align-items is set explicitly: this element carries .hdr-logo too, whose align-items:center
   centres a COLUMN flex box's children horizontally. Invisible while the box hugs its text on
   desktop; on mobile the box grows and the whole lockup drifts to the middle of the bar. */
.hdr-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.2;text-decoration:none}
.hdr-wm{font-weight:800;font-size:16px;color:var(--shi-dark);letter-spacing:-.2px}
.hdr-wm-hl{color:var(--shi-blue)}
.hdr-strap{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.35}
.hdr-wordmark:hover .hdr-wm{color:var(--shi-blue)}
.hdr-wordmark:hover{text-decoration:none;color:var(--shi-blue)}
.hdr-nav{display:flex;align-items:center;gap:2px}
.hdr-nav a{color:var(--shi-text);font-size:14px;font-weight:500;padding:10px 12px;border-radius:var(--r);
  display:inline-flex;align-items:center;min-height:44px}
.hdr-nav a:hover{background:var(--shi-light);color:var(--shi-blue);text-decoration:none}
.hdr-nav a[aria-current="page"]{color:var(--shi-blue);box-shadow:inset 0 -2px 0 var(--shi-blue)}
.hdr-cta-group{display:flex;gap:10px;align-items:center;flex-shrink:0}
.hdr-cta-group .btn-p{padding:12px 20px;font-size:13.5px;min-height:44px}

/* Burger — a real <button> with aria-expanded/aria-controls, driven by assets/js/ui.js.
   It ships with the `hidden` attribute and is unhidden only once the script runs, so a
   non-functional control is never exposed. Every display rule below is therefore scoped to
   :not([hidden]) — a bare `display` would override the hidden attribute.
   Tap highlight / background / outline / box-shadow are reset on every state (§11). */
.hdr-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:0;margin:0 0 0 4px;padding:0;cursor:pointer;flex-shrink:0;order:3}
/* `:focus` is DELIBERATELY ABSENT from this list. It used to be here, and it was the only thing
   on the site capable of suppressing a focus ring: a browser without :focus-visible support got
   outline:none from this rule and nothing from the rule below, leaving the mobile navigation
   toggle with no visible focus at all. Hover and active may drop the outline; focus may not. */
.hdr-burger:hover,.hdr-burger:active{background:none;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
.hdr-burger:focus-visible{outline:2px solid var(--shi-blue);outline-offset:2px}
.hdr-burger-bars,.hdr-burger-bars::before,.hdr-burger-bars::after{display:block;width:22px;height:2px;
  background:var(--shi-dark);border-radius:2px;transition:transform .2s,background-color .2s}
.hdr-burger-bars{position:relative}
.hdr-burger-bars::before,.hdr-burger-bars::after{content:'';position:absolute;left:0}
.hdr-burger-bars::before{top:-6px}
.hdr-burger-bars::after{top:6px}
.hdr-burger[aria-expanded="true"] .hdr-burger-bars{background:transparent}
.hdr-burger[aria-expanded="true"] .hdr-burger-bars::before{transform:translateY(6px) rotate(45deg)}
.hdr-burger[aria-expanded="true"] .hdr-burger-bars::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1180px){
  .hdr-main{flex-wrap:wrap;row-gap:8px}
  .hdr-burger:not([hidden]){display:inline-flex}
  .hdr-logo{order:1}
  .hdr-cta-group{order:2;margin-left:auto}
  /* Without JavaScript the navigation is simply a visible stacked list — nothing to open. */
  .hdr-nav{order:4;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:0}
  .hdr-nav a{border-radius:0;border-bottom:1px solid var(--border)}
  /* With JavaScript it collapses behind the button. */
  .js .hdr-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    padding:8px 24px 16px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .js .hdr-nav.open{display:flex}
}
/* Below 560px the wordmark, CTA and burger cannot sit on one row at 320–390px. §9: a flex row
   that cannot fit must WRAP, not be clipped — so the CTA drops to its own full-width row. */
@media(max-width:560px){
  .hdr-main{flex-wrap:wrap;row-gap:10px;padding:12px 0}
  .hdr-logo{order:0;flex:1 1 auto;min-width:0}
  .hdr-wm{font-size:13.5px;word-break:break-word}
  .hdr-strap{font-size:12px}   /* readable, not hidden — see the lockup note above */
  .hdr-burger{order:1;margin-left:8px}
  .hdr-cta-group{order:2;flex:1 0 100%;margin-left:0}
  .hdr-cta-group .btn-p{width:100%;justify-content:center;padding:13px 16px;font-size:13px}
}

/* Footer */
.ftr{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--shi-dark);color:rgba(255,255,255,.72);padding:48px 0 28px;font-size:14px}
.ftr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.ftr-col h2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#fff;
  margin-bottom:14px;padding-bottom:10px;border-bottom:3px solid var(--shi-blue)}
.ftr-col a{display:flex;align-items:center;font-size:14px;color:rgba(255,255,255,.72);padding:7px 0;line-height:1.45;min-height:44px}
.ftr-col a:hover{color:#fff}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:600px){.ftr-grid{grid-template-columns:1fr;gap:20px}}

.ftr-base{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.55)}

/* Fact-check block — carried by every page (high-risk register). */
.factcheck{background:var(--grey);border-top:1px solid var(--border);padding:22px 0;
  font-size:12.5px;line-height:1.75;color:var(--mid)}
.factcheck .sep{margin:0 7px;opacity:.45}
.factcheck strong{color:var(--navy);font-weight:700}

/* =============================================================================
   QUOTE PAGE (build 4) — components not present in the portable design system.
   Built from its existing tokens, spacing and form rules; no new colours, no new
   type sizes. Every interactive control keeps the project's 44px minimum.
   ============================================================================= */

/* Hero is short on this page — the form sits directly beneath it (Part 1). */
.hero-short{padding:56px 0 96px}
@media(max-width:900px){.hero-short{padding:40px 0 80px}}

/* Form card overlapping the hero. */
.quote-sec{padding:0 0 60px}
.quote-sec .qform{margin-top:-64px}
@media(max-width:700px){.quote-sec .qform{margin-top:-56px;padding:24px}}

/* ---- Contact-first quote card ------------------------------------------------------------
   The state the quote page ships in while the submission destination is unapproved. Two primary
   actions, not four: the three numbers stay inside a native disclosure so the page does not turn
   into a wall of telephone buttons. `details` is deliberate — the numbers open with JavaScript
   unavailable, exactly as the header's mobile dropdown does. */
.qcontact .qc-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:10px}
.qc-btn{background:var(--pink);color:#fff!important;padding:16px 28px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:15px;border:none;border-radius:var(--r);display:inline-flex;
  align-items:center;gap:9px;min-height:52px;text-decoration:none;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent;transition:all .2s}
.qc-btn::-webkit-details-marker{display:none}
.qc-btn::marker{content:''}
.qc-btn:hover{background:#b31f5d;color:#fff!important;text-decoration:none!important;transform:translateY(-1px)}
.qc-btn-wa{background:#25D366}
.qc-btn-wa:hover{background:#1da851}
.qc-call{position:relative}
.qc-car{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.qc-call[open] .qc-car{transform:rotate(-135deg);margin-top:3px}
.qc-drop{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:var(--r);
  box-shadow:0 8px 28px rgba(0,24,70,.2);min-width:232px;padding:6px 0;z-index:60}
.qc-drop a{display:flex;align-items:center;gap:9px;padding:11px 18px;font-size:15px;
  font-weight:600;color:var(--navy);min-height:44px}
.qc-drop a:hover{background:var(--grey);color:var(--blue)}
.qc-lbl{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:var(--muted)}
.qc-hrs{color:var(--muted);margin-bottom:26px}
.qcontact .sh{margin-top:6px}
.qc-list{margin:0 0 16px;padding-left:22px}
.qc-list li{margin-bottom:7px}
.qc-note{background:var(--grey);border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0;
  padding:15px 18px;margin:22px 0 18px}
@media(max-width:560px){
  .qcontact .qc-actions{flex-direction:column;align-items:stretch}
  .qc-btn{justify-content:center}
  .qc-call{width:100%}
  .qc-call>.qc-btn{width:100%;box-sizing:border-box}
  .qc-drop{position:static;box-shadow:none;border:1px solid var(--border);margin-top:8px;min-width:0}
}

.fs{border:0;margin:0 0 8px;padding:0}
.fs-legend{display:block;width:100%;font-size:11px;font-weight:800;color:var(--navy);
  text-transform:uppercase;letter-spacing:.09em;padding:18px 0 12px;margin-bottom:8px;
  border-bottom:1px solid var(--border)}
.fg-label{display:block;font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:6px}

/* A1 — segment buttons (radios: keyboard-operable and announced as a radio group). */
.segments{display:flex;gap:8px;flex-wrap:wrap}
.segment{flex:1 1 140px;position:relative;display:flex}
.segment input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.segment span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);background:#fff;
  font-size:14px;font-weight:600;color:var(--mid);text-align:center;transition:all .15s}
.segment input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.segment input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

/* Person rows. */
.person-row{padding-top:4px}
.person-row[hidden]{display:none}

/* Contact-preference checkboxes. */
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--text);cursor:pointer}
.check input{width:20px;height:20px;min-width:20px;accent-color:var(--blue)}

/* Validation messages — plain English, never an internal code. */
.field-error{font-size:13px;line-height:1.6;color:var(--orange);font-weight:600;margin-top:6px}
.form-errors{background:#fff4f1;border:1px solid var(--orange);border-radius:var(--r);
  padding:14px 16px;margin:16px 0}
.form-errors ul{margin:0;padding-left:18px}
.form-errors li{font-size:13.5px;line-height:1.7;color:var(--text)}
.fg input[aria-invalid="true"],.fg select[aria-invalid="true"]{border-color:var(--orange)}
.fg textarea[aria-invalid="true"]{border-color:var(--orange)}
.fg-err{color:#9a2c00;font-size:13px;font-weight:600;margin:6px 0 0}

/* ---- The quote and contact forms ----------------------------------------------------------
   One set of rules for both: they are the same object doing two jobs, and a second stylesheet
   block would drift from this one the first time either changed. */
/* `hidden` MUST WIN. A class that sets `display:flex` or `display:block` beats the user agent's
   own `[hidden]{display:none}`, because a class selector outranks an attribute selector in the UA
   sheet's cascade layer — so an element the script had correctly marked hidden stayed on screen.
   That is how the "would rather talk it through?" row survived beside a completed request. */
[hidden]{display:none!important}

.qf-intro{margin:0 0 18px;color:var(--mid)}
.qf textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);
  font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text);box-sizing:border-box;
  max-width:100%;min-width:0;resize:vertical}
.qf textarea:focus{outline:2px solid var(--blue);outline-offset:-2px}
.qf .fg{margin-bottom:18px}
.qf-submit{margin-top:6px}

/* The honeypot. Off-screen rather than display:none — a script that skips hidden fields is the
   thing being caught, and `display:none` is the first rule such a script checks. It is
   aria-hidden and tabindex=-1 in the markup, so nobody using the page can reach it. */
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* "Would rather talk?" sits ALONGSIDE the form, not under it. */
.qf-talk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--grey);
  border-radius:var(--r);padding:12px 16px;margin:0 0 24px}
.qf-talk-lbl{font-weight:700;color:var(--navy);font-size:14px}
.qf-talk-acts{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.qf-talk-hrs{color:var(--muted);margin:0}
.qc-btn-sm{padding:9px 16px;font-size:13px;min-height:44px}
.qf-talk .qc-drop{min-width:212px}

.qf-privacy{font-size:13px;line-height:1.7;color:var(--mid);background:var(--grey);
  border-radius:var(--r);padding:14px 16px;margin:20px 0}

/* The two answer panels. Styled as answers, not as alerts: one is good news and the other is an
   honest uncertainty, and neither is an error the visitor caused. */
.qf-done,.qf-unsure{border-radius:var(--rl);padding:26px 28px;margin-top:4px}
.qf-done{background:#eefaf3;border:1px solid #9ad9bb}
.qf-unsure{background:#fff4f1;border:1px solid var(--orange)}
.qf-done h3,.qf-unsure h3{margin:0 0 10px;font-size:20px;color:var(--navy)}
.qf-done p:last-child,.qf-unsure p:last-child{margin-bottom:0}
.qf-done:focus,.qf-unsure:focus{outline:2px solid var(--blue);outline-offset:2px}

@media(max-width:560px){
  .qf-talk{flex-direction:column;align-items:stretch}
  .qf-talk-acts{flex-direction:column;align-items:stretch}
  .qf-talk-acts>*{width:100%;box-sizing:border-box;justify-content:center}
  .qf-talk .qc-call>.qc-btn{width:100%;box-sizing:border-box;justify-content:center}
  .qf-talk .qc-drop{position:static;box-shadow:none;border:1px solid var(--border);margin-top:8px;min-width:0}
  .qf-submit{width:100%;justify-content:center}
}

.under-button{margin-top:16px}
.quote-sec .btn-p{width:100%;justify-content:center;margin-top:8px}

/* Steps strip and benefits row use the design system's card grid; both are 4-up on the
   benefits row, so the grid gets a 4-column variant at desktop only. */
.steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.card p strong{color:var(--navy)}

/* Plan cards feed the same form. Their CTAs are text links, never a second .btn-p. */
.plan-cards{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.plan-cards{grid-template-columns:1fr}}
.plan-link{font-weight:700;font-size:14px;display:inline-flex;align-items:center;min-height:44px}

.cta-line{margin-top:8px}
.qsec .cta-line a{color:#fff;font-weight:700;text-decoration:underline;display:inline-flex;
  align-items:center;min-height:44px}
.qsec .sh-w{margin-bottom:4px}

/* Mobile sticky bar (Part 4 §9) — mobile only, hidden while the form's submit is on screen. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:8000;background:#fff;
  border-top:1px solid var(--border);padding:10px 16px;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.sticky-cta .btn-p{width:100%;justify-content:center}
.sticky-cta[hidden]{display:none}
@media(min-width:701px){.sticky-cta{display:none}}

/* Confirmation state — rendered only after a genuinely successful submission. */
.form-confirmation{background:var(--grey);border:1px solid var(--border);border-radius:var(--rm);
  padding:28px;font-size:16px;font-weight:600;color:var(--navy);line-height:1.6}
.form-confirmation:focus{outline:2px solid var(--blue);outline-offset:2px}

/* Standalone / trailing CTA links carry the project's 44px target. Links inside a sentence keep
   the natural line box — expanding them would break the text flow (recorded in BUILD-DECISIONS). */
.cta-inline a{display:inline-flex;align-items:center;min-height:44px}

/* Links inside running text carry the approved inline-target exception (no forced 44px box), so
   they must be identifiable without relying on colour: link blue against body grey is only about
   1.6:1, well under the 3:1 that would let colour stand alone. Prose links are therefore
   underlined. Standalone CTAs, plan links and buttons keep the design system's undecorated
   treatment — they are unambiguous by position and shape. */
.faq-ans a,
.factcheck a,
.sec p a:not(.plan-link):not(.btn-p):not(.btn-out),
.wrap-sm p a:not(.plan-link):not(.btn-p):not(.btn-out){text-decoration:underline;text-underline-offset:2px}
.cta-inline a,.rel-col a,.ftr-col a,.hdr-nav a,.bc a{text-decoration:none}

/* =============================================================================
   LEGAL / UTILITY PAGES (privacy, cookies, legal notice, terms)
   Prose and one inventory table. No new colours and no new type sizes — every
   value below is an existing token or an existing size.
   ============================================================================= */
.lgl-list{margin:0 0 18px;padding-left:22px;list-style:disc}
.lgl-list li{margin-bottom:8px;line-height:1.7}
.wrap-sm h2.sh{margin-top:34px}
.wrap-sm h3{font-size:18px;font-weight:700;color:var(--navy);margin:22px 0 8px}
.wrap-sm .card p:last-child{margin-bottom:0}

/* Wide inventory tables scroll inside their own container so the page body never
   scrolls horizontally (design system §responsive). */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;
  border:1px solid var(--border);border-radius:8px}
.tbl{border-collapse:collapse;width:100%;min-width:900px;font-size:13.5px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:top;line-height:1.6}
.tbl thead th{background:var(--grey);color:var(--navy);font-weight:700;white-space:nowrap}
/* TARGET SIZE FOR A LINK THAT FILLS A TABLE CELL.
   Measured at 375px on build 25: the routing table's "The employee pages" and "The self-employed
   pages" links were 17px tall. A link that IS its whole cell is a routing control, not a phrase
   inside a sentence, so WCAG 2.5.8's inline exception does not cover it.

   SCOPE IS DELIBERATELY NARROW: `.tbl td > a` only. Inline prose links stay untouched — they are
   correctly exempt and would look wrong padded — and no other anchor on the site is affected.
   `min-height` rather than `height`, so a link that wraps to two lines grows instead of clipping;
   inline-flex + align-items keeps the text on its own baseline inside the enlarged hit area. The
   cell's existing 10px vertical padding supplies the spacing between adjacent rows.

   NOT `.cta-line > a`, which is where I first put this. Those links sit inside a paragraph with
   surrounding text, so they are genuinely inline and genuinely exempt; padding them would have
   been a sitewide change to fix a defect they do not have. Measured before fixing, not after. */
.tbl td > a{display:inline-flex;align-items:center;min-height:44px}
/* Same principle, second container. `.lgl-list` is a list of routing links — each `li` holds a
   link and nothing else, by construction — so these are controls, not phrases in a sentence.
   Measured at 375px: 19px tall. Scoped to `.lgl-list li > a` so it cannot reach `.cta-line`,
   where 23 of 29 links ARE inline in sentences and would look wrong padded. Those six standalone
   `.cta-line` links are recorded rather than fixed by a rule that would damage the other 23. */
.lgl-list li > a{display:inline-flex;align-items:center;min-height:44px}
/* `.cta-line-solo` marks a cta-line whose link IS the whole line — a control, not a phrase.
   Declared explicitly because CSS cannot tell a link with text siblings from one without, and
   most .cta-line links do have them. */
.cta-line-solo > a{display:inline-flex;align-items:center;min-height:44px}
.tbl tbody tr:last-child td{border-bottom:0}

/* Legal links in the footer base row. Each link is a real tap target: the design system requires
   44px minimum at 320/375/390, and these were shipping at 21px. */
.ftr-legal{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.ftr-legal a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px;
  display:inline-flex;align-items:center;min-height:44px}
.ftr-legal a:hover{color:#fff}

/* Ordered list for editorial/source-hierarchy content. Same rhythm as .lgl-list. */
.num-list{margin:0 0 18px;padding-left:22px;list-style:decimal}
.num-list li{margin-bottom:10px;line-height:1.7}
.num-list strong{color:var(--navy)}

/* Staging marker — staging builds only, never production. */
.stg-bar{position:sticky;top:0;z-index:900;background:#7a1200;color:#fff;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px}

/* =============================================================================
   HOMEPAGE (matrix build 28) — contrast corrections only.
   No new colours, no new type sizes, no new layout primitives: both rules below
   re-point an existing token that is unreadable on an existing dark background.
   ============================================================================= */

/* `.small` carries the body-grey secondary colour (--mid, #4A5568). On the navy hero that is
   roughly 1.9:1 — the hero's qualification line was effectively invisible. It takes the hero's
   own white-on-navy treatment, one step quieter than .hero-sub (about 8.7:1). */
.hero .small{color:rgba(255,255,255,.72)}

/* Same root cause for links: the global `a` colour is --blue (#0079C8), about 2.3:1 on navy.
   Inside the hero a link takes white with an underline, so it is identifiable by shape as well
   as colour. */
/* Prose links only. Buttons are unambiguous by shape and keep the design system's undecorated
   treatment — an underlined .btn-p reads as a mistake. */
.hero a:not(.btn-p):not(.btn-out):not(.holding-ci){color:#fff;text-decoration:underline;text-underline-offset:2px}

/* Same defect on the blue conversion band: a bare paragraph inside .qsec inherited --text
   (#21272A) over #0079C8. .qsec already whitens its heading (.sh-w) and its CTA line; the body
   paragraph was simply never covered. */
.qsec p{color:rgba(255,255,255,.92)}

/* =============================================================================
   SHARED CHROME — contact channels, mobile contact drawer, staging placeholders.
   Added 17 August 2026 with the structured contact-channel records.
   ============================================================================= */

/* Utility bar: the phones are one labelled cluster ("Spain +34… UK 0203… US +1…"), not three
   unrelated links, so the country label rides inside each anchor rather than sitting loose. */

.hdr-util-lbl{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;
  color:rgba(255,255,255,.62)}
.hdr-util-hrs{color:rgba(255,255,255,.62);display:inline-flex;align-items:center;min-height:44px}

/* Mobile contact controls live inside the nav drawer. At desktop the utility bar already carries
   the same channels, so showing them twice would be noise. */
.hdr-nav-contact{display:none}
/* Selector carries .hdr-nav so it outranks the header's own `.hdr-nav a` treatment, which
   otherwise leaves these inline and gives each control a rule the width of its own text —
   a ragged edge that reads as unfinished rather than as a list. */
.hdr-nav .hdr-nav-cta{display:flex;width:100%;align-items:center;min-height:44px;font-size:14px;
  font-weight:600;color:var(--shi-blue);padding:10px 12px;border-bottom:1px solid var(--border)}
.hdr-nav-hrs{display:block;font-size:12.5px;color:var(--mid);padding:10px 12px}
@media(max-width:1180px){
  .hdr-nav-contact{display:block;margin-top:4px}
}

/* STAGING-ONLY NAVIGATION AND FOOTER PLACEHOLDERS.
   A label whose destination does not exist yet. It must read as "not yet available", never as a
   link the visitor failed to click: no pointer cursor, no hover state, no underline, and a muted
   weight against the live items beside it. The element itself carries no href, no role and no
   tabindex, so it is not focusable and assistive technology never announces it as a link. */
.hdr-nav-ph{color:var(--mid);opacity:.55;font-size:14px;font-weight:500;padding:10px 12px;
  border-radius:var(--r);cursor:default;display:inline-flex;align-items:center;min-height:44px}
/* .ftr-ph is now used ONLY by the staging chrome fixture (/_preview/chrome/), which illustrates a
   withheld contact channel. The real footer stopped rendering unbuilt destinations on 24 August
   2026 and omits them in every environment instead. The header's .hdr-nav-ph is unaffected. */
.ftr-ph{color:rgba(255,255,255,.38);display:flex;align-items:center;font-size:14px;padding:7px 0;
  line-height:1.45;min-height:44px;cursor:default}
@media(max-width:1180px){
  .hdr-nav-ph{border-radius:0;border-bottom:1px solid var(--border);display:flex}
}

/* Footer contact column and the gated legal/regulatory block. */
.ftr-hrs{display:block;font-size:13px;color:rgba(255,255,255,.55);padding:7px 0}
.ftr-legal-block{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;
  font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.7}
/* Six columns once the contact column joins the five approved link columns. */
.ftr-grid{grid-template-columns:repeat(6,1fr)}
@media(max-width:1100px){.ftr-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(max-width:700px){.ftr-grid{grid-template-columns:1fr;gap:18px}}

/* Staging chrome fixture only (/_preview/chrome/). An empty value slot is drawn as a neutral rule
   so the control's shape is visible while it is unmistakably NOT a number. */
.chrome-fx{border:1px dashed var(--border);border-radius:var(--rm);overflow:hidden;margin:16px 0}
.chrome-fx-mob{max-width:360px;background:#fff;padding:8px 12px}
.fx-rule{display:inline-block;width:92px;height:8px;border-radius:4px;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px);opacity:.35}
.chrome-fx .fx-slot{cursor:not-allowed}

/* The utility bar is a DESKTOP component. Below 1000px — the exact breakpoint at which the
   navigation collapses behind the burger — the drawer carries Call / WhatsApp / Email / callback
   as full-width controls, so the bar would be duplicating them. Left visible it wrapped to four
   rows at 390px and pushed the H1 below the fold, which costs more than it gives. One breakpoint
   governs both, so the two can never disagree about which component owns contact on a given
   width. */


/* The fixture's mobile controls sit OUTSIDE .hdr-nav, so the drawer's own stacking rule does not
   reach them and they would render inline — misrepresenting the very layout the fixture exists to
   show. Same treatment, scoped to the fixture. */
.chrome-fx-mob .hdr-nav-cta{display:flex;width:100%;align-items:center;min-height:44px;
  font-size:14px;font-weight:600;color:var(--shi-blue);padding:10px 12px;
  border-bottom:1px solid var(--border)}

/* Below 1000px the header CTA is full-width, and on the homepage it duplicates the hero's own
   approved primary CTA to the same destination — two identical blue buttons in the first screen.
   The chrome yields to the page copy. Desktop is unaffected: there the header CTA is a compact
   control in the bar, not a competing full-width block. */
@media(max-width:1180px){ .hdr-cta-hero-dup{display:none} }


/* =============================================================================
   SHARED CHROME — parity rebuild against the NLV/SHI anatomy (17 August 2026).
   Structure only. No borrowed artwork, no borrowed claims, no borrowed identity.
   Every colour below is an existing brand token.
   ============================================================================= */

/* ---- Dark utility bar -------------------------------------------------------
   Utility nav left, contact right, exactly as the reference arranges it. */
.hdr-util{background:var(--navy);color:#fff;font-size:13px}
.hdr-util-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:7px 0;min-height:44px}
.hdr-util a{color:#fff;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500}
.hdr-util a:hover{text-decoration:underline}
.hdr-util-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hdr-util-nav a{opacity:.92;font-weight:500}
.hdr-util-ph{color:rgba(255,255,255,.42);cursor:default;display:inline-flex;align-items:center;
  min-height:44px;font-weight:500}
.hdr-util-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hdr-util-phones{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hdr-util-lbl{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;
  color:rgba(255,255,255,.62)}
.hdr-util-wa svg{width:15px;height:15px;fill:#25D366;flex-shrink:0}
.hdr-util-hrs{color:rgba(255,255,255,.62);display:inline-flex;align-items:center;min-height:44px}
.hdr-mi{background:var(--blue);color:#fff!important;padding:7px 16px;border-radius:var(--r);
  font-weight:700;font-size:13px;white-space:nowrap}
.hdr-mi:hover{background:#009AE0;text-decoration:none!important}

/* Mobile contact pills. Hidden at desktop, where the full numbers are already shown. */
.hdr-mob-contact{display:none;gap:6px;align-items:center;flex-wrap:wrap}
.hdr-mob-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff!important;padding:7px 11px;border-radius:5px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:44px;
  list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hdr-mob-pill::-webkit-details-marker{display:none}
.hdr-mob-pill::marker{content:''}
.hdr-mob-pill:hover{background:rgba(255,255,255,.24);text-decoration:none!important}
.hdr-mob-cb{background:var(--blue);border-color:var(--blue)}
.hdr-mob-wa{background:#25D366;border-color:#25D366}
.hdr-mob-wa svg{width:15px;height:15px;fill:#fff}
/* NATIVE disclosure, not a scripted button: the numbers open with JavaScript unavailable. */
.hdr-mob-call{position:relative}
.hdr-mob-car{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.hdr-mob-call[open] .hdr-mob-car{transform:rotate(-135deg);margin-top:2px}
.hdr-mob-drop{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:var(--r);
  box-shadow:0 8px 28px rgba(0,24,70,.2);min-width:212px;padding:6px 0;z-index:9999}
.hdr-mob-drop a{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:14px;
  font-weight:600;color:var(--navy)!important;min-height:44px}
.hdr-mob-drop a:hover{background:var(--grey);color:var(--blue)!important}
.hdr-mob-drop .hdr-util-lbl{color:var(--muted)}

@media(max-width:1180px){
  .hdr-util-nav{display:none}
  .hdr-util-phones{display:none}
  .hdr-mob-contact{display:flex}
  .hdr-util-in{justify-content:center}
  .hdr-util-right{width:100%;justify-content:center}
}

/* ---- White main bar --------------------------------------------------------- */
.hdr-mainbar{background:#fff;border-bottom:1px solid var(--border)}

/* BRAND LOCKUP — [ insurer mark ] | [ wordmark + descriptor ], two separate elements.
   The divider is a border on the wordmark's leading edge rather than an element of its own, so
   the two marks stay visually separated even if the image fails to load and its plate collapses.
   The plate exists because only the dark-ground artwork is licensed into this repo (see site.js);
   it is a ground for the logo, never a recolouring of it. */
.hdr-brand{display:flex;align-items:center;order:0;flex-shrink:0;min-width:0;gap:0}
.hdr-insurer{display:inline-flex;align-items:center;flex-shrink:0}
.hdr-insurer img{height:34px;width:auto;display:block}
.hdr-brand .hdr-wordmark{margin-left:16px;padding-left:16px;border-left:1px solid var(--border);
  min-width:0}
/* One designed header, not three stacked bars: the main bar carries the same vertical rhythm as
   the utility bar above it and gives the nav room to breathe between brand and CTA. */
.hdr-main{gap:18px;padding:13px 0;min-height:80px}
/* The nav must NOT wrap. The brand lockup is wider than the bare wordmark it replaced, and a
   wrapping nav drops one item ("Family") onto a second line, which turns the main bar into two
   ragged rows. It stays on one line and the horizontal padding tightens instead. */
.hdr-nav{flex:0 1 auto;justify-content:center;flex-wrap:nowrap}
.hdr-nav a,.hdr-nav-ph{white-space:nowrap}
/* DESKTOP SQUEEZE BAND. The main bar carries brand + six nav items + the quote button on one
   line, and that row is wider than the viewport below roughly 1400px. Type and padding tighten
   here so it survives down to the drawer breakpoint; below that the burger takes over.

   THE DRAWER BREAKPOINT MOVED FROM 1000px TO 1180px (Variant B, owner-approved 25 August 2026) in this pass. At 1024 the row did not fit
   even before the brand lockup existed — the deployed staging build overflows its own quote
   button off the right edge at that width — and the wider lockup would have made a visible
   defect out of a latent one. The nav now collapses at the width where it stops fitting. */
@media(max-width:1500px){
  .hdr-nav a,.hdr-nav-ph{padding-left:9px;padding-right:9px}
  .hdr-brand .hdr-wordmark{margin-left:13px;padding-left:13px}
  .hdr-insurer img{height:30px}
}

/* THE BANDS RUN WIDEST TO NARROWEST, AND THAT ORDER IS LOAD-BEARING. They are plain max-width
   queries of equal specificity, so at 1280px the 1300, 1400 and 1500 bands ALL match and the last
   one in the file wins. Written 1300-then-1400, the second compaction step never applied at any
   width — measured 6 September 2026: the row at 1280px was byte-identical to the row at 1200px.
   Anything added here belongs in descending order. */
@media(max-width:1400px){
  .hdr-main{gap:14px}
  .hdr-wm{font-size:15px}
  .hdr-strap{font-size:12px}
  .hdr-insurer img{height:27px}
  .hdr-brand .hdr-wordmark{margin-left:11px;padding-left:11px}
  .hdr-nav{gap:0}
  .hdr-nav a,.hdr-nav-ph{font-size:13.5px;padding-left:8px;padding-right:8px}
  .hdr-cta-group .btn-p{padding:12px 16px;font-size:13px}
}

/* VARIANT B, second compaction step (owner-approved 25 August 2026). The desktop row has to
   survive to the 1180px drawer breakpoint, and the first band alone leaves it 100px short. The
   BRAND WORDMARK IS NOT TOUCHED at any width — only the nav, the plate-free logo, the gaps and
   the quote button give ground. */
@media(max-width:1300px){
  .hdr-main{gap:10px}
  .hdr-wm{font-size:14.5px}
  .hdr-insurer img{height:24px}
  .hdr-brand .hdr-wordmark{margin-left:9px;padding-left:9px}
  .hdr-nav a,.hdr-nav-ph{font-size:13px;padding-left:6px;padding-right:6px}
  .hdr-cta-group .btn-p{padding:11px 14px;font-size:12.5px}
}

/* THIRD compaction step, added 6 September 2026. Removing the duplicate quote link from the
   desktop nav recovered ~200px and the row now fits from 1920 down to about 1240 — measured, not
   assumed. The last 60px to the 1180px drawer breakpoint still clipped the quote button by up to
   52px, so this band takes it from the nav gaps and the button's own padding rather than from
   the wordmark, which is not touched at any width. */
@media(max-width:1240px){
  .hdr-main{gap:8px}
  .hdr-nav a,.hdr-nav-ph{padding-left:3px;padding-right:3px}
  .hdr-insurer img{height:22px}
  .hdr-brand .hdr-wordmark{margin-left:7px;padding-left:7px}
  .hdr-cta-group .btn-p{padding:11px 11px;font-size:12px}
}

/* RESPONSIVE BRAND LOCKUP.
   .hdr-logo is no longer a direct child of the main flex row — .hdr-brand is — so the earlier
   order rules written against .hdr-logo no longer place anything. They are restated here on the
   new wrapper, and the burger is given an explicit order so the row reads brand · CTA · burger
   rather than leaving the burger in the default-order group beside the brand. */
@media(max-width:1180px){
  /* The desktop squeeze band tightens nav padding to fit the bar. Inside the drawer there is no
     such pressure, and the tighter padding left the primary items indented 4px less than the
     utility and contact rows beneath them — a visible ragged left edge down the drawer. */
  .hdr-nav a,.hdr-nav-ph{padding-left:12px;padding-right:12px;font-size:14px}
  .hdr-main{gap:12px;padding:11px 0;min-height:70px}
  .hdr-brand{order:0;flex:0 1 auto}
  .hdr-cta-group{order:1;margin-left:auto}
  .hdr-burger{order:2}
  .hdr-nav{order:4}
  .hdr-insurer img{height:26px}
  .hdr-brand .hdr-wordmark{margin-left:13px;padding-left:13px}
}
@media(max-width:560px){
  /* flex-basis 0, not auto. Wrapping is decided on the hypothetical main size, so an auto basis
     (the lockup's max-content width) overflowed the row and pushed the burger onto a line of its
     own with the brand centred above it. With basis 0 the brand shrinks and both stay on one row. */
  .hdr-brand{order:0;flex:1 1 0;min-width:0}
  .hdr-burger{order:1}
  .hdr-cta-group{order:2}
  .hdr-insurer img{height:23px}
  .hdr-brand .hdr-wordmark{margin-left:10px;padding-left:10px}
}
/* Below 420px the plate, the wordmark and the burger cannot share a row without the wordmark
   breaking to three lines. The site's OWN wordmark is what must stay legible (owner ruling), and
   the insurer mark is still carried in the footer of the same page, so the plate is what drops. */
@media(max-width:420px){
  .hdr-insurer{display:none}
  .hdr-brand .hdr-wordmark{margin-left:0;padding-left:0;border-left:0}
}
.btn-cb{color:var(--blue);padding:10px 18px;border:2px solid var(--blue);border-radius:var(--r);
  font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  min-height:44px}
.btn-cb:hover{background:var(--blue);color:#fff;text-decoration:none}
@media(max-width:1280px){ .btn-cb{display:none} }

/* ---- Mobile drawer contact controls ----------------------------------------- */
.hdr-nav-contact{display:none}
.hdr-nav .hdr-nav-cta{display:flex;width:100%;align-items:center;min-height:44px;font-size:14px;
  font-weight:600;color:var(--blue);padding:10px 12px;border-bottom:1px solid var(--border)}
.hdr-nav-hrs{display:block;font-size:12.5px;color:var(--mid);padding:10px 12px}
/* Drawer-only utility links — see the header partial. Hidden at desktop, where the dark bar
   already carries them; the drawer is the only place they exist below the breakpoint. */
.hdr-nav-util{display:none}
.hdr-nav .hdr-nav-util a{display:flex;width:100%;align-items:center;min-height:44px;font-size:14px;
  font-weight:500;color:var(--shi-text);padding:10px 12px;border-bottom:1px solid var(--border)}
.hdr-nav .hdr-nav-util a:hover{color:var(--blue);background:var(--shi-light);text-decoration:none}
@media(max-width:1180px){ .hdr-nav-contact{display:block;margin-top:4px} .hdr-nav-util{display:block} }

/* ---- Staging-only inert labels ----------------------------------------------
   Must read as "not yet available", never as a link the visitor failed to click:
   no pointer cursor, no hover state, no underline, muted against the live items. */
.hdr-nav-ph{color:var(--mid);opacity:.55;font-size:14px;font-weight:500;padding:10px 12px;
  border-radius:var(--r);cursor:default;display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1180px){
  .hdr-nav-ph{border-radius:0;border-bottom:1px solid var(--border);display:flex}
}

/* ---- Footer ----------------------------------------------------------------
   FIVE COLUMNS IN ONE ROW: brand · three navigation groups · get in touch. A fourth group briefly
   existed and was folded back on 25 August: six tracks made every column narrow enough that the
   long guidance labels broke mid-phrase, and the fix for that is width, not clever wrapping. The
   editorial policy moved into "Evidence and guidance", which is where it belonged anyway.

   Explicit tracks rather than auto-fit: auto-fit sizes to the viewport and wraps a column onto a
   second row at awkward widths, which is the defect this whole rebuild replaced. The two groups
   carrying the longest labels get the widest tracks. */
.ftr-grid{grid-template-columns:1.3fr 1.14fr 1fr 1.32fr 1.08fr;gap:30px 28px;align-items:start}
.ftr-brand,.ftr-touch{grid-column:auto;grid-row:auto}

/* Brand column — same two-part system as the header, insurer mark above our own wordmark.
   On navy the white artwork needs no plate. */
.ftr-brand .ftr-insurer{height:34px;width:auto;display:block;margin-bottom:16px}
.ftr-wordmark{display:block;font-weight:800;font-size:16.5px;color:#fff;margin-bottom:2px;
  letter-spacing:-.2px;line-height:1.3}
.ftr-wm-hl{color:#7ec3f0}
.ftr-domain{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);
  margin-bottom:14px;letter-spacing:.01em}
.ftr-brand p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.8);margin-bottom:10px;max-width:300px}
.ftr-boundary{font-size:12px;color:rgba(255,255,255,.55);max-width:300px}

/* NAVIGATION GROUPS. <details> on every viewport; only the compact widths ever close them.
   `list-style:none` plus the ::-webkit-details-marker reset removes the UA triangle in every
   engine — the indicator below is ours, so the control reads the same everywhere. */
.ftr-group{min-width:0}
/* A SAFETY NET, NOT A LAYOUT DEVICE. With five columns the labels fit their tracks, so almost
   nothing wraps and this rule does nothing. It stays for the case where a future label, a larger
   default font size or a translation genuinely needs two lines: `balance` splits those evenly
   instead of orphaning one word. It can never ADD a line — it only redistributes lines the
   browser had already decided to use — so it cannot manufacture a two-line label. */
.ftr-group-links a{text-wrap:balance}
.ftr-group-sum{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  list-style:none;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
.ftr-group-sum::-webkit-details-marker{display:none}
.ftr-group-sum::marker{content:''}
/* The heading keeps its own block behaviour inside the flex summary: flex:1 so the blue rule
   still spans the column rather than underlining the words, and its desktop margin intact. */
.ftr-group-sum h2{flex:1 1 auto;min-width:0}
/* Focus must be visible on a dark ground, and only for keyboard users — a mouse click on a
   summary should not leave a ring behind it. */
.ftr-group-sum:focus-visible{outline:2px solid #7ec3f0;outline-offset:3px;border-radius:3px}
.ftr-group-ind{display:none;flex-shrink:0;width:9px;height:9px;margin-right:2px;
  border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.ftr-group[open] .ftr-group-ind{transform:rotate(-135deg) translate(-3px,-3px)}

/* Get in touch */
.ftr-touch-btns{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-width:240px}
.ftr-btn-quote{background:var(--pink);color:#fff!important;padding:11px 16px;border-radius:var(--r);
  font-weight:700;font-size:13.5px;text-align:center;min-height:44px;display:flex;align-items:center;
  justify-content:center}
.ftr-btn-quote:hover{background:#b31f5d;text-decoration:none!important}
.ftr-btn-out{border:2px solid rgba(255,255,255,.5);color:#fff!important;padding:9px 16px;
  border-radius:var(--r);font-weight:700;font-size:13px;text-align:center;min-height:44px;
  display:flex;align-items:center;justify-content:center}
.ftr-btn-out:hover{border-color:#fff;background:rgba(255,255,255,.08);text-decoration:none!important}
.ftr-ci{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.75);
  padding:4px 0;min-height:44px}
.ftr-ci:hover{color:#fff}
.ftr-ci-l{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.45);min-width:58px}
.ftr-hrs{display:block;font-size:12.5px;color:rgba(255,255,255,.55);padding:4px 0}

/* Bottom strip — copyright left, legal right, on one full-width rule. */
.ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 28px;margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.55)}
.ftr-copy{display:inline-flex;align-items:center;min-height:44px}
.ftr-disclosure{background:rgba(0,0,0,.2);padding:16px 24px;text-align:center;font-size:12px;
  color:rgba(255,255,255,.6);line-height:1.6}

/* ---- COMPARISON TABLE ON MOBILE -------------------------------------------------------------
   The wide table is 900px minimum inside a horizontal scroller. On a phone that clipped the row
   labels and pushed the second plan off-screen entirely, so a reader could not compare anything
   without sideways scrolling — which is the one thing a comparison must not require.

   Below 700px each row becomes a small card: the criterion as its heading, then both plans' values
   each labelled by `data-plan`. Nothing is hidden and nothing is truncated. Desktop keeps the real
   <table>, its scope attributes and its semantics untouched. */
@media(max-width:700px){
  .tbl-scroll{overflow-x:visible;border:0;padding:0}
  .tbl{min-width:0;width:100%;display:block;font-size:14px}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl tr{border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:#fff}
  .tbl th[scope="row"]{font-weight:800;color:var(--navy);background:var(--grey);
    padding:11px 14px;border-bottom:1px solid var(--border);white-space:normal}
  .tbl td{padding:9px 14px 11px;border-bottom:1px solid var(--border)}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-plan);display:block;font-size:10.5px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .tbl tbody tr:last-child td{border-bottom:0}
}

/* ============================================================================================
   SHI-STYLE MOBILE HEADER (owner ruling, 27 August 2026).

   The previous mobile header was four stacked rows — staging bar, utility bar with opening hours,
   a brand row whose long wordmark broke as "SpanishDNVHealthInsuran / ce", and a full-width quote
   button — which ate most of the first screen before any content appeared.

   What replaces it, matched to SHI:
     · ONE compact utility row: Call Us · Call Back · WhatsApp · Mi Sanitas, no wrap
     · opening hours removed from mobile entirely (they remain in the footer and desktop bar)
     · brand row is the insurer's mark and the hamburger, nothing else
     · NO site wordmark on mobile — it is the thing that was wrapping, and the Sanitas mark
       identifies the page perfectly well at this width
     · NO full-width quote button in the CLOSED header; the quote CTA lives in the opened drawer
       and in the hero, where it has room to be the primary action

   The wordmark and descriptor return at 701px, where they fit on one line.
   ============================================================================================ */
@media(max-width:700px){
  /* --- utility row: one line, no hours --- */
  .hdr-util-hrs{display:none}
  .hdr-util-in{flex-wrap:nowrap;justify-content:flex-start;gap:6px;padding:5px 0;min-height:0}
  .hdr-util-right{width:auto;flex-wrap:nowrap;justify-content:flex-start;gap:6px}
  .hdr-mob-contact{flex-wrap:nowrap;gap:6px}
  /* 44px, not 38. Compacting these to fit one row put the utility controls under the design
     system's own tap-target minimum — the row fits at 44px anyway, because what constrains it is
     WIDTH, not height. Six pixels of header height is not worth a sub-minimum touch target. */
  .hdr-mob-pill{padding:6px 9px;font-size:11.5px;gap:4px;min-height:44px}
  .hdr-mob-pill svg{width:13px;height:13px}
  .hdr-mi{padding:6px 10px;font-size:11.5px;white-space:nowrap;min-height:44px;
    display:inline-flex;align-items:center}

  /* The Call Us disclosure opens BELOW its button and is absolutely positioned, so it never
     pushes the header taller. Left-aligned and width-capped so the hamburger stays reachable. */
  .hdr-mob-drop{left:0;right:auto;min-width:196px;max-width:calc(100vw - 32px);z-index:10000}

  /* --- brand row: insurer mark + hamburger --- */
  .hdr-main{gap:10px;padding:7px 0;min-height:56px;flex-wrap:nowrap}
  .hdr-brand{flex:0 1 auto;min-width:0}
  .hdr-insurer{display:inline-flex;padding:0}
  .hdr-insurer img{height:34px}
  .hdr-brand .hdr-wordmark{display:none}
  .hdr-burger{order:1;margin-left:auto}

  /* --- no quote button in the closed header --- */
  .hdr-cta-group{display:none}

  /* --- the drawer carries the primary action instead --- */
  .hdr-nav .hdr-nav-quote{display:flex;width:100%;justify-content:center;background:var(--pink);
    color:#fff!important;font-weight:700;font-size:15px;padding:14px 18px;border-radius:var(--r);
    min-height:48px;align-items:center;margin:10px 0 4px;border-bottom:0}
  .hdr-nav .hdr-nav-quote:hover{background:#b31f5d;text-decoration:none!important}
}

/* The drawer's primary action is a DRAWER control. It was rendering at desktop too, where the
   pink quote button already sits in the header bar — the same call to action twice in one row,
   and the ~200px it took pushed that button off the right edge at every width from about 1200 to
   1900. Measured clipped by 45px at 1366 and 131px at 1280. Drawer only. */
/* `.hdr-nav a` sets display:inline-flex and is MORE specific than a bare class, so the class
   selector alone lost. Scoped to the desktop band, where the drawer rule cannot reach it. */
@media(min-width:1181px){ .hdr-nav a.hdr-nav-quote{display:none} }

/* ---- COMPACT FOOTER (tablet and phone) --------------------------------------
   The groups collapse HERE, not only on the phone. Four groups of real links cannot be expanded
   and also fit a tablet height budget: eighteen links at the 44px tap target the design system
   requires is 792px of list before a single heading, brand block or contact row is counted. So
   the breakpoint that switches the grid to two columns is the same one that closes the groups —
   one rule, one mental model: on a touch device the footer is an index you open.

   Nothing is removed to hit the number. Every link that exists on desktop exists here. */
@media(max-width:1100px){
  .ftr{padding:40px 0 24px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}
  /* Only the BRAND spans both tracks. Spanning contact too would leave the groups filling
     2 + 2 cells with a wide empty cell beside the last — the hole this rebuild removed. */
  .ftr-brand{grid-column:1 / -1;margin-bottom:6px}
  .ftr-brand p,.ftr-boundary{max-width:560px}
  .ftr-touch{grid-column:1 / -1;margin-top:14px}
  .ftr-group{border-top:1px solid rgba(255,255,255,.12)}
  .ftr-group-sum{padding:4px 0;align-items:center}
  .ftr-group-ind{display:block}
  .ftr-group-sum h2{border-bottom:0;padding-bottom:0;margin:0;font-size:11.5px}
  .ftr-group-links{padding-bottom:6px}
  .ftr-touch-btns{flex-direction:row;flex-wrap:wrap;max-width:none}
  .ftr-touch-btns > *{flex:1 1 200px}
  /* Two contact rows per line: four stacked rows is 176px of the tablet budget for four numbers. */
  .ftr-touch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-items:start}
  .ftr-touch > h2,.ftr-touch > .ftr-touch-btns{grid-column:1 / -1}
}
@media(max-width:620px){
  .ftr-grid{grid-template-columns:1fr;gap:0}
  .ftr-brand{margin-bottom:14px}
  .ftr-brand p,.ftr-boundary{max-width:none}
  .ftr-touch{grid-template-columns:1fr;margin-top:18px}
  .ftr-touch-btns > *{flex:1 1 100%}
  .ftr-bottom{justify-content:flex-start;margin-top:24px}
}

/* =============================================================================
   HOLDING PAGE (main domain, ELEVENTY_ENV=holding).
   Same tokens, same typeface, same navy hero as the site it stands in for.
   ============================================================================= */
.holding-hero{min-height:100vh;display:flex;align-items:center;padding:64px 0}
.holding-hero .hero-in{max-width:720px}
.holding-stag{color:#8fd0ff;margin-bottom:14px}
.holding-hero h1{font-size:40px;margin-bottom:20px}
.holding-contact{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 10px}
.holding-ci{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;
  border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:14.5px;font-weight:700}
.holding-ci:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);
  color:#fff;text-decoration:none}
.holding-ci-wa{background:#25D366;border-color:#25D366}
.holding-ci-wa:hover{background:#1eb757;border-color:#1eb757}
.holding-ci-l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.holding-ci-wa .holding-ci-l{color:rgba(255,255,255,.8)}
.holding-hrs{margin-bottom:28px}
.holding-boundary{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.7;
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin-top:8px;max-width:520px}
@media(max-width:640px){
  .holding-hero{min-height:0;padding:48px 0}
  .holding-hero h1{font-size:29px}
  .holding-ci{width:100%;justify-content:flex-start}
}

/* Brand lockup on the holding page. Matches the sibling NLV holding page: insurer logo above the
   site wordmark, as two separate elements. The image is constrained by HEIGHT so the logo's own
   aspect ratio is never distorted, and width/height attributes are set on the tag so the text
   below it does not jump when the image loads. */
.brand{margin-bottom:30px}
.brand img{height:34px;width:auto;display:block;margin-bottom:16px}
.brand-name{font-weight:800;color:#fff;font-size:17px;letter-spacing:-.3px;line-height:1.3}
.brand-hl{color:#7ec3f0}
.brand-sub{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);margin-top:4px}

/* =============================================================================
   CONTACT PAGE (matrix build 3). Existing tokens only; no new colours or sizes.
   ============================================================================= */

/* Verified contact routes, presented as the active way to reach the business. */
.contact-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 14px}
.contact-route{display:flex;flex-direction:column;gap:2px;padding:14px 18px;min-height:44px;
  border:1px solid var(--border);border-radius:var(--r);background:#fff;justify-content:center}
.contact-route:hover{border-color:var(--blue);text-decoration:none}
.contact-route-l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted)}
.contact-route-v{font-size:16px;font-weight:700;color:var(--navy)}
.contact-route-wa{background:#25D366;border-color:#25D366}
.contact-route-wa .contact-route-l{color:rgba(255,255,255,.85)}
.contact-route-wa .contact-route-v{color:#fff}
.contact-route-wa:hover{background:#1eb757;border-color:#1eb757}
@media(max-width:600px){.contact-routes{grid-template-columns:1fr}}

/* The form-inactive notice. Deliberately NOT styled as an error: nothing has gone wrong, a
   capability simply is not available yet. Orange is the design system's urgency token and would
   overstate it, so this uses the informational blue band. */
.form-inactive{background:#EEF7FF;border-left:4px solid var(--blue);border-radius:var(--r);
  padding:16px 20px;font-size:14px;line-height:1.7;color:var(--text);margin-bottom:20px}
.form-inactive strong{color:var(--navy)}

/* A disabled control must LOOK unavailable, not merely be unavailable — a button that appears
   pressable and does nothing is worse than one that is visibly out of service. */
.qform :disabled{background:var(--grey);color:var(--muted);cursor:not-allowed;border-color:var(--border)}
/* The project's primary button is .btn-p — the same control the quote page's stub uses. An earlier
   version of this page used `.qsub`, which is NOT a class this design system defines: it came from
   the reference site's own stylesheet. The button therefore rendered as an unstyled 166x20 browser
   default, which reads as broken rather than as deliberately unavailable. */
.btn-p:disabled,.btn-p[disabled]{background:var(--grey);color:var(--muted);cursor:not-allowed;
  box-shadow:none;transform:none}
.btn-p:disabled:hover{background:var(--grey);color:var(--muted);transform:none}
.qform .btn-p{width:100%;justify-content:center}

/* --- §26 GUIDES ---------------------------------------------------------------
   The download library. Three ideas and nothing else:

   1. THE COVER IS A PLACEHOLDER AND MUST LOOK LIKE ONE. It is a typographic panel in the brand's
      own colours, not a mocked-up book. A realistic fake cover would imply a finished artefact and
      would be the visual half of a claim the page is careful not to make in words.
   2. THE STATE IS VISIBLE. `.guide-chip` and `.guide-pending` carry the plain fact — ready, not
      ready, in preparation — in the place a reader is deciding whether to type their name.
   3. NOTHING NEW WHERE SOMETHING EXISTS. The form reuses .qform/.fs/.fg, the cards reuse
      .card/.plan-cards, the buttons reuse .btn-p/.btn-out.
-------------------------------------------------------------------------------- */
.guide-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center;max-width:1180px}
.guide-hero-copy{min-width:0}
.guide-hero-cta{margin-top:22px}

/* The cover placeholder. Deliberately flat and typographic: intentional, not imitative. */
.guide-cover{display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  aspect-ratio:1/1.414;padding:22px;border-radius:var(--r);
  background:linear-gradient(160deg,var(--navy) 0%,#062a63 100%);
  border:1px solid rgba(255,255,255,.14);color:#fff}
.guide-cover-mark{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8FC7EC}
.guide-cover-title{font-size:20px;line-height:1.25;font-weight:800;color:#fff}
.guide-cover-foot{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.guide-cover-lg{max-width:290px;margin-left:auto}
.guide-cover-lg .guide-cover-title{font-size:26px}
.guide-card .guide-cover{aspect-ratio:16/7;margin-bottom:18px;padding:18px}
.guide-card .guide-cover-title{font-size:16px}

.guide-chip{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:var(--rpill);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--grey);color:var(--mid);border:1px solid var(--border)}
.guide-chip-ready{background:#E8F5EC;color:#146B2F;border-color:#BEE3C9}

.guide-note{font-size:14px;color:var(--mid);margin-bottom:20px}
.guide-inside{list-style:none;display:grid;gap:14px;margin:0 0 20px}
.guide-inside li{padding-left:30px;position:relative}
.guide-inside li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--blue);border-radius:2px}
.guide-inside li strong{color:var(--navy)}
.guide-inside-note{font-size:14px;color:var(--mid)}

.guide-form-card{max-width:640px;margin:0 auto}
.guide-form-intro{font-size:15px;color:var(--mid);margin-bottom:22px}
.fg-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}

/* The two honest states. Both are notes, not decoration, so both read as text a person wrote. */
.guide-pending{background:#FFF4EC;border:1px solid #F6D3BC;border-radius:var(--r);
  padding:16px 18px;margin-bottom:22px;font-size:14.5px;line-height:1.65;color:#7A3A12}
.guide-pending strong{color:#7A3A12}
.guide-preview-ok{margin-top:16px;font-size:14.5px;font-weight:600;color:#146B2F}
.guide-done{margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
.guide-done h3{font-size:20px;color:var(--navy);margin-bottom:10px}
.guide-done p{margin-bottom:14px}
.guide-done-next{font-size:14.5px;color:var(--mid)}

@media(max-width:900px){
  .guide-hero{grid-template-columns:1fr;gap:28px}
  /* The cover leads on a narrow screen only if it earns the space. It does not: the headline and
     the call to action do. So it goes below the copy and stops being a full-width slab. */
  .guide-cover-lg{order:2;margin:0;max-width:220px}
  .guide-card .guide-cover{aspect-ratio:16/6}
}
@media(max-width:700px){
  .guide-form-card{padding:24px 20px}
  .guide-cover-lg .guide-cover-title{font-size:22px}
}