/* ============================================================================
   Huntington Beach Mobile Auto Glass — "Chequer Coast"
   ---------------------------------------------------------------------------
   Direction  : the van's orange chequer, run through the page as structure.
   World      : sun-bleached sand paper + asphalt ink.
   Voice      : the brand's safety orange, #FF4C00, sampled from the logo.
   Tone       : bright / direct / coastal.
   Signature  : the logo's five-cell skewed chequer is the page's rhythm — it
                opens the hero, rules every section boundary, marks every list
                item, and is the shape that sweeps in on hover.
   Motion     : one easing curve, one entrance direction (rise).

   Every selector is namespaced .hb-* so this file can be linked site-wide
   without touching the legacy page styles still in style.css / style-new.css.
   ========================================================================== */

:root {
  /* --- world ------------------------------------------------------------ */
  --sand: #F7F3EA;
  --sand-2: #EFE9DB;
  --card: #FFFFFF;

  /* --- ink -------------------------------------------------------------- */
  --ink: #15171A;
  --ink-2: #212529;
  --ink-soft: #585D66;          /* 5.98:1 on sand — AA normal */
  --on-ink: #F2EEE6;            /* 15.52:1 on ink */
  --on-ink-soft: #A8A69F;       /* 7.37:1 on ink */

  /* --- accent family (3 steps + a tint for dark grounds) ---------------- */
  --flame: #FF4C00;             /* brand. FILL only on light; text only on ink */
  --flame-deep: #BA3500;        /* accent TEXT: 5.27:1 on sand, 4.82:1 on sand-2, 5.84:1 on white */
  --flame-bright: #FF7A3D;      /* hover fills */
  --flame-tint: #FFC7A6;        /* accent text on ink — 11.95:1 */

  /* --- hairlines -------------------------------------------------------- */
  --line: rgba(21, 23, 26, .16);
  --line-soft: rgba(21, 23, 26, .08);
  --line-ink: rgba(242, 238, 230, .16);

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* --- type ------------------------------------------------------------- */
  --f-grot: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', 'Helvetica Neue', Helvetica, sans-serif;

  /* --- metrics ---------------------------------------------------------- */
  --wrap: 1240px;
  --pad: clamp(18px, 4vw, 46px);
  --sec: clamp(72px, 9vh, 122px);
  --topline-h: 40px;
  --bar-h: 94px;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body.hb-body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain — the page reads as printed stock, not a screen */
body.hb-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='.035'/%3E%3C/svg%3E");
}

.hb-body ::selection { background: var(--flame); color: var(--ink); }

.hb-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  box-sizing: border-box;
}

.hb-body a { color: inherit; }
.hb-body img { max-width: 100%; display: block; }
.hb-body section[id], .hb-body [id^="quote"] { scroll-margin-top: calc(var(--bar-h) + 18px); }

/* every focusable element keeps a visible, themed focus ring */
a.hb-tel:focus-visible { border-bottom-color: currentColor; }
.hb-body a:focus-visible,
.hb-body button:focus-visible,
.hb-body input:focus-visible,
.hb-body textarea:focus-visible,
.hb-body summary:focus-visible {
  outline: 2px solid var(--flame-deep);
  outline-offset: 3px;
}

.hb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1200;
  background: var(--ink); color: var(--on-ink);
  padding: 10px 18px; font: 700 13px/1 var(--f-grot);
}
.hb-skip:focus { left: 8px; top: 8px; }

/* ==========================================================================
   2. The chequer — the one motif this whole page is built from
   ========================================================================== */

/* 2a. inline glyph: five skewed cells, exactly the arrangement in the logo */
.hb-chq {
  display: inline-grid;
  grid-template-columns: repeat(5, var(--chq, 9px));
  grid-template-rows: repeat(2, var(--chq, 9px));
  vertical-align: middle;
  flex: none;
}
.hb-chq i {
  background: var(--flame);
  transform: skewX(-20deg);
  display: block;
}
.hb-chq i:nth-child(1) { grid-area: 1 / 1; }
.hb-chq i:nth-child(2) { grid-area: 2 / 2; }
.hb-chq i:nth-child(3) { grid-area: 1 / 3; }
.hb-chq i:nth-child(4) { grid-area: 2 / 4; }
.hb-chq i:nth-child(5) { grid-area: 1 / 5; }
.hb-chq--ink i { background: var(--ink); }

/* 2b. section divider: a hairline with the chequer mark set on it, like a
   printer's ornament. A full-bleed tiled chequer was tried first and read as
   hazard tape — the mark has to stay precious to stay the brand's.        */
.hb-rule {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb-rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
  opacity: .13;
}
.hb-rule .hb-chq {
  --chq: 9px;
  position: relative;
  box-shadow: 0 0 0 16px var(--sand);
}

/* 2c. flag tab: a short tiled band that caps a plate or the footer */
@supports ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .hb-plate::before, .hb-form-plate::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%3E%3Cpolygon%20points='4.4,0%2016.4,0%2012,12%200,12'/%3E%3Cpolygon%20points='16.4,12%2028.4,12%2024,24%2012,24'/%3E%3Cpolygon%20points='-7.6,12%204.4,12%200,24%20-12,24'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%3E%3Cpolygon%20points='4.4,0%2016.4,0%2012,12%200,12'/%3E%3Cpolygon%20points='16.4,12%2028.4,12%2024,24%2012,24'/%3E%3Cpolygon%20points='-7.6,12%204.4,12%200,24%20-12,24'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }
}

/* ==========================================================================
   3. Type roles
   ========================================================================== */

.hb-label {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 118;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flame-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.hb-label--onink { color: var(--flame-tint); }

.hb-h2 {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 115;
  font-weight: 800;
  font-size: clamp(22px, 2.9vw, 36px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}

.hb-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; }

.hb-lead {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.74;
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
  margin: 0;
}
.hb-lead + .hb-lead { margin-top: 1.15em; }
.hb-lead strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   4. Topline + sticky bar
   ========================================================================== */

.hb-topline {
  background: var(--ink);
  color: var(--on-ink-soft);
  border-bottom: 1px solid var(--line-ink);
}
.hb-topline .hb-wrap {
  min-height: var(--topline-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 7px;
  padding-bottom: 7px;
}
.hb-topline-hours {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* the client asked for the phone to be highlighted — it is the brightest
   thing in the darkest band, and it repeats in the hero plate below */
.hb-topline-call {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
}
.hb-topline-call span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-ink-soft);
}
.hb-topline-call strong {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--flame-tint);
  transition: color .22s var(--ease);
}

/* The bar stays put at the top of the viewport for the whole page. It used to
   tuck away on scroll-down; the client read that as the header scrolling with
   the page, so the behaviour was removed rather than re-tuned. */
.hb-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.hb-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}
.hb-bar .hb-wrap {
  min-height: var(--bar-h);
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.hb-bar .hb-brand, .hb-bar .hb-burger { align-self: center; }
.hb-brand { flex: none; display: block; line-height: 0; }
.hb-brand img { height: clamp(50px, 5.2vw, 64px); width: auto; }

.hb-nav { margin-left: auto; display: flex; align-items: stretch; gap: 2px; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
/* full-height items: `.hb-drop { top: 100% }` then lands on the bar's own edge */
.hb-nav > li { list-style: none; position: relative; display: flex; align-items: center; }
.hb-nav a.hb-navlink,
.hb-nav button.hb-navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 110;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: color .22s var(--ease);
}
/* one gesture: the chequer underline grows from the left */
.hb-nav .hb-navlink::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 3px;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}
.hb-nav .hb-navlink[aria-current="page"]::after { transform: scaleX(1); }
.hb-nav .hb-navlink .hb-caret {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--ease);
  opacity: .55;
}

/* The open menu shares the bar's bottom edge: its flame rule sits exactly over
   the bar's hairline (hence the -1px), so the two read as ONE line with the
   open item marked in brand orange — never as two stacked rules. */
.hb-drop {
  position: absolute;
  top: 100%;
  margin-top: -1px;
  right: 0;
  min-width: 288px;
  max-width: 340px;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--flame);
  box-shadow: 0 22px 44px -26px rgba(21, 23, 26, .45);
  padding: 6px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.hb-nav li.is-open > .hb-drop { opacity: 1; visibility: visible; transform: none; }
.hb-drop a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: color .2s var(--ease), padding-left .38s var(--ease);
}
.hb-drop li:last-child a { border-bottom: 0; }
.hb-drop a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3px;
  background: var(--flame);
  transform: skewX(-20deg) scale(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
}
.hb-drop::-webkit-scrollbar { width: 9px; }
.hb-drop::-webkit-scrollbar-track { background: var(--sand-2); }
.hb-drop::-webkit-scrollbar-thumb { background: var(--ink); }
.hb-drop::-webkit-scrollbar-thumb:hover { background: var(--flame-deep); }

.hb-cta {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 6px;
  padding: 12px 20px;
  background: var(--flame);
  color: var(--ink);
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  position: relative;
  overflow: hidden;
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)));
  transition: transform .4s var(--ease);
}
.hb-cta span { position: relative; z-index: 1; }
.hb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--flame-bright);
  transform: translateX(-101%);
  transition: transform .45s var(--ease);
}

.hb-burger {
  display: none;
  flex: none;
  width: 46px; height: 42px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.hb-burger i {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.hb-burger i:nth-child(1) { top: 14px; }
.hb-burger i:nth-child(2) { top: 20px; }
.hb-burger i:nth-child(3) { top: 26px; }
.hb-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hb-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hb-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hb-hero {
  position: relative;
  padding-top: clamp(38px, 6vh, 74px);
  padding-bottom: 0;
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(255, 76, 0, .10), transparent 68%),
    var(--sand);
}
.hb-hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(30px, 4.4vw, 64px);
  align-items: start;
  padding-bottom: clamp(30px, 3.4vh, 46px);
}

.hb-hero-open { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

/* --- the H1 ------------------------------------------------------------- */
/* Lines are explicit and nowrap so the mask-rise can never clip a wrap.
   The doc's own capitalisation is kept — no text-transform here, ever. */
.hb-h1 {
  font-size: clamp(25px, 4.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 26px;
  text-transform: none;
  color: var(--ink);
}
.hb-h1 .ln {
  display: block;
  overflow: hidden;
  padding-bottom: .19em;
  margin-bottom: -.19em;
}
.hb-h1 .ln > span {
  display: block;
  white-space: nowrap;
  transform: translateY(108%);
  animation: hb-rise 1.02s var(--ease) forwards;
}
.hb-h1 .ln:nth-child(1) > span { animation-delay: .15s; }
.hb-h1 .ln:nth-child(2) > span { animation-delay: .25s; }
.hb-h1 .ln:nth-child(3) > span { animation-delay: .35s; }
.hb-h1 .ln:nth-child(4) > span { animation-delay: .45s; }
.hb-h1 .ln:nth-child(5) > span { animation-delay: .55s; }
@keyframes hb-rise { to { transform: translateY(0); } }

.hb-h1 .grot {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
}
.hb-h1 .ser {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
}
.hb-h1 em { font-style: inherit; color: var(--flame-deep); }

.hb-hero-copy { max-width: 60ch; }

.hb-hero-media { position: relative; }
.hb-fig {
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 9px;
}
.hb-fig-inner { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.hb-fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
}
.hb-fig figcaption {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 3px 2px;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- the dispatch plate: the highlighted phone.
       This is the one element that breaks a section boundary.  ----------- */
.hb-plate {
  position: relative;
  margin-top: 18px;
  margin-bottom: -62px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 24px 24px 20px;
  z-index: 3;
}
.hb-plate--inline { margin-top: 32px; margin-bottom: 0; }

.hb-plate::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -20px;
  height: 20px;
  background-color: var(--flame);
}
.hb-plate-head {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin: 0 0 6px;
}
.hb-plate-num {
  display: inline-block;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--flame-tint);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease), transform .4s var(--ease);
}
.hb-plate-rows { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-ink); }
.hb-plate-row {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px; line-height: 1.5;
  padding: 5px 0;
  color: var(--on-ink);
}
.hb-plate-row b {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  flex: none;
  width: 74px;
}

/* ==========================================================================
   6. Section 2 — the rest of the intro, paired with the quote form
   ========================================================================== */

.hb-s2 {
  position: relative;
  background: var(--sand-2);
  padding-top: clamp(76px, 10vh, 132px);
  padding-bottom: var(--sec);
  border-top: 1px solid var(--line);
}
.hb-s2-grid {
  display: grid;
  grid-template-columns: 1fr minmax(360px, .84fr);
  gap: clamp(32px, 4.6vw, 70px);
  align-items: center;
}

/* the four hero bullets, each marked with a single chequer cell */
.hb-marks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hb-marks li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 21px 10px 21px 6px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  overflow: hidden;
  transition: padding-left .45s var(--ease);
}
.hb-marks li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 76, 0, .13), rgba(255, 76, 0, 0) 72%);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.hb-marks .hb-chq { --chq: 7px; margin-top: 7px; position: relative; }
.hb-marks span { position: relative; }

.hb-s2-fig { margin-top: 34px; }
.hb-s2-fig .hb-fig-inner { aspect-ratio: 16 / 9; }

.hb-callline {
  margin: 30px 0 0;
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.6;
  color: var(--ink);
}
a.hb-tel {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  color: var(--flame-deep);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  padding-bottom: 1px;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.hb-band a.hb-tel,
.hb-cta-band a.hb-tel { color: var(--flame-tint); }

/* links inside the client's prose (e.g. the brand name linking home). Same
   treatment as the phone links: accent colour + weight carry the affordance,
   the rule appears on hover and focus rather than sitting there permanently. */
/* Inline links inside running copy. EVERY selector here must exclude .hb-btn:
   a button lives in a <p class="hb-acts">, so ".sv-card p a" matched it, won on
   specificity, recoloured its label and replaced its border with a 1px
   transparent bottom — a button with three sides and the wrong colour. */
.hb-lead a:not(.hb-tel):not(.hb-btn),
.hb-marks a:not(.hb-tel):not(.hb-btn),
.sv-card p a:not(.hb-tel):not(.hb-btn),
.hb-faq-a a:not(.hb-tel):not(.hb-btn),
.hb-quote p a:not(.hb-btn) {
  color: var(--flame-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.hb-band .hb-lead a:not(.hb-tel):not(.hb-btn),
.hb-cta-band .hb-lead a:not(.hb-tel):not(.hb-btn) { color: var(--flame-tint); }
.hb-lead a:not(.hb-tel):not(.hb-btn):focus-visible,
.sv-card p a:not(.hb-tel):not(.hb-btn):focus-visible,
.hb-faq-a a:not(.hb-tel):not(.hb-btn):focus-visible { border-bottom-color: currentColor; }

.hb-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--flame);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)));
  transition: transform .4s var(--ease);
}
.hb-btn span { position: relative; z-index: 1; }
.hb-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--flame-bright);
  transform: translateX(-101%);
  transition: transform .45s var(--ease);
}
.hb-btn--ghost { background: transparent; color: var(--ink); }
.hb-btn--ghost::before { background: var(--ink); }

/* ==========================================================================
   7. Quote form  (top_form.php)
   ========================================================================== */

.hb-form-plate {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 30px 60px -44px rgba(21, 23, 26, .55);
}
.hb-form-plate::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -20px;
  height: 20px;
  background-color: var(--flame);
}
.hb-form-head { margin-bottom: 20px; }
.hb-form-title {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin: 9px 0 6px;
}
.hb-form-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.hb-field { position: relative; margin-bottom: 16px; }
.hb-field label {
  display: block;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
  transition: color .2s var(--ease);
}
.hb-field input,
.hb-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  border-radius: 0;
  transition: border-color .24s var(--ease);
}
.hb-field textarea { resize: vertical; min-height: 78px; }
.hb-field input:focus,
.hb-field textarea:focus { outline: none; border-bottom-color: var(--flame); }
.hb-field:focus-within label { color: var(--flame-deep); }
.hb-field input::placeholder,
.hb-field textarea::placeholder { color: #666B73; } /* 5.36:1 on white */

.hb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.hb-captcha { margin-bottom: 16px; }
.hb-captcha-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.hb-captcha-row img {
  display: block; flex: 0 0 auto;
  width: 140px; height: 42px;            /* native size — never upscaled */
  border: 1px solid var(--line); cursor: pointer;
}
.hb-refresh {
  flex: 0 0 auto;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.hb-refresh:hover { background: var(--sand-2); }
.hb-refresh.is-loading { pointer-events: none; }
.hb-refresh.is-loading span { display: inline-block; animation: hb-cap-spin .6s linear infinite; }
@keyframes hb-cap-spin { to { transform: rotate(360deg); } }
.hb-captcha-row input {
  flex: 1 1 auto; min-width: 0;
  height: 42px; box-sizing: border-box;
  border: 1px solid var(--line); border-bottom-width: 2px;
  padding: 0 12px;
}
.hb-captcha-row input:focus { border-color: var(--flame); }

.hb-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.hb-response { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
.hb-response.success { color: #14622F; font-weight: 600; }
.hb-response.error { color: var(--flame-deep); font-weight: 600; }
.hb-form-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.hb-foot {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-top: clamp(54px, 7vh, 86px);
}
/* a 4px flame edge, not a tiled band: full-bleed chequer reads as hazard tape */
.hb-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background-color: var(--flame);
}
.hb-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1.65fr .72fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(38px, 5vh, 58px);
}
.hb-foot h3 {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--flame-tint);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.hb-foot-logo { display: block; margin-bottom: 18px; }
.hb-foot-logo img { height: 74px; width: auto; }
.hb-foot-tag { margin: 0 0 20px; font-size: 14.5px; line-height: 1.7; color: var(--on-ink-soft); max-width: 34ch; }

.hb-nap { list-style: none; margin: 0; padding: 0; }
.hb-nap-row { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.55; }
.hb-nap-row b {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  flex: none; width: 58px; padding-top: 3px;
}
.hb-nap-row a { color: var(--flame-tint); text-decoration: none; font-weight: 700; }

.hb-foot-areas { columns: 2; column-gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.hb-foot-areas li { break-inside: avoid; }
.hb-foot a.hb-foot-link {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-ink);
  text-decoration: none;
  position: relative;
  transition: color .2s var(--ease), padding-left .4s var(--ease);
}
.hb-foot a.hb-foot-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3px;
  background: var(--flame);
  transform: skewX(-20deg) scale(.55);
  transform-origin: left center;
  opacity: .5;
  transition: transform .38s var(--ease), opacity .2s var(--ease);
}
.hb-foot-links { list-style: none; margin: 0; padding: 0; }

.hb-foot-bottom {
  border-top: 1px solid var(--line-ink);
  padding: 20px 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  font-size: 13px;
  color: var(--on-ink-soft);
}
.hb-foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hb-foot-bottom nav a { color: var(--on-ink-soft); text-decoration: none; transition: color .2s var(--ease); }

/* ==========================================================================
   9. Reveal primitive — one class, one observer, fires once
   ========================================================================== */

/* the reveal is an enhancement: with no JS to add .in, the copy is just there */
.no-js .ro { opacity: 1 !important; transform: none !important; }
.ro { opacity: 0; transform: translateY(28px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.ro.in { opacity: 1; transform: none; }
.ro.d1 { transition-delay: .09s; }
.ro.d2 { transition-delay: .18s; }
.ro.d3 { transition-delay: .27s; }
.ro.d4 { transition-delay: .36s; }

/* hero entrance beats (self-triggering, so a JS failure can never strand them) */
.hb-anim { opacity: 0; animation: hb-fade .95s var(--ease) forwards; }
.hb-anim.b0 { animation-delay: .05s; }
.hb-anim.b2 { animation-delay: .55s; }
.hb-anim.b3 { animation-delay: .70s; }
.hb-anim.b4 { animation-delay: .88s; }
@keyframes hb-fade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* the opening chequer deals itself out, cell by cell */
.hb-hero-open .hb-chq i { transform: skewX(-20deg) translateY(150%); animation: hb-cell .6s var(--ease) forwards; }
.hb-hero-open .hb-chq i:nth-child(1) { animation-delay: .06s; }
.hb-hero-open .hb-chq i:nth-child(2) { animation-delay: .13s; }
.hb-hero-open .hb-chq i:nth-child(3) { animation-delay: .20s; }
.hb-hero-open .hb-chq i:nth-child(4) { animation-delay: .27s; }
.hb-hero-open .hb-chq i:nth-child(5) { animation-delay: .34s; }
@keyframes hb-cell { to { transform: skewX(-20deg) translateY(0); } }

/* ==========================================================================
   10. Hover choreography — desktop pointers only
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .hb-topline-call:hover strong { color: var(--flame); }
  .hb-nav .hb-navlink:hover { color: var(--flame-deep); }
  .hb-nav .hb-navlink:hover::after { transform: scaleX(1); }
  .hb-nav li.is-open > .hb-navlink .hb-caret { transform: rotate(-135deg) translate(-2px, -2px); }
  .hb-drop a:hover { color: var(--flame-deep); padding-left: 24px; }
  .hb-drop a:hover::before { transform: skewX(-20deg) scale(1); }
  .hb-cta:hover { --lift: -2px; }
  .hb-cta:hover::before { transform: translateX(0); }
  .hb-btn:hover { --lift: -2px; }
  .hb-btn:hover::before { transform: translateX(0); }
  .hb-btn--ghost:hover { color: var(--sand); }
  .hb-marks li:hover { padding-left: 20px; }
  .hb-marks li:hover::before { transform: translateX(0); }
  .hb-plate-num:hover { color: var(--flame); }
  a.hb-tel:hover { color: var(--ink); border-color: var(--ink); }
  .hb-lead a:not(.hb-tel):not(.hb-btn):hover,
  .hb-marks a:not(.hb-tel):hover,
  .sv-card p a:not(.hb-tel):hover,
  .hb-faq-a a:not(.hb-tel):hover { border-bottom-color: currentColor; }
  .hb-band a.hb-tel:hover,
  .hb-cta-band a.hb-tel:hover { color: var(--sand); border-color: var(--sand); }
  .hb-refresh:hover { background: var(--ink); color: var(--sand); }
  .hb-foot a.hb-foot-link:hover { color: var(--flame-tint); padding-left: 24px; }
  .hb-foot a.hb-foot-link:hover::before { transform: skewX(-20deg) scale(1); opacity: 1; }
  .hb-foot-bottom nav a:hover { color: var(--flame-tint); }
  .hb-nap-row a:hover { color: var(--flame); }
}

/* ==========================================================================
   11. Breakpoints — restack, never hide client copy
   ========================================================================== */

@media (max-width: 1080px) {
  .hb-hero-grid { grid-template-columns: 1fr; }
  .hb-hero-media { display: contents; }
  .hb-hero-media > .hb-fig { order: -1; margin-bottom: 26px; max-width: 640px; }
  .hb-hero-copy { order: 0; }
  .hb-hero-media > .hb-plate { order: 1; margin-top: 30px; max-width: 640px; }
  .hb-hero-media > .hb-plate { margin-bottom: 0; }
  .hb-s2 { padding-top: clamp(46px, 6vh, 68px); }
  .hb-foot-grid { grid-template-columns: 1fr 1fr; }
  .hb-foot-quick { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .hb-burger { display: block; }
  .hb-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    max-height: calc(100vh - var(--bar-h) - 12px);
    /* sits ON the bar's hairline, same rule as the desktop dropdown: one edge */
    margin: -1px 0 0;
    padding: 12px var(--pad) 40px;
    background: var(--sand);
    border-top: 3px solid var(--flame);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    z-index: 899;
    box-shadow: 0 26px 40px -30px rgba(21, 23, 26, .5);
  }
  .hb-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .hb-nav > li { display: block; border-bottom: 1px solid var(--line); }
  .hb-nav a.hb-navlink,
  .hb-nav button.hb-navlink {
    width: 100%;
    justify-content: space-between;
    padding: 15px 2px;
    font-size: 16px;
  }
  .hb-nav .hb-navlink::after { left: 2px; right: auto; width: 34px; bottom: 8px; }
  .hb-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-width: none;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    transition: max-height .4s var(--ease);
  }
  .hb-nav li.is-open > .hb-drop { max-height: 58vh; overflow-y: auto; padding-bottom: 10px; }
  .hb-nav-cta { display: block; margin-top: 22px; border-bottom: 0 !important; }
  .hb-nav-cta .hb-cta { display: flex; justify-content: center; width: 100%; margin-left: 0; padding: 16px 20px; box-sizing: border-box; }
  .hb-s2-grid { grid-template-columns: 1fr; }
  .hb-form-plate { max-width: 620px; }
}

@media (max-width: 720px) {
  :root { --bar-h: 84px; }
  .hb-topline .hb-wrap { justify-content: center; text-align: center; }
  .hb-foot-grid { grid-template-columns: 1fr; }
  .hb-foot-areas { columns: 2; }
  .hb-fig-inner { aspect-ratio: 3 / 2; }
  .hb-plate-row { flex-wrap: wrap; gap: 2px 12px; }
  .hb-plate-row b { width: auto; }
}

@media (max-width: 560px) {
  .hb-chips { grid-template-columns: 1fr; }
  .hb-duo { grid-template-columns: 1fr; }
  .hb-captcha-row { flex-wrap: wrap; }
  .hb-captcha-row input { flex: 1 1 100%; }
  .hb-acts .hb-btn { width: 100%; justify-content: center; }
  .hb-foot-areas { columns: 1; }
  .hb-marks li { grid-template-columns: 34px 1fr; gap: 10px; }
  .hb-marks .hb-chq { --chq: 6px; }
}

/* ==========================================================================
   12. Accessibility gates
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  .hb-h1 .ln > span { transform: none !important; }
  .hb-anim { opacity: 1 !important; transform: none !important; }
  .ro { opacity: 1 !important; transform: none !important; }
  .hb-hero-open .hb-chq i { transform: skewX(-20deg) !important; }
  .hb-cta, .hb-btn { transform: none !important; }
}

/* touch: no gesture may stick after a tap */
@media (hover: none) {
  .hb-marks li { padding-left: 6px; }
  .hb-marks li::before { transform: translateX(-101%); }
  .hb-drop a { padding-left: 12px; }
  .hb-foot a.hb-foot-link { padding-left: 16px; }
}

/* JS off: the nav must still open every menu */
.no-js .hb-drop { position: static; opacity: 1; visibility: visible; transform: none; max-height: none; }
.no-js .hb-nav { position: static; opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   13. Shared by the service AND location templates
   --------------------------------------------------------------------------
   These moved out of service.css: location pages use the same page H1 and the
   same H3 card grid, but never load that sheet, so they inherited nothing.
   ========================================================================== */

/* the page heading on an inner page — a step below the homepage's hero H1 */
.sv-h1 {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  /* the page's largest type, but still a step below the homepage headline */
  font-size: clamp(25px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  margin: 0 0 20px;
  max-width: 18ch;
}

/* --- the H3 sub-blocks of a section, as a card grid ---------------------- */
.sv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(24px, 2.8vw, 46px);
  margin-top: clamp(26px, 3vh, 38px);
}
/* the generator states how many there are, so four never strand one on row 2 */
.sv-cards--n1 { grid-template-columns: minmax(0, 1fr); max-width: 74ch; }
.sv-cards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-cards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-cards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-cards--n5,
.sv-cards--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .sv-cards--n3, .sv-cards--n4,
  .sv-cards--n5, .sv-cards--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sv-cards[class*="--n"] { grid-template-columns: minmax(0, 1fr); }
}
/* A ruled COLUMN, not a filled card. White panels were the one boxed element
   in a page built entirely from rules (.hb-rows, .hb-marks, .hb-steps all read
   this way) and they sat on the sand ground like stickers — the client asked
   twice for them to go. The ink rule carries a brand-orange cap that runs the
   full width on hover. */
.sv-card {
  position: relative;
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
  padding: 22px 0 0;
  overflow: visible;
}
.sv-card::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: 100%; height: 2px;
  background: var(--flame);
  transform: scaleX(.17);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.sv-card-h {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 113;
  font-weight: 800;
  font-size: clamp(16px, 1.32vw, 18.5px);
  line-height: 1.26;
  letter-spacing: -.012em;
  margin: 0 0 11px;
}
.sv-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.sv-card p + p { margin-top: .85em; }
/* a long label must not be clipped or crowded in a narrow column */
.sv-card .hb-acts { margin-top: 22px; }
.sv-card .hb-btn { width: 100%; justify-content: center; text-align: center; }

.sv-card-list, .hb-faq-a .sv-card-list {
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.sv-card-list li { margin-bottom: 4px; }
.sv-card-list li::marker { color: var(--flame); }


@media (hover: hover) and (pointer: fine) {
  .sv-card:hover::before { transform: scaleX(1); }
}

/* both templates stack their hero below this width, so the measure comes off */
@media (max-width: 1000px) {
  .sv-h1 { max-width: none; }
}

@media (max-width: 560px) {
  .sv-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-card::before { transition: none; }
}

/* --- full-bleed photograph band ----------------------------------------- */
/* One picture, edge to edge, used to break a long text page. The caption sits
   in a bar underneath so it never floats over the image at a contrast the
   photograph decides. */
.hb-imgband { position: relative; background: var(--ink); }
.hb-imgband figure { margin: 0; }
.hb-imgband img {
  width: 100%;
  height: clamp(220px, 34vh, 420px);
  object-fit: cover;
  object-position: center 42%;
  display: block;
  border-top: 4px solid var(--flame);
}
.hb-imgband figcaption {
  background: var(--ink);
  color: var(--on-ink-soft);
  padding: 13px 0;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hb-imgband figcaption .hb-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   14. Legal documents (privacy policy, terms)
   --------------------------------------------------------------------------
   A long document, not a landing page. The contents index is generated from
   the document's own H2s, so it can never drift from the text beside it.
   ========================================================================== */

.lg-hero {
  position: relative;
  padding-top: clamp(14px, 2vh, 26px);
  padding-bottom: clamp(30px, 4vh, 52px);
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255, 76, 0, .10), transparent 68%),
    var(--sand);
}
.lg-hero .hb-hero-open { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.lg-hero .sv-h1 { max-width: 24ch; }
.lg-hero .hb-lead { margin-top: 20px; }

/* A hero with no figure beside it is centred. Left-aligned copy with an empty
   right half reads as a missing image, not as a layout.

   The title measure is deliberately WIDE — 30ch, not the 24ch of the asymmetric
   hero. A centred column that stays narrow does not fix the emptiness, it just
   moves it to both sides. The glow moves to the centre line for the same
   reason: an off-centre light source over a symmetric block is half of why the
   left-aligned version read as unbalanced. */
.lg-hero--center {
  text-align: center;
  padding-bottom: clamp(36px, 4.6vh, 60px);
  background:
    radial-gradient(860px 480px at 50% -8%, rgba(255, 76, 0, .12), transparent 70%),
    var(--sand);
}
.lg-hero--center .sv-crumbs { justify-content: center; }
/* stacked centrally, the breadcrumb and the eyebrow are two small
   uppercase lines 6px apart — they need to read as separate things */
.lg-hero--center .hb-hero-open { justify-content: center; margin-top: 16px; }
.lg-hero--center .sv-h1 { max-width: 30ch; margin-left: auto; margin-right: auto; }
.lg-hero--center .hb-lead { max-width: 76ch; margin-left: auto; margin-right: auto; }
.lg-hero--center .hb-acts { justify-content: center; }
.lg-hero--center .hb-chips { max-width: 78ch; margin-left: auto; margin-right: auto; }

/* "Effective date: ..." is a dateline, not the first paragraph of the document.
   Squared off like every other chip in this system, and NOT case-transformed —
   the doc's own capitalisation is the copy. */
.lg-dateline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .55);
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.lg-dateline .hb-chq { flex: none; opacity: .75; }

/* The intro copy, given a full centred measure and a hairline of its own, so
   the masthead above it stays a masthead instead of becoming paragraph one. */
.lg-hero-deck {
  max-width: 76ch;   /* the same measure as the copy inside it, so the hairline
                        spans the text column exactly */
  margin: clamp(24px, 3vh, 34px) auto 0;
  padding-top: clamp(22px, 2.6vh, 30px);
  border-top: 1px solid var(--line);
}
/* these two documents quote the site's own URL as one unbreakable token — at
   phone width it runs straight out of the column unless it is allowed to wrap */
.lg-hero-deck, .lg-body { overflow-wrap: break-word; }

.lg-hero-deck > .hb-lead { margin-top: 0; }
.lg-hero-deck > .hb-lead + .hb-lead { margin-top: 15px; }

/* --- an article hero: copy left, its photograph right -------------------- */
.bl-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(30px, 4.4vw, 62px);
  align-items: center;
  margin-top: clamp(18px, 2.4vh, 30px);
}
.bl-hero-grid > .hb-fig { margin: 0; }

/* --- the quote form living BESIDE an article section --------------------- */
.bl-aside {
  display: grid;
  grid-template-columns: 1fr minmax(320px, .72fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.bl-aside-copy > *:first-child { margin-top: 0; }
.bl-aside-form { position: sticky; top: calc(var(--bar-h) + 28px); }
.bl-aside-form .hb-form-plate { box-shadow: 0 24px 48px -40px rgba(21, 23, 26, .5); }

.lg-doc { padding-top: clamp(44px, 5vh, 72px); }
.lg-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(30px, 4.4vw, 72px);
  align-items: start;
}
.lg-toc {
  position: sticky;
  top: calc(var(--bar-h) + 28px);
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.lg-toc .hb-label { margin: 0 0 14px; }
.lg-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.lg-toc li { counter-increment: toc; border-bottom: 1px solid var(--line-soft); }
.lg-toc a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 9px 4px 9px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .22s var(--ease);
}
.lg-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.lg-part { scroll-margin-top: calc(var(--bar-h) + 28px); }
.lg-part + .lg-part {
  margin-top: clamp(34px, 4.2vh, 56px);
  padding-top: clamp(30px, 3.6vh, 46px);
  border-top: 1px solid var(--line);
}
.lg-h2 {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 16px;
}
.lg-body .hb-lead { max-width: 68ch; }
.lg-body .hb-marks { margin-top: 18px; }
.lg-body .hb-marks li { padding: 14px 10px 14px 6px; font-size: 15px; }
.lg-body .sv-cards { margin-top: 22px; }

@media (hover: hover) and (pointer: fine) {
  .lg-toc a:hover { color: var(--flame-deep); }
}

@media (max-width: 1000px) {
  .lg-grid { grid-template-columns: 1fr; }
  .lg-toc { position: static; }
}

/* --- breadcrumb ---------------------------------------------------------- */
.sv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 22px 0 6px;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 110;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sv-crumbs a { color: var(--ink-soft); text-decoration: none; transition: color .22s var(--ease); }
.sv-crumbs span[aria-hidden] { color: var(--flame); }
.sv-crumbs [aria-current] { color: var(--ink); }
.sv-crumbs a:focus-visible { color: var(--flame-deep); }
@media (hover: hover) and (pointer: fine) {
  .sv-crumbs a:hover { color: var(--flame-deep); }
}
@media (max-width: 560px) {
  .sv-crumbs { font-size: 10.5px; gap: 7px; }
}

/* ==========================================================================
   13. The rest of the homepage — sections 3 to 12
   ========================================================================== */

.hb-sec {
  position: relative;
  padding-top: var(--sec);
  padding-bottom: var(--sec);
  background: var(--sand);
}
.hb-sec--alt { background: var(--sand-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.hb-head { max-width: 62ch; margin-bottom: clamp(34px, 4vh, 54px); }

/* centred variant — for sections whose body is a full-width, symmetric grid */
.hb-sec--center .hb-head { margin-left: auto; margin-right: auto; text-align: center; }
.hb-sec--center .hb-head .hb-label { justify-content: center; }
.hb-sec--center .hb-head .hb-lead { margin-left: auto; margin-right: auto; }
.hb-sec--center > .hb-wrap > .hb-lead { margin-left: auto; margin-right: auto; text-align: center; }
.hb-sec--center .hb-acts { justify-content: center; }
.hb-sec--center .hb-areas { margin-top: 32px; }
.hb-head .hb-label { margin: 0 0 16px; }
.hb-head-intro { margin-top: 20px; }
/* a repeated head down a single-column index page (the HTML sitemap) */
.hb-head--gap { margin-top: clamp(44px, 5.2vh, 72px); }
.hb-areas--wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

/* head on the left, body on the right — an asymmetric two-column section */
.hb-split {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(30px, 4.4vw, 68px);
  align-items: start;
}
/* The COLUMN sticks, not its parts. Making the heading and the button sticky
   separately parks both at the same offset, and the button slides up over the
   heading as soon as the section is tall enough to scroll. */
.hb-split-head { position: sticky; top: calc(var(--bar-h) + 28px); }
.hb-split-head .hb-head { margin-bottom: 0; }
/* the section's own call to action anchors the head column so a short heading
   never sits alone above a tall body */
.hb-split-head .hb-head + .hb-acts { margin-top: 26px; }
.hb-split-body > *:first-child { margin-top: 0; }

/* HEAD ROW — heading left, the doc's own intro right, ruled underneath.
   A full-width grid (cards, steps) deserves a head that uses the width too;
   the old single left-aligned head left the right half of every section
   empty, which is precisely what the client rejected. */
.hb-headrow {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(22px, 3.4vw, 56px);
  /* Both columns start at the top. Bottom-aligning them looked considered when
     the heading was the taller side, but with a short heading beside a long
     intro the heading dropped to the FOOT of the row and read as a mistake. */
  align-items: start;
  /* NO rule here. Everything a head row precedes — ruled step columns, ruled
     card columns, the chip grid — draws its own top rule, and the two sat a
     few pixels apart as a visible double line. The body's rule IS the close. */
  margin-bottom: clamp(30px, 3.6vh, 46px);
}
.hb-headrow .hb-head { margin-bottom: 0; max-width: none; }
.hb-headrow-intro .hb-lead { max-width: 64ch; }
.hb-headrow-intro .hb-lead + .hb-lead { margin-top: 1.1em; }

/* SOLO — one H3 sub-block with no H2 of its own (a section's detail block
   lifted out of the column beside the form). Full-width body text would run to
   an unreadable measure, so it takes the split's proportions. */
.hb-solo {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(30px, 4.4vw, 68px);
  align-items: start;
}
.hb-solo-head {
  position: relative;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}
.hb-solo-head::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: 100%; height: 2px;
  background: var(--flame);
  transform: scaleX(.22);
  transform-origin: left center;
}
.hb-solo-h {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 14px 0 0;
}
.hb-solo-body > *:first-child { margin-top: 0; }

/* PAIR — a list and the detail cards that qualify it, side by side */
.hb-pair {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hb-pair-a > *:first-child, .hb-pair-b > *:first-child { margin-top: 0; }
/* the aside travels with the copy: the two columns are rarely the same length,
   and a short card stranded beside a long column leaves a visible hole */
.hb-pair-b { position: sticky; top: calc(var(--bar-h) + 28px); }
.hb-pair-b .sv-cards { margin-top: 0; grid-template-columns: 1fr; }
.hb-pair .hb-lead { margin-bottom: 22px; }

/* CHIPS — a short inventory (neighbourhoods, coverage) read as a grid.
   One place name per full-width ruled row wasted the whole right side. */
.hb-chips {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.hb-chips li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hb-chips .hb-chq { flex: none; opacity: .6; }
/* copy that follows a list needs air — neither .hb-lead nor .sv-card p
   carries a top margin of its own */
.hb-chips + p, .hb-chips + .hb-lead, .hb-chips + .hb-acts { margin-top: 24px; }
.hb-chips--wide { margin-top: clamp(26px, 3vh, 34px); }

/* Inside a ruled column a second ruled grid reads as noise, so the same list
   becomes wrapping pills. Identical markup either way — only the skin moves. */
.sv-card .hb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 0;
  margin-top: 16px;
}
.sv-card .hb-chips li {
  border: 1px solid var(--line);
  padding: 7px 12px 7px 10px;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

/* --- a centred section: heads, head rows and a lone card all recentre ----- */
.hb-sec--center .hb-headrow {
  grid-template-columns: 1fr;
  /* NOT justify-items:center — that shrink-wraps the head to its narrowest
     child and made a two-word heading wrap ("Final / Thoughts"). The block
     stays full width and the TEXT is centred inside it. */
  text-align: center;
  gap: 16px;
}
.hb-sec--center .hb-headrow .hb-head { max-width: 34ch; margin-inline: auto; }
.hb-sec--center .hb-headrow .hb-label { justify-content: center; }
.hb-sec--center .hb-headrow-intro .hb-lead { max-width: 72ch; margin-inline: auto; }
.hb-sec--center .sv-cards { justify-content: center; }
.hb-sec--center .sv-cards--n1 { max-width: 62ch; margin-inline: auto; }
.hb-sec--center .sv-card { text-align: center; }
.hb-sec--center .sv-card::before { left: 50%; transform: translateX(-50%) scaleX(.3); }
.hb-sec--center .sv-card:hover::before { transform: translateX(-50%) scaleX(1); }
.hb-sec--center .sv-card .hb-acts { justify-content: center; }
.hb-sec--center .sv-card-list { display: inline-block; text-align: left; }

/* A button inside a card keeps the BUTTON's colours. `.sv-card p` (0,1,1)
   outranks `.hb-btn` (0,1,0), so the card's body colour was repainting the
   label: --ink-soft on flame is 2.57:1, an unreadable button that looked
   merely "a bit orange". Same specificity trap as the three-sided border. */
.sv-card .hb-btn,
.sv-card .hb-btn span,
.sv-card .hb-cta,
.sv-card .hb-cta span { color: var(--ink); }

/* a lone promo card carries a call button, so it needs room to breathe */
.sv-card--cta .hb-acts { margin-top: 20px; }
.sv-card--cta .hb-btn { width: auto; }

/* a head opened by the mark alone, where no label would be honest copy */
.hb-label--mark { margin-bottom: 14px; }

/* --- 3. services: ruled rows, the chequer sweeping in on hover ----------- */
.hb-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hb-row { border-bottom: 1px solid var(--line); }
.hb-row-link {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr 46px;
  gap: 8px;
  align-items: start;
  padding: 26px 12px 26px 6px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: padding-left .45s var(--ease);
}
.hb-row-link::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 76, 0, .13), rgba(255, 76, 0, 0) 66%);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.hb-row-n {
  position: relative;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}
.hb-row-main {
  position: relative;
  display: grid;
  grid-template-columns: .92fr 1.4fr;
  gap: 6px clamp(18px, 2.4vw, 40px);
  align-items: start;
}
.hb-row-title {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.24;
  letter-spacing: -.015em;
  margin: 0;
}
.hb-row-text { font-size: 15px; line-height: 1.66; color: var(--ink-soft); grid-row: span 2; }
.hb-row-cta {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--flame-deep);
  align-self: start;
  margin-top: 9px;
}
.hb-row-arrow {
  position: relative;
  justify-self: end;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
  transition: background .32s var(--ease), color .32s var(--ease), transform .45s var(--ease), border-color .32s var(--ease);
}

/* --- 4. why us: the marked list at a larger size ------------------------- */
.hb-marks--lg li { padding: 20px 10px 20px 6px; font-size: clamp(15px, 1.12vw, 17px); }
.hb-marks--lg b {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  color: var(--ink);
}

/* --- 5. reviews: the page's one inverted band ---------------------------- */
.hb-band {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-top: var(--sec);
  padding-bottom: var(--sec);
  overflow: hidden;
}
.hb-band::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(242, 238, 230, .035) 0 1px, transparent 1px 11px);
}
.hb-band::after {
  content: "";
  position: absolute;
  right: -180px; top: -140px;
  width: 620px; height: 620px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 76, 0, .17), transparent 66%);
}
.hb-band .hb-wrap { position: relative; }
.hb-band .hb-h2 { color: var(--on-ink); }

.hb-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}
.hb-quote {
  position: relative;
  margin: 0;
  padding: 34px 26px 24px;
  border: 1px solid var(--line-ink);
  background: rgba(242, 238, 230, .035);
}
.hb-quote::before {
  content: "\201C";
  position: absolute;
  left: 16px; top: -16px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 92px;
  line-height: 1;
  color: var(--flame);
  opacity: .55;
  pointer-events: none;
}
.hb-quote blockquote { margin: 0; }
.hb-quote p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--on-ink); }
.hb-quote figcaption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-ink);
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--on-ink-soft);
}
.hb-quote figcaption a { color: var(--flame-tint); text-decoration: none; transition: color .22s var(--ease); }
/* second card steps down — editorial, and it flattens on mobile */
.hb-quotes .hb-quote:nth-child(2) { margin-top: 30px; }
.hb-quotes .hb-quote:nth-child(3) { margin-top: 60px; }

/* --- 6. copy beside a photograph ---------------------------------------- */
.hb-duo-sec {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 4.4vw, 64px);
  align-items: center;
}
.hb-duo-copy .hb-head { margin-bottom: 22px; }
.hb-duo-copy .hb-lead + .hb-lead { margin-top: 1.1em; }

/* --- 8. the four steps --------------------------------------------------- */
.hb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  counter-reset: none;
}
.hb-step { position: relative; padding-top: 22px; border-top: 2px solid var(--ink); }
.hb-step-n {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  background: var(--flame);
  color: var(--ink);
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.hb-step-title {
  display: block;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.hb-step-text { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); }
.hb-step-text + .hb-step-text { margin-top: .8em; }
/* a step may carry its own list ("Provide: year, make, model / VIN / address") */
.hb-step-list {
  margin: 10px 0 0;
  padding: 0 0 0 17px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}
.hb-step-list li { margin-bottom: 3px; }
.hb-step-list li::marker { color: var(--flame); }
.hb-step-list + .hb-step-text { margin-top: .8em; }
.hb-sec .hb-callline { margin-top: clamp(30px, 4vh, 48px); }

/* --- 9. the service-area index ------------------------------------------ */
.hb-areas {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.hb-areas li { border-bottom: 1px solid var(--line); }
.hb-areas a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 10px 13px 4px;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  transition: color .22s var(--ease), padding-left .4s var(--ease);
}
.hb-areas .hb-chq { opacity: .55; transition: opacity .22s var(--ease); }

/* --- 10. the standards statement + the client's badges ------------------ */
.hb-statement {
  background: var(--sand);
  padding-top: clamp(64px, 8vh, 104px);
  padding-bottom: clamp(64px, 8vh, 104px);
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.hb-statement-mark { margin: 0 0 22px; }
.hb-statement-h {
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.16;
  letter-spacing: -.018em;
  margin: 0 auto;
  max-width: 24ch;
  text-wrap: balance;
}
.hb-badges {
  list-style: none;
  margin: clamp(34px, 4.4vh, 56px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 54px);
}
.hb-badges img {
  height: 52px;
  width: auto;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}

/* --- 11. FAQ ------------------------------------------------------------- */
.hb-faq { border-top: 2px solid var(--ink); }
.hb-faq-item { border-bottom: 1px solid var(--line); }
/* <summary> holds heading content only (the doc marks each question H3),
   so the +/x chip is drawn by CSS rather than an extra span. */
.hb-faq-item summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 18px;
  align-items: center;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
}
.hb-faq-item summary::-webkit-details-marker { display: none; }
.hb-faq-q {
  margin: 0;
  font-family: var(--f-grot);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.4;
  letter-spacing: -.01em;
  transition: color .22s var(--ease);
}
.hb-faq-item summary::after {
  content: "+";
  grid-column: 2;
  justify-self: end;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hb-faq-item[open] summary::after { transform: rotate(45deg); background: var(--flame); border-color: var(--flame); color: var(--ink); }
/* the answer shares the summary's column template so the text lines up */
.hb-faq-a {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 18px;
  padding: 0 4px 22px;
  animation: hb-faq-in .5s var(--ease);
}
.hb-faq-a p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--ink-soft); }
@keyframes hb-faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- 12. closing band ---------------------------------------------------- */
.hb-cta-band {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-top: clamp(64px, 8vh, 108px);
  padding-bottom: clamp(64px, 8vh, 108px);
  overflow: hidden;
}
.hb-cta-band::before {
  content: "";
  position: absolute;
  left: -160px; bottom: -220px;
  width: 640px; height: 640px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 76, 0, .16), transparent 66%);
}
.hb-cta-band .hb-wrap { position: relative; }
.hb-cta-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(30px, 4.4vw, 64px);
  align-items: start;
}
.hb-cta-h { color: var(--on-ink); margin: 14px 0 20px; max-width: 18ch; }
.hb-lead--onink { color: var(--on-ink-soft); max-width: 52ch; }
.hb-cta-panel {
  border: 1px solid var(--line-ink);
  border-top: 4px solid var(--flame);
  padding: 26px 24px 24px;
  background: rgba(242, 238, 230, .04);
}
.hb-cta-panel .hb-plate-num { font-size: clamp(21px, 2vw, 27px); }
.hb-cta-panel .hb-acts { margin-top: 22px; }
.hb-cta-panel .hb-btn { width: 100%; justify-content: center; }

/* --- hover choreography for everything above ---------------------------- */
@media (hover: hover) and (pointer: fine) {
  .hb-row-link:hover { padding-left: 22px; }
  .hb-row-link:hover::before { transform: translateX(0); }
  .hb-row-link:hover .hb-row-title { color: var(--flame-deep); }
  .hb-row-link:hover .hb-row-arrow {
    background: var(--ink); color: var(--sand);
    border-color: var(--ink); transform: rotate(-45deg);
  }
  .hb-quote figcaption a:hover { color: var(--flame); }
  .hb-areas a:hover { color: var(--flame-deep); padding-left: 16px; }
  .hb-areas a:hover .hb-chq { opacity: 1; }
  .hb-badges img:hover { filter: none; opacity: 1; }
  .hb-faq-item summary:hover .hb-faq-q { color: var(--flame-deep); }
}

/* --- breakpoints --------------------------------------------------------- */
@media (max-width: 1080px) {
  .hb-split { grid-template-columns: 1fr; }
  .hb-split-head { position: static; }
  .hb-split-head .hb-head + .hb-acts { margin-bottom: 30px; }
  .hb-headrow { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .hb-headrow .hb-head { max-width: none; }
  .hb-pair { grid-template-columns: 1fr; }
  .hb-pair-b { position: static; }
  .hb-solo { grid-template-columns: 1fr; gap: 22px; }
  .bl-hero-grid { grid-template-columns: 1fr; }
  .bl-hero-grid > .hb-fig { order: -1; max-width: 640px; }
  .bl-aside { grid-template-columns: 1fr; }
  .bl-aside-form { position: static; max-width: 620px; }
  .hb-pair-b .sv-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .hb-duo-sec { grid-template-columns: 1fr; }
  .hb-steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .hb-quotes { grid-template-columns: 1fr 1fr; }
  .hb-quotes .hb-quote:nth-child(2) { margin-top: 0; }
  .hb-quotes .hb-quote:nth-child(3) { margin-top: 0; }
  .hb-cta-grid { grid-template-columns: 1fr; }
  .hb-cta-panel { max-width: 460px; }
}

@media (max-width: 860px) {
  /* the description restacks under the title — it is never dropped */
  .hb-row-main { grid-template-columns: 1fr; gap: 8px; }
  .hb-row-text { grid-row: auto; }
  .hb-row-link { grid-template-columns: 46px 1fr 40px; padding-top: 22px; padding-bottom: 22px; }
  .hb-quotes { grid-template-columns: 1fr; }
  .hb-badges img { height: 42px; }
}

@media (max-width: 560px) {
  .hb-steps { grid-template-columns: 1fr; }
  .hb-areas { grid-template-columns: 1fr; }
  .hb-row-link { grid-template-columns: 34px 1fr; }
  .hb-row-arrow { display: none; }
  .hb-marks--lg li { padding-left: 4px; }
}

@media (hover: none) {
  .hb-row-link { padding-left: 6px; }
  .hb-row-link::before { transform: translateX(-101%); }
  .hb-areas a { padding-left: 4px; }
}