/* Grizzly Beam — COMPONENTS shared between pages: .wpa form · .faq · .tst */

/* audit hook */
.wpa { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 7rem; align-items: center; }
.wpa__eyebrow { color: var(--tx-g); }
.wpa__title { font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2); margin-top: 1.5rem; max-width: 32rem; }   /* brand: H2 */
.wpa__body { color: var(--tx-g); margin-top: 1.6rem; max-width: 36rem; }
/* "What you get:" sits under the body copy on the left, so the right column is the form alone. */
.wpa__get { margin-top: 3.4rem; max-width: 36rem; }
.wpa__get-label { color: var(--tx-g); }
.wpa__list { list-style: none; border-top: 1px solid rgba(22, 24, 28, 0.2); margin-top: 1.2rem; }
.wpa__list li {
  display: flex; gap: 1.6rem; align-items: baseline; padding-block: 1.1rem;
  border-bottom: 1px solid rgba(22, 24, 28, 0.2);
  font-family: var(--f-body); font-size: 1.3rem;
}
.wpa__num { color: var(--tx-g); }
.wpa__form { display: flex; flex-direction: column; align-items: flex-start; margin-top: 3.2rem; }
.wpa__label { color: var(--tx-g); }
.wpa__label:not(:first-child) { margin-top: 1.6rem; }
.wpa__input {
  width: 100%; max-width: 28rem;
  margin-top: 0.6rem; padding: 0.95rem 1.15rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(22, 24, 28, 0.28); border-radius: var(--r-6);
  font-family: var(--f-body); font-size: 1.25rem; color: var(--ink);
}
.wpa__input::placeholder { color: rgba(92, 86, 78, 0.55); }
/* iOS Safari zooms the visual viewport whenever a focused text-entry field computes to
   less than 16px, and does not zoom back out. font-size: 1.25rem against a root of
   clamp(11px, 3.125vw, 13.4px) measured 13.75px at 320, 14.65px at 375 and 15px at 768 —
   under the threshold on every phone up to about 410px and on tablets. (At 414 and up the
   root has grown enough to clear it on its own, which is why the bug only shows on
   smaller handsets.)

   Same rule and same reasoning as .bkg__in in booking.css, fixed in 45abd47; this is the
   rest of the site's forms, found by the responsive audit on 2026-09-20. The OR condition
   catches phones and small tablets by width and any touch screen by pointer; max() so the
   rule can never shrink the field if the root scale is ever raised. */
@media (pointer: coarse), (max-width: 860px) {
  .wpa__input { font-size: max(16px, 1.25rem); }
}
/* Was: outline: none + a border color change, i.e. a color-only signal
   (fails WCAG 1.4.1). Now the same two-tone ring as everywhere else, but in
   reverse order because the input always sits on a light background; the
   border change stays as an additional signal. */
.wpa__input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--paper);
  border-color: var(--amber-deep);
}
.wpa__input.is-invalid { border-color: var(--danger); }
.wpa__cta { margin-top: 2.4rem; }
.wpa__micro { margin-top: 1.5rem; color: var(--tx-g); max-width: 26rem; }

/* Form card: the form gets a surface of its own so it reads as the thing to act on,
   instead of floating on the section gradient. Paper, not white (brand book §04);
   radius and elevation from §06. Used by the home audit form and the /contact/ form. */
.wpa-card {
  margin-top: 0; align-items: stretch;
  background: var(--paper);
  border: 1px solid rgba(22, 24, 28, 0.1);
  border-radius: var(--r-14);
  box-shadow: var(--el-lg);
  padding: 3.2rem;
}
/* background-color, not background: .cnt-select draws its arrow with background-image.
   line-height is explicit so an input and a select in the same row come out equally tall
   (with "normal" the select measured 1.4px shorter at 768). */
.wpa-card .wpa__input { max-width: none; background-color: var(--white); line-height: 1.4; }
.wpa-card .wpa__cta { justify-content: center; width: 100%; }
.wpa-card .wpa__micro, .wpa-card .fm-err, .wpa-card .fm-status { max-width: none; }

/* FAQ — dark section (light→dark fade on entry) */
.faqs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 7rem; align-items: center; }
.faqs__eyebrow { color: rgba(236, 232, 225, 0.65); }
.faqs__main .wpa__title { margin-top: 1.5rem; }
.faq__list { border-top: 1px solid rgba(236, 232, 225, 0.16); margin-top: 3.4rem; }
.faq__item { border-bottom: 1px solid rgba(236, 232, 225, 0.16); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding-block: 1.5rem;
  font-family: var(--f-body); font-size: 1.45rem; font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ico { display: grid; place-items: center; opacity: 0.7; transition: transform 0.25s ease; }
.faq__ico svg { width: 1.25rem; height: 1.25rem; }   /* §08: 16px inline */
.faq__item[open] .faq__ico { transform: rotate(180deg); }
.faq__item p { color: rgba(236, 232, 225, 0.65); padding-bottom: 1.7rem; max-width: 42rem; }
.faq__item p a { text-decoration: underline; text-underline-offset: 0.2em; }
.faqs__side { display: flex; flex-direction: column; align-items: flex-start; }
.faqs__help { color: rgba(236, 232, 225, 0.75); max-width: 22rem; }
.faqs__cta { margin-top: 2.4rem; }
/* 0.6, not the 0.45 it had as an uppercase eyebrow: at 14px sentence case the lighter tone read as disabled. */
.faqs__risk { margin-top: 1.6rem; color: rgba(236, 232, 225, 0.6); max-width: 22rem; }

.tst { padding-block: 8rem 12rem; display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; position: relative; }
.tst__list { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.tst__item { font-size: 1.196rem; letter-spacing: 0.01em; font-weight: var(--w-h3); opacity: 0.4; transition: opacity 0.25s ease; text-align: left; }   /* brand: Buttons (nav control) */
.tst__item.is-active, .tst__item:hover { opacity: 1; }
.tst__arr { margin-left: 0.6rem; display: none; }
.tst__item.is-active .tst__arr { display: inline; }
.tst__quote { font-size: 2.53rem; line-height: 1.35; letter-spacing: -0.005em; font-weight: var(--w-h2); max-width: 42rem; }   /* brand: H2 */
.tst__who { display: flex; align-items: center; gap: 1.6rem; margin-top: 4rem; }
.tst__avatar { width: 5.6rem; height: 5.6rem; background: var(--stone3); border-radius: var(--r-6); }
.tst__id { display: flex; flex-direction: column; gap: 0.2rem; }
.tst__name { font-size: 1.5rem; }
.tst__role { color: var(--tx-g); }
.tst__cta { grid-column: 1 / -1; justify-self: center; margin-block: 6rem 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .tst { grid-template-columns: 1fr; }
  .tst__cta { margin-block: 3rem 0; }
}
/* Collapses at 1023, not at 767: with the clamped root at 768 the second
   .faqs__grid column comes out at 224px, about 29 characters per line. */
@media (max-width: 1023px) {
  .wpa, .faqs__grid { grid-template-columns: 1fr; gap: 3rem; }
  .wpa { gap: 4rem; }
}
@media (max-width: 767px) {
  .wpa-card { padding: 2.2rem 1.8rem; }
}

/* ============================================================
   SERVICE HERO + CLOSER — shared between /services/ and all
   service detail pages (promoted from pages/services.css,
   Phase 2, declarations unchanged)
   ============================================================ */

.svc-hero { position: relative; background: var(--navy); min-height: 100vh; overflow: clip; }
.svc-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.svc-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 52%, rgba(210, 149, 46, 0.09), transparent 70%);
}
.svc-plus {
  position: absolute; left: var(--x); top: var(--y);
  font-size: 1.4rem; color: rgba(236, 232, 225, 0.35);
  animation: svcDrift var(--dur) ease-in-out infinite alternate;
}
@keyframes svcDrift {
  from { transform: translate(0, 0); opacity: 0.15; }
  50%  { opacity: 0.5; }
  to   { transform: translate(var(--dx), var(--dy)); opacity: 0.2; }
}
.svc-hero__eyebrow { color: var(--tx-l); }
.svc-closer {
  background: linear-gradient(0deg, var(--stone3) 0%, var(--paper) 100%);
  color: var(--ink); padding-block: 10rem; text-align: center;
}
.svc-closer__title { font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2); }
.svc-closer__body { color: var(--tx-g); max-width: 36rem; margin: 1.6rem auto 0; }
.svc-closer__ctas { display: flex; gap: 2.8rem; justify-content: center; align-items: center; margin-top: 3.2rem; }

@media (max-width: 767px) {
  .svc-closer__ctas { flex-direction: column; gap: 2rem; }
  .svc-closer__title { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-plus { animation: none; opacity: 0.3; }
}

/* ============================================================
   Forms — validation messages and submission status
   Logic lives in: /assets/js/forms.js (all four forms on the site).

   Color is ONLY an additional signal, never the only one (WCAG 1.4.1): the
   text is always --ink because --danger measured at the bottom end of the
   gradient of the sections that hold forms (--stone3 #D8D1C7) gives 3.40 : 1
   and fails AA for text. The border carries the color, and there 3.40 passes
   the non-text threshold of 3.0 (WCAG 1.4.11).
   --ink measurements: 17.04 on --paper, 13.81 on --stone2, 11.73 on --stone3.
   ============================================================ */
.fm-err {
  font-family: var(--f-body); font-size: 1.1rem; line-height: 1.35;
  color: var(--ink); text-transform: none; letter-spacing: 0;
  width: 100%; max-width: 28rem;
  margin-top: 0.55rem; padding-left: 0.85rem;
  border-left: 2px solid var(--danger);
}
.fm-status {
  font-family: var(--f-body); font-size: 1.2rem; line-height: 1.4;
  color: var(--ink); text-transform: none; letter-spacing: 0;
  width: 100%; max-width: 28rem;
  margin-top: 1.8rem; padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-6);
  border-left: 3px solid var(--tx-g);
  /* The /contact/ form message inserts the address the user typed; a long
     address without spaces would otherwise overflow 28rem. */
  overflow-wrap: anywhere;
}
.fm-status--ok  { border-left-color: var(--success); }
.fm-status--err { border-left-color: var(--danger); }
/* The status receives focus after submission (tabindex="-1"), so it must have
   a ring like everything else: the same two-tone ink+paper pattern. */
.fm-status:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--paper);
}

/* Honeypot: out of the flow, out of the tab order, out of the a11y tree. No
   negative offsets, so no horizontal scroll opens up. */
.fm-botcheck {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Sent: the fields stay in place but are locked. */
.is-sent .wpa__input, .is-sent .lp-form__input, .is-sent .cnt-select, .is-sent .cnt-textarea { opacity: 0.55; }
.is-sent button[disabled] { opacity: 0.45; cursor: default; }


/* ============================================================
   SERVICE PAGE CONTENT BLOCKS
   Added 2026-09-21 with the v2 content rebuild of the five
   /services/ detail pages. The v2 copy brought section types the
   site did not have yet (card grids, checklists, numbered
   timelines, an accordion on a light background). They live here,
   not in five page files, because four of the five pages use them.

   Nothing here is new design language: .svc-card is .prc-card's
   amber left bar, .svc-step is .apr-step, .svc-fq is the /pricing/
   accordion. Only the color/scale tokens from core.css are used.
   ============================================================ */

/* ---------- Section shell ---------- */
.svc-sec { padding-block: 9rem; }
.svc-sec--tight { padding-block: 6.5rem; }
.svc-sec--paper { background: var(--paper); color: var(--ink); }
.svc-sec--white { background: var(--white); color: var(--ink); }
.svc-sec--stone { background: var(--stone2); color: var(--ink); }
/* Hands off to a dark band or to --stone below it without a seam:
   at 0deg the gradient ends on stone2 at its own bottom edge. */
.svc-sec--grad  { background: linear-gradient(0deg, var(--stone2) 0%, var(--paper) 100%); color: var(--ink); }
.svc-sec--ink   { background: var(--ink); color: var(--tx-l); }
.svc-sec--navy  { background: var(--navy); color: var(--tx-l); }
/* Beam field host: the section becomes the positioning context and clips the
   beams, exactly like .hs on the home page. Its children ride on z-index 1. */
.svc-sec--beam { position: relative; overflow: clip; }
.svc-sec--beam > .ctr { position: relative; z-index: 1; }

.svc-sec__head { max-width: 62rem; }
.svc-sec__head--mid { margin-inline: auto; text-align: center; }
.svc-sec__eyebrow { color: var(--tx-g); }
.svc-sec--ink .svc-sec__eyebrow, .svc-sec--navy .svc-sec__eyebrow { color: rgba(236, 232, 225, 0.65); }
.svc-sec__title {
  font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2);   /* brand: H2 */
  max-width: 44rem;
}
.svc-sec__eyebrow + .svc-sec__title { margin-top: 1.5rem; }
.svc-sec__head--mid .svc-sec__title { max-width: 58rem; margin-inline: auto; }
/* An eyebrow with no heading under it: whatever follows the head would otherwise
   sit on the eyebrow's own baseline. */
.svc-sec__head > .svc-sec__eyebrow:only-child { margin-bottom: 0.8rem; }
.svc-sec--ink .svc-sec__title, .svc-sec--navy .svc-sec__title { color: var(--tx-l); }
/* Display scale, for the one dark statement section a page is allowed. */
.svc-sec__title--xl { font-size: 6.25rem; line-height: 0.95; letter-spacing: -0.01em; font-weight: var(--w-display); max-width: 48rem; }

.svc-sec__body {
  font-family: var(--f-body);
  font-size: 1.55rem; line-height: 1.55; font-weight: 400;
  color: var(--tx-g); max-width: 44rem;
}
.svc-sec--ink .svc-sec__body, .svc-sec--navy .svc-sec__body { color: rgba(236, 232, 225, 0.72); }
.svc-sec__title + .svc-sec__body, .svc-sec__head + .svc-sec__body { margin-top: 2.2rem; }
.svc-sec__body + .svc-sec__body { margin-top: 1.6rem; }
/* A lead-in paragraph that stands where a heading would: it opens the section, so it
   carries the head's own top margin instead of the body's. */
.svc-sec__body--lead { margin-bottom: 0.6rem; max-width: 48rem; }
.svc-sec__body a { text-decoration: underline; text-underline-offset: 0.2em; }
/* A smaller run of body copy — footnotes under a grid, the "priced separately" note. */
.svc-sec__note {
  font-family: var(--f-body);
  font-size: 1.266rem; line-height: 1.55;
  color: var(--tx-g); max-width: 48rem; margin-top: 2.8rem;
}
.svc-sec--ink .svc-sec__note, .svc-sec--navy .svc-sec__note { color: rgba(236, 232, 225, 0.6); }
.svc-sec__note a { text-decoration: underline; text-underline-offset: 0.2em; }
.svc-sec__cta { margin-top: 3rem; }
.svc-sec__ctas { display: flex; align-items: center; gap: 2.8rem; flex-wrap: wrap; margin-top: 3rem; }

/* ---------- Copy on one side, a diagram on the other ----------
   For sections that argue something a drawing can show. The figure takes the half
   that was empty; below 1024 it drops under the copy, because at that width two
   half-columns give neither the text a line length nor the drawing a size.

   The head's own max-widths (44rem) are wider than a half column, so they stop
   applying on their own — no override needed. */
.svc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
.svc-split__fig { margin: 0; min-width: 0; }

/* ---------- Centered variants ----------
   A section whose column sits in the middle of the page rather than against the
   left edge. The head already has --mid; these are the blocks that go under it.
   Note what is NOT centered: the items inside a checklist or a rail keep their own
   left edge, because a tick or a numbered spine has to line up vertically or it
   stops being a list. Only the block moves. */
.svc-sec__body--mid { margin-inline: auto; text-align: center; }
.svc-check--mid, .svc-rail--mid, .svc-steps--mid { margin-inline: auto; }
/* The rail's own max-width is 62rem, but its longest line is a 42rem description
   behind a 5.2rem gutter — about 48rem of actual ink. Centered at 62 the block is
   correct and the drawing still reads left of center, because a third of the block
   is empty. Centered at 48 the ink is centered, which is what the eye measures. */
/* Doubled class on purpose: .svc-rail sets 62rem and is declared further down the
   file, so at equal specificity it would win. */
.svc-rail.svc-rail--mid { max-width: 48rem; }

/* ---------- Card grid (amber left bar — the .prc-card / .dab-card idiom) ---------- */
.svc-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.6rem 3.2rem; margin-top: 4.4rem;
  align-items: stretch; grid-auto-rows: 1fr;   /* every bar runs to the tallest card */
}
.svc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 2.6rem; }
.svc-card { position: relative; padding-top: 1.6rem; padding-left: 1.4rem; will-change: transform, opacity; }
.svc-card::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; width: 3px;
  height: calc(100% - 1.6rem);
  background: var(--accent);
}
.svc-card__title { font-size: 2.1rem; line-height: 1.25; letter-spacing: 0; font-weight: var(--w-h3); }   /* brand: H3 */
.svc-cards--4 .svc-card__title { font-size: 1.75rem; line-height: 1.2; }
.svc-card__desc { color: var(--tx-g); margin-top: 1rem; max-width: 30rem; }
.svc-sec--ink .svc-card__title, .svc-sec--navy .svc-card__title { color: var(--tx-l); }
.svc-sec--ink .svc-card__desc, .svc-sec--navy .svc-card__desc { color: rgba(236, 232, 225, 0.68); }

/* ---------- Checklist ----------
   Brand book §08: Lucide, stroke only, one token color. The tick is the one
   amber mark in the block; it never doubles as a bullet anywhere else. */
.svc-check { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 3.2rem; margin-top: 3.2rem; max-width: 62rem; }
.svc-check--1 { grid-template-columns: 1fr; max-width: 48rem; }
.svc-check__item {
  display: flex; align-items: flex-start; gap: 1.1rem;
  font-family: var(--f-body); font-size: 1.35rem; line-height: 1.45;
  color: var(--ink);
}
.svc-check__item svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; color: var(--amber-deep); }   /* §08: 16px inline */
.svc-sec--ink .svc-check__item, .svc-sec--navy .svc-check__item { color: var(--tx-l); }
.svc-sec--ink .svc-check__item svg, .svc-sec--navy .svc-check__item svg { color: var(--accent); }

/* ---------- Bullet list with a lead-in (the "Built around the sale" pattern) ---------- */
.svc-bullets { list-style: none; display: grid; gap: 1.6rem; margin-top: 3rem; max-width: 52rem; }
.svc-bullets li {
  position: relative; padding-left: 1.7rem;
  font-family: var(--f-body); font-size: 1.35rem; line-height: 1.55;
  color: var(--tx-g);
}
.svc-bullets li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--accent); }
.svc-bullets li b { color: var(--ink); font-weight: var(--w-body-strong); }
.svc-bullets li a { text-decoration: underline; text-underline-offset: 0.2em; }
.svc-sec--ink .svc-bullets li, .svc-sec--navy .svc-bullets li { color: rgba(236, 232, 225, 0.72); }
.svc-sec--ink .svc-bullets li b, .svc-sec--navy .svc-bullets li b { color: var(--tx-l); }

/* ---------- Numbered timeline (ported from .apr-step on /approach/) ---------- */
.svc-steps { list-style: none; max-width: 62rem; margin-top: 4.4rem; }
.svc-step {
  position: relative;
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 2.4rem;
  padding-block: 3rem;
  border-top: 1px solid rgba(22, 24, 28, 0.18);
  will-change: transform, opacity;
}
.svc-step::before {
  content: ""; position: absolute; left: 0; top: 0; width: 5rem; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;   /* scaleX, not width: runs on the compositor */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-step.is-lit::before { transform: scaleX(1); }
.svc-step__num { font-family: var(--f-mono); font-size: 1.196rem; letter-spacing: 0.18em; color: var(--tx-g); padding-top: 0.9rem; }
.svc-step__name { font-size: 2.53rem; line-height: 1.1; letter-spacing: -0.005em; font-weight: var(--w-h2); }   /* brand: H2 scale */
.svc-step__desc { color: var(--tx-g); margin-top: 1.2rem; max-width: 42rem; }
.svc-sec--ink .svc-step, .svc-sec--navy .svc-step { border-top-color: rgba(236, 232, 225, 0.16); }
.svc-sec--ink .svc-step__num, .svc-sec--navy .svc-step__num { color: rgba(236, 232, 225, 0.6); }
.svc-sec--ink .svc-step__desc, .svc-sec--navy .svc-step__desc { color: rgba(236, 232, 225, 0.68); }

/* ---------- FAQ accordion on a light background ----------
   Same mechanism as /pricing/: .is-open drives the CSS, [open] is removed only
   once the transition has finished. Logic in /assets/js/faq-accordion.js. */
.svc-faq { margin-top: 3.4rem; max-width: 66rem; }
.svc-fq { position: relative; border-bottom: 1px solid rgba(22, 24, 28, 0.16); }
.svc-fq:first-child { border-top: 1px solid rgba(22, 24, 28, 0.16); }
.svc-fq::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-fq.is-open::before { transform: scaleY(1); }
.svc-fq__q {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 1.6rem;
  padding: 2rem 0 2rem 1.6rem;
  cursor: pointer; list-style: none;
}
.svc-fq__q::-webkit-details-marker { display: none; }
.svc-fq__txt { font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: var(--w-h3); color: var(--ink); }
.svc-fq__ico { display: grid; place-items: center; color: var(--tx-g); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.svc-fq__ico svg { width: 1.25rem; height: 1.25rem; }   /* §08: 16px inline */
.svc-fq.is-open .svc-fq__ico { transform: rotate(180deg); }
.svc-fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.svc-fq.is-open .svc-fq__a { grid-template-rows: 1fr; }
.svc-fq__a > div { overflow: hidden; }
.svc-fq__a p { color: var(--tx-g); max-width: 46rem; padding: 0 3.4rem 2.2rem 1.6rem; }
.svc-fq__a p a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Screenshot placeholder ----------
   Visible on purpose: it marks where a real image goes. Dashed stone3 and mono
   caption, so it can never be mistaken for finished artwork. */
.svc-shot {
  border: 1px dashed var(--stone3); border-radius: var(--r-10);
  background: rgba(232, 226, 218, 0.45);
  padding: 5rem 2rem; text-align: center;
  font-family: var(--f-mono); font-size: 1.05rem; line-height: 1.5; letter-spacing: 0.04em;
  color: var(--amber-deep);
  margin-top: 3rem;
}

/* Screen-reader-only. Also declared in pages/approach.css, where it was first
   needed; kept identical so the two can never drift. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .svc-sec { padding-block: 7rem; }
  .svc-sec--tight { padding-block: 5.5rem; }
  .svc-split { grid-template-columns: 1fr; gap: 3.4rem; }
  .svc-split__fig { max-width: 44rem; }
  .svc-cards, .svc-cards--2, .svc-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4rem 2.6rem; margin-top: 3.6rem; }
  .svc-check { gap: 1.4rem 2.4rem; }
  .svc-step { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.6rem; }
  .svc-steps { margin-top: 3.6rem; }
}
@media (max-width: 767px) {
  .svc-sec { padding-block: 6rem; }
  .svc-sec--tight { padding-block: 4.5rem; }
  .svc-sec__title { font-size: 2.6rem; }
  .svc-sec__title--xl { font-size: 3.4rem; }
  .svc-sec__body { font-size: 1.35rem; }
  .svc-cards, .svc-cards--2, .svc-cards--4 { grid-template-columns: 1fr; gap: 3rem; }
  .svc-card__desc { max-width: none; }
  .svc-check, .svc-check--1 { grid-template-columns: 1fr; }
  .svc-sec__ctas { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .svc-step { grid-template-columns: 1fr; gap: 0.8rem; padding-block: 2.2rem; }
  .svc-step__num { padding-top: 0; }
  .svc-step__name { font-size: 2rem; }
  .svc-fq__q { gap: 1rem; padding: 1.7rem 0 1.7rem 1.3rem; }
  .svc-fq__txt { font-size: 1.5rem; }
  .svc-fq__a p { padding: 0 1rem 1.9rem 1.3rem; }
  .svc-shot { padding: 3.4rem 1.4rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-step { opacity: 1 !important; transform: none !important; }
  .svc-step::before { transition: none; transform: scaleX(1); }
  .svc-fq__a, .svc-fq::before, .svc-fq__ico { transition: none; }
}


/* ============================================================
   SERVICE PAGE BLOCKS — round two, 2026-09-21
   Vertical process rail · FAQ on a dark section · seams between
   consecutive dark sections.
   ============================================================ */

/* ---------- Vertical process rail ----------
   Stevan's pick over the hairline list (.svc-step) for /brand-and-messaging/
   "How it works" and /conversion/ "Our process": a spine down the left with an
   amber node per step. Same language as .seo-proc's vertical rail, which is what
   that page already collapses to below 1024 — so nothing new is being invented,
   the shape is just used at every width here.

   The line is drawn per item rather than once down the whole list: an item's own
   height then always covers the gap to the next node, however long its copy runs. */
.svc-rail { list-style: none; margin-top: 4.4rem; max-width: 62rem; }
.svc-rail__item {
  position: relative;
  padding-left: 5.2rem; padding-bottom: 3.6rem;
  will-change: transform, opacity;
}
.svc-rail__item:last-child { padding-bottom: 0; }
.svc-rail__item::before {
  content: ""; position: absolute; left: 5px; top: 0.4rem; bottom: 0; width: 1px;
  background: rgba(22, 24, 28, 0.2);
}
.svc-rail__item:last-child::before { display: none; }
.svc-rail__node {
  position: absolute; left: 0; top: 0.4rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-rail__item.is-lit .svc-rail__node { transform: scale(1); }
.svc-rail__num { font-family: var(--f-mono); font-size: 1.196rem; letter-spacing: 0.18em; color: var(--tx-g); display: block; }
.svc-rail__name {
  font-size: 2.1rem; line-height: 1.2; letter-spacing: 0; font-weight: var(--w-h3);   /* brand: H3 */
  margin-top: 0.8rem;
}
.svc-rail__desc { color: var(--tx-g); margin-top: 0.9rem; max-width: 42rem; }
.svc-sec--ink .svc-rail__item::before, .svc-sec--navy .svc-rail__item::before { background: rgba(236, 232, 225, 0.2); }
.svc-sec--ink .svc-rail__num, .svc-sec--navy .svc-rail__num { color: rgba(236, 232, 225, 0.6); }
.svc-sec--ink .svc-rail__desc, .svc-sec--navy .svc-rail__desc { color: rgba(236, 232, 225, 0.68); }

/* ---------- FAQ on a dark section ----------
   Same component, inverted. The amber rule on the open item stays amber: it reads
   at 6.84 on ink, and it is a second signal anyway — the chevron turns and
   aria-expanded flips with it. */
.svc-sec--ink .svc-fq, .svc-sec--navy .svc-fq { border-bottom-color: rgba(236, 232, 225, 0.16); }
.svc-sec--ink .svc-fq:first-child, .svc-sec--navy .svc-fq:first-child { border-top-color: rgba(236, 232, 225, 0.16); }
.svc-sec--ink .svc-fq__txt, .svc-sec--navy .svc-fq__txt { color: var(--tx-l); }
.svc-sec--ink .svc-fq__ico, .svc-sec--navy .svc-fq__ico { color: rgba(236, 232, 225, 0.6); }
.svc-sec--ink .svc-fq__a p, .svc-sec--navy .svc-fq__a p { color: rgba(236, 232, 225, 0.68); }

/* ---------- Seam between two dark sections in a row ----------
   /services/design-and-build/ runs several dark sections back to back. Without a
   seam they read as one band with a suspiciously large gap in the middle; with a
   full-bleed hairline they read as chapters of one dark chapter, which is what
   they are. Only between two of the same tone — ink against navy is already a
   visible boundary on its own. */
.svc-sec--ink + .svc-sec--ink, .svc-sec--navy + .svc-sec--navy { border-top: 1px solid rgba(236, 232, 225, 0.12); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .svc-rail { margin-top: 3.6rem; }
  .svc-rail__item { padding-left: 4.2rem; padding-bottom: 3rem; }
}
@media (max-width: 767px) {
  .svc-rail__item { padding-left: 3.4rem; padding-bottom: 2.6rem; }
  .svc-rail__name { font-size: 1.85rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-rail__item { opacity: 1 !important; transform: none !important; }
  .svc-rail__node { transition: none; transform: scale(1); }
}

/* ============================================================
   HERO — split composition, shared by every page except the home page
   (2026-09-21, from the gb-heroes.html mockups)

   Was: one centered title card, identical on all 16 inner pages. Now each page
   keeps the same shell (.svc-hero: navy, min-height 100vh, drifting + glyphs)
   but the content is a two-column split — copy on one side, a card on the other
   that does that page's actual job.

   HEIGHT IS DELIBERATELY UNCHANGED. The mockups draw a shorter hero; kanja's
   instruction on 2026-09-21 was to keep the live height (min-height: 100vh,
   flex-centered) and take only the composition from the mockup.
   ============================================================ */

.svc-hero { display: flex; align-items: center; }

.hsp {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 3.75rem; align-items: center;
  max-width: 96rem; margin-inline: auto; width: 100%;
  padding-block: 9rem 6rem;   /* clears the fixed header at the top */
}
/* Reversed: the card leads and the copy follows. Source order stays copy-first
   for screen readers and for the single-column layout below 1023. */
.hsp--rev { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); }
.hsp--rev .hsp__copy { order: 2; }

.hsp__copy { min-width: 0; }
.hsp__title {
  margin-top: 1.17rem;
  font-size: 3.75rem; line-height: 1.05; letter-spacing: -0.02em;
  font-weight: var(--w-display); color: var(--tx-l);
  /* pretty, not balance: every headline carries the site's own <br>, and balance
     re-splits across it (“One estimate. One price.” came out on two lines and
     orphaned “start.”). pretty only guards the last line against orphans. */
  text-wrap: pretty;
}
/* The one gold word per headline. Brand book §07/§09 reserves amber for the
   single highest-intent CTA; here it also marks one phrase in the H1, which is
   the mockup's signature. Amber on navy measures 5.59:1 — AA for large text. */
.hsp__title .g { color: var(--accent); }
.hsp__sub {
  font-family: var(--f-body);
  font-size: 1.266rem; line-height: 1.6; font-weight: 400;
  color: rgba(236, 232, 225, 0.72);
  max-width: 42ch; margin-top: 1.25rem;
}
.hsp__ctas { display: flex; align-items: center; gap: 2.2rem; flex-wrap: wrap; margin-top: 2.05rem; }
.hsp__ctas .ulink { padding-bottom: 0.35em; color: var(--tx-l); }

/* ---------- the mark, big and quiet, behind everything ----------
   Brand book §03: the mark as a large watermark is the only screen-back allowed
   on a dark surface. Position and size are set per page from the markup. */
.hsp-mark {
  position: absolute; z-index: 0; pointer-events: none; display: block;
  height: auto; color: var(--tx-l); opacity: 0.11;
}

/* ---------- the card ---------- */
.hsp__aside { position: relative; min-width: 0; }
/* A warm halo so the card sits off the navy instead of on it. */
.hsp__aside::before {
  content: ""; position: absolute; inset: -14% -8%; z-index: 0;
  background: radial-gradient(60% 55% at 60% 40%, rgba(210, 149, 46, 0.13), transparent 70%);
}
.hcard {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #20385A, #1A2D47);
  border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: var(--r-14);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 26px 60px -36px rgba(0, 0, 0, 0.85);
}
.hcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.hcard__label { font-size: 1.133rem; line-height: 1.25; font-weight: var(--w-h2); color: var(--tx-l); }
/* Radius --r-6, not a full round: brand book §06 is "no pills, ever". */
.hcard__tag {
  flex: none; font-size: 0.86rem; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: var(--w-h3); padding: 0.35rem 0.8rem; border-radius: var(--r-6);
  background: rgba(236, 232, 225, 0.05); border: 1px solid rgba(236, 232, 225, 0.18);
  color: rgba(236, 232, 225, 0.72);
}
.hcard__tag--gold { background: rgba(210, 149, 46, 0.16); border-color: transparent; color: var(--accent); }
.hcard__rule {
  font-family: var(--f-body); font-size: 0.94rem; line-height: 1.45; color: rgba(236, 232, 225, 0.52);
  padding: 0.86rem 0; border-top: 1px dashed rgba(236, 232, 225, 0.18);
}
.hcard__tot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.94rem 0 0.2rem; border-top: 1px solid rgba(236, 232, 225, 0.18); }
.hcard__tot span { font-size: 1.094rem; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.72); }
.hcard__tot strong { font-size: 1.4rem; font-weight: var(--w-display); color: var(--accent); letter-spacing: -0.01em; }
.hcard__foot { font-family: var(--f-body); font-size: 0.94rem; line-height: 1.5; color: rgba(236, 232, 225, 0.52); margin-top: 0.86rem; }
.hcard__cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 1.055rem; font-weight: var(--w-h3); color: var(--tx-l); }
.hcard__cta u { text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
.hcard__cta .ulink__arr { transition: transform 0.35s ease; }
.hcard__cta:hover .ulink__arr { transform: translateX(0.35em); }

/* Icons inside the card. Gold hairline glyphs, 16px on the §08 scale. */
.hic { width: 1.56rem; height: 1.56rem; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- card content: rows (work list, conversion example) ---------- */
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.94rem 0; border-top: 1px solid rgba(236, 232, 225, 0.12); }
.hrow:first-of-type { border-top: 0; }
.hrow__l { font-family: var(--f-body); font-size: 1.055rem; line-height: 1.35; color: rgba(236, 232, 225, 0.72); }
.hrow__t { font-size: 0.98rem; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.52); text-align: right; }
.hrow__v { display: flex; align-items: center; gap: 0.7rem; font-size: 1.25rem; font-weight: var(--w-h2); font-variant-numeric: tabular-nums; }
.hrow__from { font-size: 1.055rem; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.38); }
.hrow__to { color: var(--accent); }
.hrow__arr { font-size: 1.02rem; color: rgba(236, 232, 225, 0.38); }
.hrow__v--plain { color: var(--tx-l); }

/* ---------- card content: feature list ---------- */
.hfeat { list-style: none; display: grid; gap: 0.94rem; }
.hfeat li { display: flex; align-items: flex-start; gap: 0.94rem; font-family: var(--f-body); font-size: 1.133rem; line-height: 1.35; color: var(--tx-l); }
.hfeat li .hic { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
.hfeat i { font-style: normal; margin-left: auto; padding-left: 0.6rem; font-family: var(--f-disp); font-weight: var(--w-h2); font-size: 1.055rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.hfeat--lead { gap: 1.17rem; }
.hfeat--lead span { color: rgba(236, 232, 225, 0.72); }
.hfeat--lead b { color: var(--tx-l); font-weight: var(--w-body-strong); }

/* ---------- card content: numbered steps (approach) ---------- */
.hsteps { list-style: none; display: grid; }
.hstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid rgba(236, 232, 225, 0.12); }
.hstep:first-child { border-top: 0; }
.hstep__n { font-size: 1.02rem; font-weight: var(--w-h2); color: var(--accent); font-variant-numeric: tabular-nums; }
.hstep__t { font-size: 1.133rem; line-height: 1.25; font-weight: var(--w-h2); color: var(--tx-l); }
.hstep__d { font-family: var(--f-body); font-size: 0.98rem; line-height: 1.4; color: rgba(236, 232, 225, 0.52); margin-top: 0.2rem; }

/* ---------- card content: the six services (services index) ---------- */
.hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.hgrid__cell {
  display: block; background: rgba(236, 232, 225, 0.05);
  border: 1px solid rgba(236, 232, 225, 0.18); border-radius: var(--r-10);
  padding: 1rem 1rem 0.94rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hgrid__cell:hover, .hgrid__cell:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.hgrid__cell .hic { margin-bottom: 0.7rem; }
.hgrid__cell h3 { font-size: 1.094rem; line-height: 1.2; font-weight: var(--w-h2); color: var(--tx-l); margin-bottom: 0.25rem; }
.hgrid__cell p { font-family: var(--f-body); font-size: 0.94rem; line-height: 1.4; color: rgba(236, 232, 225, 0.52); }

/* ---------- card content: the team photo (about) ---------- */
.hphoto {
  position: relative; z-index: 1; border-radius: var(--r-14); overflow: hidden;
  border: 1px solid rgba(236, 232, 225, 0.18);
  background: linear-gradient(150deg, #24446B 0%, #1A2D47 60%, var(--navy) 100%);
  box-shadow: 0 26px 60px -36px rgba(0, 0, 0, 0.85);
  /* The frame carries the photograph's own 3:2, so the crop stays light at every
     column width; min-height only guards the phone, where the column is narrow. */
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 2; min-height: 16rem;
}
.hphoto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hphoto__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 42, 64, 0.1), rgba(16, 19, 24, 0.48)); }

/* ---------- card content: a local search result (local SEO) ---------- */
.hsearch {
  display: flex; align-items: center; gap: 0.78rem; margin-bottom: 1rem;
  background: rgba(236, 232, 225, 0.05); border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: var(--r-20); padding: 0.7rem 1.17rem;
  font-family: var(--f-body); font-size: 1.02rem; color: rgba(236, 232, 225, 0.72);
}
.hsearch .hic { width: 1.25rem; height: 1.25rem; }
.hres { display: flex; align-items: center; gap: 0.94rem; padding: 0.94rem; border-radius: var(--r-10); border: 1px solid rgba(236, 232, 225, 0.18); background: rgba(236, 232, 225, 0.05); }
.hres + .hres { margin-top: 0.62rem; }
.hres--you { border-color: transparent; background: rgba(210, 149, 46, 0.16); }
.hres__pin { width: 2.65rem; height: 2.65rem; flex: none; border-radius: var(--r-10); background: rgba(210, 149, 46, 0.18); display: flex; align-items: center; justify-content: center; }
.hres__pin .hic { width: 1.4rem; height: 1.4rem; }
.hres__b { min-width: 0; }
.hres__n { font-size: 1.094rem; line-height: 1.2; font-weight: var(--w-h2); color: var(--tx-l); margin-bottom: 0.2rem; }
.hres__stars { color: var(--accent); font-size: 0.94rem; letter-spacing: 1px; }
.hres__stars--dim { color: rgba(236, 232, 225, 0.38); }
.hres__meta { font-family: var(--f-body); font-size: 0.9rem; color: rgba(236, 232, 225, 0.52); margin-left: 0.3rem; }
.hres__rank { margin-left: auto; font-size: 0.86rem; font-weight: var(--w-h2); color: var(--accent); }
.hres__rank--dim { color: rgba(236, 232, 225, 0.38); }

/* ---------- card content: a care plan price ---------- */
.hplan { display: flex; align-items: baseline; gap: 0.62rem; padding: 0.3rem 0 1.1rem; border-bottom: 1px solid rgba(236, 232, 225, 0.12); margin-bottom: 0.94rem; }
.hplan strong { font-size: 2.65rem; line-height: 1; font-weight: var(--w-display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hplan span { font-family: var(--f-body); font-size: 1.02rem; color: rgba(236, 232, 225, 0.52); }

/* ---------- card content: a form on the dark card ---------- */
.hfield { display: grid; gap: 0.47rem; }
.hfield + .hfield { margin-top: 0.94rem; }
.hfield label { font-size: 0.94rem; letter-spacing: 0.03em; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.72); }
.hcard .wpa__input {
  max-width: none; margin-top: 0;
  background-color: rgba(16, 19, 24, 0.4);
  border-color: rgba(236, 232, 225, 0.18);
  color: var(--tx-l); line-height: 1.4;
}
.hcard .wpa__input::placeholder { color: rgba(236, 232, 225, 0.38); }
/* The two-tone focus ring is built for light backgrounds; on the card the outer
   band has to be the card's own navy or it disappears. */
.hcard .wpa__input:focus-visible { outline: 2px solid var(--tx-l); outline-offset: 2px; box-shadow: 0 0 0 6px #1E3350; border-color: var(--accent); }
.hcard .wpa__input.is-invalid { border-color: var(--danger); }
.hcard .fm-err { color: var(--tx-l); max-width: none; }
.hcard .fm-status { color: var(--tx-l); max-width: none; background: rgba(16, 19, 24, 0.45); border-left-color: rgba(236, 232, 225, 0.38); }
.hcard .fm-status:focus-visible { outline-color: var(--tx-l); box-shadow: 0 0 0 6px #1E3350; }
/* Full-width action on the card: the card IS the call to action, so the button
   fills it rather than sitting in a corner. */
.hcard__send {
  width: 100%; justify-content: center; margin-top: 1.17rem;
  background: var(--accent); color: var(--ink);
}
.hcard__send::before { background: var(--amber-hover); }

/* ---------- card content: the inline booking widget (contact) ----------
   Real days and times from /api/booking/slots; see pages/contact-book.js. */
.hbook__month { font-size: 1.02rem; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.72); margin-bottom: 0.78rem; }
.hbook__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
.hbook__lab { font-size: 0.94rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.52); margin: 1.25rem 0 0.7rem; }
.hbook__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.hchip {
  font-family: var(--f-disp); cursor: pointer; color: var(--tx-l);
  background: rgba(236, 232, 225, 0.05); border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: var(--r-10);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
}
.hchip:hover { border-color: rgba(236, 232, 225, 0.52); transform: translateY(-1px); }
.hchip.is-on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hbook__day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.62rem 0 0.55rem; font-size: 0.86rem; font-weight: var(--w-h3); }
.hbook__day b { font-size: 1.17rem; font-weight: var(--w-h2); }
.hbook__slot { padding: 0.7rem 0; font-size: 1.02rem; font-weight: var(--w-h3); font-variant-numeric: tabular-nums; }
.hbook__go[disabled] { opacity: 0.45; cursor: default; }
.hbook__tz { font-family: var(--f-body); font-size: 0.9rem; line-height: 1.4; color: rgba(236, 232, 225, 0.52); text-align: center; margin-top: 0.7rem; }
/* The link the card ships with, before the widget replaces it (and forever, if
   the calendar cannot be reached). */
.hbook__plain { display: flex; flex-direction: column; align-items: flex-start; gap: 0.94rem; }

/* ---------- legal + utility header ----------
   The four legal pages are read, not sold: no card, no split. One quiet header
   with a gold rule, the real "last updated" stamp and jump links into the text. */
.hlg { position: relative; z-index: 1; max-width: 96rem; margin-inline: auto; width: 100%; padding-block: 9rem 6rem; }
.hlg__rule { display: block; width: 3.4rem; height: 3px; background: var(--accent); margin-bottom: 1.6rem; }
.hlg__title { font-size: 5.86rem; line-height: 1.03; letter-spacing: -0.022em; font-weight: var(--w-display); color: var(--tx-l); margin-top: 1.17rem; }
.hlg__sub { font-family: var(--f-body); font-size: 1.266rem; line-height: 1.6; color: rgba(236, 232, 225, 0.72); max-width: 52ch; margin-top: 1.25rem; }
.hlg__jump { display: flex; flex-wrap: wrap; gap: 0.62rem; margin-top: 2.05rem; }
.hlg__jump a {
  font-size: 1.02rem; font-weight: var(--w-h3); color: rgba(236, 232, 225, 0.72);
  background: rgba(236, 232, 225, 0.05); border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: var(--r-6); padding: 0.55rem 0.94rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hlg__jump a:hover { border-color: var(--accent); color: var(--tx-l); }
.hlg__meta { display: flex; flex-wrap: wrap; gap: 0.62rem 1.6rem; margin-top: 2.05rem; padding-top: 1.25rem; border-top: 1px solid rgba(236, 232, 225, 0.12); font-size: 0.94rem; color: rgba(236, 232, 225, 0.52); }
.hlg__meta b { color: rgba(236, 232, 225, 0.38); font-weight: var(--w-h3); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.47rem; }

/* ---------- Responsive ----------
   1023: the split collapses to one column, copy first, card under it. The card
   is capped so it does not stretch to a tablet's full width. */
@media (max-width: 1023px) {
  .hsp, .hsp--rev { grid-template-columns: 1fr; gap: 2.8rem; padding-block: 8rem 5rem; }
  .hsp--rev .hsp__copy { order: 0; }
  .hsp__title { font-size: 3.6rem; }
  .hsp__sub { max-width: none; }
  .hsp__aside { max-width: 36rem; }
  .hlg { padding-block: 8rem 5rem; }
  .hlg__title { font-size: 4.2rem; }
}
@media (max-width: 767px) {
  .hsp, .hsp--rev { padding-block: 7rem 4rem; gap: 2.4rem; }
  .hsp__title { font-size: 3rem; }
  .hsp__ctas { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hsp__aside { max-width: none; }
  .hcard { padding: 1.4rem 1.25rem 1.25rem; }
  .hcard__top { flex-wrap: wrap; gap: 0.6rem; }
  .hgrid { grid-template-columns: 1fr; }
  .hplan strong { font-size: 2.3rem; }
  .hlg { padding-block: 7rem 4rem; }
  .hlg__title { font-size: 3.2rem; }
  /* The mark is drawn for the desktop composition; on a phone it crowds the text. */
  .hsp-mark { display: none; }
}