/* ==========================================================================
   LooneyTech — site components
   Builds on tokens.css. Load tokens.css first.
   ========================================================================== */

/* ---------- Layout helpers ---------- */
.section { padding: var(--section-gap) 0; }
.section--tight { padding: 64px 0; }
.section--surface { background: var(--surface); }

.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }

.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head p { margin-top: 14px; color: var(--ink-body); font-size: 18px; }
.section-head--left { margin-left: 0; text-align: left; }

.lede { font-size: var(--lede-size); line-height: var(--lede-lh); color: var(--ink-body); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: 18px;
  height: 88px;
}
/* The logo is a flex item in a crowded header, so it MUST NOT shrink.
   Without `flex: 0 0 auto` the anchor gets squeezed by the nav, and the
   global `img { max-width: 100% }` then clamps the image's width while its
   explicit height holds — painting the 4.196 logo at 68x34 instead of
   143x34, a 2.1x horizontal squash. `max-width: none` closes the same hole
   from the other side. Both are load-bearing; do not "tidy" either away.
   Sized to match the Webflow build, which paints it 190x45. */
.site-logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-logo img { height: 40px; width: auto; max-width: none; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* :not(.btn) so these never override .btn colour/type — a plain
   `.site-nav a` rule outranks `.btn--primary` on specificity and renders
   the header CTA as navy-on-navy. */
.site-nav a:not(.btn) {
  font-family: var(--font-body);
  font-weight: 500; font-size: 15.5px;
  color: var(--ink); text-decoration: none;
  padding: 9px 8px; border-radius: 8px;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { background: var(--surface); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--accent-ink); }
.site-header .btn { padding: 12px 17px; font-size: 14px; white-space: nowrap; margin-left: 8px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; color: var(--ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
}

/* Raised from 1140px when the logo grew to its correct size. Seven nav
   links plus a CTA and a 168px logo need ~1200px; below that the desktop
   nav overflowed the viewport and caused horizontal scroll. */
@media (max-width: 1200px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 88px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ground); border-bottom: 1px solid var(--border);
    padding: 14px 24px 22px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 12px; }
  .site-nav .btn { text-align: center; margin-top: 8px; }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Character stage: lilac blob + floating badge chips */
.stage { position: relative; display: flex; justify-content: center;
         max-width: 440px; margin-inline: auto; width: 100%; }
/* A TRUE CIRCLE, enforced by aspect-ratio, not an organic oval.
   The mascots are not distorted — measured, they paint at their exact
   natural ratio. What read as "stretched" was this shape: an oval sized off
   the stage box widened with the character behind it, so the silhouette
   looked broader than it is. A circle cannot read as stretched at any
   viewport, which is the whole point. Do not reintroduce percentage insets
   here; they re-derive the shape from the image's aspect ratio. */
.stage__blob {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 88%; aspect-ratio: 1;
  transform: translate(-50%, -48%);
  background: color-mix(in srgb, var(--primary-blue) 22%, transparent);
  border-radius: 50%;
}
.stage img { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.stage__chip {
  position: absolute; z-index: 2; width: 74px; height: 74px;
  background: var(--ground); border-radius: 18px;
  display: grid; place-items: center;
  box-shadow: 0 6px 0 var(--chip-edge, var(--primary-blue)),
              0 10px 26px rgba(5, 0, 56, 0.14);
}
.stage__chip img { width: 40px; height: 40px; max-width: none; }
.stage__chip--tr { top: 2%; right: 2%; transform: rotate(5deg); --chip-edge: var(--primary-blue); }
.stage__chip--bl { bottom: 22%; left: -2%; transform: rotate(-7deg); --chip-edge: var(--playful-yellow); }

@media (max-width: 900px) {
  .hero { padding: 44px 0 56px; }
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .stage { order: -1; }
  .stage { max-width: 300px; }
  .stage img { max-width: 300px; }
  .stage__chip { width: 58px; height: 58px; border-radius: 15px; }
  .stage__chip img { width: 30px; height: 30px; }
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent);
  padding: 8px 16px; border-radius: var(--r-pill);
}
.eyebrow--purple { color: var(--primary-blue); background: color-mix(in srgb, var(--primary-blue) 14%, transparent); }
.eyebrow--green  { color: var(--lemon-green-deep); background: color-mix(in srgb, var(--lemon-green) 26%, transparent); }

/* ---------- Service cards (the 1-2-3 row) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.svc-card__img { height: 210px; display: grid; place-items: center; margin-bottom: 6px; }
.svc-card__img img { max-height: 210px; width: auto; }
.svc-card h3 { font-size: 26px; }
.svc-card p { color: var(--ink-body); font-size: 16px; }
.svc-card__price {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.svc-card .btn { margin-top: 12px; }

/* Icon chip inside .feature__dot — sized by the SVG, not a number glyph */
.feature__dot svg { display: block; }

@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; gap: 20px; } }

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

.feature { background: var(--surface); border-radius: var(--r-card); padding: 30px 26px; }
.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { font-size: 15.5px; color: var(--ink-body); line-height: 1.6; }
/* min-width, not width. These hold three different kinds of content: an SVG
   on the homepage, a two-digit number on Agents, and a price on Care. A fixed
   42px fitted the first two and clipped "+£10" into a torn-looking shape,
   because four characters at 19px do not fit. Now it stays square for icons
   and short labels and grows for longer ones. */
.feature__dot {
  min-width: 42px; height: 42px; padding: 0 11px;
  border-radius: 12px; margin-bottom: 18px;
  display: inline-grid; place-items: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  background: var(--accent);
  color: var(--on-accent);
}
.feature__dot--purple { background: var(--primary-blue); color: #fff; }
.feature__dot--green  { background: var(--lemon-green); color: #fff; }
.feature__dot--navy   { background: var(--dark); color: var(--ground); }

@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checklist li {
  position: relative; padding-left: 34px;
  font-size: 16.5px; color: var(--ink-body); line-height: 1.55;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 21px; height: 21px; border-radius: 7px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.8'/%3E%3C/svg%3E") center/78% no-repeat,
          linear-gradient(#000 0 0);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.8'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step { background: var(--surface); border-radius: var(--r-card); padding: 30px 26px; }
.step__n {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: #fff; background: var(--dark);
  border-radius: var(--r-num); padding: 4px 12px; margin-bottom: 16px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--ink-body); }
@media (max-width: 900px) { .steps, .steps--4 { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
/* A grid holding ONE card must not give it a third of the width. The Audit
   page has a single tier inside a 420px wrapper, which left the card ~140px
   wide and wrapped its description into a column of two-word lines. */
.price-grid:has(> .price-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.price-card {
  background: var(--surface); border-radius: var(--r-card);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 16px;
  border: 2px solid transparent;
}
.price-card--feature { border-color: var(--accent); background: var(--ground); box-shadow: 0 16px 44px rgba(5,0,56,0.09); }
.price-card__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); }
.price-card__fig {
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.price-card__unit { font-size: 13.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.price-card__desc { font-size: 15.5px; color: var(--ink-body); }
.price-card .btn { margin-top: auto; text-align: center; }
.price-card .checklist li { font-size: 15px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--narrow-img { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 900px) { .split, .split--narrow-img { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat__fig { font-family: var(--font-display); font-weight: 700; font-size: 46px; color: var(--accent-ink); line-height: 1.1; }
.stat p { font-size: 15.5px; color: var(--ink-body); margin-top: 6px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- FAQ ---------- */
/* Two columns of outlined cards with a circled +/−, and a hard offset shadow
   on the open one. Fills the width instead of a narrow single stack, and the
   outline reads as a control rather than as another grey panel. */
.faq {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px; align-items: start; max-width: none; margin: 0;
}
.faq details {
  background: var(--ground);
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 20px 24px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details:hover { border-color: var(--ink); }
.faq details[open] { border-color: var(--ink); box-shadow: 5px 6px 0 var(--ink); }
.faq summary {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--ink); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--ink);
  display: grid; place-items: center;
  font-size: 17px; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.faq details p { margin-top: 14px; font-size: 16px; color: var(--ink-body); }

@media (max-width: 820px) { .faq { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
/* Full-bleed, in the PAGE ACCENT. It was a contained navy box on every page,
   which read as the same dead slab four times over. Now each service page's
   closing band carries its own colour, edge to edge, with navy organic shapes
   bleeding off both sides.

   The sub-line is 20px/600 deliberately. White on the accents runs 3.42
   (Flex green) to 6.10 (Agents slate) — fine at the 3:1 large-text threshold,
   short of the 4.5:1 body threshold. 20px at 600 IS large text by WCAG, so
   this passes. Shrinking it or lightening the weight breaks that; darkening
   the accent to compensate is the "wrong orange" mistake and is not an
   option. */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--accent);
  padding: 88px 0 92px; text-align: center;
  margin-top: var(--section-gap);
}
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta-band h2 { color: #fff; max-width: 20ch; font-size: clamp(34px, 4.4vw, 54px); }
.cta-band p {
  color: #fff; font-size: 20px; font-weight: 600; line-height: 1.45; max-width: 46ch;
}
.cta-band .btn--primary { background: var(--dark); color: #fff; }
.cta-band .btn--ghost { background: #fff; color: var(--dark); box-shadow: none; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.88); }

.cta-band__decor { position: absolute; top: 0; height: 100%; z-index: 0; fill: var(--dark); }
.cta-band__decor--stroke { fill: none; stroke: var(--dark); }
.cta-band__decor--l { left: 0;  width: min(15vw, 190px); }
.cta-band__decor--r { right: 0; width: min(13vw, 165px); }
/* Keep the text column clear of the shapes at every width. */
.cta-band__inner { padding-left: max(24px, 17vw); padding-right: max(24px, 17vw); }

.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 760px) {
  .cta-band { padding: 60px 0 64px; }
  .cta-band p { font-size: 18.5px; }
  /* The shapes eat the text column on narrow screens. */
  /* Hidden, not faded. Narrow enough that the text spans the full width, so
     any shape sits behind it — and a translucent navy over orange goes muddy
     brown, which reads as a rendering fault rather than decoration. The
     full-bleed colour carries the band on its own at this size. */
  .cta-band__decor { display: none; }
  .cta-band__inner { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); padding: 72px 0 34px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--ink-body); text-decoration: none; font-size: 15.5px; }
.site-footer a:hover { color: var(--red); }
.site-footer img.footer-logo { height: 40px; width: auto; max-width: none; margin-bottom: 20px; }
.footer-contact { font-size: 15.5px; color: var(--ink-body); line-height: 1.7; }
.footer-bottom {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--ink-muted);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
#contact-form label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
#contact-form input,
#contact-form textarea {
  font: inherit;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  width: 100%;
}
#contact-form textarea { resize: vertical; }
#contact-form input:focus-visible,
#contact-form textarea:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 1px;
  border-color: transparent;
}
#contact-form input:user-invalid,
#contact-form textarea:user-invalid { border-color: var(--red); }
#contact-form .muted a { color: var(--accent-ink); font-weight: 600; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
#contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
}
.form-status.is-ok {
  color: #3f5c0c;
  background: color-mix(in srgb, var(--lemon-green) 26%, transparent);
}
.form-status.is-error {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.muted { color: var(--ink-muted); font-size: 14.5px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
a.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dark); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
a.skip-link:focus { left: 0; }

/* Quiet secondary for hero pairs — keeps the primary unmistakably primary.
   Used where the secondary is a low-commitment in-page jump rather than a
   competing product. */
.btn--ghost-ink {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--border);
}
.btn--ghost-ink:hover { background: var(--surface); opacity: 1; }

/* Inline accent link — replaces hardcoded var(--red) inline styles so links
   follow the page theme like everything else. */
.link-accent { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

/* ---------- Legal pages ---------- */
.container.narrow { max-width: 820px; }
.legal-hero { padding-bottom: 32px; }
.legal-title { font-size: clamp(32px, 4.4vw, 46px); }
.legal-banner { border-left: 4px solid var(--accent); margin-bottom: 40px; }
.legal-body { padding-top: 0; }
.legal-section { margin-bottom: 36px; }

/* The dark logo variant is never shown — the site is light-only. It stays
   in the markup so the asset is available if a dark surface ever needs it. */
.logo-dark { display: none; }

/* ---------- Hero promises strip ----------
   Adjective + hard number under the headline. Kept to three: a fourth reads as
   a feature list and the pattern loses its punch. */
.promises {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.promises li { display: flex; flex-direction: column; gap: 2px; }
.promises strong {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  color: var(--accent-ink); line-height: 1.15;
}
.promises span { font-size: 14.5px; color: var(--ink-muted); }
@media (max-width: 560px) { .promises { gap: 14px 22px; } .promises strong { font-size: 19px; } }

/* ---------- Testimonials ----------
   Styled and ready. The component is defined in build.py but deliberately not
   rendered until real, permissioned quotes exist. */
.quote {
  margin: 0; background: var(--ground); border-radius: var(--r-card);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--border);
}
.quote blockquote {
  margin: 0; padding: 0; background: none; border: none;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-body);
}
.quote blockquote::before { content: "\201C"; color: var(--accent); font-weight: 700; }
.quote blockquote::after  { content: "\201D"; color: var(--accent); font-weight: 700; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.quote figcaption strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.quote figcaption span { font-size: 14px; color: var(--ink-muted); }

/* Plan confirmation above the contact form when arriving from a pricing card. */
.form-plan {
  max-width: 620px; margin: 0 auto 24px;
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 14px 18px;
  font-size: 15.5px; color: var(--ink-body);
}
.form-plan strong { color: var(--ink); }

/* ==========================================================================
   Workspace Health Check (free self-assessment)
   ========================================================================== */
.assessment { max-width: 720px; margin: 0 auto; min-height: 420px; }

.as-bar {
  height: 6px; background: var(--border); border-radius: 40px;
  overflow: hidden; margin-bottom: 26px;
}
.as-bar span {
  display: block; height: 100%; background: var(--accent);
  border-radius: 40px; transition: width 0.25s ease;
}
.as-bar--sm { height: 5px; margin: 10px 0 12px; }

.as-meta {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 10px;
}
.as-q { font-size: 28px; font-weight: 600; margin-bottom: 26px; }

.as-opts { display: grid; gap: 10px; }
.as-opt {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--ground); color: var(--ink-body);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 17px 20px; transition: border-color 0.14s ease, background 0.14s ease;
}
.as-opt:hover { border-color: var(--accent); background: var(--surface); }
.as-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.as-opt.is-selected { border-color: var(--accent); background: var(--surface); }

.as-nav { margin-top: 26px; display: flex; justify-content: flex-start; }
.as-nav .btn { padding: 12px 22px; font-size: 14px; }

/* ---- results ---- */
.as-result { text-align: center; margin-bottom: 40px; }
.as-score { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 16px; }
.as-score strong {
  font-family: var(--font-display); font-weight: 700; font-size: 72px;
  line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.as-score span {
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink);
}
.as-note { color: var(--ink-body); max-width: 54ch; margin: 0 auto; }

.as-rows { display: grid; gap: 16px; }
.as-row { background: var(--surface); border-radius: var(--r-card); padding: 22px 24px; }
.as-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.as-row h3 { font-size: 17px; }
.as-pct {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.as-advice { font-size: 15px; color: var(--ink-body); line-height: 1.55; }

.as-cta {
  margin-top: 34px; background: var(--dark); border-radius: var(--r-card);
  padding: 34px 32px; color: rgba(255,255,255,0.85);
}
.as-cta h3 { color: #fff; font-size: 21px; margin-bottom: 12px; }
.as-cta p { font-size: 15.5px; }
.as-cta .btn--primary { background: #fff; color: var(--dark); }
.as-cta .btn--ghost-ink { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }

.as-restart { text-align: center; margin-top: 22px; }
.as-link {
  background: none; border: none; font: inherit; cursor: pointer;
  color: var(--ink-muted); text-decoration: underline;
}

@media (max-width: 560px) {
  .as-q { font-size: 22px; }
  .as-score strong { font-size: 56px; }
  .as-cta { padding: 26px 22px; }
}

/* Health check: recommended next steps + maturity plan capture */
.as-next { margin-top: 32px; }
.as-next h3 { font-size: 19px; margin-bottom: 14px; }
.as-recs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.as-recs li {
  background: var(--surface); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.as-recs a { color: var(--accent-ink); text-decoration: none; font-size: 16.5px; }
.as-recs a:hover { text-decoration: underline; }
.as-recs span { font-size: 15px; color: var(--ink-body); }

.as-plan {
  margin-top: 32px; background: var(--dark); border-radius: var(--r-card);
  padding: 34px 32px; color: rgba(255,255,255,0.85);
}
.as-plan h3 { color: #fff; font-size: 21px; margin-bottom: 10px; }
.as-plan > p { font-size: 15.5px; margin-bottom: 22px; }
.as-plan form { max-width: 460px; }
.as-plan label { font-weight: 600; font-size: 15px; color: #fff; }
.as-plan input {
  font: inherit; width: 100%; padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #fff;
}
.as-plan input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-plan .muted { color: rgba(255,255,255,0.6); }
.as-plan .muted a { color: #fff; text-decoration: underline; }
.as-plan .btn--primary { background: #fff; color: var(--dark); justify-self: start; }
.as-plan .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .as-plan { padding: 26px 22px; } }

/* Agent running-fee tiers */
.run-tiers div {
  background: var(--ground); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.run-tiers strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.run-tiers span { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--accent-ink); }

/* Assessment gate warning: shown when a critical dimension is weak despite a
   decent overall score. Deliberately prominent — it overrides the headline. */
.as-gate {
  margin-top: 32px; background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0;
  padding: 22px 24px;
}
.as-gate h3 { font-size: 18px; margin-bottom: 8px; }
.as-gate p { font-size: 15.5px; color: var(--ink-body); }

/* ==========================================================================
   Build your quote
   ========================================================================== */
.quote { max-width: 900px; margin: 0 auto; }
.q-grid { display: grid; gap: 16px; }

.q-card {
  background: var(--surface); border: 2px solid transparent;
  border-radius: var(--r-card); padding: 26px 24px;
}
.q-card.is-picked { border-color: var(--accent); background: var(--ground); }
.q-card__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.q-card__head h3 { font-size: 20px; }
.q-card__head span { font-size: 14.5px; color: var(--ink-muted); }

.q-opts { display: grid; gap: 8px; }
.q-opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--ground); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.q-card.is-picked .q-opt { background: var(--surface); }
.q-opt:hover { border-color: var(--accent); }
.q-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.q-opt input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.q-opt__label { font-weight: 600; color: var(--ink); }
.q-opt__price {
  margin-left: auto; text-align: right; font-family: var(--font-display);
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.q-opt__price em { display: block; font-style: normal; font-family: var(--font-body);
  font-weight: 400; font-size: 12.5px; color: var(--ink-muted); }

.q-qty { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.q-qty label { font-weight: 600; color: var(--ink); font-size: 15px; }
.q-qty input {
  font: inherit; width: 96px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--ground); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.q-qty .muted { font-size: 13.5px; }

.q-addons { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.q-addons__title { font-weight: 600; color: var(--ink); font-size: 14.5px; margin-bottom: 10px; }
.q-add {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 0; font-size: 15px;
}
.q-add input { accent-color: var(--accent); width: 17px; height: 17px; }
.q-add__price { margin-left: auto; color: var(--ink-muted); font-size: 13.5px; }

.q-clear {
  margin-top: 16px; background: none; border: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink-muted);
  text-decoration: underline; cursor: pointer;
}

/* ---- summary ---- */
.q-summary {
  margin-top: 28px; background: var(--dark); border-radius: var(--r-card);
  padding: 30px 30px 34px; color: rgba(255,255,255,0.86);
}
.q-summary h3 { color: #fff; font-size: 20px; margin-bottom: 16px; }
.q-lines { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.q-lines li { display: flex; justify-content: space-between; gap: 20px; font-size: 15.5px; }
.q-lines strong {
  color: #fff; font-family: var(--font-display); text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.q-lines strong em { display: block; font-style: normal; font-family: var(--font-body);
  font-weight: 400; font-size: 12px; color: rgba(255,255,255,0.55); }
.q-empty { color: rgba(255,255,255,0.6); }

.q-totals { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 18px; display: grid; gap: 10px; }
.q-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.q-totals span { font-size: 15px; color: rgba(255,255,255,0.7); }
.q-totals strong {
  font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.q-year { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; margin-top: 4px; }
.q-year strong { font-size: 22px; color: #fff; }
.q-summary .muted { color: rgba(255,255,255,0.55); margin: 16px 0 20px; font-size: 13.5px; }
.q-summary .btn { text-decoration: none; }

/* ---- send ---- */
.q-send { margin-top: 28px; background: var(--surface); border-radius: var(--r-card); padding: 30px; }
.q-send h3 { font-size: 20px; margin-bottom: 8px; }
.q-send > p { font-size: 15.5px; color: var(--ink-body); margin-bottom: 22px; }
.q-send form { max-width: 460px; }
.q-send label { font-weight: 600; font-size: 15px; color: var(--ink); }
.q-send input, .q-send textarea {
  font: inherit; width: 100%; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--ground); color: var(--ink);
}
.q-send textarea { resize: vertical; }
.q-send input:focus-visible, .q-send textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.q-send .muted a { color: var(--accent-ink); font-weight: 600; }
.q-send .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.q-send button { justify-self: start; }

@media (max-width: 560px) {
  .q-opt { flex-wrap: wrap; }
  .q-opt__price { margin-left: 0; text-align: left; width: 100%; }
  .q-summary, .q-send { padding: 24px 20px; }
}

/* ---------- RAG scoring ----------
   The score and each area are coloured by what the number MEANS, not by the
   page accent. A high score in brand orange reads as a warning; that is the
   bug this fixes. Colour is never the only signal — the band label and the
   percentage are always present alongside. */
.as-score.is-critical strong { color: var(--rag-critical); }
.as-score.is-warning  strong { color: var(--rag-warning); }
.as-score.is-good     strong { color: var(--rag-good); }

.as-row.is-critical .as-pct { color: var(--rag-critical); }
.as-row.is-warning  .as-pct { color: var(--rag-warning); }
.as-row.is-good     .as-pct { color: var(--rag-good); }

.as-row.is-critical .as-bar span { background: var(--rag-critical); }
.as-row.is-warning  .as-bar span { background: var(--rag-warning); }
.as-row.is-good     .as-bar span { background: var(--rag-good); }

/* ---------- Device support checker ----------
   RAG here follows the same rule as the assessments: colour is never the only
   signal. Every row carries a written verdict ("Do not buy", "Too tight",
   "Safe to lease") and the support year, so the table is readable in
   greyscale, in forced-colours mode, and to anyone who cannot separate the
   red from the green. */
.dc-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: end;
  margin-bottom: 10px;
}
.dc-controls label { font-weight: 600; font-size: 15px; color: var(--ink); display: block; margin-bottom: 7px; }
.dc-controls input[type=search], .dc-controls select {
  font: inherit; width: 100%; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--ground); color: var(--ink);
}
.dc-controls input[type=search]:focus-visible, .dc-controls select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.dc-only { display: flex; align-items: center; gap: 9px; grid-column: 1 / -1; }
.dc-only label { margin: 0; font-weight: 500; }
.dc-only input { width: 18px; height: 18px; accent-color: var(--accent); }

.dc-tally {
  font-weight: 600; color: var(--ink);
  padding: 14px 18px; background: var(--surface);
  border-radius: 12px; margin-bottom: 20px;
}

.dc-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.dc-table th, .dc-table td { text-align: left; padding: 13px 14px; vertical-align: top; }
.dc-table thead th {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-body); border-bottom: 2px solid var(--border);
}
.dc-table tbody tr { border-bottom: 1px solid var(--border); }
.dc-table tbody th { font-weight: 600; color: var(--ink); }
.dc-year { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* The badge is a bordered chip, not a filled one. A filled chip would need
   white text on the RAG colours, and the warning amber cannot carry white at
   this size — see the note on .btn--accent in tokens.css. */
.dc-badge {
  display: inline-block; font-weight: 700; font-size: 14px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: inset 0 0 0 2px currentColor;
}
.dc-why { display: block; font-size: 14px; color: var(--ink-body); margin-top: 6px; line-height: 1.5; }

.dc-table tr.is-critical .dc-badge, .dc-table tr.is-critical .dc-year { color: var(--rag-critical); }
.dc-table tr.is-warning  .dc-badge, .dc-table tr.is-warning  .dc-year { color: var(--rag-warning); }
.dc-table tr.is-good     .dc-badge, .dc-table tr.is-good     .dc-year { color: var(--rag-good); }

.dc-empty { color: var(--ink-body); padding: 22px 4px; max-width: 62ch; }

.dc-scroll { overflow-x: auto; }

@media (max-width: 620px) {
  .dc-controls { grid-template-columns: 1fr; }
  .dc-table { font-size: 14.5px; }
  .dc-table th, .dc-table td { padding: 11px 9px; }
}

/* ---------- Contact hero ----------
   Taken from the Webflow build, which puts the whole contact hero on the navy
   ground with a white form card floating on it. Measured there: card radius
   20px, icon tiles 58px at radius 10px in orange / purple / green, fields 48px
   with the icon inset on the left. Kept the composition; radii and field
   styling follow our own tokens so the page doesn't read as a different site
   from the rest. */
.contact-hero {
  background: var(--dark);
  padding: 72px 0 88px;
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 56px;
  align-items: start;
}
.contact-hero h1,
.contact-hero .lede { color: #fff; }
.contact-hero .lede { opacity: 0.82; }

.contact-tiles { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 20px; }
/* flex-start, not center: the office address runs to three lines and a
   vertically centred tile then floats below its own label. */
.contact-tiles li { display: flex; align-items: flex-start; gap: 16px; }
.contact-tile {
  flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tile, var(--red));
}
.contact-tile svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9;
                    stroke-linecap: round; stroke-linejoin: round; }
.contact-tile--orange { --tile: var(--red); }
.contact-tile--purple { --tile: var(--primary-blue); }
.contact-tile--green  { --tile: var(--lemon-green); }
.contact-tiles strong { display: block; color: #fff; font-size: 14px; font-weight: 600;
                        text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.62; margin-bottom: 3px; }
.contact-tiles a, .contact-tiles span.val {
  color: #fff; font-size: 17px; font-weight: 500; text-decoration: none; line-height: 1.45;
}
.contact-tiles a:hover { text-decoration: underline; }

.contact-social { display: flex; gap: 12px; margin-top: 34px; }
.contact-social a {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.contact-social a:hover { background: rgba(255, 255, 255, 0.2); }
.contact-social svg { width: 19px; height: 19px; fill: currentColor; }

/* The card */
.contact-card {
  background: var(--ground);
  border-radius: var(--r-card);
  padding: 38px 34px 42px;
  box-shadow: 0 20px 60px rgba(5, 0, 56, 0.28);
}
.contact-card h2 { font-size: 26px; margin-bottom: 6px; }
.contact-card > p { font-size: 15.5px; color: var(--ink-body); margin-bottom: 26px; }

/* Icon inset. background-image would need external assets under our CSP, so
   the icon is a sibling span positioned over the field instead. */
.field { position: relative; display: grid; gap: 7px; }
.field label { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink); }
.field__wrap { position: relative; display: block; }
.field__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none; color: var(--ink-muted);
}
.field__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                   stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field textarea ~ .field__icon { top: 26px; transform: none; }

#contact-form input,
#contact-form select,
#contact-form textarea { padding-left: 48px; }
#contact-form select {
  font: inherit; width: 100%; padding: 14px 16px 14px 48px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--ground); color: var(--ink);
  appearance: none;
}
#contact-form select:focus-visible {
  outline: 2px solid var(--primary-blue); outline-offset: 1px; border-color: transparent;
}
/* Placeholder option reads as muted until a real choice is made. */
#contact-form select:has(option[value=""]:checked) { color: var(--ink-muted); }
.field__chev {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none; color: var(--ink-muted);
}
.field__chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 980px) {
  .contact-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-hero { padding: 48px 0 60px; }
  .contact-card { padding: 30px 22px 34px; }
}

/* ---------- Line icons ----------
   Outline icons in the page accent, the treatment used throughout the Webflow
   build. Deliberately unfilled and unboxed: a filled tile competes with the
   heading, and at this size a 1.7px stroke reads as detail rather than
   decoration. Colour comes from --accent so each service page's icons carry
   that page's hue with no per-page markup. */
.ficon { display: block; width: 40px; height: 40px; margin-bottom: 16px; color: var(--accent); }
.ficon svg {
  width: 40px; height: 40px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.step .ficon { margin-bottom: 14px; }
/* The step badge reads better below the icon and title, as a tag rather than
   a lead-in — matching the Webflow layout. */
.step { display: flex; flex-direction: column; align-items: flex-start; }
/* margin-top:auto pins the badge to the BOTTOM of the card. Cards in a grid
   row are equal height but their text is not, so a fixed top margin left the
   four "Step N" badges at four different heights — which reads as broken
   rather than as staggered. padding-top keeps a minimum gap from the text
   when a card happens to be full. */
.step__n { order: 3; margin-bottom: 0; margin-top: auto; padding-top: 18px; }
.step .ficon { order: 1; }
.step h3 { order: 2; }
.step p { order: 2; }

@media (max-width: 620px) {
  .ficon, .ficon svg { width: 34px; height: 34px; }
}

/* ---------- Scroll reveal ----------
   Cards and section heads fade up as they enter the viewport. Applied by
   reveal.js, which only adds the class when the browser supports
   IntersectionObserver AND the visitor has not asked for reduced motion — so
   the no-JS and reduced-motion cases render fully visible with no animation,
   never blank. */
/* The hidden state is scoped to .reveal-ready, which reveal.js puts on <html>
   only once it has confirmed it can animate. Without that scoping a JS error,
   a blocked script or an old browser would leave every card permanently at
   opacity 0 — an invisible site. Never move these declarations to a bare
   .reveal selector. */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Problem / solution panels ----------
   Two large cards rather than a text-and-list split. Carries more weight on
   the page than the previous layout and gives the "solution" side somewhere
   to put its own call to action. */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.panel {
  background: var(--ground); border-radius: var(--r-card);
  padding: 36px 32px; border: 2px solid transparent;
}
.panel h3 { font-size: 24px; margin-bottom: 10px; }
.panel > p { font-size: 16px; color: var(--ink-body); line-height: 1.6; }
.panel--feature { border-color: var(--accent); box-shadow: 0 16px 44px rgba(5, 0, 56, 0.09); }
.panel .btn { display: inline-block; }

/* The problem list gets neutral marks — orange or green ticks next to
   "Rising support costs" reads as endorsement of the problem. */
.checklist--muted li::before { background: var(--ink-muted); }

@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .panel { padding: 28px 22px; }
}

/* ---------- Cards on tinted sections ----------
   .section--surface and .feature / .step / .panel were both var(--surface),
   so every card on an alternating section was the same colour as the section
   behind it and effectively invisible. White cards on the tint is what makes
   the Webflow build read as crisp; this is the fix, not a preference. */
.section--surface :is(.feature, .step, .price-card, .faq details) { background: var(--ground); }
.section--surface .panel { background: var(--surface); }
.section--surface .panel--feature { background: var(--ground); }

/* Hard offset shadow in the accent, on HOVER.
   It was previously pinned to the first card of every step row, which read as
   an arbitrary highlight on card one rather than as an interaction — there is
   nothing special about step one. As a hover state it does what the Webflow
   build does: tells you the card is the thing you are pointing at. Offset
   rather than blurred, because a soft shadow at this size reads as a
   rendering artefact and a hard one reads as deliberate. */
.feature, .step, .panel, .price-card {
  transition: box-shadow .18s ease, border-color .18s ease;
}
.feature:hover, .step:hover, .panel:hover {
  box-shadow: 11px 12px 0 color-mix(in srgb, var(--accent) 30%, transparent);
}
/* The featured tier keeps standing emphasis — that one IS meaningful, so it
   should not depend on the pointer being over it. */
.price-card--feature { box-shadow: 0 16px 44px rgba(5, 0, 56, 0.09); }
.price-card--feature:hover {
  box-shadow: 11px 12px 0 color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Touch devices have no pointer, so :hover either never fires or sticks after
   a tap. Give them the same visual response on :active instead — the card
   lights up while your finger is down. Same treatment, different trigger,
   rather than nothing at all on mobile. */
@media (hover: none) {
  .feature:hover, .step:hover, .panel:hover { box-shadow: none; }
  .price-card--feature:hover { box-shadow: 0 16px 44px rgba(5, 0, 56, 0.09); }

  .feature:active, .step:active, .panel:active, .price-card:active {
    box-shadow: 11px 12px 0 color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
/* Stops iOS painting its own grey overlay over the top of ours. */
.feature, .step, .panel, .price-card, .btn, .faq summary {
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.faq details:active { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .feature, .step, .panel, .price-card { transition: none; }
}

/* Mid-page variant, used on audit.html where the band appears partway down
   rather than as the closing element. */
.cta-band--compact { padding: 56px 0 60px; margin-top: 0; }
.cta-band--compact h2 { font-size: clamp(28px, 3.4vw, 40px); }

/* ---------- Booking ---------- */
.booking { max-width: 760px; margin: 0 auto; }
.booking__fallback {
  background: var(--surface); border-radius: var(--r-card);
  padding: 32px 28px; text-align: center;
}
.booking__fallback p { font-size: 16.5px; color: var(--ink-body); margin: 0 0 20px; max-width: 52ch; margin-inline: auto; }