/* ══════════════════════════════════════════════════════════════════════════
   ELEVATION LAYER — "east-coast engineered". Dark, dramatic, technical.
   Loaded after main.css so it wins. Turns a bland white site into a bold one.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --carbon-2: #131A1F;
  --blueprint: rgba(255,255,255,0.05);
  --hero-grid: linear-gradient(var(--blueprint) 1px, transparent 1px),
               linear-gradient(90deg, var(--blueprint) 1px, transparent 1px);
}

/* ---------------------------------------------------- header: rule + drop -- */
.site-header { border-top: 3px solid var(--accent); }

.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--brand-primary);
  padding: 4px 0; border-bottom: 2px solid transparent; letter-spacing: -0.01em;
}
.dropdown-toggle:hover,
.has-dropdown:hover .dropdown-toggle,
.has-dropdown:focus-within .dropdown-toggle { border-bottom-color: var(--accent); }
.dropdown-toggle svg { width: 11px; height: 11px; transition: transform .2s ease; }
.has-dropdown:hover .dropdown-toggle svg,
.has-dropdown:focus-within .dropdown-toggle svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 15px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(640px, 92vw); background: var(--brand-deep); color: #fff;
  border: 1px solid var(--brand-primary); border-top: 3px solid var(--accent);
  box-shadow: 0 24px 54px rgba(15,21,25,.34); padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 120;
}
.has-dropdown:hover .mega,
.has-dropdown:focus-within .mega,
.has-dropdown.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
.mega a {
  display: block; padding: 11px 14px; text-decoration: none; color: var(--on-dark);
  border-radius: 3px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  line-height: 1.3; transition: background .12s ease, color .12s ease;
}
.mega a:hover { background: var(--brand-deep); }
.mega a b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: #fff; margin-bottom: 1px; letter-spacing: -0.01em; }
.mega a small { color: var(--on-dark-muted); font-size: 0.78rem; }
.mega a:hover b { color: var(--accent); }
.mega-all { grid-column: 1 / -1; border-top: 1px solid var(--brand-primary); margin-top: 6px; padding-top: 4px; }
.mega-all a b { color: var(--accent); font-family: var(--font-display); font-weight: 700; }

@media (max-width: 1080px) {
  .mega {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    width: auto; grid-template-columns: 1fr; box-shadow: none; border: 0;
    border-top: 1px solid var(--hairline); background: var(--surface); padding: 0;
    /* Keep the expanded services list compact so Areas…Contact stay on screen;
       the list scrolls within itself when it exceeds this height. */
    max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .mega a { color: var(--brand-primary); }
  .mega a b { color: var(--brand-primary); }
  .mega a small { color: var(--ink-muted); }
  .mega a:hover { background: var(--surface-alt); }
  .dropdown-toggle { pointer-events: none; }
}

/* -------------------------------------------------------- DARK HERO system -- */
.page-hero {
  background: var(--brand-deep); color: #fff; border-bottom: 0;
  position: relative; overflow: hidden;
}
.page-hero .page-hero-copy { position: relative; z-index: 2; }
.page-hero .page-hero-copy::before {
  content: ""; position: absolute; inset: -140px -60px -140px -80px; z-index: -1;
  background-image: var(--hero-grid); background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(105deg, #000 50%, transparent 92%);
  mask-image: linear-gradient(105deg, #000 50%, transparent 92%);
}
/* --accent on --brand-deep measures 3.64:1 and this text is 12px, so it needed
   4.5. Every other dark band already uses --accent-light, which clears it. */
.page-hero .eyebrow { color: var(--accent-light); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--on-dark-body); }
.page-hero .hero-points li { color: var(--on-dark); }
.page-hero .hero-points li::before { background: var(--accent); }
.page-hero .btn--secondary { color: #fff; border-color: rgba(255,255,255,.28); }
.page-hero .btn--secondary:hover { border-color: #fff; color: #fff; }
.page-hero-media { min-height: 400px; background: var(--carbon-2); }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(200deg, transparent 58%, rgba(15,21,25,.5));
}
.page-hero-media::before {
  content: ""; position: absolute; z-index: 3; top: 18px; left: 18px; width: 24px; height: 24px;
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); pointer-events: none;
}
@media (max-width: 899px) { .page-hero-media { min-height: 250px; } }

/* Standard hero (knowledge/answer/hub) → dark, textured, never plain white */
.hero--standard { background: var(--brand-deep); color: #fff; border-bottom: 0; position: relative; overflow: hidden; }
.hero--standard .wrap { position: relative; z-index: 2; }
.hero--standard .eyebrow { color: var(--accent-light); }
.hero--standard h1 { color: #fff; }
.hero--standard .lead { color: var(--on-dark-body); }
.hero--standard::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--hero-grid); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(130% 108% at 0% 0%, #000, transparent 66%);
  mask-image: radial-gradient(130% 108% at 0% 0%, #000, transparent 66%);
}

/* Homepage hero → dark */
.hero { background: var(--brand-deep); color: #fff; border-bottom: 0; position: relative; overflow: hidden; }
.hero .hero-grid { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--accent-light); }
.hero h1 { color: #fff; }
.hero .lead { color: var(--on-dark-body); }
.hero .hero-points li { color: var(--on-dark); }
.hero .btn--secondary { color: #fff; border-color: rgba(255,255,255,.28); }
.hero .btn--secondary:hover { border-color: #fff; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--hero-grid); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(135% 112% at 0% 0%, #000, transparent 64%);
  mask-image: radial-gradient(135% 112% at 0% 0%, #000, transparent 64%);
}
.hero .media { border-color: rgba(255,255,255,.14); background: var(--carbon-2); position: relative; }
.hero .media::before {
  content: ""; position: absolute; z-index: 3; top: 14px; left: 14px; width: 22px; height: 22px;
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); pointer-events: none;
}
.hero .media figcaption { background: var(--carbon-2); color: var(--on-dark-muted); border-top-color: var(--brand-primary); }

/* Breadcrumb → slim dark bar to sit under the dark hero */
.breadcrumb { background: var(--carbon-2); border-bottom: 1px solid var(--brand-primary); }
.breadcrumb ol { color: var(--on-dark-muted); }
.breadcrumb a { color: var(--on-dark-body); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li[aria-current="page"] { color: var(--on-dark); }
.breadcrumb li::after { color: var(--ink); }

/* -------------------------------------------------------- trustbar / band -- */
.trustbar { background: var(--carbon-2); border-block: 0; }
.trustbar li { color: var(--on-dark); }

/* ------------------------------------------------------------- sidebar v2 -- */
@media (min-width: 1000px) { .sidebar { top: 86px; align-self: start; } }
.sidebar-box { box-shadow: 0 1px 2px rgba(15,21,25,.03); }
.sidebar-box--cta {
  background-color: var(--brand-deep); border: 0; position: relative; overflow: hidden;
  background-image: var(--hero-grid); background-size: 30px 30px;
}
.sidebar-box--cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.sidebar-box--cta h3 { color: #fff; position: relative; }
.sidebar-box--cta > p { color: var(--on-dark-body); position: relative; }
.sidebar-box--cta .btn { position: relative; }

/* --------------------------------------------------------- content media -- */
/* Generated images are 1024x1024 squares. Two problems solved here:
   1. Left at full width they become giant square blocks — cropped to 16:9.
   2. FLOATED images orphan next to a short paragraph or a heading, leaving a
      large empty gap beside them (looked awful). So NO floats: every content
      image is a block-level, centred landscape banner. Guaranteed never to
      leave empty space regardless of surrounding text length. */
.content-media,
.content-media.media--wide,
.content-media.media--right,
.content-media.media--left {
  float: none !important;
  clear: both;
  width: auto;
  max-width: 100%;
  margin: 2em auto;
  box-shadow: 0 2px 16px rgba(15,21,25,.07);
  overflow: hidden;
}
.content-media img {
  width: 100%; height: auto; display: block;
  object-fit: cover; object-position: center 55%; aspect-ratio: 16 / 9;
}
/* Gentle variety without floats: the "right"/"left" variants render as a
   slightly inset centred plate rather than a full-bleed banner. */
@media (min-width: 780px) {
  .content-media.media--right,
  .content-media.media--left { max-width: 78%; }
  .content-media.media--right img,
  .content-media.media--left img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------- footer -- */
.site-footer { border-top: 3px solid var(--accent); }
.footer-brand .brand-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-brand .brand-lockup svg { width: 38px; height: 33px; flex: none; }
.footer-brand .brand-lockup .fb-name { line-height: 1; }
.footer-brand .brand-lockup b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; text-transform: uppercase; letter-spacing: -0.02em; }
/* Accent on the dark footer, at 9px. The dark-ground variant, and at this size
   it is well under the large-text exemption. */
.footer-brand .brand-lockup .fb-name span { display: block; font-size: 0.5625rem; letter-spacing: 0.26em; color: var(--accent-light); text-transform: uppercase; margin-top: 4px; }

/* --------------------------------------------------------- guides hub v2 -- */
.guide-hero-stat { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 26px; }
.guide-hero-stat > div { display: flex; flex-direction: column; }
.guide-hero-stat b { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--accent); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.guide-hero-stat span { font-size: 0.75rem; color: var(--on-dark-body); text-transform: uppercase; letter-spacing: 0.1em; }

.guide-clusters { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 40px; }
.guide-cluster {
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.guide-cluster:hover { border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,21,25,.10); }
.guide-cluster-top {
  background: var(--brand-deep); color: #fff; padding: 22px 22px 20px; position: relative;
  background-image: var(--hero-grid); background-size: 26px 26px;
}
.guide-cluster-top .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.guide-cluster-top h2 { color: #fff; margin: 8px 0 0; font-size: 1.2rem; line-height: 1.25; }
.guide-cluster-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.guide-cluster-body p { font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 16px; flex: 1; }
.guide-cluster-body .card-link { color: var(--brand-primary); border-bottom: 2px solid var(--accent); align-self: flex-start; }

/* ═══════════════════ homepage authority long-read ═══════════════════ */
.measure-wide { max-width: 74ch; }
.authority-read { background: var(--surface); border-top: 1px solid var(--hairline); }

/* Intro band — dark, textured, to open the guide with weight */
.authority-intro {
  background: var(--brand-deep); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(44px, 6vw, 76px);
  background-image: var(--hero-grid); background-size: 34px 34px;
}
.authority-intro .wrap { position: relative; z-index: 2; }
.authority-intro .eyebrow { color: var(--accent-light); }
.authority-intro h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 20ch; margin-bottom: 0.4em; }
.authority-intro .lead { color: var(--on-dark-body); max-width: 60ch; }

/* Two-column: sticky contents nav + prose */
/* Mobile-first: ONE fluid column capped to the container (minmax(0,1fr) lets it
   shrink below the prose's max-width so it never overflows a phone viewport). */
.authority-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: clamp(40px, 6vw, 72px); }
@media (min-width: 1000px) {
  /* align-items: stretch (default) so the TOC cell spans the full prose height
     and its sticky inner stays pinned through the whole read. */
  .authority-grid { grid-template-columns: 244px minmax(0, 1fr); gap: 56px; }
}
.authority-toc { display: none; }
@media (min-width: 1000px) { .authority-toc { display: block; } }
.authority-toc-inner { position: sticky; top: 84px; }
.authority-toc-label {
  display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: 12px; border-bottom: 2px solid var(--brand-primary); margin-bottom: 12px;
}
.authority-toc ol { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: toc; }
.authority-toc li { counter-increment: toc; }
.authority-toc a {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline;
  padding: 8px 0; font-size: 0.85rem; line-height: 1.35; color: var(--ink-muted);
  text-decoration: none; border-top: 1px solid var(--hairline); transition: color .12s ease;
}
.authority-toc li:first-child a { border-top: 0; }
.authority-toc a::before {
  content: counter(toc, decimal-leading-zero); font-family: var(--font-mono);
  font-size: 0.7rem; color: var(--hairline-strong); font-weight: 600;
}
.authority-toc a:hover, .authority-toc a.is-active { color: var(--brand-primary); }
.authority-toc a.is-active::before { color: var(--accent); }
.authority-toc a.is-active { font-weight: 600; }
/* The CTA is an <a> sitting in the table of contents, so `.authority-toc a`
   (0,2,0) was beating `.btn--primary` (0,1,0) and painting muted grey text on
   the accent ground: 1.38:1, which is unreadable and a WCAG failure on the one
   button the homepage most wants pressed. Restated at matching specificity. */
.authority-toc .authority-toc-cta,
.authority-toc .authority-toc-cta:hover {
  width: 100%; text-align: center;
  color: var(--white);
  border-top: 0;
}
/* The contents list numbers its links with a counter. The quote button is an
   <a> in the same list, so it was picking the counter up too and rendering as
   "12  Get a fixed quote". */
.authority-toc .authority-toc-cta::before { content: none; }
/* And it must not inherit the contents-list grid. `.authority-toc a` is
   `display: grid; grid-template-columns: 22px 1fr`, which put the button label
   into a narrow second track and broke "Get a fixed quote" across four lines. */
.authority-toc .authority-toc-cta {
  display: block; grid-template-columns: none;
  padding: 12px 16px; font-size: 0.9375rem; line-height: 1.2;
  margin-top: 18px; border-radius: var(--radius);
}

/* The prose itself — editorial treatment */
.authority-prose { max-width: 74ch; counter-reset: sec; }
.authority-prose > h2 {
  counter-increment: sec; position: relative; margin-top: 2.4em; padding-top: 1.4em;
  border-top: 2px solid var(--brand-primary); font-size: clamp(1.5rem, 2.6vw, 2rem);
  padding-left: 0; scroll-margin-top: 90px;
}
.authority-prose > h2:first-child { margin-top: 0; }
.authority-prose > h2::before {
  content: counter(sec, decimal-leading-zero); display: block;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0.04em; margin-bottom: 10px;
}
/* Standfirst: the paragraph straight after each h2 reads slightly larger */
.authority-prose > h2 + p { font-size: 1.1rem; color: var(--brand-primary); line-height: 1.6; }
.authority-prose h3 { margin-top: 1.8em; color: var(--brand-primary); font-size: 1.15rem; }
.authority-prose h3::before {
  content: ""; display: inline-block; width: 14px; height: 2px; background: var(--accent);
  vertical-align: middle; margin-right: 10px; transform: translateY(-3px);
}
.authority-prose p, .authority-prose li { color: var(--ink); }

/* Rich table to match the site's data tables */
.authority-prose .tablewrap { margin-block: 1.8em; border-radius: var(--radius); box-shadow: 0 2px 14px rgba(15,21,25,.06); }
/* No min-width: this sheet loads after main.css, so a floor here would win
   over the fit-never-scroll rule and put the scrollbar back. The table fits
   its column and stacks below 820px — see the tables block at the end of
   main.css. */
.authority-prose table { min-width: 0; }
.authority-prose thead th { background: var(--brand-deep); color: #fff; border-bottom: 0; font-size: 0.68rem; }
.authority-prose tbody tr:nth-child(odd) { background: var(--surface); }
.authority-prose td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--brand-primary); }

/* Callout keeps its orange rule but a touch more presence here */
.authority-prose .callout { margin-block: 1.8em; background: var(--white); box-shadow: 0 2px 14px rgba(15,21,25,.05); }
.authority-prose a { color: var(--brand-primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.authority-prose a:hover { color: var(--accent-deep); }

/* ------------------------------------------- on-page quote form section -- */
.quote-section { scroll-margin-top: 78px; position: relative; overflow: hidden; }
.quote-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-grid); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%); pointer-events: none;
}
.quote-section .wrap { position: relative; z-index: 2; }
.quote-layout { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .quote-layout { grid-template-columns: 0.92fr 1.08fr; gap: 56px; } }
.quote-copy .eyebrow { color: var(--accent-light); }
.quote-copy h2 { color: #fff; max-width: 16ch; }
.quote-copy p { color: var(--on-dark-body); }
.quote-points { margin-top: 22px; }
.quote-points li { color: var(--on-dark); }
.quote-points li::before { background: var(--accent); }
/* White form panel for readability, whatever the CRM embed's own styling */
.quote-section .quote-panel { background: var(--white); border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.30); }
.quote-section .crm-embed { min-height: 340px; }

/* --------------------------------------------------------------- contact -- */
/* Two columns that start and finish at the same height. The old page put the
   heading, a lead, a details card and 950 words down the left of a form panel,
   so the two columns were wildly different lengths and the page read as
   unfinished below the fold. The left column now carries only what somebody
   needs before they type, and both columns are stretched to a shared height so
   the panel edges line up. */
.contact-top {
  background: var(--brand-deep); color: #fff; position: relative; overflow: hidden;
  background-image: var(--hero-grid); background-size: 34px 34px;
  padding-block: clamp(38px, 5vw, 66px); scroll-margin-top: 78px;
}
.contact-top .wrap { position: relative; z-index: 2; }

.contact-grid { display: grid; gap: 34px; align-items: stretch; }
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr); gap: 52px; }
}
.contact-col { display: flex; flex-direction: column; min-width: 0; }
.contact-col .eyebrow { color: var(--accent-light); }
.contact-col h1 { color: #fff; margin-bottom: 0.3em; }
.contact-col .lead { color: var(--on-dark-body); margin-bottom: 26px; max-width: 46ch; }

/* The form is the point of the page, so it sits at the top of its column and
   fills the height rather than floating in the middle of it. */
.contact-col--form { justify-content: flex-start; }
.contact-top .quote-panel {
  background: var(--white); border: 0; border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.30); height: 100%;
  display: flex; flex-direction: column;
}
.contact-top .crm-embed, .contact-top .crm-embed-live { min-height: 420px; flex: 1; }

.contact-lines { list-style: none; margin: 0 0 30px; padding: 0; }
.contact-line {
  display: flex; gap: 14px; align-items: center; padding: 13px 0;
  border-top: 1px solid var(--brand-primary); text-decoration: none;
}
.contact-lines li:first-child .contact-line { border-top: 0; }
.contact-line svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.contact-line span { display: flex; flex-direction: column; }
.contact-line small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-dark-muted); }
.contact-line strong { font-family: var(--font-display); font-size: 1.1rem; color: #fff; letter-spacing: -0.01em; }
.contact-line:hover strong { color: var(--accent); }

.contact-send {
  border: 1px solid var(--brand-primary); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 24px;
}
.contact-send h2 { color: #fff; font-size: 1.0625rem; margin: 0 0 14px; line-height: 1.35; }
.contact-send ol { margin: 0 0 14px; padding-left: 1.15em; color: var(--on-dark-body); }
.contact-send li { margin-bottom: 6px; font-size: 0.9375rem; }
.contact-send-note { margin: 0; font-size: 0.875rem; color: var(--on-dark-muted); }
/* the_content() prints authored links here, and they inherited the light-
   background link colour against the deep panel: 1.27:1, effectively
   invisible. */
.contact-send a, .contact-col .contact-send a { color: var(--accent-light); }

.contact-area { margin: auto 0 0; font-size: 0.9375rem; color: var(--on-dark-body); }
.contact-area strong { color: #fff; display: block; margin-bottom: 3px; }
.contact-area a { color: var(--accent-light); }

/* Full-bleed map. It is the last thing on the page, so it runs edge to edge
   rather than sitting in a gutter with a strip of background under it. */
.contact-map-section { background: var(--surface); }
.contact-map {
  height: clamp(340px, 42vw, 520px); width: 100%;
  background: var(--surface-alt); border-top: 3px solid var(--accent); display: block;
}
.contact-map .leaflet-container { font-family: var(--font-body); }


/* ------------------------------------------------------ section masthead -- */
/* THE DEAD RIGHT-HAND THIRD.
 *
 * Three bands on the homepage opened with an eyebrow, a heading and two
 * paragraphs inside .measure, which is a 660px reading column. On a 1440px
 * desktop that left roughly 500px of empty white to the right of every one of
 * them, and then the panels, table or accordion underneath ran the full 1200px.
 * Nothing was misaligned in the sense a ruler would catch, which is why the
 * gutter audit passed all three: the composition was the problem. A block of
 * text hard against the left with half the page empty beside it is what "looks
 * unfinished on desktop" actually is.
 *
 * So the heading and the text it introduces sit side by side and together span
 * the same width as the content below them. Prose still wraps at a readable
 * measure because each column is roughly half the wrap, not because the whole
 * header has been squeezed into one side of the page. */
.section-head { margin-bottom: 34px; }
.section-head .eyebrow { display: block; }
.section-head h2 { margin: 0; }
/* Stacked below 960px there is no grid gap to separate the two halves, and
   the heading's own bottom margin is zeroed for the desktop grid, so the body
   text ran straight into the underside of the heading on mobile. */
.section-head-title { margin-bottom: 18px; }

.section-head-body > p { margin: 0 0 0.9em; }
.section-head-body > p:last-child { margin-bottom: 0; }
.section-head-body .section-head-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-weight: 600; text-decoration: none;
}
.section-head-body .section-head-more::after { content: "\2192"; transition: transform .18s ease; }
.section-head-body .section-head-more:hover::after { transform: translateX(3px); }

@media (min-width: 960px) {
  .section-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px 56px; align-items: start;
  }
  /* The heading column is set slightly tighter than the body column so a long
     heading breaks on its own terms rather than at the same point as the prose
     beside it, which is what makes two columns read as one block. */
  .section-head-title { margin-bottom: 0; }
  .section-head-title h2 { max-width: 16ch; }
  .section-head--wide .section-head-title h2 { max-width: 22ch; }
}

/* A masthead with nothing in the second column would just move the dead space,
   so a header carrying only a heading stays single column at a readable width. */
.section-head--solo { display: block; max-width: var(--measure); }


/* ----------------------------------------------------------- faq layout -- */
/* The homepage accordion sat at a 694px reading measure with 426px of empty
   white beside it. Stretching it to 1200px would have fixed the emptiness and
   made the questions harder to read, so the space carries the thing a reader
   wants when the list has not answered them: a way to ask. That is also the
   conversion point of the section, which previously had none. */
.faq-layout { display: grid; gap: 30px; margin-top: 24px; align-items: start; }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr); gap: 56px; }
}
.faq-layout .faq, .faq-layout .faq-list { min-width: 0; margin-top: 0; }

.faq-aside {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 26px 26px 24px; background: var(--surface);
  border-top: 3px solid var(--accent);
}
.faq-aside h3 { margin: 0 0 10px; font-size: 1.1875rem; }
.faq-aside p { margin: 0 0 18px; font-size: 0.9375rem; color: var(--ink-muted); }
.faq-aside .btn { width: 100%; justify-content: center; }
.faq-aside-lines { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hairline); }
.faq-aside-lines li { margin-bottom: 9px; font-size: 0.9375rem; }
.faq-aside-lines li:last-child { margin-bottom: 0; }
.faq-aside-lines a { text-decoration: none; }
.faq-aside-lines a:hover { text-decoration: underline; }
@media (min-width: 960px) { .faq-aside { position: sticky; top: 96px; } }

/* ------------------------------------------------------ WhatsApp widget -- */
.wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 999px) { .wa-widget { bottom: 80px; right: 14px; } } /* clear the mobile sticky CTA bar */

.wa-fab {
  display: inline-flex; align-items: center; gap: 9px; height: 56px; padding: 0 20px 0 16px;
  background: #25D366; color: #fff; border: 0; border-radius: 30px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,211,102,.5), 0 2px 6px rgba(0,0,0,.2); }
.wa-fab:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.wa-fab svg { flex: none; }
@media (max-width: 480px) { .wa-fab-label { display: none; } .wa-fab { padding: 0; width: 56px; justify-content: center; } }

.wa-panel {
  width: min(340px, calc(100vw - 34px)); background: var(--white);
  border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(15,21,25,.28);
  transform-origin: bottom right; animation: wa-pop .18s ease;
}
@keyframes wa-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.wa-panel[hidden] { display: none; }
.wa-panel-head { display: flex; align-items: center; gap: 12px; background: #075E54; color: #fff; padding: 14px 16px; }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; background: #128C7E; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wa-panel-head strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
.wa-panel-head span { font-size: 0.75rem; color: #B7D8D2; }
.wa-close { margin-left: auto; background: none; border: 0; color: #B7D8D2; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.wa-close:hover { color: #fff; }
.wa-panel-body { padding: 16px; background: #ECE5DD; max-height: min(70vh, 560px); overflow-y: auto; }
.wa-greeting { background: #fff; border-radius: 8px; padding: 12px 14px; font-size: 0.9rem; color: var(--ink); margin: 0 0 14px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wa-field { display: block; margin-bottom: 11px; }
.wa-field span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--brand-primary); margin-bottom: 4px; }
.wa-field input, .wa-field textarea, .wa-field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--hairline-strong); border-radius: 8px;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background: #fff; resize: vertical;
}
.wa-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%237C8891' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.wa-field input:focus, .wa-field textarea:focus, .wa-field select:focus { outline: 2px solid #25D366; outline-offset: 0; border-color: #25D366; }
.wa-field-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.wa-field-row .wa-field { margin-bottom: 11px; }
.wa-send {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #fff; border: 0; border-radius: 8px; padding: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: background .15s ease;
}
.wa-send:hover { background: #1fb457; }
.wa-send:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }

/* --------------------------------------------------------- promise panel -- */
.promise-panel {
  background: var(--brand-deep); color: #fff; border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); position: relative; overflow: hidden;
  background-image: var(--hero-grid); background-size: 30px 30px;
}
.promise-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.promise-panel .eyebrow { color: var(--accent-light); }
.promise-panel blockquote {
  margin: 10px 0 22px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; letter-spacing: -0.015em;
  color: #fff; text-wrap: balance;
}
.promise-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; border-top: 1px solid var(--brand-primary); padding-top: 20px; }
.promise-marks li { font-size: 0.875rem; color: var(--on-dark-body); }
.promise-marks strong { display: block; font-family: var(--font-display); color: var(--accent-light); font-size: 1.05rem; letter-spacing: -0.01em; }

/* -------------------------------------------------- section eyebrow accent -- */
.section .eyebrow::before {
  content: ""; display: inline-block; width: 18px; height: 2px; background: var(--accent);
  vertical-align: middle; margin-right: 9px; transform: translateY(-2px);
}
.section--brand-deep .eyebrow::before { background: var(--accent-light); }

/* -------------------------------------------- mobile form fields, iOS zoom --
 *
 * `.wa-field input` above sets 0.9rem (14.4px). This sheet loads after main.css
 * and the selector is more specific, so the site-wide `input { font-size: 16px }`
 * rule lost to it and every field in the WhatsApp enquiry panel stayed at 14.4px.
 *
 * Under 16px, focusing a field makes iOS Safari zoom the whole viewport to meet
 * it. The visitor fills in the enquiry pinched in and has to zoom back out. This
 * is a lead capture form, so it is the worst place on the site for that.
 *
 * Restored to the design's own size above the phone range. */
@media (max-width: 999px) {
  .wa-field input, .wa-field textarea, .wa-field select,
  .answer-search input,
  #mortaro-form input, #mortaro-form textarea, #mortaro-form select {
    font-size: 16px;
  }
}

/* Topic headings on the guides index are links, and the anchor box is only as
 * tall as one line of type — 22px, under the 24px WCAG 2.2 AA minimum for
 * something you press. The heading looks like a big target and is not one.
 * Padding on the anchor, so the type and the layout are untouched. */
.guide-topic-body h2 a,
.guide-cluster-body h2 a {
  display: inline-block;
  padding-block: 4px;
}