/* ===========================================================================
   haq.css - GENERATED FILE. DO NOT EDIT THIS FILE.

   Built from _fontface.css + haq-core.css by tools/build_css.py.

   NEITHER SOURCE IS DEPLOYED, so the only copy of the source lives in the
   authoring folder:

       Documents/Claude_Code_Design/HAQES/assets/haq-core.css

   Edit there, re-run tools/build_css.py, and upload this file. An edit made
   directly to haq.css on the server will be silently lost the next time anyone
   rebuilds. And per the JKRUK lesson, drift goes BOTH ways: before overwriting
   this file on the server, diff it against your local copy, because someone may
   have edited it here.

   The unicode-range values below are Google's verbatim. Do not retype them.
   =========================================================================== */

/* Poppins - self-hosted. No Google Fonts request at runtime (brief s4, GDPR). */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-400-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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-400-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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-500-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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-500-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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-600-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-600-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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-700-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-700-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;
}

/* ===========================================================================
   HAQES - presupuestos-audifonos.es
   One stylesheet. No build step, no framework, no CDN.

   THESIS      A hearing-aid quote presented as a route with a known number of
               stops, not a sales page with a hidden destination.
   OWN-WORLD   Flat hard-edged panels, NO shadows anywhere. Deep petrol fields
               that own whole regions, divided by amber rules that read as grout
               lines. Orange is the primary action and almost nothing else.

   HARD RULES ENCODED BELOW - do not "tidy" these away:
     1. box-shadow is never used. Borders and colour fields do the separating.
     2. The CTA always carries a 2px ink border. Orange is 2.86 against white,
        under the 3:1 WCAG 1.4.11 needs for a component boundary.
     3. Focus is a DOUBLE ring, white inner + ink outer. No single colour works:
        ink is 16.10 on white but 1.90 on the petrol card; amber is 5.26 on
        petrol but 1.61 on white.
     4. Amber never touches a light ground in any role.
     5. Nothing is smaller than 16px. Body is 19/20px.
     6. Tap targets are 56px, choice tiles 64px. The floor is 48.
   =========================================================================== */

/* --------------------------------------------------------------- tokens --- */
:root {
  /* colour */
  --ink:        #0F2429;
  --primary:    #0B5560;
  --primary-lt: #0F6E7B;
  --cta:        #FF6A2B;
  --cta-hover:  #E85A1E;
  --amber:      #FFC24A;
  --surface:    #E8F3F4;
  --white:      #FFFFFF;
  --muted:      #3A5259;   /* 8.30 on white - for 16px small print */
  --error:      #9B1C12;   /* 8.18 on white */
  --error-dark: #FFC9C4;   /* 5.80 on petrol */
  --confirm:    #8FEFD0;   /* 6.21 on petrol - the in-area confirmation, once */

  /* type */
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-xs:   1rem;                                          /* 16 - the floor */
  --fs-sm:   1.125rem;                                      /* 18 - labels     */
  --fs-base: clamp(1.1875rem, 1.13rem + 0.28vw, 1.25rem);   /* 19 -> 20        */
  --fs-lg:   clamp(1.375rem, 1.26rem + 0.55vw, 1.5rem);     /* 22 -> 24        */
  --fs-h3:   clamp(1.5rem, 1.36rem + 0.7vw, 1.75rem);       /* 24 -> 28        */
  --fs-h2:   clamp(1.75rem, 1.4rem + 1.75vw, 2.25rem);      /* 28 -> 36        */
  --fs-h1:   clamp(2.125rem, 1.35rem + 3.85vw, 3.25rem);    /* 34 -> 52        */

  /* spacing - 4px base */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  --rule: 3px;                 /* the grout line */
  --tap: 56px;                 /* control height. floor is 48 */
  --wrap: 1140px;
}

/* ----------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-synthesis-weight: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Tabular figures wherever a number must line up or be read aloud. */
.num, .haq-phone, .haq-price, .haq-ref, .haq-linea, input[inputmode="numeric"],
input[inputmode="tel"] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- typography */
h1, h2, h3, h4 { margin: 0 0 var(--s4); font-weight: 700; line-height: 1.12; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; font-weight: 600; }
h4 { font-size: var(--fs-lg);  font-weight: 600; }

/* More space above a heading than below it. */
* + h2 { margin-top: var(--s8); }
* + h3 { margin-top: var(--s7); }

p { margin: 0 0 var(--s4); }
p.lead { font-size: var(--fs-lg); }
small, .small { font-size: var(--fs-xs); color: var(--muted); }
/* --muted is 8.30 on white but only ~1.5 on petrol. On any dark ground the
   small print switches to a light tint or it is simply unreadable. */
.section--petrol small, .section--petrol .small,
.haq-header small, .haq-header .small,
.haq-card small, .haq-card .small { color: rgba(255,255,255,.85); }

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--primary-lt); }

/* Breadcrumbs are deliberate navigation, not prose, so they get the full 48px
   target even though they sit on one line. */
nav[aria-label="Ruta de navegación"] a {
  display: inline-block; min-height: 48px; line-height: 48px; padding-inline: 2px;
}

.haq-linklist a {
  display: inline-block; min-height: 48px; line-height: 48px;
  padding-inline: 2px;
}
.haq-linklist br { display: none; }
/* Breadcrumbs are deliberate navigation, not prose, so they get the full 48px
   target even though they sit on one line. */
nav[aria-label="Ruta de navegación"] a {
  display: inline-block; min-height: 48px; line-height: 48px; padding-inline: 2px;
}

.haq-linklist a { display: block; }

/* Measure cap. Long lines are the single worst thing for an eye with reduced
   acuity, and this audience reads at print scale. */
.prose { max-width: 34em; }

/* ------------------------------------------------------------------ focus --- */
/* THE DOUBLE RING. Correct on every ground in this palette. Never remove. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--white);   /* the ONLY permitted box-shadow */
}

/* ------------------------------------------------------------------ layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }

.section { padding-block: var(--s8); }
.section--surface { background: var(--surface); }
.section--petrol  { background: var(--primary); color: var(--white); }
.section--petrol h1, .section--petrol h2, .section--petrol h3 { color: var(--white); }
.section--petrol a { color: var(--amber); }
/* ...but NOT a link that is a button. Without this, .section--petrol a wins on
   specificity over .btn--primary and the CTA renders amber on orange at 1.78.
   Caught by the rendered-contrast audit, not by reading the CSS. */
.section--petrol a.btn--primary { color: var(--ink); }
.section--petrol a.btn--secondary { color: var(--white); }

/* The grout line. Amber on petrol only - it is invisible on white. */
.section--petrol + .section--petrol { border-top: var(--rule) solid var(--amber); }

@media (min-width: 860px) { .section { padding-block: var(--s9); } }

/* ----------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: var(--s3) var(--s6);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; border-radius: 4px;
  transition: background-color .15s ease, border-color .15s ease;
}

/* RULE 2: the ink border is not decoration, it is the component boundary. */
.btn--primary {
  background: var(--cta); color: var(--ink);
  border: 2px solid var(--ink);
}
.btn--secondary {
  background: transparent; color: var(--primary);
  border: 2px solid var(--primary);
}
/* On the petrol card the boundary switches to amber - ink would vanish (1.90). */
.haq-card .btn--primary, .section--petrol .btn--primary { border-color: var(--amber); }
.section--petrol .btn--secondary { color: var(--white); border-color: var(--white); }

/* Hover only where a pointer genuinely hovers. */
@media (hover: hover) {
  .btn--primary:hover   { background: var(--cta-hover); }
  .btn--secondary:hover { background: var(--surface); }
  .section--petrol .btn--secondary:hover { background: rgba(255,255,255,.12); }
}

/* Tap feedback: TWO property changes, one of them a ring. */
.btn:active { background: var(--cta-hover); outline: 3px solid var(--amber); outline-offset: 2px; }

.btn--block { width: 100%; }

/* --------------------------------------------------------------- the panel --- */
/* The dark form card. A white card on a light hero has nothing to separate
   from - rejected twice on DQHUK, and shadow-tuning could not fix it. */
.haq-card {
  background: var(--primary);
  color: var(--white);
  border: var(--rule) solid var(--amber);
  border-radius: 6px;
  padding: var(--s5);
}
@media (min-width: 640px) { .haq-card { padding: var(--s6); } }

/* Tiled panel heading - the azulejo unit. */
.haq-panel-h {
  display: inline-block; margin: 0 0 var(--s5);
  padding-bottom: var(--s2);
  border-bottom: var(--rule) solid var(--amber);
}
.section:not(.section--petrol) .haq-panel-h { border-bottom-color: var(--primary); }

/* ------------------------------------------------------- la linea (signature) */
/* Progress indicator, step heading and brand mark in one object. Degrades to a
   plain numbered list with no CSS, and reads correctly to a screen reader. */
.haq-linea { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; align-items: center; }
.haq-linea li {
  flex: 1 1 0; position: relative; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
/* the line */
.haq-linea li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; background: rgba(255,255,255,.35);
}
.haq-linea li:first-child::before { left: 50%; }
.haq-linea li:last-child::before  { right: 50%; }
.haq-linea li[data-done]::before  { background: var(--amber); }
/* the station */
.haq-linea li::after {
  content: ""; position: relative; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); border: 3px solid rgba(255,255,255,.55);
}
.haq-linea li[data-done]::after { background: var(--amber); border-color: var(--amber); }
.haq-linea li[aria-current="step"]::after {
  width: 20px; height: 20px; background: var(--cta); border-color: var(--white);
}
/* terminus: the out-of-area branch ends the line honestly */
.haq-linea li[data-terminus]::after { border-radius: 2px; background: var(--error-dark); border-color: var(--error-dark); }

.haq-linea .vh { position: absolute; }   /* the real step text, for AT */

.haq-step-count { font-size: var(--fs-xs); color: var(--amber); font-weight: 500; margin: 0 0 var(--s2); }

/* ------------------------------------------------------------------ fields --- */
.haq-field { margin-bottom: var(--s5); }

.haq-label {
  display: block; margin-bottom: var(--s2);
  font-size: var(--fs-sm); font-weight: 500;
}

/* Real labels on everything. No placeholder-only inputs anywhere. */
.haq-input {
  width: 100%; min-height: var(--tap);
  padding: var(--s3) var(--s4);
  font-family: inherit; font-size: var(--fs-base); color: var(--ink);
  background: var(--white); border: 2px solid var(--white); border-radius: 4px;
}
.haq-input::placeholder { color: var(--muted); opacity: 1; }
.haq-input[aria-invalid="true"] { border-color: var(--error-dark); }

.haq-help  { font-size: var(--fs-xs); margin-top: var(--s2); color: rgba(255,255,255,.85); }
.haq-error { font-size: var(--fs-xs); margin-top: var(--s2); color: var(--error-dark); font-weight: 500; }
.section:not(.section--petrol) .haq-error { color: var(--error); }

/* choice tiles - the zero-typing steps */
.haq-tiles { display: grid; gap: var(--s3); margin: 0; padding: 0; border: 0; }
@media (min-width: 560px) { .haq-tiles--2 { grid-template-columns: 1fr 1fr; } }

.haq-tile {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 64px; padding: var(--s3) var(--s4);
  background: var(--white); color: var(--ink);
  border: 2px solid var(--white); border-radius: 4px;
  font-size: var(--fs-base); font-weight: 500; text-align: left; cursor: pointer;
  font-family: inherit; width: 100%;
}
@media (hover: hover) { .haq-tile:hover { border-color: var(--amber); } }
.haq-tile:active,
.haq-tile[aria-pressed="true"] { border-color: var(--cta); outline: 3px solid var(--amber); outline-offset: 2px; }

/* consent */
.haq-consent { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); }
.haq-consent input { width: 28px; height: 28px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--cta); }
.haq-consent label { font-size: var(--fs-xs); line-height: 1.5; }

/* ------------------------------------------------------------- trust strip --- */
/* Four tiles, ~8 words each. Four grids evenly at 4-across and 2x2; five
   orphans at every breakpoint. */
.haq-trust { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .haq-trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .haq-trust { grid-template-columns: repeat(4, 1fr); } }
.haq-trust > * {
  padding: var(--s5) var(--s4);
  background: var(--white); border-top: var(--rule) solid var(--primary);
}
.section--petrol .haq-trust > * { background: transparent; border-top-color: var(--amber); }
.haq-trust h3 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.haq-trust p  { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.section--petrol .haq-trust p { color: rgba(255,255,255,.9); }

/* ---------------------------------------------------------------- tick list --- */
.haq-ticks { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.haq-ticks li { position: relative; padding-left: var(--s6); margin-bottom: var(--s3); font-size: var(--fs-lg); }
.haq-ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 20px; border: solid var(--cta);
  border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.section--petrol .haq-ticks li::before { border-color: var(--amber); }

/* ---------------------------------------------------------------------- FAQ --- */
.haq-faq { border-top: 2px solid var(--surface); }
.haq-faq details { border-bottom: 2px solid var(--surface); }
.haq-faq summary {
  cursor: pointer; list-style: none; padding: var(--s5) var(--s6) var(--s5) 0;
  font-size: var(--fs-lg); font-weight: 600; position: relative; min-height: var(--tap);
}
.haq-faq summary::-webkit-details-marker { display: none; }
.haq-faq summary::after {
  content: ""; position: absolute; right: var(--s2); top: 50%; width: 12px; height: 12px;
  margin-top: -8px; border: solid var(--primary); border-width: 0 3px 3px 0;
  transform: rotate(45deg); transition: transform .15s ease;
}
.haq-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.haq-faq .haq-faq-a { padding-bottom: var(--s5); }

/* --------------------------------------------------------------- AEO answer --- */
/* The 40-60 word direct answer that opens every guide page. */
.haq-answer {
  border-left: 6px solid var(--cta); background: var(--surface);
  padding: var(--s5); margin-bottom: var(--s7); font-size: var(--fs-lg);
}
.haq-answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ header --- */
.haq-header { background: var(--primary); color: var(--white); border-bottom: var(--rule) solid var(--amber); }
.haq-header .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 76px; flex-wrap: wrap; padding-block: var(--s3); }
/* The wordmark and the phone number collided at 390px. Below 520 the brand
   drops to the mark alone and the number sits on its own line. */
@media (max-width: 519px) {
  .haq-brand b { font-size: 1.05rem; }
  .haq-phone { font-size: var(--fs-xs); }
}
.haq-brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--white);
  text-decoration: none; min-height: 48px; }
.haq-brand img { width: 44px; height: 44px; }
.haq-brand b { display: block; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.05; }
.haq-phone { color: var(--white); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ footer --- */
.haq-footer { background: var(--ink); color: var(--white); padding-block: var(--s8); }
.haq-footer a { color: var(--amber); }
/* Inline links in the footer measured 27px. Brief section 6 sets a 48px floor
   for tap targets, and a 27px link is a miss for anyone with reduced motor
   precision - which overlaps heavily with this audience. */
.haq-footer a, .haq-footer .small a {
  display: inline-block; min-height: 48px; line-height: 48px; padding-inline: 2px;
}
.haq-footer p { margin-bottom: var(--s2); }
.haq-footer .small { color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- utilities --- */
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.haq-center { text-align: center; }
.stack > * + * { margin-top: var(--s4); }

/* Focus mode: once past step 1 the page below the hero goes away, and the
   header un-sticks. A sticky bar breaks form submission on a phone. */
body.wiz-started .below-hero { display: none; }
body.wiz-started .haq-header { position: static; }

/* --------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------- print --- */
@media print {
  .haq-header, .haq-footer, .btn { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}

/* ------------------------------------------------------------------- hero --- */
/* The form IS the hero. Not a CTA pointing at a form further down: the wizard
   card sits in the first viewport, and step 1 is a single field.
   No hero photograph up here at all - the panel is the image. */
/* Real photograph behind the hero, per Tom 2026-08-28, following the WSQUK
   homepage which carries a genuine product-in-situ shot rather than a stock
   lifestyle scene.

   THE CONSTRAINT THAT SHAPES THIS: the standing rule is LIGHT hero, DARK form
   card (DQHUK, confirmed again on SLCUS). So the photo cannot be allowed to
   darken the hero or wash out the copy. Instead the copy sits on its own solid
   azulejo tile laid over the photograph - hard edges, no gradient scrim, no
   soft fade. The photo stays at full strength where there is no text.
   Premium here comes from a real image plus restraint, not from decoration. */
.haq-hero {
  position: relative;
  background: var(--surface);
  padding-block: var(--s7) var(--s8);
  isolation: isolate;
}
.haq-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  /* Plain url() first for anything that does not understand image-set, then
     image-set with explicit types so the browser picks. AVIF measured 14%
     smaller than WebP at marginally HIGHER fidelity (39.9 vs 39.1 dB PSNR). */
  background-image: url('img/hero-1200.webp');
  background-image: image-set(url('img/hero-1200.avif') type('image/avif'),
                              url('img/hero-1200.webp') type('image/webp'));
  background-size: cover;
  background-position: 88% 42%;
  background-repeat: no-repeat;
}
@media (min-width: 1400px) {
  .haq-hero::before {
    background-image: url('img/hero-1800.webp');
    background-image: image-set(url('img/hero-1800.avif') type('image/avif'),
                                url('img/hero-1800.webp') type('image/webp'));
  }
}
@media (max-width: 700px) {
  /* On a phone the photo sits behind nothing useful and costs a download, so
     it is served small and pushed to where it still reads: the lower band. */
  .haq-hero::before {
    background-image: url('img/hero-760.webp');
    background-image: image-set(url('img/hero-760.avif') type('image/avif'),
                                url('img/hero-760.webp') type('image/webp'));
    background-position: 72% 28%;
  }
}
.haq-hero > .wrap { position: relative; z-index: 1; }

/* The copy tile. Solid, so contrast is guaranteed over any part of the photo
   rather than depending on how the image happens to be exposed. */
.haq-hero-copy-tile {
  background: var(--surface);
  border-top: var(--rule) solid var(--amber);
  padding: var(--s6) var(--s5) var(--s5);
}
@media (min-width: 940px) {
  .haq-hero { padding-block: var(--s8); }
  .haq-hero-copy-tile { padding: var(--s7) var(--s6) var(--s6); }
}
.haq-hero-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 940px) {
  .haq-hero-grid { grid-template-columns: 46fr 54fr; gap: var(--s8); }
  .haq-hero { padding-block: var(--s9); }
}
.haq-eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 var(--s3);
}
.haq-hero h1 { color: var(--ink); }
.haq-hero .lead { color: var(--muted); max-width: 30em; }

/* Mobile order: headline, then the panel, then the ticks. The ticks must never
   push the form below the fold. */
/* MOBILE ORDER IS THE WHOLE POINT: headline, then the FORM, then everything
   else. The lead paragraph and the ticks are what pushed the card 1300px down
   the page in the first mobile render - on a 844px viewport the form was three
   screens from the top, which defeats a form-as-hero design entirely. */
@media (max-width: 939px) {
  .haq-hero-grid { display: flex; flex-direction: column; }
  .haq-hero-copy { display: contents; }
  .haq-hero-head  { order: 1; }
  .haq-hero-card  { order: 2; margin-block: var(--s5); }
  .haq-hero-lead  { order: 3; }
  .haq-hero-ticks { order: 4; }
  /* Tighter headline on a phone so the card clears the fold. */
  .haq-hero { padding-block: var(--s5) var(--s7); }
  .haq-hero h1 { margin-bottom: var(--s3); }
}

/* -------------------------------------------------------- how it works --- */
/* The linea grammar again, horizontal: numbered stops with the rule between. */
.haq-how { display: grid; gap: var(--s6); counter-reset: stop; }
@media (min-width: 780px) { .haq-how { grid-template-columns: repeat(3, 1fr); } }
.haq-how > li { list-style: none; position: relative; padding-top: var(--s6); }
.haq-how > li::before {
  counter-increment: stop; content: counter(stop);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
  background: var(--cta); color: var(--ink); border: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.section--petrol .haq-how > li::before { border-color: var(--amber); }
.haq-how h3 { margin-bottom: var(--s2); }
.haq-how p { margin: 0; }

/* A block that is waiting on real client input. Deliberately conspicuous:
   a placeholder that looks like finished copy is how invented claims ship. */
.haq-pending {
  border: var(--rule) dashed var(--amber);
  padding: var(--s5); border-radius: 6px;
}
.haq-pending > :last-child { margin-bottom: 0; }