/* Roofmate External Cleaning — stylesheet. Hand written, no framework, no external requests. */

/* Palette sampled straight out of the REC logo: charcoal, sky, white, then
   retuned 26 July 2026 against the Claude design brief (charcoal #2E3033 plus
   cyan #7CD3F0, with cyan promoted to the primary call to action).

   Contrast is the constraint that shapes this palette, and every value below
   was measured, not eyeballed:
     --sky   #7CD3F0 on --bg-deep #2E3033 .......... 7.84:1  passes
     --sky   #7CD3F0 carrying --charcoal #1D2124 ... 9.60:1  passes
     --blue  #157699 on white ...................... 5.14:1  passes
     --blue  #157699 on --bg-alt #F1F4F5 ........... 4.65:1  passes
   The brief's own link colour, #1E9CC8, measures only 3.16:1 on white and
   2.92:1 on light grey, so it fails AA at the 12.5px it is used at there. It
   survives here as --blue-bright and is restricted to things that are not
   text: hover borders, underlines, icon strokes. Never set type in it.
   --caption #8A9196 is 3.20:1 and is likewise decorative only. */
:root {
  --ink: #2B2D30;
  --ink-soft: #3A4045;
  --muted: #5C6469;
  --muted-2: #6B7378;
  --caption: #8A9196;
  --line: #E4E8EA;
  --line-soft: #EDF0F1;
  --bg: #ffffff;
  --bg-alt: #F1F4F5;
  --bg-page: #F4F6F7;
  --bg-deep: #2E3033;
  --charcoal: #1D2124;
  --blue: #157699;
  --blue-dark: #0F5A78;
  --blue-bright: #1E9CC8;
  --sky: #7CD3F0;
  --sky-hi: #A6E2F7;
  --sky-soft: #EAF8FE;
  --on-cyan: #17313C;
  --on-cyan-soft: #1D4A5B;
  --warn: #8a5b00;
  --warn-bg: #fff6e0;
  --ok: #1f6b45;
  --r-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;
  --r-pill: 999px;
  --ring: 0 0 0 3px rgba(124, 211, 240, .3);
  --shadow: 0 1px 2px rgba(46, 48, 51, .06), 0 8px 24px rgba(46, 48, 51, .06);
  --shadow-card: 0 14px 34px rgba(46, 48, 51, .09);
  --shadow-lg: 0 2px 4px rgba(46, 48, 51, .06), 0 18px 48px rgba(46, 48, 51, .12);
  --wrap: 1180px;
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Archivo", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Self hosted so the site keeps making zero external requests and the CSP can
   stay on font-src 'self'. Both are variable fonts, latin subset only.
   The declared ranges must match each file's real wght axis, checked with
   fontTools on 26 July 2026: Archivo carries 100-900, Plex carries 100-700.
   They were previously under-declared as 400-800 and 400-600, which silently
   clamped anything heavier, so the 900 headings below would have rendered
   at 800 and bold body text at 600. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibmplexsans-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Archivo at 800/900 with tight tracking. The heavier end of the axis is what
   gives the brief its weight on a phone, and it costs nothing extra over a
   variable font that is already loaded. */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 900; letter-spacing: -.025em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.85rem); line-height: 1.0; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.75rem); line-height: 1.08; }
h3 { font-size: 1.3rem; letter-spacing: -.015em; }
h4 { font-size: 1.02rem; font-weight: 800; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.lede { font-size: 1.16rem; color: var(--muted); line-height: 1.5; }
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: .85rem;
}
.center { text-align: center; }

/* The hero's eyebrow, as a bordered cyan pill rather than bare text. Dark
   ground only, where the cyan clears 7.8:1. */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: var(--r-pill); background: rgba(124, 211, 240, .14);
  border: 1px solid rgba(124, 211, 240, .35); color: var(--sky);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem;
}

/* ---------- placeholder token ---------- */
.tbc {
  display: inline-block; background: var(--warn-bg); color: var(--warn);
  border: 1px dashed #d8b45e; border-radius: 5px;
  padding: 0 .45em; font-size: .82em; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; cursor: help;
}

/* ---------- header ----------
   Dark, so the topbar, the header and the hero read as one block down to the
   fold and the cyan quote button is the brightest thing on the page. */
.topbar {
  background: var(--charcoal); color: #C9CFD3; font-size: .84rem;
  padding: 8px 0;
}
.topbar .wrap { display: flex; gap: 8px 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.topbar .topbar-contact { margin-left: auto; }
.topbar a { color: #ffffff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--sky); }
.topbar .rating-inline { color: var(--sky); font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(46, 48, 51, .97);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid rgba(124, 211, 240, .25);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
/* The REC roofline on its charcoal tile, matching the logo but redrawn so it
   stays crisp small. The supplied file bakes the business name in at a size
   that is unreadable in a header, which then repeats beside it. */
.brand-mark {
  width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(124, 211, 240, .12);
  border: 1px solid rgba(124, 211, 240, .3);
  display: grid; place-items: center; flex: none;
}
.brand-mark svg { width: 34px; height: 34px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-head); color: #fff; font-weight: 900; font-size: 1.16rem; letter-spacing: -.01em; text-transform: uppercase; }
.brand-sub { color: var(--sky); font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2px; }
/* :not(.btn) matters. Without it this rule (0,1,1) outranks .btn-bright
   (0,1,0) and the header quote button renders light grey on cyan at 1.4:1. */
.nav a:not(.btn) {
  font-family: var(--font-head);
  color: #E6EAEC; text-decoration: none; font-weight: 600; font-size: .91rem;
  padding: 9px 13px; border-radius: 7px; white-space: nowrap;
}
.nav a:not(.btn):hover { background: rgba(124, 211, 240, .14); color: var(--sky); }
.nav a:not(.btn)[aria-current="page"] { color: var(--sky); background: rgba(124, 211, 240, .16); }

.has-menu { position: relative; }
/* The dropdowns hang off a dark header, so they are dark too. A white panel
   under a charcoal bar reads as a rendering fault. */
.has-menu > .menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: var(--charcoal); border: 1px solid rgba(124, 211, 240, .22); border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4); padding: 7px; display: none; z-index: 70;
}
.has-menu:hover > .menu, .has-menu:focus-within > .menu { display: block; }
.menu a { display: block; padding: 8px 11px; font-weight: 500; font-size: .91rem; color: #E6EAEC; }
.menu a:hover { background: rgba(124, 211, 240, .14); color: var(--sky); }
.menu .menu-all { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 5px; padding-top: 9px; font-weight: 700; color: var(--sky); }

.nav-cta { margin-left: 10px; }

.menu-toggle {
  display: none; margin-left: auto; background: rgba(124, 211, 240, .12);
  border: 1px solid rgba(124, 211, 240, .4);
  border-radius: var(--r-sm); padding: 9px 13px; font: inherit; font-family: var(--font-head);
  font-weight: 700; font-size: .88rem; color: var(--sky); cursor: pointer;
}

/* ---------- buttons ----------
   Three tiers, and the order matters. Cyan is the one primary action on the
   page (the quote). Charcoal is the secondary. Outlined cyan is the phone
   number, deliberately quieter than the form. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head);
  padding: 13px 24px; border-radius: var(--r-sm); font-weight: 800; font-size: .97rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
  line-height: 1.2; text-align: center; letter-spacing: .01em;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 10px rgba(21, 118, 153, .25); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-dark { background: var(--bg-deep); color: #fff; }
.btn-dark:hover { background: var(--charcoal); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--bg-deep); color: var(--ink); background: var(--bg-alt); }
.btn-light { background: #fff; color: var(--bg-deep); }
.btn-light:hover { background: var(--sky-soft); color: var(--bg-deep); }
/* The loud one, and the only primary. Cyan carries charcoal type at 9.6:1, so
   unlike the old sky it is safe on light ground as well as dark. */
.btn-bright { background: var(--sky); color: var(--charcoal); box-shadow: 0 6px 18px rgba(124, 211, 240, .28); }
.btn-bright:hover { background: var(--sky-hi); color: var(--charcoal); }
/* Outlined cyan, dark ground only. The header phone number. */
.btn-outline-sky { background: transparent; color: var(--sky); border-color: rgba(124, 211, 240, .5); box-shadow: none; }
.btn-outline-sky:hover { background: rgba(124, 211, 240, .12); color: var(--sky); border-color: var(--sky); }
.btn-sm { padding: 10px 17px; font-size: .88rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* Inline text CTA. Stops a secondary link reading as body copy. */
.link-cta {
  font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--blue);
  text-decoration: none; border-bottom: 2px solid var(--sky); padding-bottom: 3px;
  white-space: nowrap;
}
.link-cta:hover { color: var(--blue-dark); border-bottom-color: var(--blue-bright); }

/* ---------- hero ---------- */
.hero {
  background-color: #2E3033;
  background-image:
    radial-gradient(900px 460px at 78% -8%, rgba(124, 211, 240, .11), transparent 62%),
    linear-gradient(168deg, #2A2C2F 0%, #2E3033 52%, #34373B 100%);
  color: #C9CFD3; padding: 74px 0 84px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(to top, rgba(255,255,255,.05), transparent);
  pointer-events: none;
}
.hero h1 { color: #fff; max-width: 15ch; text-wrap: balance; }
.hero h1 .hl { color: var(--sky); }
.hero .eyebrow { color: var(--sky); }
.hero .lede { color: #C9CFD3; font-size: 1.2rem; max-width: 32em; text-wrap: pretty; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 52px; align-items: start; }
.hero-services { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-services li {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  padding: 6px 13px; border-radius: var(--r-pill); font-size: .87rem; font-weight: 600; color: #E6EAEC; margin: 0;
}

/* Ticked reassurances, inline under the lede. */
.hero-assurances { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 14px 26px; }
.hero-assurances li { display: flex; align-items: center; gap: 11px; margin: 0; font-weight: 600; color: #E6EAEC; font-size: .97rem; }
.hero-assurances li::before {
  content: "\2713"; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(124, 211, 240, .18); color: var(--sky);
  display: grid; place-items: center; font-weight: 800; font-size: .82rem;
}

.hero-card {
  background: #fff; color: var(--ink-soft); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.hero-card h3 { margin-bottom: .3em; }
.hero-card .fine { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------- rating block ----------
   Defaults to the light-background case, because that is where this block
   actually appears (/reviews/, hero cards). It previously defaulted to the
   dark-ground colours, which left the rating on /reviews/ at 1.6:1 against
   white. Dark surfaces flip it back below.
   The stars are aria-hidden decoration and the count beside them carries the
   meaning, so they only owe 3:1. The conventional Google gold #f0a930 is
   2.0:1 on white, so it is darkened here and restored on dark ground. */
.rating { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.stars { color: #c97f06; font-size: 1.05rem; letter-spacing: 1px; }
.rating-text { font-size: .92rem; font-weight: 600; color: var(--muted); }
.hero .stars, section.deep .stars, .panel-deep .stars { color: #f0a930; }
.hero .rating-text, section.deep .rating-text, .panel-deep .rating-text { color: #C9CFD3; }

/* ---------- trust badges ----------
   A white band sitting directly under the dark hero: figure first in heavy
   Archivo, label under it. Reads as a stat strip rather than a badge row. */
.trust { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { text-align: center; padding: 6px 10px; }
.trust-value {
  display: block; font-family: var(--font-head); font-weight: 900; color: var(--ink);
  font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 3px;
}
.trust-item.is-hero .trust-value { color: var(--blue); }
.trust-label { font-size: .92rem; color: var(--muted); font-weight: 500; }

/* ---------- sections ---------- */
section { padding: 70px 0; }
section.tight { padding: 46px 0; }
section.alt { background: var(--bg-page); }
section.deep { background: var(--bg-deep); color: #C9CFD3; }
section.deep h2, section.deep h3 { color: #fff; }
section.deep .lede { color: #C9CFD3; }
/* Was an inline style on every dark section head. One rule instead. */
section.deep .eyebrow, .panel-deep .eyebrow { color: var(--sky); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* Heading left, a secondary link pushed to the right on the same baseline. */
.section-head-row {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 34px;
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- feature panel ----------
   White, hairline bordered, generous radius. Used to lift a block out of the
   page without introducing another colour. */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px;
}
.panel-deep { background: var(--bg-deep); color: #C9CFD3; border-color: transparent; }
.panel-deep h2, .panel-deep h3 { color: #fff; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flat, ruled at the top rather than boxed on all four sides, no lift on hover.
   Same reasoning as .svc-list: the floating rounded tile is the tell. */
.card {
  background: transparent; border: 0; border-top: 2px solid var(--bg-deep);
  border-radius: 0; padding: 20px 0 4px; display: flex; flex-direction: column;
  transition: border-color .15s ease;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 1em; }
.card .card-link { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--blue); }
.card .card-link::after { content: " →"; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-top-color: var(--blue); }
a.card:hover h3, a.card:hover .card-link { color: var(--blue); }
section.deep .card { border-top-color: var(--sky); }
section.deep .card p { color: #C9CFD3; }
section.deep .card .card-link { color: var(--sky); }

.card-icon { margin-bottom: 14px; }
.card-icon svg { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
section.deep .card-icon svg { stroke: var(--sky); }

/* ---------- service list ----------
   Deliberately not cards. A bordered rounded tile with an icon chip in a 3-up
   grid is the single most recognisable generated-website pattern going, and
   Gareth's customers are comparing this against real trade sites. This is a
   hairline-ruled index instead: reads like a services list on a quote, and it
   takes photos later without a rebuild. */
.svc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.svc-list > li { margin: 0; border-bottom: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 26px 14.5rem 1fr auto auto; gap: 26px;
  align-items: baseline; padding: 24px 6px; text-decoration: none; color: inherit;
  transition: background .13s ease;
}
.svc-row:hover { background: var(--sky-soft); }
.svc-row .svc-ico { align-self: center; }
.svc-row .svc-ico svg {
  width: 24px; height: 24px; stroke: var(--blue); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.svc-row h3 { margin: 0; font-size: 1.18rem; }
.svc-row p { margin: 0; font-size: .95rem; color: var(--muted); }
/* Price sits between the blurb and the CTA. The brief puts a "from" price on
   every service card, and that is the right instinct, but no price is
   confirmed yet, so this renders a TBC token until Gareth supplies them. */
.svc-row .svc-price {
  font-family: var(--font-head); font-weight: 800; font-size: .95rem;
  color: var(--ink); white-space: nowrap;
}
.svc-row .go { font-family: var(--font-head); font-weight: 800; font-size: .88rem; color: var(--blue); white-space: nowrap; }
.svc-row .go::after { content: " \2192"; }
.svc-row:hover h3, .svc-row:hover .go { color: var(--blue); }

section.deep .svc-list { border-top-color: rgba(255,255,255,.16); }
section.deep .svc-list > li { border-bottom-color: rgba(255,255,255,.16); }
section.deep .svc-row:hover { background: rgba(255,255,255,.05); }
section.deep .svc-row p { color: #C9CFD3; }
section.deep .svc-row .svc-ico svg { stroke: var(--sky); }
section.deep .svc-row .go, section.deep .svc-row:hover h3 { color: var(--sky); }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-left: 54px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-deep); color: var(--sky); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
}
.step h3 { margin-bottom: .3em; font-size: 1.08rem; }
.step p { font-size: .95rem; margin: 0; color: var(--muted); }
section.deep .step::before { background: rgba(124, 211, 240, .16); }
section.deep .step p { color: #C9CFD3; }

/* ---------- checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 1.4em; }
.checks li { position: relative; padding-left: 30px; margin-bottom: .65em; }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: .5em; width: 7px; height: 12px;
  border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 52px; align-items: start; }
.split-narrow { grid-template-columns: 1fr 1fr; }
.aside {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: sticky; top: 96px; box-shadow: var(--shadow);
}
.aside h3 { font-size: 1.06rem; }
.aside p { font-size: .93rem; }
.aside .btn { width: 100%; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.4em; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
tbody tr:hover { background: var(--bg-alt); }
td strong { color: var(--ink); }

/* ---------- FAQ ----------
   Separated cards rather than a ruled list, so each question is its own tap
   target and the open one reads as a panel. */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  transition: border-color .13s ease;
}
.faq-item:hover { border-color: var(--sky); }
.faq-item[open] { border-color: var(--sky); box-shadow: var(--shadow-card); }
.faq-item summary {
  cursor: pointer; padding: 20px 52px 20px 22px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: var(--ink);
  list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blue); line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-body { padding: 0 22px 22px; }
.faq-item .faq-body p { margin: 0; color: var(--muted); }

/* ---------- area chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1.4em; list-style: none; }
.chips li { margin: 0; }
.chips a {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg-alt);
  border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--ink);
}
.chips a:hover { border-color: var(--sky); background: var(--sky-soft); color: var(--ink); }
section.deep .chips a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E6EAEC; }
section.deep .chips a:hover { background: var(--sky); border-color: var(--sky); color: var(--charcoal); }

/* ---------- forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 30px; box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
/* Uppercase Archivo micro-label. Reads as a form built by someone, not a
   default browser stack. */
.field label {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid #D8DEE1; border-radius: var(--r-sm);
  font: inherit; font-size: 1.03rem; color: var(--ink); background: #FBFCFC;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sky); box-shadow: var(--ring);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: .82rem; color: var(--muted); margin: 5px 0 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.checkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.checkgrid label {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--font); font-weight: 600; font-size: .91rem;
  letter-spacing: 0; text-transform: none; cursor: pointer; margin: 0; color: var(--ink);
}
.checkgrid label:hover { border-color: var(--sky); background: var(--sky-soft); }
.checkgrid input { width: auto; accent-color: var(--blue); }

/* ---------- service chips ----------
   Multi-select pills instead of a stacked checkbox list. Faster to hit on a
   phone, and the checkbox stays underneath so the form still posts the same
   `services` values and works with JavaScript off. */
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset label {
  display: inline-flex; align-items: center; margin: 0; padding: 9px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chipset label:hover { border-color: var(--sky); background: var(--sky-soft); }
.chipset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipset input:checked + span { color: inherit; }
.chipset label:has(input:checked) {
  background: var(--bg-deep); border-color: var(--bg-deep); color: #fff;
}
.chipset label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- notice ---------- */
.notice {
  background: var(--warn-bg); border: 1px solid #e8ce8e; border-left: 4px solid #d8a437;
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 26px;
}
.notice p { margin: 0; font-size: .93rem; color: #6b4a08; }
.notice strong { color: #4d3505; }

/* ---------- testimonials ---------- */
.quote { margin: 0 0 26px; padding-left: 22px; border-left: 3px solid var(--sky); }
.quote blockquote { margin: 0 0 .7em; font-size: 1.06rem; color: var(--ink); }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote figcaption { font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--muted); }

/* Boxed variant for the homepage 3-up. Stars in cyan, name in heavy Archivo. */
.quote-card {
  margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; display: flex; flex-direction: column;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.quote-card:hover { border-color: var(--sky); box-shadow: var(--shadow-card); }
.quote-card .quote-stars { color: var(--blue-bright); font-size: 1.15rem; letter-spacing: 1px; line-height: 1; }
.quote-card blockquote { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.quote-card figcaption { margin-top: 16px; font-family: var(--font-head); font-weight: 800; font-size: .94rem; color: var(--ink); }

/* ---------- real photos ---------- */
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--radius); }
.photo figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }
section.deep .photo figcaption { color: #A8B0B5; }

/* ---------- placeholder tiles ---------- */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph {
  aspect-ratio: 4 / 3; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-alt); display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: .85rem; font-weight: 600; padding: 16px;
}

/* ---------- CTA band ---------- */
.cta-band {
  background-color: #2E3033;
  background-image: linear-gradient(150deg, #34373B, #2A2C2F); color: #C9CFD3;
  border-radius: var(--radius-lg); padding: 44px; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: .4em; }
.cta-band p { max-width: 56ch; margin: 0 auto 1.6em; }

/* ---------- cyan closing band ----------
   The loudest block on the site and the last thing before the footer. Solid
   cyan carrying dark type at 8.1:1, with the two actions side by side. */
.cta-cyan {
  background: var(--sky); border-radius: var(--radius-lg); padding: 44px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
}
.cta-cyan h2 { color: var(--on-cyan); margin: 0; max-width: 18ch; }
.cta-cyan p { color: var(--on-cyan-soft); margin: 10px 0 0; font-size: 1.1rem; line-height: 1.45; max-width: 40ch; }
.cta-cyan .btn-row { flex: none; }
.cta-cyan .btn-dark { background: var(--bg-deep); }
.cta-cyan .btn-dark:hover { background: var(--charcoal); }
.cta-cyan .btn-light { background: rgba(255, 255, 255, .78); color: var(--on-cyan); }
.cta-cyan .btn-light:hover { background: #fff; color: var(--on-cyan); }

/* ---------- breadcrumb ---------- */
.crumb { font-size: .85rem; color: var(--muted); padding: 18px 0 0; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); text-decoration: underline; }
.crumb span { margin: 0 7px; opacity: .6; }

/* ---------- page head ---------- */
.page-head { padding: 40px 0 12px; }
.page-head h1 { margin-bottom: .35em; }
.page-head .lede { max-width: 62ch; margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--charcoal); color: #A8B0B5; padding: 56px 0 26px; font-size: .93rem; }
.site-footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 14px; }
.site-footer a { color: #C9CFD3; text-decoration: none; }
.site-footer a:hover { color: var(--sky); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; margin-bottom: 36px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 7px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: .9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}

/* ---------- sticky mobile call bar (shown under 720px) ---------- */
.callbar { display: none; }


/* ---------- accessibility ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 20px; font-weight: 700;
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

/* Neither brand colour clears 3:1 on both grounds, so the ring is a token and
   every dark surface flips it to sky. Blue on charcoal is only 2.3:1.
   .site-header joined this list on 26 July 2026 when it went dark, and the
   cyan band needs the opposite flip: sky on sky would be invisible, so it
   takes the dark ink it already carries its type in (8.1:1). */
.topbar, .site-header, .hero, section.deep, .panel-deep,
.cta-band, .site-footer, .callbar { --focus: var(--sky); }
.cta-cyan { --focus: var(--on-cyan); }
/* White islands inside those dark surfaces have to flip back, or the ring
   inherits sky and lands at 1.9:1 on white. The hero quote card is the one
   that matters: it holds every input on the home page. */
.hero-card, section.deep .panel:not(.panel-deep) { --focus: var(--blue); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus, var(--blue));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sticky header would otherwise cover the target of an in-page jump. */
:target { scroll-margin-top: 96px; }
h1, h2, h3, #main { scroll-margin-top: 96px; }

/* Honeypot. Hidden from people, still reachable by the bots that fill it. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- form status ---------- */
.form-status {
  margin: 14px 0 0; padding: 12px 15px; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 600; text-align: left;
}
.form-status.is-ok { background: #e9f4ee; color: var(--ok); border: 1px solid #b7d5c5; }
.form-status.is-err { background: #fdecec; color: #9b2226; border: 1px solid #f0c2c2; }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
  border-color: #c0504d; box-shadow: 0 0 0 3px rgba(192,80,77,.12);
}
code {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .split-narrow { grid-template-columns: 1fr; gap: 34px; }
  .aside { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* Title, price and CTA share the first row; the blurb spans underneath.
     Every child needs an explicit column here, or it auto-places into the
     26px icon track and gets crushed. */
  .svc-row { grid-template-columns: 26px 1fr auto auto; gap: 8px 18px; align-items: start; }
  .svc-row h3 { grid-column: 2; grid-row: 1; }
  .svc-row p { grid-column: 2 / -1; grid-row: 2; }
  .svc-row .svc-price { grid-column: 3; grid-row: 1; align-self: center; }
  .svc-row .go { grid-column: 4; grid-row: 1; align-self: center; }
}

/* Between the hamburger breakpoint and a full laptop there is a band where
   eight nav items plus the CTA do not fit. Tighten them rather than dropping
   to a hamburger at 960px, so tablets keep the real nav. */
@media (max-width: 1000px) and (min-width: 821px) {
  .site-header .wrap { gap: 12px; }
  .nav a { padding: 9px 8px; font-size: .86rem; }
  .nav-cta { margin-left: 4px; }
  .nav-cta .btn-sm { padding: 9px 12px; font-size: .82rem; }
}

@media (max-width: 820px) {
  .menu-toggle { display: block; }
  /* Dark like the header it drops out of. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-deep);
    border-bottom: 1px solid rgba(124, 211, 240, .25); flex-direction: column; align-items: stretch;
    padding: 10px 16px 18px; gap: 2px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); max-height: 78vh; overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; }
  .has-menu > .menu {
    position: static; display: block; background: transparent; box-shadow: none; border: 0;
    border-left: 2px solid rgba(124, 211, 240, .3);
    border-radius: 0; padding: 0 0 0 12px; margin: 2px 0 6px 10px; min-width: 0;
  }
  .nav-cta { margin: 10px 0 0; }
  .nav-cta a { text-align: center; background: var(--sky); color: var(--charcoal) !important; }
  .site-header .wrap { position: relative; }
}

@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 68px; }
  section { padding: 44px 0; }
  .hero { padding: 44px 0 52px; }
  .hero h1 { max-width: none; }
  .hero .lede { font-size: 1.08rem; }
  .grid-2, .grid-3, .grid-4, .ph-grid, .checkgrid, .field-row { grid-template-columns: 1fr; }
  /* Two columns on a phone. Price and CTA share row 3, pushed to opposite
     ends of the same cell. */
  .svc-row { grid-template-columns: 24px 1fr; gap: 6px 14px; padding: 20px 2px; }
  .svc-row h3 { grid-column: 2; grid-row: 1; font-size: 1.08rem; }
  .svc-row p { grid-column: 2; grid-row: 2; }
  .svc-row .svc-price { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
  .svc-row .go { grid-column: 2; grid-row: 3; justify-self: end; margin-top: 6px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 30px 20px; }
  .cta-cyan { padding: 28px 20px; gap: 20px; }
  .cta-cyan h2, .cta-cyan p { max-width: none; }
  .cta-cyan .btn-row { width: 100%; }
  .form-card { padding: 20px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .aside { padding: 20px 18px; }

  /* Topbar on a phone: the service area and the email are noise, the rating
     and the phone number are the point. Targeted by class, not :first-child,
     so the rating survives when the area text is dropped. */
  .topbar { padding: 9px 0; }
  .topbar .wrap { justify-content: center; gap: 10px; font-size: .82rem; }
  .topbar .topbar-where { display: none; }

  /* Full-width buttons beat side-by-side ones squeezed onto a phone. */
  .btn { padding: 15px 22px; width: 100%; }
  .btn-row { flex-direction: column; gap: 10px; }
  .btn-row .btn { width: 100%; }
  .nav-cta .btn, .chips a, .menu a { width: auto; }

  /* Tap targets: 44px minimum. */
  .chips a { padding: 11px 17px; }
  .faq-item summary { padding: 18px 48px 18px 18px; }
  .faq-item .faq-body { padding: 0 18px 20px; }
  .menu a { padding: 12px 11px; }
  .checkgrid label { padding: 14px 15px; }
  .field input, .field select, .field textarea { padding: 14px; font-size: 16px; }

  h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }
  .section-head { margin-bottom: 30px; }
  .hero-services li { font-size: .82rem; padding: 5px 11px; }
  .step { padding-left: 48px; }
  .split, .hero-grid { gap: 28px; }

  .callbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    flex: 1; padding: 16px 8px; text-align: center; font-weight: 700; font-size: .95rem;
    text-decoration: none; color: #fff; min-height: 52px;
  }
  .callbar .call { background: var(--bg-deep); }
  /* The primary action on a phone, so it gets the bright brand colour. Sky
     needs charcoal type, not the white the rest of the bar uses. */
  .callbar .quote { background: var(--sky); color: var(--charcoal); }
}

@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .trust-grid { grid-template-columns: 1fr; gap: 10px; }
  .trust-item { display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 6px 0; }
  .trust-value { font-size: 1.25rem; margin-bottom: 0; }
  .brand-sub { font-size: .62rem; }
  .rating { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}