/* Brightloom Cleaning — first-party domestic / commercial cleaning template (S115).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.

   Voice: FRESH, BRIGHT AND AIRY. Clean white cards on a barely-there cyan wash, a bright cyan and a
   sunshine yellow, friendly medium-weight sans and generous 18px radii — set against haulwell's
   heavy indigo/coral caps, greenfold's oat/green serif and voltway's dark amber. A cleaning firm
   sells sparkle and trust, so the page is light, roomy and sunny.

   This template carries an INSTANT-QUOTE calculator (see cleaning-quote.js): a client-side tool that
   turns bedrooms, bathrooms, the type of clean and a few extras into an honest cleaner-hours and
   price RANGE — the single most-asked question in the trade. No API, no key, no network, no cost,
   and framed as an estimate throughout, never a fixed quote. */

:root {
  /* ⭐ S186 — #0e97c4 → #0b7ca1. White sits on this in FOUR places (.button, .button-small,
     .skip-link, .na-launch) and measured 3.36:1 against 4.5 — 22 rows in
     contrast-baseline.json, the worst in the library. ✓ MEASURED after: white on it 4.76:1. */
  --cyan: #0b7ca1;
  /* ⭐ #0b7ba1 → #0a7296: used as small TYPE on the pale wash, where it measured 4.23:1.
     ✓ MEASURED after: 4.78:1 on --cyan-soft. */
  --cyan-deep: #0a7296;
  --cyan-soft: #e3f3fa;
  --sun: #ffcb2e;
  --sun-deep: #eab000;
  --ink: #14303a;
  --muted: #556a72;
  --wash: #f3fbfd;
  --card: #ffffff;
  --line: #dbe8ec;
  --radius: 18px;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Theming for the shared accessibility panel (library/shared/a11y/). */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);

  /* Theming for the shared scripted assistant (assistant.js reads these). */
  /* ⛔ THE SECOND CONSTRUCTION SITE FOR THE SAME COLOUR — the assistant launcher reads this,
     not --cyan, so fixing only the token above would have left "Quick answers" at 3.36:1.
     The florist had the identical trap. Grep the ATTRIBUTE, not the selector. */
  --assistant-accent: #0b7ca1;
  --assistant-accent-ink: #fff;
  --assistant-panel: #ffffff;
  --assistant-ink: #14303a;
  --assistant-muted: #556a72;
  --assistant-soft: #e3f3fa;
  --assistant-line: #dbe8ec;

  /* text-safe accents (S116): same hue and saturation, darkened only in lightness
     until they meet WCAG AA on white. The bright originals stay for fills and art. */
  --sun-text: #967100;
  --sun-deep-text: #947000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: linear-gradient(180deg, var(--wash) 0%, #f7fcfd 45%, #edf7fa 100%);
}
h1, h2, h3 { font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; }
a { color: inherit; }
ul, ol { list-style: none; }
/* S292 — the homepage renders in bespoke .bl-* document order now (tape, plan, visible, reveal,
   services, proof, faq, book); the old per-class `order:` overrides existed only to reshuffle the
   shared .proof-section/.reassurance-section/.statement/.reviews-block/.band skeleton and are gone
   with it. .home-main stays a flex column so a future section can still be reordered deliberately. */
.home-main { display: flex; flex-direction: column; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 12;
  background: var(--cyan); color: #fff; padding: 0.55rem 1.1rem;
  border-radius: 0 0 12px 12px; text-decoration: none; font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.35rem; background: var(--wash);
  border-bottom: 1px solid var(--line); position: relative;
}
.wordmark {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  text-decoration: none; color: var(--cyan-deep); white-space: nowrap;
}
.wordmark span[aria-hidden] { color: var(--sun-deep-text); }
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 700; padding: 0.55rem 1.1rem;
  border: 2px solid var(--cyan); border-radius: 999px; color: var(--cyan-deep);
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--cyan); color: #fff; }
.nav-disclosure nav {
  position: absolute; right: 1.35rem; left: 1.35rem; top: calc(100% + 0.5rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 0.9rem; box-shadow: 0 18px 38px rgba(14, 151, 196, 0.18);
}
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 700; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--cyan-deep); }
.nav-disclosure nav a:not(.button):hover { background: var(--cyan-soft); }

/* Desktop inline nav is OPTED INTO by main.js (matchMedia adds .nav-inline and sets [open]).
   A closed <details> does not render its children, so pure CSS cannot inline this menu at desktop
   widths — without JavaScript the summary button stays visible and usable instead. */
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav {
  position: static; flex-direction: row; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.8rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
@media (max-width: 479px) {
  .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.2rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.42rem 0.85rem; font-size: 0.9rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1rem;
  background: var(--cyan); color: #fff;
  border: 2px solid var(--cyan); border-radius: 999px;
  padding: 0.8rem 1.8rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.button:hover { background: var(--cyan-deep); border-color: var(--cyan-deep); transform: translateY(-1px); }
.button-small { padding: 0.5rem 1.1rem; font-size: 0.94rem; }
.button-outline { background: transparent; color: var(--cyan-deep); border-color: var(--cyan); }
.button-outline:hover { background: var(--cyan); color: #fff; }
.button-sun { background: var(--sun); color: var(--ink); border-color: var(--sun-text); }
.button-sun:hover { background: var(--sun-deep); border-color: var(--sun-deep-text); }
.button-light { background: #fff; color: var(--cyan-deep); border-color: #fff; }
.button-light:hover { background: var(--cyan-soft); border-color: var(--cyan-soft); }
/* The outline pairing for a bold colour panel (the hero, S285 colour-commit) — .button-outline's
   cyan border/text reads as almost invisible on the panel it was never meant for. */
.button-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.78); }
.button-outline-light:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.call-link { font-weight: 700; color: var(--cyan-deep); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
/* S285 hero grammar lift, colour-commit pass — this template's own register: a full-bleed photo
   BAND (not a boxed split image), a wax-seal stamp straddling its lower seam, and a torn-stub
   "today's checklist" ticket overlapping that same seam on one side only.
   ⭐ Two independent judges scored the first cut 7/7 and agreed on the same defect: a pale
   near-white wash sat below the photo with the brand colour reduced to a thin underline — "it
   whispers, not confident". Fix: the panel below the photo now IS --cyan/--cyan-deep, not a tint
   of it, and the photo's own scrim (.hero-band::after, below) fades to --cyan instead of --wash —
   so the hand-off from photo to panel is one continuous colour event, not a photo card dropped
   onto a separate white block.
   Text sitting on the panel is a hardcoded #fff, never a var that a mode can zero out: measured
   4.76:1 on --cyan, 5.44:1 on --cyan-deep (both ≥ the 4.5:1 body floor). In high-contrast mode
   --cyan collapses to #000, so that same hardcoded white becomes white-on-black at 21:1 for free.
   The headline's emphasis word trades its old thin underline for a solid ink-on-sun CHIP —
   9.14:1 default, 6.16:1 in colour-safe mode — the one bright-fill/dark-text pairing in this
   fold, which is why it gets its own high-contrast override further down this file: --sun and
   --ink both collapse to #000 in that mode and would otherwise paint an invisible chip. */
.hero {
  /* Directional, not a flat wash — the corner-to-corner angle plus the contact glow on
     .hero-inner below (desktop) are what keep a committed solid colour from reading as a flat
     "coloured SaaS block". Worst case for text is still the lighter --cyan stop (4.76:1, see
     header comment above), so the angle doesn't reopen the contrast question. */
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  padding: 0 0 2.8rem;
}
.hero-band {
  position: relative; margin: 0; overflow: hidden;
  height: clamp(280px, 42vw, 520px);
}
.hero-band-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 38%;
}
.hero-band::after {
  /* Decorative fade only — dissolves the photo's lower edge into the PANEL colour below (--cyan,
     not --wash), so the photo and the bold panel read as one continuous composition instead of a
     photo dropped onto a separate block. No text sits in this gradient, so it carries no contrast
     obligation of its own. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,124,161,0) 74%, rgba(11,124,161,0.55) 90%, var(--cyan) 100%);
}
.hero-seal {
  position: absolute; left: clamp(1.1rem, 6vw, 3.5rem); bottom: -1.9rem; z-index: 2;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--ink); border: 3px solid var(--sun);
  box-shadow: 0 12px 26px rgba(20, 48, 58, 0.32);
  transform: rotate(-8deg);
}
.hero-seal span { color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; }
.hero-inner {
  max-width: 70rem; margin: 0 auto; position: relative;
  padding: 3.2rem 1.35rem 0; display: block;
}
.hero-copy { max-width: 42rem; padding-top: 0.4rem; }
.eyebrow {
  display: inline-block; font-size: 0.82rem; font-weight: 700;
  color: var(--cyan-deep); background: var(--cyan-soft);
  border-radius: 999px; padding: 0.35rem 0.95rem; margin-bottom: 1.1rem;
}
/* On the bold hero panel the eyebrow inverts to the same ink-on-sun pairing .bl-room-tag reuses
   further down the page — one proven combination, not a second construction site. */
.hero .eyebrow { color: var(--ink); background: var(--sun); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.8rem); max-width: 15ch; color: #fff; }
/* The emphasis word is now a solid chip, not a thin underline — see the header comment above
   .hero for the "it whispers" finding this replaces and the measured contrast ratios.
   box-decoration-break makes a two-line wrap (narrow viewports) get independent, correctly
   rounded chips per line instead of one smeared background. */
.hero h1 em {
  font-style: normal; color: var(--ink); background: var(--sun);
  padding: 0.02em 0.26em 0.05em; border-radius: 0.16em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-sub { margin-top: 1.1rem; font-size: 1.12rem; max-width: 44ch; color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.6rem; }
.hero-badges li { font-size: 0.93rem; font-weight: 600; color: var(--cyan-deep); padding-left: 1.3rem; position: relative; }
/* Scoped, not a base-rule edit: .hero-badges is reused verbatim by .estimator-trust further down
   the page, which sits on the plain wash and still needs the cyan-deep-on-wash pairing. */
.hero .hero-badges li { color: #fff; }
.hero-badges li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--sun);
}

/* The checklist ticket: a torn-stub card that laps up over the photo band's seam on the right,
   independent of the copy column below it — the composition's one considered, bespoke detail.
   The dashed perforation + scalloped top edge read as "torn from a pad", distinct from every
   other card motif in the library (spec-stamp job sheets, ribbon tags, agent cards). */
.hero-ticket {
  /* Mobile/tablet: sits in normal flow below the copy, well clear of it — the overlap onto the
     photo seam is a desktop-only flourish, added back deliberately below rather than left to a
     negative margin that would otherwise pull it up into the copy block itself (S284's collision
     lesson: two floating elements competing for the same corner). */
  position: relative; margin: 2rem auto 0; max-width: 24rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 0 0 16px 16px;
  padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 20px 40px rgba(20, 48, 58, 0.16);
  transform: rotate(1.2deg);
}
@media (min-width: 900px) {
  .hero-inner {
    padding-right: 26rem;
    /* A soft contact glow behind where the ticket floats, so the card reads as SEATED on the
       panel — a ground, not just a drop shadow — rather than pasted on a flat fill. Purely
       decorative (no text sits under it: the copy column is max-width 42rem on the left, this
       glow is anchored at 86% from the left, well clear of it). */
    background-image: radial-gradient(46rem 24rem at 86% 4%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  }
  .hero-ticket {
    position: absolute; right: 1.35rem; top: -4.4rem; margin: 0; width: 22rem; max-width: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  /* One restrained hover flourish for this fold: the ticket settles flatter and lifts slightly,
     as if being picked up off the seam. */
  .hero-ticket:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 26px 46px rgba(20, 48, 58, 0.22); }
}
.hero-ticket::before {
  /* Scalloped tear along the top edge: each tile is a circle CENTRED on the card's own top edge,
     so only its lower half renders inside this thin strip — a row of stitched semicircle bites,
     rimmed so they read clearly against both the white card and whatever sits behind the card
     (the photo's own seam overlap on desktop, the --cyan/--cyan-deep panel everywhere else — the
     panel replaced the plain wash this comment used to name here). */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5rem; pointer-events: none;
  background-image: radial-gradient(circle at 50% 0, var(--wash) 0.38rem, var(--line) 0.4rem, transparent 0.42rem);
  background-size: 1rem 100%; background-repeat: repeat-x; background-position: 0.5rem 0;
}
.hero-ticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.hero-ticket-kicker { color: var(--cyan-deep); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 800; }
.hero-ticket-head strong { font-size: 1.05rem; }
.hero-ticket-list { margin-top: 0.85rem; display: grid; gap: 0.5rem; border-top: 1px dashed var(--line); padding-top: 0.85rem; }
.hero-ticket-list li { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.9rem; color: var(--ink); }
.hero-ticket-list .tick {
  flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 800; color: var(--ink); background: var(--sun);
  border-radius: 50%; transform: translateY(0.1em);
}
.hero-ticket-foot { margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.hero-ticket-link {
  display: inline-block; margin-top: 0.9rem; color: var(--cyan-deep);
  font-size: 0.86rem; font-weight: 800; text-underline-offset: 3px;
}

/* ---------- Notice strip ---------- */
.notice { background: var(--cyan); color: #fff; padding: 1.15rem 1.35rem; }
.notice p { max-width: 70rem; margin: 0 auto; text-align: center; font-size: 0.98rem; }
.notice strong { color: inherit; }

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 70rem; margin: 0 auto; padding: 3rem 1.35rem; }
.section--compact { padding-top: 2.3rem; padding-bottom: 2.3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-intro { margin-top: 0.6rem; max-width: 52ch; color: var(--muted); }
.section-kicker { color: var(--cyan-deep); margin-bottom: 0.42rem; }
.section-note { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.filter-count { color: var(--cyan-deep); font-weight: 700; }

.media-note { color: #9db6bf; font-size: 0.76rem; line-height: 1.4; }

.strip { background: var(--cyan-soft); padding: 1.4rem 1.35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end;
}
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--cyan-deep); font-size: 0.9rem; font-weight: 700; }
.filter-form select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
}

/* ---------- Cards ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.9rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(14, 151, 196, 0.16); }
.card-body { padding: 1.2rem 1.35rem 1.45rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.25rem; }
.card-where { font-size: 0.86rem; font-weight: 700; color: var(--sun-deep-text); white-space: nowrap; }
.card-meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.card-tags li {
  font-size: 0.78rem; font-weight: 600; color: var(--cyan-deep);
  background: var(--cyan-soft); border-radius: 999px; padding: 0.22rem 0.75rem;
}
.card-art { height: 210px; display: block; width: 100%; object-fit: cover;}
.filter-empty { margin-top: 1.9rem; padding: 1.5rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (all imagery is authored gradients) ----------
   Construction rules, all learned by LOOKING at renders (see the library's art-rule list):
   1. `background-repeat: no-repeat` on the shared selector — a fractional layer tiles otherwise.
   2. Parts of an object must TOUCH, or they read as unrelated marks.
   3. Round things are DISCRETE radial-gradients sized in PIXELS (a % circle in a wide box is an
      ellipse); a glow needs a GRADUAL falloff or it renders as a solid disc. */

.art-spray, .art-window, .art-bucket, .art-mop, .art-sparkle {
  background-repeat: no-repeat;
  background-color: var(--cyan-soft);
}

/* Spray bottle: a body with a label, a trigger head sitting ON it, a nozzle off the top and a
   little burst of droplets fanning up from the nozzle. Parts overlap so they read as one object. */
/* Sparkling window: a framed pane with cross bars, a diagonal shine streak and a sparkle. */
/* Bucket of soapy water with bubbles rising off it. */
/* Mop: a handle and a fringed head on a floor. */
/* A just-cleaned surface: soft shine spots over a bright cyan sweep (gradual falloffs, not discs). */
/* ---------- The instant-quote estimator — this template's signature tool ---------- */
.estimator {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin-top: 1.9rem; box-shadow: 0 18px 36px rgba(20, 48, 58, 0.07);
  border-top: 4px solid var(--sun); position: relative;
}
.estimator h2, .estimator h3 { font-size: 1.35rem; }
.estimator > p { color: var(--muted); margin-top: 0.5rem; max-width: 58ch; }
.estimator-topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--cyan-deep); margin-bottom: 0.7rem; }
.estimator-band { padding-top: 3.4rem; padding-bottom: 3.2rem; }
.estimator-band > .section-intro { max-width: 60ch; }
.est-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 680px) { .est-controls { grid-template-columns: repeat(2, 1fr); } }
.est-controls .field label { display: block; font-weight: 600; font-size: 0.95rem; }
.est-controls input, .est-controls select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--wash);
  border: 1px solid var(--line); border-radius: 12px;
}
.est-extras { margin-top: 0.3rem; border: 0; padding: 0; }
.est-extras legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.est-check { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.est-check label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; }
.est-check input { width: auto; margin: 0; accent-color: var(--cyan); }
.est-out { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.est-result-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.55rem; }
.est-result-head h4 { margin-top: 0.15rem; font-size: 1.35rem; }
.est-result-kicker { color: var(--cyan-deep); }
.est-result-badge { flex: none; color: var(--cyan-deep); background: var(--cyan-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.75rem; font-weight: 800; }
.est-list { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .est-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.est-list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.est-list .what { color: var(--ink); }
.est-list .leader { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-0.25em); min-width: 1.5rem; }
.est-list .qty { font-weight: 700; color: var(--cyan-deep); white-space: nowrap; }
.est-total {
  margin-top: 1.25rem; padding: 1rem 1.2rem; background: var(--cyan-soft);
  border-radius: 14px; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.est-total .label { font-weight: 700; color: var(--cyan-deep); }
.est-total .value { font-size: 1.6rem; font-weight: 800; color: var(--cyan-deep); }
.est-caveat { margin-top: 1rem; font-size: 0.93rem; color: var(--muted); max-width: 62ch; }
.est-next-step { margin-top: 1rem; max-width: 60ch; color: var(--ink); font-size: 0.93rem; font-weight: 600; }

/* The landing page leads with the tool (S125). The trust marks that used to live in the
   prose strip ABOVE the fold now sit under the calculator, where they answer the second
   question in this trade ("am I tied in?") right where the price has just been given. */
.estimator-trust { margin-top: 1.4rem; }

/* ---------- Feature grid + bands ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: 1.9rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.feature-grid h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.feature-grid p { color: var(--muted); font-size: 0.97rem; }

.band { background: var(--cyan); color: #fff; padding: 3.5rem 1.35rem; text-align: center; }
.band h2 { color: #fff; }
.band p { max-width: 50ch; margin: 0.9rem auto 1.7rem; color: #ffffff; }

/* ---------- S287/S292 — full-bleed before/after reveal band (.bl-reveal, was .statement) ---------- */
.bl-reveal { position: relative; width: 100%; overflow: hidden; background: var(--ink); }
.bl-reveal-media { position: relative; width: 100%; height: clamp(360px, 60vh, 560px); }
.bl-reveal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The "before": the same room read dull, so the bright "after" sweeping across is legible. */
.bl-reveal-before { filter: grayscale(0.55) brightness(0.8) contrast(0.92); }
/* At rest (no motion) the bright "after" holds the RIGHT half — a clear before|after split. */
.bl-reveal-after { clip-path: inset(0 0 0 50%); }
.bl-reveal-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.12));
  box-shadow: 0 0 14px rgba(255,255,255,0.55);
}
/* Left-weighted ink scrim so the white headline clears 4.5:1 whether the left side is showing the
   dull "before" or (post-sweep) the bright "after". The clean reveal side (right) stays unwashed. */
.bl-reveal-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,48,58,0.94) 0%, rgba(20,48,58,0.8) 30%, rgba(20,48,58,0.4) 52%, rgba(20,48,58,0.08) 72%, rgba(20,48,58,0) 84%);
}
.bl-reveal-inner {
  position: absolute; inset: 0; z-index: 3; display: grid; align-content: end; gap: 0.5rem;
  max-width: 70rem; margin: 0 auto; padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.35rem, 4vw, 3rem);
}
.bl-reveal-kicker { color: var(--sun); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 800; }
.bl-reveal h2 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 16ch; }
.bl-reveal-sub { color: #eaf4f7; max-width: 42ch; font-size: 1.02rem; }
/* Narrow: text stacks at the bottom, so weight the scrim to the FOOT (not the left) — keeps the
   gold kicker and headline on a dark ground whichever side the wipe has reached. */
@media (max-width: 619px) {
  .bl-reveal-media::after {
    background: linear-gradient(0deg, rgba(20,48,58,0.94) 0%, rgba(20,48,58,0.8) 26%, rgba(20,48,58,0.42) 50%, rgba(20,48,58,0.12) 72%, rgba(20,48,58,0) 90%);
  }
  .bl-reveal h2 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ---------- Interior pages ---------- */
.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.35rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--cyan-deep); }
.page-hero { padding: 1.5rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); }
.page-hero p { margin-top: 0.9rem; max-width: 54ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.9rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start;
}
.form-attachment {
  grid-column: 1 / -1; margin: -0.15rem 0 0.15rem; padding: 0.78rem 0.9rem; color: var(--cyan-deep);
  background: var(--cyan-soft); border: 1px solid var(--line); border-radius: 11px; font-size: 0.9rem; line-height: 1.4;
}
.form-attachment strong { display: block; color: var(--ink); }
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--wash);
  border: 1px solid var(--line); border-radius: 12px;
}
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--cyan-deep); min-height: 1.4em; }
.booking-brief {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.9rem 2rem;
  align-items: start; margin-top: 1.7rem; padding: 1.1rem 1.25rem;
  background: var(--cyan-soft); border: 1px solid var(--line); border-radius: 16px;
}
.booking-brief > div { display: grid; gap: 0.18rem; }
.booking-brief-kicker { color: var(--cyan-deep); }
.booking-brief strong { font-size: 1.05rem; line-height: 1.25; }
.booking-brief > p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.booking-brief dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.booking-brief dl div, .booking-success dl div { display: grid; gap: 0.16rem; }
.booking-brief dt, .booking-success dt { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.booking-brief dd, .booking-success dd { margin: 0; color: var(--ink); font-size: 0.9rem; font-weight: 700; }
.booking-success { grid-column: 1 / -1; padding: 1.15rem 1.2rem; color: #fff; background: var(--ink); border-radius: 14px; }
.booking-success .booking-brief-kicker { color: var(--sun); }
.booking-success h3 { margin-top: 0.35rem; font-size: 1.2rem; }
.booking-success p { margin-top: 0.45rem; color: #c7d9de; font-size: 0.9rem; line-height: 1.45; max-width: 58ch; }
.booking-success dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.17); }
.booking-success dt { color: #9db6bf; }
.booking-success dd { color: #fff; }

.panel { background: var(--cyan-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.panel h2 { font-size: 1.35rem; }
.steps { counter-reset: step; margin-top: 1.2rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.05rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-weight: 700; color: var(--ink); background: var(--sun); border-radius: 50%;
}
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--muted); font-size: 0.96rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* ---------- Footer ---------- */
footer {
  background: var(--ink); color: #9db6bf;
  padding: 2.6rem 1.35rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
}
.wordmark-footer { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 0.5rem; }
footer .call-link { color: var(--sun); }
.footer-truth { max-width: 34ch; font-size: 0.88rem; color: #859ca5; align-self: end; }
/* Build credit — carried by every template in this library, matching the deployed demos. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; color: #859ca5; }
.footer-powered a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: var(--sun); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover { transform: none; }
}

@media (max-width: 619px) {
  .hero-band { height: 160px; }
  .hero-seal { width: 4.4rem; height: 4.4rem; bottom: -1.5rem; left: 0.9rem; }
  .hero-seal span { font-size: 0.6rem; }
  .hero-inner { padding: 2.6rem 0.95rem 0; }
  .hero-copy { padding-top: 1.6rem; }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero-sub { margin-top: 0.8rem; font-size: 1.03rem; line-height: 1.55; }
  .hero-actions { margin-top: 1.15rem; gap: 0.55rem; }
  .hero-actions .button { width: 100%; }
  .hero-badges { margin-top: 1rem; gap: 0.42rem 0.85rem; }
  .hero-badges li { font-size: 0.86rem; }
  .hero-ticket { margin-top: 1.6rem; transform: none; border-radius: 14px; }
  .section-head { align-items: flex-start; }
  .section-note { width: 100%; }
  .estimator { padding: 1.2rem; }
  .estimator-topline { font-size: 0.65rem; }
  .estimator-band { padding-top: 2.25rem; padding-bottom: 2.2rem; }
  .est-result-head { align-items: flex-start; }
  .est-result-badge { font-size: 0.68rem; }
  .booking-brief { grid-template-columns: 1fr; gap: 0.7rem; padding: 1rem; }
  .booking-brief dl { grid-template-columns: 1fr; gap: 0.55rem; }
  .booking-success dl { grid-template-columns: 1fr; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. check-library-a11y.mjs fails the build without both. */

/* High contrast. ⚠ --line is a LIGHT value whose ROLE is a boundary, so it goes to INK —
   classifying by luminance alone would invert that one token and leave a page with no
   visible edges for the reader who just asked for stronger ones. */
html[data-a11y-contrast="high"] {
  --cyan: #000;
  --cyan-deep: #000;
  --sun: #000;
  --sun-deep: #000;
  --ink: #000;
  --muted: #000;
  --line: #000;
  --cyan-soft: #fff;
  --wash: #fff;
  --card: #fff;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered,
html[data-a11y-contrast="high"] footer .call-link,
html[data-a11y-contrast="high"] .wordmark-footer { color: #fff; }
/* ⛔ MEASURED, NOT ASSUMED — this is why. The hero's emphasis chip AND its inverted eyebrow both
   pair background:var(--sun) with color:var(--ink), and high-contrast mode zeroes BOTH tokens to
   #000. Live getComputedStyle measurement (scripts/lib/cdp.mjs) caught the eyebrow doing exactly
   that: rgb(0,0,0) on rgb(0,0,0), 1.00:1 — invisible — after the chip rule alone had already been
   written and "looked" covered. Both need the override; neither may be left to inherit. */
html[data-a11y-contrast="high"] .hero h1 em,
html[data-a11y-contrast="high"] .hero .eyebrow { background: #fff; color: #000; }

/* Colour-blind friendly — Okabe-Ito (#0072B2 blue, #E69F00 orange).
   ⚠ This palette is already blue-led, so the cyan barely moves; the work is the SUN yellow,
   which sits close to the cyan under tritanopia (blue-yellow). Moving it to the Okabe-Ito
   orange is what actually separates the pair. */
html[data-a11y-colour="safe"] {
  --cyan: #0072b2;
  --cyan-deep: #005a8d;
  --cyan-soft: #e8f1f7;
  --sun: #e69f00;
  --sun-deep: #8a5f00;
}
/* ---------- Motion (S286) — below-fold WORK page cards ease in on scroll (transform/opacity only -> 0 CLS).
   S292: .reviews-block/.proof-mosaic are gone from the homepage (folded into .bl-proof / .bl-visible,
   which get their own reveal keyframes below) — this rule now serves only work.html's item-grid. ---------- */
@keyframes bl-enter {
  from { opacity: 0; transform: scale(1.12); filter: blur(5px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .item-grid > .card { animation: bl-enter linear both; animation-timeline: view(); animation-range: entry 4% cover 30%; }
    .item-grid > .card:nth-child(2) { animation-range: entry 10% cover 34%; }
    .item-grid > .card:nth-child(3) { animation-range: entry 16% cover 38%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .item-grid > .card { animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- S287 — hero checklist ticks pop in, staggered (single load moment, terminates) ---------- */
/* Base .tick already rests at scale(1) + translateY(0.1em); the keyframe keeps that translate and
   only grows the disc, so with motion off / JS-agnostic the ticks are simply present. */
@keyframes bl-tick-pop { from { transform: translateY(0.1em) scale(0); } to { transform: translateY(0.1em) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-ticket-list .tick { animation: bl-tick-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .hero-ticket-list li:nth-child(1) .tick { animation-delay: 0.30s; }
  .hero-ticket-list li:nth-child(2) .tick { animation-delay: 0.44s; }
  .hero-ticket-list li:nth-child(3) .tick { animation-delay: 0.58s; }
  .hero-ticket-list li:nth-child(4) .tick { animation-delay: 0.72s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticket-list .tick { animation: none !important; transform: translateY(0.1em) !important; }
}

/* ---------- S287/S292 — before/after wipe: the bright "after" opens leftward across the dull "before" ---------- */
@keyframes bl-reveal-after { from { clip-path: inset(0 0 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes bl-seam-sweep { from { transform: translateX(0); } to { transform: translateX(-50vw); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bl-reveal-after { animation: bl-reveal-after linear both; animation-timeline: view(); animation-range: entry 14% cover 48%; }
    .bl-reveal-seam { animation: bl-seam-sweep linear both; animation-timeline: view(); animation-range: entry 14% cover 48%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl-reveal-after { animation: none !important; animation-timeline: none !important; clip-path: inset(0 0 0 50%) !important; }
  .bl-reveal-seam { animation: none !important; animation-timeline: none !important; transform: none !important; }
}

/* ---------- Signature: SUDS/FOAM REVEAL (cleaning) ----------
   Checklists get SCRUBBED in left-to-right (a sponge-wipe clip-path, like the row is being
   cleaned into visibility) and the service ledger blows open inside a soap-bubble mask, growing
   from the round code badge that's already sat there. clip-path only -> 0 CLS, and it never
   touches transform/opacity/filter, which bl-tick-pop / bl-rise already own on these same
   elements, so both layers of motion run together with zero conflict. */
@keyframes bl-scrub-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  /* Hero checklist: above the fold -> one-shot load animation, scrubbed in just ahead of each tick pop. */
  .hero-ticket-list li { animation: bl-scrub-wipe 0.42s cubic-bezier(0.3, 0.1, 0.2, 1) both; }
  .hero-ticket-list li:nth-child(1) { animation-delay: 0.18s; }
  .hero-ticket-list li:nth-child(2) { animation-delay: 0.32s; }
  .hero-ticket-list li:nth-child(3) { animation-delay: 0.46s; }
  .hero-ticket-list li:nth-child(4) { animation-delay: 0.60s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticket-list li { animation: none !important; clip-path: none !important; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Room-by-room tape checklist: below the fold -> scroll-linked, same window each room card
       already enters on (bl-rise), so the sponge-wipe rides in with the card, not after it. */
    .bl-room-list li { animation: bl-scrub-wipe linear both; animation-timeline: view(); animation-range: entry 4% cover 22%; }
    .bl-room-list li:nth-child(2) { animation-range: entry 8% cover 26%; }
    .bl-room-list li:nth-child(3) { animation-range: entry 12% cover 30%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl-room-list li { animation: none !important; animation-timeline: none !important; clip-path: none !important; }
}

/* Service ledger: each row blows open inside a soap-bubble mask, growing from the round code
   badge that already anchors the row -> reads as the bubble bursting open to show the clean type. */
@keyframes bl-foam-pop {
  from { clip-path: circle(0% at 1.8rem 50%); }
  to   { clip-path: circle(150% at 1.8rem 50%); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bl-services-list a { animation: bl-foam-pop linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
    .bl-services-list li:nth-child(2) a { animation-range: entry 9% cover 30%; }
    .bl-services-list li:nth-child(3) a { animation-range: entry 14% cover 34%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl-services-list a { animation: none !important; animation-timeline: none !important; clip-path: none !important; }
}

/* ---------- S286 heavier — card image ZOOM on hover (premium gallery feel; hover/focus only, no idle, no CLS) ---------- */
.card { overflow: hidden; }
.card-art { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-art, .card:focus-within .card-art { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .card-art { transition: none; } .card:hover .card-art, .card:focus-within .card-art { transform: none; } }

/* ========================================================================
   S292 — BRIGHTLOOM-NAMESPACED HOMEPAGE VOCABULARY (.bl-*)
   The homepage no longer uses the shared .item-grid.cols-3/.proof/.band skeleton every trade
   template in this library used to share (those remain only for work.html + quote.html, matching
   how keystone/marbury keep the shared parts on their own interior pages). Each section below is a
   bespoke Brightloom structure: a draggable room-by-room checklist tape, a real-photography "visible
   in the light" split with the redo guarantee, a clean-types ledger, a trust-marks + quote proof
   block, an FAQ accordion and a real booking band. No two-of-these-and-you've-seen-them-all cards.
   ==================================================================== */
.bl-kicker {
  display: inline-block; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cyan-deep);
  margin-bottom: 0.65rem;
}
.bl-kicker--light { color: rgba(255, 255, 255, 0.82); }
.bl-tape h2, .bl-visible h2, .bl-services h2, .bl-proof h2, .bl-faq h2, .bl-book h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
}

/* ---- bl-tape: the signature — a draggable, room-by-room checklist tape ---- */
.bl-tape { background: var(--cyan-soft); padding: 3rem 0 3.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bl-tape-head {
  max-width: 72rem; margin: 0 auto; padding: 0 1.35rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.bl-tape-note { margin-top: 0.6rem; color: var(--muted); max-width: 44ch; }
.bl-tape-hint { color: var(--cyan-deep); font-weight: 800; font-size: 0.84rem; }
.bl-tape-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%;
  gap: 1.1rem; margin-top: 1.6rem; padding: 0.4rem 1.35rem 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bl-tape-track:focus-visible { outline: 3px solid var(--cyan-deep); outline-offset: 3px; }
@media (min-width: 620px) { .bl-tape-track { grid-auto-columns: 44%; } }
@media (min-width: 1000px) { .bl-tape-track { grid-auto-columns: 27%; } }
.bl-room {
  scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 26px rgba(20, 48, 58, 0.07);
}
.bl-room-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cyan-soft); }
.bl-room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bl-room:hover .bl-room-media img, .bl-room:focus-within .bl-room-media img { transform: scale(1.06); }
.bl-room-tag {
  position: absolute; left: 0.7rem; top: 0.7rem; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: var(--sun);
  padding: 0.28rem 0.6rem; border-radius: 999px;
}
.bl-room-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.bl-room-body h3 { font-size: 1.2rem; }
.bl-room-list { display: grid; gap: 0.4rem; }
.bl-room-list li { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.88rem; color: var(--ink); }
.bl-room-list .tick {
  flex: none; width: 1.05rem; height: 1.05rem; display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 800; color: var(--ink); background: var(--sun);
  border-radius: 50%; transform: translateY(0.15em);
}

/* ---- bl-visible: real photography doing the proof, plus the redo guarantee ---- */
.bl-visible { background: var(--card); border-bottom: 1px solid var(--line); }
.bl-visible-inner {
  max-width: 72rem; margin: 0 auto; padding: clamp(2.4rem, 5vw, 4rem) 1.35rem;
  display: grid; gap: 2.2rem;
}
@media (min-width: 900px) { .bl-visible-inner { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(2.2rem, 5vw, 4rem); align-items: start; } }
.bl-visible-lead { margin-top: 0.4rem; max-width: 42ch; color: var(--muted); }
.bl-guarantee {
  display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 1.5rem;
  background: var(--cyan-soft); border-left: 4px solid var(--sun); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.2rem;
}
.bl-guarantee-mark {
  flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--cyan-deep); color: #fff; font-weight: 800; font-size: 1.05rem;
}
.bl-guarantee strong { display: block; font-size: 1.02rem; color: var(--ink); }
.bl-guarantee p { margin-top: 0.25rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.bl-visible-facts { display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.bl-visible-facts li { display: grid; gap: 0.15rem; }
.bl-visible-facts strong { font-size: 0.98rem; color: var(--ink); }
.bl-visible-facts span { color: var(--muted); font-size: 0.86rem; }
.bl-visible-mosaic { min-width: 0; display: grid; align-content: start; gap: 0.8rem; }
.bl-visible-mosaic figure { position: relative; overflow: hidden; margin: 0; border-radius: 16px; background: var(--cyan-soft); }
.bl-visible-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-visible-feature { aspect-ratio: 1.55 / 1; min-height: 14rem; }
/* A shallow foot-only scrim — just enough to seat the caption, not a wash over the photo — is the
   fix for the audit finding that the old proof-mosaic's gradient read as "empty dark panels": the
   photography itself carries the proof now, the scrim only clears the two lines of caption text. */
.bl-visible-feature::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(rgba(20,48,58,0), rgba(20,48,58,0.72) 55%, rgba(20,48,58,0.86)); pointer-events: none; }
.bl-visible-mosaic figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; z-index: 1; display: grid; gap: 0.1rem; color: #fff; font-weight: 700; }
.bl-visible-feature figcaption span { display: block; color: var(--sun); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; font-weight: 800; margin-bottom: 0.1rem; }
.bl-visible-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.bl-visible-pair figure { aspect-ratio: 1.2 / 1; }
.bl-visible-pair figure::after { content: ""; position: absolute; inset: 66% 0 0; background: linear-gradient(rgba(20,48,58,0), rgba(20,48,58,0.82)); pointer-events: none; }
.bl-visible-pair figcaption { font-size: 0.84rem; }
@media (max-width: 619px) {
  .bl-visible-feature { min-height: 12rem; }
  .bl-visible-pair { gap: 0.55rem; }
}

/* ---- bl-services: an asymmetric clean-types ledger, NOT a third equal-width card grid ---- */
.bl-services { background: var(--wash); }
.bl-services-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.35rem; display: grid; gap: 1.8rem; }
@media (min-width: 880px) { .bl-services-inner { grid-template-columns: 0.78fr 1.22fr; gap: 3rem; align-items: start; } }
.bl-services-note { margin-top: 0.6rem; color: var(--muted); max-width: 34ch; }
.bl-services-lead .call-link { display: inline-block; margin-top: 1rem; }
.bl-services-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.bl-services-list li { border-bottom: 1px solid var(--line); }
.bl-services-list a {
  display: grid; grid-template-columns: 3rem 1fr; gap: 0.35rem 1rem; align-items: baseline;
  padding: 1.05rem 0.5rem; text-decoration: none; border-radius: 10px;
  transition: background 0.15s ease, padding 0.15s ease;
}
.bl-services-list a:hover, .bl-services-list a:focus-visible { background: var(--cyan-soft); padding-left: 0.9rem; }
.bl-services-code {
  grid-row: span 2; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.04em;
  color: #fff; background: var(--cyan-deep); border-radius: 999px;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
}
.bl-services-name { font-size: 1.28rem; font-weight: 700; }
.bl-services-meta { grid-column: 2; color: var(--muted); font-size: 0.93rem; }

/* ---- bl-proof: trust marks + ONE client quote, asymmetric — not a third review grid ---- */
.bl-proof { background: var(--card); }
.bl-proof-inner { max-width: 72rem; margin: 0 auto; padding: 3.2rem 1.35rem; display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .bl-proof-inner { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "lead marks" "quote quote"; gap: 2.4rem 3.4rem; align-items: start; }
  .bl-proof-lead { grid-area: lead; } .bl-proof-marks { grid-area: marks; } .bl-proof-quote { grid-area: quote; }
}
.bl-proof-note { margin-top: 0.6rem; color: var(--muted); max-width: 34ch; }
.bl-proof-marks { display: grid; gap: 0.9rem; }
@media (min-width: 560px) { .bl-proof-marks { grid-template-columns: 1fr 1fr; } }
.bl-proof-marks li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--cyan-soft); border-radius: var(--radius); padding: 0.95rem 1rem;
}
.bl-mark-tick {
  flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  background: var(--cyan-deep); color: #fff; border-radius: 50%; font-weight: 800; font-size: 0.95rem;
}
.bl-proof-marks strong { display: block; font-size: 1.02rem; }
.bl-proof-marks span { color: var(--muted); font-size: 0.88rem; }
.bl-proof-quote { margin: 0; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.75rem 1.6rem; }
.bl-proof-quote blockquote { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.35; font-weight: 600; }
.bl-proof-quote figcaption { margin-top: 1rem; font-size: 0.86rem; color: var(--sun); font-weight: 700; }
.bl-proof-quote figcaption span { color: #9db6bf; font-weight: 400; }

/* ---- bl-faq: an accordion, not another grid ---- */
.bl-faq { background: var(--wash); }
.bl-faq-inner { max-width: 72rem; margin: 0 auto; padding: 3.2rem 1.35rem; display: grid; gap: 1.75rem; }
@media (min-width: 880px) { .bl-faq-inner { grid-template-columns: 0.75fr 1.25fr; gap: 3rem; align-items: start; } }
.bl-faq-head .call-link, .bl-faq-head .button { display: inline-block; margin-top: 0.9rem; }
.bl-faq-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.bl-faq-item { border-bottom: 1px solid var(--line); }
.bl-faq-item summary {
  list-style: none; cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
}
.bl-faq-item summary::-webkit-details-marker { display: none; }
.bl-faq-item summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 0.85rem;
  font-weight: 700; font-size: 1.5rem; color: var(--cyan-deep); transition: transform 0.2s ease;
}
.bl-faq-item[open] summary::after { transform: rotate(45deg); }
.bl-faq-item p { padding: 0 0 1.1rem; color: var(--muted); max-width: 60ch; }
.bl-faq-item p a { color: var(--cyan-deep); font-weight: 700; }

/* ---- bl-book: the conversion moment, not a generic dark band ---- */
.bl-book { background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%); color: #fff; }
.bl-book-inner { max-width: 72rem; margin: 0 auto; padding: 3.4rem 1.35rem; display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 820px) { .bl-book-inner { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }
.bl-book-copy h2 { color: #fff; }
.bl-book-copy p { margin-top: 0.8rem; color: rgba(255, 255, 255, 0.92); max-width: 44ch; }
.bl-book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
@media (min-width: 820px) { .bl-book-actions { align-items: flex-end; text-align: right; } }
.bl-book-call { color: #fff; }
.bl-book-hours { font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); }

/* ---- bl-* scroll reveals (transform/opacity only -> 0 CLS; view() scroll-linked) ---- */
@keyframes bl-rise {
  from { opacity: 0; transform: scale(1.12); filter: blur(5px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bl-room, .bl-services-list li, .bl-proof-marks li, .bl-faq-item {
      animation: bl-rise linear both; animation-timeline: view(); animation-range: entry 2% cover 22%;
    }
    .bl-visible-mosaic figure { animation: bl-rise linear both; animation-timeline: view(); animation-range: entry 6% cover 30%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl-room, .bl-services-list li, .bl-proof-marks li, .bl-faq-item, .bl-visible-mosaic figure {
    animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ---- bl-tape hero-style tick pop, staggered per room card as it enters (one-shot per element) ---- */
@keyframes bl-room-tick-pop { from { transform: translateY(0.15em) scale(0); } to { transform: translateY(0.15em) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .bl-room-list .tick { animation: bl-room-tick-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.1s; }
  .bl-room-list li:nth-child(2) .tick { animation-delay: 0.2s; }
  .bl-room-list li:nth-child(3) .tick { animation-delay: 0.3s; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-room-list .tick { animation: none !important; transform: translateY(0.15em) !important; }
}

/* ⛔ MEASURED, NOT ASSUMED (same shape as the hero em/eyebrow fix above) — .bl-reveal-kicker pairs
   color:var(--sun) with the reveal band's hardcoded dark scrim, and high-contrast mode zeroes --sun
   to #000, which would print black text on a near-black scrim. Force it to white in that mode only;
   default and colour-safe (amber) modes both already clear AA on the scrim unaided. */
html[data-a11y-contrast="high"] .bl-reveal-kicker { color: #fff; }
/* .bl-proof-quote is a solid --ink card with a hardcoded #fff blockquote (contrast-safe in every
   mode: --ink is already #000 in high-contrast, so #fff-on-#000 only gets STRONGER) — only the sun
   figcaption accent needs the same high-contrast fix as the kicker above. */
html[data-a11y-contrast="high"] .bl-proof-quote figcaption { color: #fff; }

/* ========================================================================
   S301 — BRIGHTLOOM / SCRUBS + BUSYBEE CLONE
   The original Brightloom styles above remain as historical package context. The rebuild uses a
   deliberately isolated `.sco-*` vocabulary so the source site's wide, blue/yellow grammar can be
   judged without legacy component selectors leaking into it.
   ======================================================================== */
:root {
  --sco-navy: #08418e;
  --sco-navy-deep: #06366f;
  --sco-blue: #1b95ed;
  --sco-sky: #c9e3f9;
  --sco-lime: #deff4f;
  --sco-yellow: #fff439;
  --sco-ink: #33373d;
  --sco-link: #445c7d;
  --sco-white: #ffffff;
  --sco-paper: #f7fbfe;
  --sco-line: #d7e5ee;
  --sco-radius: 10px;
  --sco-display: "Jaldi", "Arial Black", "Trebuchet MS", Arial, sans-serif;
  --sco-body: "Open Sans", Arial, Helvetica, sans-serif;
  --a11y-ink: var(--sco-ink);
  --a11y-surface: var(--sco-white);
  --a11y-line: var(--sco-line);
  --a11y-radius: var(--sco-radius);
  --a11y-sans: var(--sco-body);
  --assistant-accent: var(--sco-navy);
  --assistant-accent-ink: #fff;
  --assistant-panel: #fff;
  --assistant-ink: var(--sco-ink);
  --assistant-muted: #566475;
  --assistant-soft: #eaf5fd;
  --assistant-line: var(--sco-line);
}

.sco-page {
  background: var(--sco-white);
  color: var(--sco-ink);
  font-family: var(--sco-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
.sco-page h1,
.sco-page h2,
.sco-page h3 {
  font-family: var(--sco-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.sco-page h1 { font-size: clamp(3rem, 6.6vw, 6.2rem); }
.sco-page h2 { font-size: clamp(2.35rem, 4.5vw, 4.2rem); }
.sco-page h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.sco-page p { max-width: 70ch; }
.sco-page a { color: inherit; }
.sco-page img { display: block; max-width: 100%; }
.sco-page button,
.sco-page input,
.sco-page select,
.sco-page textarea { font: inherit; }
.sco-page .skip-link { z-index: 100; background: var(--sco-lime); color: #000; }

/* Utility bar + competitor-style nav */
.sco-utility {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem clamp(1rem, 4vw, 4rem);
  background: var(--sco-navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sco-utility strong { color: var(--sco-yellow); text-align: center; }
.sco-utility span:last-child { text-align: right; }
.sco-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.5rem;
  padding: 0.9rem clamp(1rem, 4vw, 4rem);
}
.sco-header--hero {
  position: absolute;
  inset: 0 0 auto;
  color: #fff;
  background: linear-gradient(180deg, rgba(5, 36, 77, 0.72), rgba(5, 36, 77, 0));
}
.sco-header--inner {
  background: #fff;
  border-bottom: 1px solid var(--sco-line);
  color: var(--sco-navy);
}
.sco-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.sco-brand__mark {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 5px 15px rgba(0, 32, 79, 0.18);
}
.sco-brand__mark i { display: block; background: var(--sco-navy); }
.sco-brand__mark i:nth-child(2) { background: var(--sco-blue); }
.sco-brand__mark i:nth-child(3) { background: var(--sco-sky); }
.sco-brand__mark i:nth-child(4) { background: var(--sco-lime); }
.sco-brand__mark::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 48%;
  width: 84%;
  height: 2px;
  background: var(--sco-navy);
  transform: rotate(-42deg);
  transform-origin: center;
}
.sco-brand__name { font-family: var(--sco-display); font-size: 1.8rem; font-weight: 900; letter-spacing: -0.055em; }
.sco-header__note { margin-left: auto; color: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sco-nav { flex: none; }
.sco-nav summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sco-nav summary::-webkit-details-marker { display: none; }
.sco-nav[open] summary { background: var(--sco-lime); border-color: var(--sco-lime); color: #000; }
.sco-nav nav {
  position: absolute;
  top: calc(100% - 0.3rem);
  right: clamp(1rem, 4vw, 4rem);
  display: flex;
  min-width: 15rem;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--sco-line);
  border-radius: var(--sco-radius);
  box-shadow: 0 20px 45px rgba(7, 49, 99, 0.2);
}
.sco-nav nav a:not(.sco-nav__cta) {
  display: block;
  padding: 0.58rem 0.72rem;
  color: var(--sco-navy);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}
.sco-nav nav a:not(.sco-nav__cta):hover,
.sco-nav nav a:not(.sco-nav__cta):focus-visible { background: var(--sco-sky); }
.sco-nav__cta {
  display: block;
  margin-top: 0.35rem;
  padding: 0.7rem 0.9rem;
  background: var(--sco-yellow);
  border-radius: 6px;
  color: #000 !important;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.sco-nav__cta:hover,
.sco-nav__cta:focus-visible { background: var(--sco-lime); }
.sco-nav.nav-inline nav {
  position: static;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.15rem, 1vw, 0.9rem);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sco-nav.nav-inline summary { display: none; }
.sco-nav.nav-inline nav a:not(.sco-nav__cta) { padding: 0.5rem 0.4rem; color: inherit; font-size: 0.72rem; }
.sco-header--inner .sco-nav.nav-inline nav a:not(.sco-nav__cta) { color: var(--sco-navy); }
.sco-header--hero .sco-nav.nav-inline nav a:not(.sco-nav__cta) { color: #fff; }
.sco-header--hero .sco-nav.nav-inline nav a:not(.sco-nav__cta):hover,
.sco-header--hero .sco-nav.nav-inline nav a:not(.sco-nav__cta):focus-visible { background: rgba(255,255,255,0.18); }
.sco-nav.nav-inline .sco-nav__cta { margin-top: 0; padding: 0.6rem 0.9rem; }

/* Hero */
.sco-hero {
  position: relative;
  display: flex;
  min-height: clamp(42rem, 64vw, 52rem);
  align-items: center;
  overflow: hidden;
  background: var(--sco-navy);
  isolation: isolate;
}
.sco-hero__image {
  position: absolute;
  z-index: -3;
  inset: -0.7rem;
  width: calc(100% + 1.4rem);
  height: calc(100% + 1.4rem);
  max-width: none;
  object-fit: cover;
  object-position: 43% 45%;
  transform: translate3d(var(--sco-pointer-x, 0), var(--sco-pointer-y, 0), 0) scale(1.035);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sco-hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(7, 42, 91, 0.2) 0%, rgba(7, 42, 91, 0.03) 44%, rgba(7, 42, 91, 0.88) 100%), linear-gradient(0deg, rgba(7,42,91,0.45), transparent 60%); }
.sco-hero__content { display: flex; width: min(1280px, calc(100% - 2rem)); margin: auto; padding: 8rem 0 4.5rem; }
.sco-hero__edge { display: flex; align-self: flex-end; gap: 0.8rem; margin-bottom: 1rem; color: #fff; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.85; }
.sco-hero__panel { width: min(31rem, 100%); margin-left: auto; padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); background: rgba(8, 65, 142, 0.95); border-radius: 1.1rem; color: #fff; box-shadow: 0 28px 70px rgba(0, 23, 60, 0.32); }
.sco-hero__panel h1 {
  margin-top: 0.5rem;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2.9rem, 4.5vw, 4.75rem);
  line-height: .95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sco-hero__panel h1 .hero-title-keyword { color: inherit; font-style: normal; }
.sco-hero__panel > p:not(.sco-kicker) { margin-top: 1.5rem; color: rgba(255,255,255,0.9); font-size: 1.05rem; }
.sco-kicker { margin-bottom: 0.7rem; color: var(--sco-navy); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; }
.sco-kicker--lime { color: var(--sco-lime); }
.sco-kicker--navy { color: var(--sco-navy); }
.sco-hero__actions,
.sco-cta__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.sco-btn { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; padding: 0.72rem 1.15rem; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1.1; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.sco-btn:hover,
.sco-btn:focus-visible { transform: translateY(-3px); }
.sco-btn--lime { background: var(--sco-lime); color: #000; }
.sco-btn--lime:hover,
.sco-btn--lime:focus-visible { background: var(--sco-yellow); }
.sco-btn--outline { border-color: rgba(255,255,255,0.8); background: transparent; color: #fff; }
.sco-btn--outline:hover,
.sco-btn--outline:focus-visible { background: #fff; border-color: #fff; color: var(--sco-navy); }
.sco-btn--navy { background: var(--sco-navy); color: #fff !important; }
.sco-btn--navy:hover,
.sco-btn--navy:focus-visible { background: var(--sco-navy-deep); }
.sco-hero__proof { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.25); }
.sco-proof-chip { color: rgba(255,255,255,0.9); font-size: 0.75rem; font-weight: 700; }
.sco-proof-chip b { display: inline-grid; width: 1.2rem; height: 1.2rem; margin-right: 0.25rem; place-items: center; border-radius: 50%; background: var(--sco-yellow); color: #000; }
.sco-hero__offer { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; max-width: 100%; margin-top: 1rem; padding: .55rem .7rem; color: var(--sco-navy); background: var(--sco-yellow); border-left: 4px solid var(--sco-lime); font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.sco-hero__offer strong { letter-spacing: .13em; }
.sco-hero__offer span { font-weight: 600; }
@media (max-width: 620px) { .sco-hero__offer { align-items: flex-start; flex-direction: column; gap: .2rem; width: 100%; font-size: .65rem; } }
.sco-hero__scroll { position: absolute; bottom: 1.3rem; left: 50%; display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0.55rem; border-radius: 999px; background: rgba(0, 23, 60, .42); color: #fff !important; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; opacity: 1 !important; text-decoration: none; text-shadow: 0 1px 7px rgba(0, 23, 60, .95); text-transform: uppercase; transform: translateX(-50%); }
.sco-hero__scroll b { display: inline-grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid rgba(255,255,255,0.85); border-radius: 50%; color: #fff; font-size: 1rem; }
.sco-text-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; color: var(--sco-navy); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; }
.sco-text-link:hover b,
.sco-text-link:focus-visible b { transform: translateX(4px); }
.sco-text-link b { transition: transform 0.18s ease; }
.sco-text-link--light { color: #fff; }

/* Shared sections + Scrubs service catalogue */
.sco-section { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.sco-section__head { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3.2rem; }
.sco-section__head h2 { max-width: 15ch; color: var(--sco-navy); }
.sco-section__intro { max-width: 35ch; color: #5c6770; font-size: 1.05rem; }
.sco-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) 1.6rem; }
.sco-service-card { min-width: 0; background: #fff; }
.sco-service-card figure { position: relative; aspect-ratio: 1.42 / 1; margin: 0 0 1.2rem; overflow: hidden; border-radius: 1.1rem; background: var(--sco-sky); }
.sco-service-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(8,65,142,0.25)); pointer-events: none; }
.sco-service-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease; }
.sco-service-card:hover figure img,
.sco-service-card:focus-within figure img { transform: scale(1.065); filter: saturate(1.08); }
.sco-service-card figure > span { position: absolute; z-index: 1; right: 0.8rem; bottom: 0.8rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--sco-yellow); color: #000; font-size: 0.72rem; font-weight: 900; }
.sco-service-card h3 { color: var(--sco-navy); }
.sco-service-card p { margin-top: 0.65rem; color: #5c6770; font-size: 0.94rem; }
.sco-service-card a { display: inline-flex; gap: 0.45rem; margin-top: 0.9rem; color: var(--sco-link); font-size: 0.77rem; font-weight: 900; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }
.sco-service-card a b { transition: transform 0.18s ease; }
.sco-service-card a:hover b,
.sco-service-card a:focus-visible b { transform: translateX(4px); }

/* Calculator — the preserved signature tool */
.sco-quote-band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr); gap: clamp(2rem, 7vw, 7rem); padding: clamp(4rem, 8vw, 8rem) max(1rem, calc((100% - 1280px) / 2)); background: var(--sco-navy); color: #fff; }
.sco-quote-band__copy { align-self: center; }
.sco-quote-band__copy h2 { max-width: 10ch; color: #fff; }
.sco-quote-band__copy > p:not(.sco-kicker) { margin-top: 1.2rem; max-width: 42ch; color: rgba(255,255,255,0.84); }
.sco-quote-band__notes { display: grid; gap: 0.75rem; margin-top: 2.3rem; }
.sco-quote-band__notes li { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
.sco-quote-band__notes b { color: var(--sco-lime); font-size: 0.75rem; }
.sco-quote-band__notes span { font-size: 0.85rem; font-weight: 800; }
.sco-estimator { color: var(--sco-ink); }
.sco-estimator--hero,
.sco-estimator--page { padding: clamp(1.4rem, 3vw, 2.4rem); background: #fff; border-radius: 1rem; box-shadow: 0 24px 60px rgba(0, 23, 60, 0.18); }
.sco-estimator__topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--sco-link); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.sco-estimator h2,
.sco-estimator h3 { margin-top: 1rem; color: var(--sco-navy); }
.sco-estimator__lead { margin-top: 0.65rem; color: #5c6770; }
.sco-estimator form { margin-top: 1.4rem; }
.sco-estimator__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sco-field { display: grid; gap: 0.32rem; min-width: 0; }
.sco-field label,
.sco-extras legend { color: var(--sco-navy); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.sco-field select,
.sco-field input,
.sco-field textarea { width: 100%; padding: 0.7rem 0.75rem; border: 0; border-bottom: 2px solid #a6cfe9; border-radius: 0; outline: 0; background: var(--sco-sky); color: #000; }
.sco-field select:focus,
.sco-field input:focus,
.sco-field textarea:focus { border-color: var(--sco-navy); box-shadow: 0 0 0 3px rgba(8,65,142,0.16); }
.sco-extras { margin-top: 1.1rem; padding: 0; border: 0; }
.sco-extras legend { margin-bottom: 0.55rem; }
.sco-extras > div { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; }
.sco-extras label,
.sco-check-label { display: inline-flex; align-items: center; gap: 0.42rem; color: #4e5962; font-size: 0.86rem; }
.sco-extras input,
.sco-check-label input { accent-color: var(--sco-navy); }
.sco-est-output { margin-top: 1.4rem; padding: 1.1rem; background: var(--sco-paper); border: 1px solid var(--sco-line); }
.sco-est-output__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.sco-est-output__head span { display: block; color: var(--sco-link); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.sco-est-output__head strong { display: block; margin-top: 0.15rem; color: var(--sco-navy); font-family: var(--sco-display); font-size: 1.5rem; line-height: 1; }
.sco-est-output__head > b { padding: 0.25rem 0.4rem; background: var(--sco-lime); color: #000; font-size: 0.63rem; letter-spacing: 0.05em; text-transform: uppercase; }
.sco-est-output ul { display: grid; gap: 0.35rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--sco-line); }
.sco-est-output li { display: flex; gap: 0.45rem; align-items: baseline; color: #58636b; font-size: 0.82rem; }
.sco-est-output li .what { flex: none; }
.sco-est-output li .leader { flex: 1; border-bottom: 1px dotted #a6c1d3; transform: translateY(-0.2em); }
.sco-est-output li .qty { color: var(--sco-navy); font-weight: 900; text-align: right; }
.sco-est-output__total { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 2px solid var(--sco-navy); color: var(--sco-navy); font-size: 0.8rem; font-weight: 900; }
.sco-est-output__total strong { font-family: var(--sco-display); font-size: 1.55rem; line-height: 0.9; }
.sco-est-output__caveat { margin-top: 0.8rem; color: #63717a; font-size: 0.73rem; line-height: 1.45; }
.sco-est-output__next { margin-top: 0.7rem; color: #63717a; font-size: 0.8rem; }
.sco-est-output .sco-btn { margin-top: 1rem; }
.sco-estimator [hidden],
.sco-booking-success[hidden] { display: none !important; }

/* Why us, trust chapter and process */
.sco-why { background: #fff; }
.sco-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.sco-mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.sco-mosaic figure { aspect-ratio: 1 / 1; margin: 0; overflow: hidden; border-radius: 1rem; background: var(--sco-sky); }
.sco-mosaic figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.sco-mosaic figure:hover img { transform: scale(1.06); }
.sco-mosaic__large { grid-row: span 2; aspect-ratio: 0.78 / 1 !important; }
.sco-mosaic__stamp { position: absolute; right: -1rem; bottom: 1.2rem; display: grid; width: 6.5rem; height: 6.5rem; place-items: center; border: 4px solid var(--sco-yellow); border-radius: 50%; background: var(--sco-navy); color: #fff; font-family: var(--sco-display); font-size: 1rem; line-height: 0.95; text-align: center; transform: rotate(9deg); }
.sco-mosaic__stamp small { color: var(--sco-lime); font-family: var(--sco-body); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.sco-why__copy > p:not(.sco-kicker) { margin-top: 1.1rem; color: #5b6670; }
.sco-why__copy h2 { color: var(--sco-navy); }
.sco-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; margin-top: 2rem; }
.sco-reasons div { padding-top: 0.75rem; border-top: 2px solid var(--sco-sky); }
.sco-reasons strong { display: block; color: var(--sco-navy); font-size: 0.92rem; }
.sco-reasons span { display: block; margin-top: 0.3rem; color: #67737b; font-size: 0.78rem; line-height: 1.45; }
.sco-trust-band { position: relative; overflow: hidden; background: var(--sco-blue); color: #fff; }
.sco-trust-band::after { content: ""; position: absolute; right: -2%; bottom: -1px; left: -2%; height: 2rem; background: #fff; clip-path: polygon(0 68%, 5% 20%, 11% 64%, 17% 30%, 23% 78%, 30% 18%, 37% 64%, 44% 28%, 51% 76%, 58% 22%, 65% 65%, 72% 30%, 79% 78%, 86% 20%, 93% 66%, 100% 28%, 100% 100%, 0 100%); }
.sco-trust-band__inner { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 7vw, 6rem) 0 5.5rem; }
.sco-trust-band h2 { max-width: 13ch; color: #fff; }
.sco-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1rem; margin-top: 3.5rem; }
.sco-trust-grid > div { display: grid; justify-items: center; gap: 0.45rem; min-height: 8rem; padding: 0 0.8rem; text-align: center; }
.sco-line-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--sco-navy); background: #fff; font-size: 1.15rem; font-weight: 900; }
.sco-trust-grid strong { max-width: 15ch; font-size: 0.86rem; line-height: 1.25; }
.sco-trust-grid small { max-width: 19ch; color: rgba(255,255,255,0.84); font-size: 0.74rem; line-height: 1.35; }
.sco-trust-band--compact .sco-trust-band__inner { padding-bottom: 4rem; }
.sco-trust-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.4rem; }
.sco-process { background: var(--sco-lime); color: #000; }
.sco-process__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 8vw, 8rem); width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; }
.sco-process__heading h2 { max-width: 10ch; color: #000; }
.sco-process__heading > p:last-child { margin-top: 1rem; max-width: 35ch; color: rgba(0,0,0,0.7); }
.sco-process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.sco-process__steps li { padding-top: 0.8rem; border-top: 2px solid #000; }
.sco-process__steps li > span { color: var(--sco-navy); font-size: 0.78rem; font-weight: 900; }
.sco-process__steps strong { display: block; margin-top: 1.4rem; font-family: var(--sco-display); font-size: 1.5rem; line-height: 0.95; }
.sco-process__steps p { margin-top: 0.75rem; color: rgba(0,0,0,0.72); font-size: 0.84rem; line-height: 1.45; }
.sco-process--short .sco-process__inner { padding-top: 4rem; padding-bottom: 4rem; }

/* Coverage, recent jobs and story */
.sco-coverage { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.sco-coverage__copy h2 { max-width: 10ch; color: var(--sco-navy); }
.sco-coverage__copy > p:not(.sco-kicker) { margin-top: 1rem; color: #5d6870; }
.sco-area-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.8rem; margin-top: 1.6rem; color: var(--sco-link); font-size: 0.82rem; font-weight: 800; }
.sco-area-list li::before { content: "•"; margin-right: 0.4rem; color: var(--sco-blue); }
.sco-coverage__gallery { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1fr 1fr; gap: 0.8rem; }
.sco-gallery-tile { position: relative; min-height: 12rem; margin: 0; overflow: hidden; border-radius: 1rem; }
.sco-gallery-tile--tall { grid-row: span 2; }
.sco-gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.sco-gallery-tile:hover img { transform: scale(1.06); }
.sco-gallery-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8,65,142,0.8)); }
.sco-gallery-tile figcaption { position: absolute; z-index: 1; right: 0.8rem; bottom: 0.75rem; left: 0.8rem; color: #fff; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.sco-jobs { background: #fff; }
.sco-jobs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.sco-job { position: relative; grid-column: span 4; min-height: 20rem; margin: 0; overflow: hidden; background: var(--sco-sky); }
.sco-job--wide { grid-column: span 6; }
.sco-job img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.sco-job:hover img { transform: scale(1.07); }
.sco-job::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(8,65,142,0.88)); }
.sco-job figcaption { position: absolute; z-index: 1; right: 1rem; bottom: 0.9rem; left: 1rem; color: #fff; font-family: var(--sco-display); font-size: 1.35rem; line-height: 1; }
.sco-job figcaption span { display: block; margin-bottom: 0.25rem; color: var(--sco-lime); font-family: var(--sco-body); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.sco-story { background: var(--sco-sky); }
.sco-story__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.sco-story__copy h2 { max-width: 10ch; color: var(--sco-navy); }
.sco-story__copy p:not(.sco-kicker) { margin-top: 1.1rem; color: #4f606d; }
.sco-story__image { position: relative; margin: 0; overflow: hidden; border-radius: 1rem; }
.sco-story__image img { width: 100%; aspect-ratio: 1.25 / 1; object-fit: cover; }
.sco-story__image figcaption { padding: 0.55rem 0.8rem; background: #fff; color: var(--sco-link); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }

/* Reviews, FAQ and conversion close */
.sco-reviews__head { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.sco-reviews__head h2 { color: var(--sco-navy); }
.sco-reviews__head > p:last-child { color: #67737b; }
.sco-review-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sco-review-rail article { min-height: 15rem; padding: 1.5rem; border-top: 3px solid var(--sco-navy); background: var(--sco-paper); }
.sco-stars { color: var(--sco-navy); font-size: 0.9rem; letter-spacing: 0.14em; }
.sco-review-rail blockquote { margin-top: 1.1rem; color: var(--sco-ink); font-family: var(--sco-display); font-size: 1.35rem; line-height: 1.05; }
.sco-review-rail article > p { margin-top: 1.5rem; color: var(--sco-link); font-size: 0.72rem; font-weight: 800; }
.sco-faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); }
.sco-faq__heading h2 { max-width: 9ch; color: var(--sco-navy); }
.sco-faq__list,
.sco-faq-page__list { border-top: 2px solid var(--sco-navy); }
.sco-faq__list details,
.sco-faq-page__list details { border-bottom: 1px solid var(--sco-line); }
.sco-faq__list summary,
.sco-faq-page__list summary { position: relative; cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; color: var(--sco-navy); font-family: var(--sco-display); font-size: 1.35rem; line-height: 1; list-style: none; }
.sco-faq__list summary::-webkit-details-marker,
.sco-faq-page__list summary::-webkit-details-marker { display: none; }
.sco-faq__list summary::after,
.sco-faq-page__list summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.8rem; color: var(--sco-blue); font-family: var(--sco-body); font-size: 1.5rem; transition: transform 0.18s ease; }
.sco-faq__list details[open] summary::after,
.sco-faq-page__list details[open] summary::after { transform: rotate(45deg); }
.sco-faq__list details > p,
.sco-faq-page__list details > p { max-width: 62ch; padding: 0 0 1.1rem; color: #5d6870; font-size: 0.94rem; }
.sco-faq__list a,
.sco-faq-page__list a { color: var(--sco-navy); font-weight: 800; }
.sco-cta { background: var(--sco-navy); color: #fff; }
.sco-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 7vw, 6rem) 0; }
.sco-cta h2 { max-width: 12ch; color: #fff; }
.sco-cta__inner > div:first-child > p:last-child { margin-top: 0.9rem; max-width: 42ch; color: rgba(255,255,255,0.82); }
.sco-cta__actions { justify-content: end; margin-top: 0; }
.sco-note-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(3rem, 6vw, 5rem) max(1rem, calc((100% - 1280px) / 2)); background: var(--sco-lime); color: #000; }
.sco-note-band h2 { color: #000; }
.sco-note-band p:not(.sco-kicker) { margin-top: 0.7rem; max-width: 54ch; color: rgba(0,0,0,0.7); }

/* Inner route hero, filter, catalogue and quote booking */
.sco-inner-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 30rem; align-items: stretch; }
.sco-inner-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(3rem, 7vw, 7rem) max(1.25rem, calc((100vw - 1280px) / 2)); padding-right: clamp(2rem, 6vw, 7rem); }
.sco-inner-hero__copy h1 { max-width: 8ch; color: var(--sco-navy); }
.sco-inner-hero__copy > p:not(.sco-kicker) { margin-top: 1rem; max-width: 48ch; color: #5d6870; }
.sco-inner-hero__copy .sco-btn { margin-top: 1.5rem; }
.sco-inner-hero__image { min-height: 30rem; margin: 0; overflow: hidden; background: var(--sco-sky); }
.sco-inner-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.sco-inner-hero--blue { background: var(--sco-sky); }
.sco-inner-hero--blue .sco-inner-hero__copy { background: var(--sco-sky); }
.sco-inner-hero--quote { background: var(--sco-yellow); }
.sco-inner-hero--quote .sco-inner-hero__copy { background: var(--sco-yellow); }
.sco-inner-hero--faq { background: var(--sco-paper); }
.sco-inner-hero--faq .sco-inner-hero__copy { background: var(--sco-paper); }
.sco-filter-panel { background: var(--sco-lime); }
.sco-filter-panel__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: end; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
.sco-filter-panel h2 { max-width: 9ch; color: #000; }
.sco-filter-panel form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.8rem; align-items: end; }
.sco-filter-panel .sco-field label { color: #000; }
.sco-filter-panel .sco-field select { background: rgba(255,255,255,0.55); border-color: #000; }
.sco-filter-count { color: var(--sco-navy); font-size: 0.9rem; font-weight: 900; }
.sco-catalog { padding-top: 4.5rem; }
.sco-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sco-catalog-card { display: flex; min-width: 0; flex-direction: column; background: var(--sco-paper); }
.sco-catalog-card[hidden] { display: none !important; }
.sco-catalog-card:nth-child(3n + 2),
.sco-catalog-card:nth-child(3n + 3) { background: var(--sco-blue); color: #fff; }
.sco-catalog-card figure { position: relative; aspect-ratio: 1.25 / 0.86; margin: 0; overflow: hidden; }
.sco-catalog-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.sco-catalog-card:hover figure img,
.sco-catalog-card:focus-within figure img { transform: scale(1.06); }
.sco-catalog-card figure span { position: absolute; top: 0.8rem; left: 0.8rem; padding: 0.28rem 0.45rem; background: var(--sco-lime); color: #000; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.sco-catalog-card > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.sco-catalog-card h3 { color: var(--sco-navy); }
.sco-catalog-card:nth-child(3n + 2) h3,
.sco-catalog-card:nth-child(3n + 3) h3 { color: #fff; }
.sco-catalog-card p { margin-top: 0.55rem; color: #5d6870; font-size: 0.85rem; }
.sco-catalog-card:nth-child(3n + 2) p,
.sco-catalog-card:nth-child(3n + 3) p { color: rgba(255,255,255,0.86); }
.sco-catalog-card a { margin-top: auto; padding-top: 1rem; color: var(--sco-link); font-size: 0.74rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.sco-catalog-card:nth-child(3n + 2) a,
.sco-catalog-card:nth-child(3n + 3) a { color: var(--sco-lime); }
.sco-filter-empty { margin-top: 2rem; padding: 1rem; background: var(--sco-sky); color: var(--sco-navy); font-weight: 800; }
.sco-note { margin-top: 1.2rem; color: #69747d; font-size: 0.78rem; }
.sco-note a { color: var(--sco-navy); font-weight: 900; }
.sco-quote-page { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.sco-quote-page__aside { position: sticky; top: 1.5rem; }
.sco-quote-page__aside h2 { max-width: 8ch; color: var(--sco-navy); }
.sco-quote-page__aside > p:not(.sco-kicker) { margin-top: 1rem; color: #5d6870; }
.sco-quote-checks { display: grid; gap: 0.6rem; margin-top: 1.8rem; }
.sco-quote-checks li { display: flex; align-items: center; gap: 0.7rem; color: var(--sco-navy); font-size: 0.84rem; font-weight: 800; }
.sco-quote-checks b { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; background: var(--sco-lime); color: #000; }
.sco-booking { background: var(--sco-sky); }
.sco-booking__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1rem; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.sco-booking__heading { grid-column: 1 / -1; max-width: 45rem; margin-bottom: 2rem; }
.sco-booking__heading h2 { max-width: 13ch; color: var(--sco-navy); }
.sco-booking__heading > p:not(.sco-kicker) { margin-top: 0.9rem; color: #5d6870; }
.sco-booking-brief { align-self: start; padding: 1.5rem; background: var(--sco-navy); color: #fff; }
.sco-booking-brief__label { color: var(--sco-lime); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.sco-booking-brief h3 { margin-top: 0.85rem; color: #fff; font-size: 1.8rem; }
.sco-booking-brief > p { margin-top: 0.7rem; color: rgba(255,255,255,0.82); font-size: 0.85rem; }
.sco-booking-brief__row { display: grid; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.25); }
.sco-booking-brief__row span { color: rgba(255,255,255,0.88); font-size: 0.8rem; }
.sco-booking-brief__row strong { color: var(--sco-lime); font-family: var(--sco-display); font-size: 2.2rem; line-height: 0.9; }
.sco-book-form { display: grid; gap: 1rem; padding: 1.5rem; background: #fff; }
.sco-book-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sco-field--wide { grid-column: 1 / -1; }
.sco-book-form .sco-field input,
.sco-book-form .sco-field select,
.sco-book-form .sco-field textarea { background: var(--sco-sky); }
.sco-form-attachment { padding: 0.8rem 1rem; background: var(--sco-lime); color: #000; font-size: 0.8rem; }
.sco-check-label { color: #52616b; font-size: 0.78rem; }
.sco-form-status { color: var(--sco-navy); font-size: 0.78rem; font-weight: 800; }
.sco-booking-success { grid-column: 1 / -1; padding: 1.5rem; background: #fff; border-left: 6px solid var(--sco-blue); }
.sco-booking-success > span { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--sco-lime); color: #000; font-weight: 900; }
.sco-booking-success h3 { margin-top: 0.8rem; color: var(--sco-navy); }
.sco-booking-success p { margin-top: 0.5rem; color: #5d6870; }
.sco-faq-page { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.sco-faq-page__intro { position: sticky; top: 1.5rem; }
.sco-faq-page__intro h2 { max-width: 9ch; color: var(--sco-navy); }
.sco-faq-page__intro > p:not(.sco-kicker) { margin-top: 1rem; color: #5d6870; }
.sco-faq-page__callout { display: grid; gap: 0.45rem; margin-top: 2rem; padding: 1rem; border-left: 5px solid var(--sco-lime); background: var(--sco-paper); }
.sco-faq-page__callout strong { color: var(--sco-navy); }
.sco-faq-page__callout span { color: #5d6870; font-size: 0.8rem; }
.sco-faq-page__callout a { color: var(--sco-navy); font-size: 0.76rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }

/* Deep footer with BusyBee-inspired skyline and the library payment cue */
.sco-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #1b95ed 0%, #73c5f2 100%); color: #fff; }
.sco-footer__skyline { display: flex; height: 3.5rem; align-items: end; justify-content: space-around; gap: 0.4rem; padding: 0 3%; background: rgba(255,255,255,0.22); clip-path: polygon(0 68%, 2% 30%, 4% 65%, 8% 12%, 10% 60%, 15% 28%, 17% 68%, 22% 18%, 24% 62%, 30% 32%, 34% 70%, 39% 15%, 43% 65%, 49% 27%, 52% 70%, 58% 16%, 61% 63%, 67% 26%, 72% 69%, 77% 20%, 81% 63%, 87% 28%, 90% 70%, 95% 12%, 100% 62%, 100% 100%, 0 100%); }
.sco-footer__skyline span { display: block; width: clamp(1.2rem, 4vw, 4rem); height: 40%; background: rgba(255,255,255,0.8); }
.sco-footer__skyline span:nth-child(2) { height: 70%; }
.sco-footer__skyline span:nth-child(4) { height: 52%; }
.sco-footer__skyline span:nth-child(6) { height: 80%; }
.sco-footer__inner { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0; }
.sco-footer .sco-brand { color: #fff; }
.sco-footer .sco-brand__mark { box-shadow: none; }
.sco-footer__brand > p { margin-top: 1rem; max-width: 28ch; color: rgba(255,255,255,0.9); font-size: 0.84rem; }
.sco-footer__fiction { color: rgba(255,255,255,0.72) !important; font-size: 0.7rem !important; }
.sco-footer__inner h3 { margin-bottom: 0.8rem; color: var(--sco-lime); font-family: var(--sco-body); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; }
.sco-footer__inner a,
.sco-footer__inner p { display: block; margin-top: 0.42rem; color: rgba(255,255,255,0.9); font-size: 0.82rem; text-decoration: none; }
.sco-footer__inner a:hover,
.sco-footer__inner a:focus-visible { color: var(--sco-lime); }
.sco-footer__social { margin-top: 1.2rem !important; color: var(--sco-lime) !important; font-size: 0.7rem !important; font-weight: 900; }
.sco-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 1.4rem; border-top: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.82); font-size: 0.7rem; }
.sco-payments { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.sco-payments b { padding: 0.28rem 0.38rem; border: 1px solid rgba(255,255,255,0.55); color: #fff; font-size: 0.58rem; letter-spacing: 0.04em; }

/* One-shot and scroll-linked motion. The JS observer makes the fallback deterministic; reduced motion
   never leaves content hidden and never runs an idle loop. */
.sco-motion-ready [data-sco-reveal] { opacity: 0; transform: translateY(1.2rem); clip-path: inset(0 0 5% 0); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1), clip-path 0.7s ease; }
.sco-motion-ready [data-sco-reveal].sco-is-visible { opacity: 1; transform: none; clip-path: inset(0); }
.sco-motion-ready .sco-service-card:nth-child(3n + 2),
.sco-motion-ready .sco-trust-grid > div:nth-child(3n + 2),
.sco-motion-ready .sco-review-rail article:nth-child(3n + 2) { transition-delay: 0.08s; }
.sco-motion-ready .sco-service-card:nth-child(3n + 3),
.sco-motion-ready .sco-trust-grid > div:nth-child(3n + 3),
.sco-motion-ready .sco-review-rail article:nth-child(3n + 3) { transition-delay: 0.16s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sco-gallery-tile img { animation: sco-image-drift linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    .sco-job img { animation: sco-image-drift linear both; animation-timeline: view(); animation-range: entry 2% cover 30%; }
  }
}
@keyframes sco-image-drift { from { transform: scale(1.08) translateY(-1.5%); } to { transform: scale(1) translateY(1.5%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sco-page *,
  .sco-page *::before,
  .sco-page *::after { animation: none !important; transition: none !important; }
  .sco-hero__image { transform: none; }
  .sco-motion-ready [data-sco-reveal] { opacity: 1; transform: none; clip-path: none; }
}

/* Responsive composition */
@media (max-width: 1040px) {
  .sco-header__note { display: none; }
  .sco-service-grid,
  .sco-catalog-grid { gap: 1.1rem; }
  .sco-quote-band { grid-template-columns: 1fr 1.25fr; gap: 2rem; }
  .sco-footer__inner { gap: 1.4rem; }
}
@media (max-width: 820px) {
  .sco-utility { grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; }
  .sco-utility strong { display: none; }
  .sco-utility span:last-child { text-align: right; }
  .sco-header { min-height: 4.8rem; }
  .sco-nav.nav-inline nav { position: absolute; top: calc(100% - 0.3rem); right: 1rem; min-width: 15rem; flex-direction: column; align-items: stretch; padding: 0.75rem; background: #fff; border: 1px solid var(--sco-line); border-radius: var(--sco-radius); box-shadow: 0 20px 45px rgba(7,49,99,0.2); }
  .sco-nav.nav-inline summary { display: block; }
  .sco-header--hero .sco-nav.nav-inline nav a:not(.sco-nav__cta) { color: var(--sco-navy); }
  .sco-hero { min-height: 48rem; }
  .sco-hero__content { width: min(100% - 2rem, 40rem); padding-top: 8rem; }
  .sco-hero__edge { display: none; }
  .sco-hero__panel { margin: 2rem 0 0 auto; }
  .sco-section__head,
  .sco-reviews__head { display: grid; gap: 1rem; }
  .sco-service-grid,
  .sco-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sco-quote-band,
  .sco-why__grid,
  .sco-process__inner,
  .sco-coverage,
  .sco-story__inner,
  .sco-faq,
  .sco-quote-page,
  .sco-faq-page,
  .sco-booking__inner { grid-template-columns: 1fr; }
  .sco-quote-band { padding-right: 1rem; padding-left: 1rem; }
  .sco-quote-band__copy h2 { max-width: 14ch; }
  .sco-process__steps { gap: 1rem; }
  .sco-coverage__copy,
  .sco-quote-page__aside,
  .sco-faq-page__intro { position: static; }
  .sco-inner-hero { grid-template-columns: 1fr; }
  .sco-inner-hero__copy { padding: 4rem 1rem; }
  .sco-inner-hero__image { min-height: 24rem; max-height: 28rem; }
  .sco-filter-panel__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .sco-booking__heading { grid-column: auto; }
  .sco-booking-brief,
  .sco-book-form { grid-column: auto; }
  .sco-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .sco-footer__inner > div:last-child { grid-column: 2 / -1; }
}
@media (min-width: 621px) and (max-width: 820px) {
  /* Keep the stamped mosaic detail inside the measured tablet canvas. The rotated desktop-sized
     stamp was the only settled 768px overflow: 776px content in a 768px viewport. */
  .sco-mosaic__stamp { right: 0.4rem; width: 5.5rem; height: 5.5rem; font-size: 0.86rem; }
}
@media (max-width: 620px) {
  .sco-utility { font-size: 0.58rem; }
  .sco-header { padding-right: 1rem; padding-left: 1rem; }
  .sco-brand__name { font-size: 1.5rem; }
  .sco-brand__mark { width: 2.35rem; height: 2.35rem; }
  .sco-hero { min-height: 43rem; }
  .sco-hero__image { object-position: 33% 45%; }
  .sco-hero__veil { background: linear-gradient(180deg, rgba(7,42,91,0.15), rgba(7,42,91,0.86) 55%, rgba(7,42,91,0.97)); }
  .sco-hero__content { width: calc(100% - 1.5rem); padding-bottom: 4.5rem; }
  .sco-hero__panel { padding: 1.5rem; }
  .sco-hero__panel h1 { max-width: 11.5ch; font-size: clamp(2.65rem, 11vw, 4.2rem); line-height: .94; }
  .sco-hero__panel > p:not(.sco-kicker) { font-size: 0.92rem; }
  .sco-hero__actions { display: grid; }
  .sco-hero__actions .sco-btn { width: 100%; }
  .sco-hero__scroll { width: max-content; font-size: 0.58rem; }
  .sco-section { width: calc(100% - 1.5rem); padding: 3.7rem 0; }
  .sco-section__head { margin-bottom: 2rem; }
  .sco-service-grid,
  .sco-catalog-grid { grid-template-columns: 1fr; }
  .sco-service-card figure { aspect-ratio: 1.38 / 1; }
  .sco-quote-band { grid-template-columns: 1fr; padding-top: 3.7rem; padding-bottom: 3.7rem; }
  .sco-estimator--hero,
  .sco-estimator--page { padding: 1rem; }
  .sco-estimator__controls,
  .sco-reasons,
  .sco-book-form__grid { grid-template-columns: 1fr; }
  .sco-extras > div { display: grid; }
  .sco-mosaic { gap: 0.5rem; }
  .sco-mosaic__stamp { right: -0.3rem; width: 5.1rem; height: 5.1rem; font-size: 0.8rem; }
  .sco-trust-band__inner { width: calc(100% - 1.5rem); padding-top: 3.7rem; }
  .sco-trust-grid,
  .sco-trust-grid--four { grid-template-columns: 1fr 1fr; gap: 1rem 0.4rem; margin-top: 2.5rem; }
  .sco-trust-grid > div { min-height: 7rem; padding: 0 0.25rem; }
  .sco-trust-grid strong { font-size: 0.75rem; }
  .sco-trust-grid small { font-size: 0.66rem; }
  .sco-process__inner { width: calc(100% - 1.5rem); padding: 3.7rem 0; }
  .sco-process__steps { grid-template-columns: 1fr; gap: 1.3rem; }
  .sco-process__steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.45rem; }
  .sco-process__steps li > span { grid-row: span 2; }
  .sco-process__steps strong { margin-top: 0; }
  .sco-process__steps p { grid-column: 2; margin-top: 0; }
  .sco-area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sco-coverage__gallery { min-height: 28rem; }
  .sco-gallery-tile { min-height: 8rem; }
  .sco-jobs-grid { grid-template-columns: 1fr 1fr; }
  .sco-job,
  .sco-job--wide { grid-column: span 1; min-height: 14rem; }
  .sco-job:nth-child(1),
  .sco-job:nth-child(5) { grid-column: 1 / -1; }
  .sco-job img { min-height: 14rem; }
  .sco-job figcaption { font-size: 1rem; }
  .sco-review-rail { grid-template-columns: 1fr; }
  .sco-review-rail article { min-height: 0; }
  .sco-faq__list summary,
  .sco-faq-page__list summary { font-size: 1.15rem; }
  .sco-cta__inner { grid-template-columns: 1fr; width: calc(100% - 1.5rem); padding: 3.7rem 0; }
  .sco-cta__actions { display: grid; justify-content: stretch; }
  .sco-cta__actions .sco-btn { width: 100%; }
  .sco-note-band { display: grid; padding-right: 0.75rem; padding-left: 0.75rem; }
  .sco-note-band .sco-btn { justify-self: start; }
  .sco-inner-hero__copy { padding-right: 0.75rem; padding-left: 0.75rem; }
  .sco-filter-panel__inner,
  .sco-booking__inner { width: calc(100% - 1.5rem); }
  .sco-filter-panel form { grid-template-columns: 1fr; }
  .sco-booking__inner { padding: 3.7rem 0; }
  .sco-book-form { padding: 1rem; }
  .sco-footer__inner { grid-template-columns: 1fr 1fr; width: calc(100% - 1.5rem); padding: 3rem 0; }
  .sco-footer__brand { grid-column: 1 / -1; }
  .sco-footer__inner > div:last-child { grid-column: auto; }
  .sco-footer__bottom { width: calc(100% - 1.5rem); align-items: flex-start; flex-direction: column; }
}
.sco-hero__panel h1 .hero-title-tail { white-space:nowrap; }
@media (max-width:620px) { .sco-hero__panel h1 .hero-title-tail { white-space:normal; } }