/* ============================================================
   service.css — the shared layer for every service page.

   Loaded AFTER theme.css and page.css. It adds nothing new to the
   register: same tokens, same weights, same zero radius. It only
   supplies the pieces a service page needs that the single-page
   index does not have — a shorter hero that carries its own CTA, a
   two-column intro, a numbered process list, and the booking slot.

   Load order: bootstrap -> theme.css -> page.css -> service.css
   ============================================================ */

/* ══════════ SERVICE HERO ══════════
   Shorter than the index hero: this page is a step in a journey, not a
   front door, so the fold shows the offer and the CTA together rather
   than a full-height statement. */
.svc-hero {
  position: relative;
  min-height: 74vh;
  display: flex; align-items: flex-end;
  padding: var(--pad-section) var(--gutter) clamp(3rem, 1.5rem + 5vw, 6rem);
  background: var(--ink-9);
  overflow: hidden;
  isolation: isolate;
}
.svc-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* NOT the index hero's ramp. That one is bottom weighted because the index
   sets one line of type near the floor. Here the text block runs from
   roughly a third of the way down to the bottom, and measuring it against
   the bottom weighted ramp gave 3.16:1 at 40% down, a fail.

   So this is a horizontal scrim with a flat plateau over the column the
   text occupies, falling away to the right. Flat matters: a constant alpha
   under the text makes the contrast computable instead of a guess, and it
   leaves the right of the photograph almost untouched.

   The panel art peaks near L 0.91 in the window regions. At alpha .66 that
   composites to roughly 8.8:1 against white, which holds even if a future
   image is brighter still. Re-measure with the canvas sampler after any
   image swap rather than trusting this note. */
.svc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.66) 0%, rgba(0,0,0,.66) 56%,
      rgba(0,0,0,.30) 82%, rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%);
}
/* Below the two column breakpoint the text spans the full width, so the
   plateau has to as well. */
@media (max-width: 61.98em) {
  .svc-hero::after {
    background: linear-gradient(to bottom,
      rgba(0,0,0,.52) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.70) 100%);
  }
}
.svc-hero-in { position: relative; max-width: 46rem; color: #fff; }
.svc-hero h1 { color: #fff; margin-bottom: 1.5rem; }
.svc-hero .lede {
  color: rgba(255,255,255,.88); max-width: 38rem; margin-bottom: 2.5rem;
  font-size: clamp(1rem, 0.92rem + 0.32vw, 1.32rem);
}

/* The hero carries its own CTA so the offer and the next step are never
   separated by a scroll. .cta / .cta-primary come from page.css. */
.svc-hero .cta { margin-top: 0; }

/* ══════════ BREADCRUMB ══════════ */
.crumb {
  position: relative; z-index: 1;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro);
  color: rgba(255,255,255,.62);
  margin: 0 0 1.5rem;
}
.crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.crumb a:hover { color: #fff; border-bottom-color: #fff; }
.crumb span { padding: 0 0.5rem; }

/* ══════════ INTRO: statement left, detail right ══════════ */
.svc-intro {
  display: grid; gap: 2rem 4rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62em) {
  .svc-intro { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.svc-intro h2 { margin-bottom: 0; }
.svc-intro .body { display: grid; gap: 1.25rem; max-width: var(--measure); }

/* ══════════ WHAT IT COVERS ══════════
   A plain definition list, hairline separated, same device as .stack-row
   on the index so the two pages feel like one site. */
.covers { margin: 0; padding: 0; }
.covers > div {
  display: grid; gap: 0.4rem 3rem;
  padding-block: 1.6rem; border-top: 1px solid var(--rule);
  align-items: baseline;
}
.covers > div:last-child { border-bottom: 1px solid var(--rule); }
.band--dark .covers > div { border-color: var(--rule-dark); }
@media (min-width: 48em) { .covers > div { grid-template-columns: 14rem minmax(0, 1fr); } }
.covers dt {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro);
  color: var(--meta); font-weight: var(--w-body);
}
.covers dd { margin: 0; max-width: var(--measure); }
.band--dark .covers dt { color: var(--mid); }
.band--dark .covers dd { color: var(--band); }

/* ══════════ PROCESS ══════════
   Counter driven, so a step can be added or removed without renumbering
   the markup by hand. */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process li {
  counter-increment: step;
  display: grid; gap: 0.5rem 2.5rem;
  padding-block: 1.8rem; border-top: 1px solid var(--rule);
}
.process li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 48em) { .process li { grid-template-columns: 5rem minmax(0, 1fr); } }
.process li::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--t-micro); letter-spacing: var(--ls-micro);
  color: var(--accent);
}
.process h3 { margin-bottom: 0.4rem; }
.process p { max-width: var(--measure); color: var(--ink); }

/* ══════════ BOOKING ══════════
   The slot the CTA lands in. */
.book { display: grid; gap: 2.5rem; }
@media (min-width: 62em) { .book { grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; } }
.book-side p { color: var(--band); max-width: 26rem; }

/* ══════════ BOOKING FORM ══════════
   Native form with WCAG 1.4.11 boundary contrast, 0 radius, and responsive 2-column layout. */
.book-form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro);
  color: var(--mid);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 2.75rem;
  background: transparent;
  border: 1px solid #6E7276;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--w-light);
  transition: border-color 240ms ease, background 240ms ease;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--mid); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #fff; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  background: rgba(255,255,255,.03);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939598' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 3rem;
}
.field select option { background: var(--ink-9, #231F20); color: #fff; }
.field-hint { font-size: var(--t-micro); color: var(--mid); }

.book-form .cta-primary { justify-self: start; }
.form-status {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro);
  color: var(--accent-on-dark, #fff);
}
.form-status:empty { display: none; }

.book-fallback {
  margin-top: 1.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-micro);
  color: var(--mid);
}
.book-fallback a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.book-fallback a:hover { border-bottom-color: #fff; }

/* ══════════ OTHER SERVICES ══════════
   The same three panel device as the index, at a third of the height, so
   a visitor who lands on the wrong page can cross to the right one. */
.also { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ink-9); }
@media (min-width: 48em) { .also { grid-template-columns: 1fr 1fr; } }
.also .svc { min-height: 34vh; }
@media (min-width: 48em) { .also .svc { min-height: 38vh; } }

/* ══════════ FORCED COLOURS ══════════ */
@media (forced-colors: active) {
  .svc-hero::after { display: none; }
  .svc-hero-img { display: none; }
  .covers > div, .process li { border-color: CanvasText; }
}

/* ══════════ PRINT ══════════ */
@media print {
  .svc-hero { min-height: auto; padding-block: 2rem; background: none; }
  .svc-hero-img, .svc-hero::after, .also { display: none; }
  .svc-hero .eyebrow, .svc-hero h1, .svc-hero .lede, .crumb { color: #000 !important; }
  .book-embed { display: none; }
  .book-side p, .book-fallback, .book-fallback a { color: #000 !important; }
  .process li, .covers > div { break-inside: avoid; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────
   Question as a heading, answer directly under it, a rule between each.

   NOT a details/summary accordion, deliberately. Collapsed answers read as
   hidden by anything parsing the page, and the whole reason this section
   exists is that the answers get read and quoted. It also means no state to
   manage and no motion to suppress.

   The question column is wide rather than the narrow term column .covers
   uses: these are full sentences, and 14rem would break every one of them
   across four lines. */
.faq { margin: 0; }
.faq > div {
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}
.faq > div:last-child { border-bottom: 1px solid var(--rule); }
.band--dark .faq > div { border-color: var(--rule-dark); }

.faq h3 {
  margin-bottom: 0.6rem;
  max-width: var(--measure);
  /* Sized against the body, not against the section heading. A question is
     a label for the answer, not a second h2 competing with the one above. */
  font-size: var(--t-body, 1rem);
  font-weight: var(--w-light);
}
.faq p { margin: 0; max-width: var(--measure); color: var(--ink); }
.band--dark .faq p { color: var(--band); }

@media (min-width: 62em) {
  /* Question and answer side by side once there is room for both to keep a
     readable measure. Below this they stack, which is the phone case. */
  .faq > div { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 2.5rem; }
  .faq h3 { margin-bottom: 0; }
}

/* ── Lead form additions ─────────────────────────────────────────────
   Optional fields are marked, not required ones. Two of seven fields are
   required, so flagging the two exceptions is quieter than flagging five. */
.field-opt {
  margin-left: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mid);              /* 5.43:1 on --ink-9 */
}

.form-note { margin: 0; font-size: var(--t-micro); color: var(--mid); max-width: 32rem; }
.form-note a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.form-note a:hover { border-bottom-color: #fff; }

/* Honeypot. Off screen rather than display:none, because some bots skip
   fields that are display:none and the point is that they fill this one. */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.book-form[aria-busy="true"] .cta-primary { opacity: 0.6; cursor: progress; }