/* ============================================================================
   Clean-up layer, 30 September 2026
   ----------------------------------------------------------------------------
   Oscar: "look at smart-spaces its v clean and scl is lacking. full cleanup of
   ui". Smart Space reads clean because it does few things the same way every
   time: white sections, one heading and one line under it, white cards with a
   hairline border, sentence-case buttons, one accent colour. This site did the
   same jobs a dozen different ways, page by page: solid orange and teal cards,
   two-colour headings, uppercase pill buttons four abreast, labels flanked by
   rules, true-grey bands, 12px centred card text.

   On 30 September Oscar kept this look only where he liked it: the contact
   page and the booking flow (assessment, results, emergency callback, the two
   booking pages, payment success). Every other page is back on its own
   original design, as the homepage is. css/glow.css, loaded after this file,
   carries the glow, the motion and the header buttons for every page.

   This file is loaded after each page's own <style>, so at equal specificity
   it wins without !important. It changes no words, no photos and no links.
   Remove the one <link> per page and the page is exactly as it was.
   ========================================================================= */

:root {
  --ink: #1a2129;          /* headings */
  --body: #36414b;         /* running text: 10.2:1 on white */
  --muted: #5d6873;        /* secondary text: 5.6:1 on white */
  --line: #e7e4df;         /* warm hairline */
  --surface-2: #f8f7f4;    /* the one off-white band */
  --teal-tint: #eef6f6;
  --card-radius: 16px;
  --btn-radius: 12px;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --card-shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.08);
}

/* ---- Type ------------------------------------------------------------- */

body {
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main h1, main h2, main h3,
section h1, section h2, section h3 { letter-spacing: -0.025em; }
section h2 { letter-spacing: -0.03em; }

/* A word picked out in orange inside a heading. Orange is kept for the thing
   you click (DESIGN.md), so the heading is one colour again. */
h1 span[style*="b35610"], h2 span[style*="b35610"], h3 span[style*="b35610"],
h1 span[style*="f48222"], h2 span[style*="f48222"], h3 span[style*="f48222"],
h1 .accent, h2 .accent, h2 > span.highlight,
.sv-hero-accent {
  color: inherit !important;
}

/* ---- Labels above headings -------------------------------------------- */
/* Small, teal, and without the rules either side. */
.section-eyebrow, .eyebrow, .micro-eyebrow, .sv-hero-eyebrow, .sv-hub-eyebrow,
.sv-privacy-eyebrow, .service-layer-features-eyebrow, .results-eyebrow,
.recs-eyebrow, .rec-blocks-eyebrow, .quiz-eyebrow, .cta-eyebrow,
.cs-hero-eyebrow, .ib-eyebrow, .fac-hub-eyebrow, .sgq-eyebrow {
  letter-spacing: 0.12em;
  gap: 0;
}
.section-eyebrow::before, .section-eyebrow::after,
.sv-hub-eyebrow::before, .sv-hub-eyebrow::after,
.sv-hero-eyebrow::before,
.results-eyebrow::before, .results-eyebrow::after,
.recs-eyebrow::before, .recs-eyebrow::after,
.rec-blocks-eyebrow::before, .rec-blocks-eyebrow::after,
.quiz-eyebrow::before,
.cta-eyebrow::before, .cta-eyebrow::after {
  display: none !important;
}

/* ---- Section headings ------------------------------------------------- */

.section-header h2 {
  color: var(--ink);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.15;
}
.section-header p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* The grey bands: true grey #f4f4f4 read as dull. One warm off-white. */
section[style*="f4f4f4"],
section[style*="f5f5f5"],
section[style*="light-gray"] {
  background: var(--surface-2) !important;
}

/* ---- Buttons ---------------------------------------------------------- */
/* Sentence case, a squarer corner, one size. Colours are unchanged: every
   fill keeps the contrast ratio it was given. */
.btn, a.btn, button.btn {
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: 14px 24px;
  line-height: 1.25;
}
.btn-lg { padding: 16px 28px; font-size: 1.02rem; }
.btn-primary, .btn-white, .btn-outline { font-weight: 700; }

/* ---- The closing call to action --------------------------------------- */
/* Was a full-width teal slab with up to four uppercase buttons. Now a teal
   card inside the page, with the banners' own depth, two buttons, and any
   further ones as plain links underneath, as Smart Space does. */
.cta-section {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 88px 0 !important;
  color: var(--white);
}
.cta-section > .container {
  max-width: 1080px;
  border-radius: 24px;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
  background-color: #056d70;
  background-image:
    radial-gradient(110% 90% at 90% -20%, rgba(244, 130, 34, 0.22) 0%, rgba(244, 130, 34, 0) 45%),
    radial-gradient(90% 80% at 5% 0%, rgba(74, 210, 210, 0.16) 0%, rgba(74, 210, 210, 0) 50%),
    linear-gradient(152deg, #0a8285 0%, #06767a 44%, #044e51 80%, #03393b 100%);
  box-shadow: 0 2px 4px rgba(3, 57, 59, 0.10), 0 24px 56px rgba(3, 57, 59, 0.22);
}
.cta-section h2 {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  font-size: 1.05rem;
  line-height: 1.65;
}
.cta-buttons { gap: 12px 12px; align-items: center; }
.cta-buttons .btn:nth-child(n+3) {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 10px 12px !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transform: none !important;
}
.cta-buttons .btn:nth-child(n+3):hover { text-decoration-color: #fff; }
@media (max-width: 640px) {
  .cta-section { padding: 56px 0 !important; }
  .cta-section > .container { border-radius: 20px; padding: 44px 22px; margin-left: 16px; margin-right: 16px; width: auto; }
  .cta-buttons .btn:nth-child(-n+2) { width: 100%; }
}

/* ---- Cards ------------------------------------------------------------ */
/* White, a hairline, a soft shadow, text on the left. */
.related-card, .sv-related-card, .story-card, .blog-card, .advice-card,
.info-card, .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.related-card:hover, .sv-related-card:hover, .story-card:hover, .blog-card:hover,
.advice-card:hover, .info-card:hover, .card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: #dcd8d1;
  transform: translateY(-2px);
}
.related-card h3, .sv-related-card h3 { color: var(--ink); font-size: 1.05rem; line-height: 1.4; }
.related-card p, .sv-related-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.related-card .rdate { color: var(--muted); letter-spacing: 0.1em; }

/* ---- Long-form articles (the 37 pages built on .bp-*) ------------------ */
/* Their banner was a bright cyan of its own, the one banner on the site that
   was not the shared depth-lit teal. It is that teal now. */
.bp-hero {
  position: relative;
  overflow: hidden;
  background-color: #056d70;
  background-image:
    radial-gradient(120% 85% at 85% -25%, rgba(244, 130, 34, 0.30) 0%, rgba(244, 130, 34, 0) 46%),
    radial-gradient(95% 75% at 6% 4%, rgba(74, 210, 210, 0.20) 0%, rgba(74, 210, 210, 0) 52%),
    radial-gradient(120% 95% at 50% 132%, rgba(1, 32, 34, 0.60) 0%, rgba(1, 32, 34, 0) 60%),
    linear-gradient(152deg, #0a8285 0%, #06767a 44%, #044e51 78%, #03393b 100%);
  padding: 88px 0 80px;
}
.bp-hero h1 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.bp-hero .date { letter-spacing: 0.14em; font-size: 0.75rem; opacity: 0.85; }
.bp-hero .lede { font-size: 1.1rem; line-height: 1.65; opacity: 0.92; }

.bp-content p,
.bp-content ul li, .bp-content ol li { color: var(--body); }
.bp-content p { font-size: 1.07rem; line-height: 1.8; }
.bp-content h2 { color: var(--ink); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.25; }
.bp-content h3 { color: var(--ink); letter-spacing: -0.015em; }
.bp-content strong { color: var(--ink); }

.bp-content .callout {
  background: var(--teal-tint);
  border-left: 3px solid #08a9ac;
  border-radius: 12px;
  padding: 20px 24px;
}
.bp-content .stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 28px 24px;
}
.bp-content .stat .big { color: var(--teal); letter-spacing: -0.03em; }
.bp-content .stat .caption { color: var(--muted); }
.bp-content .toc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.bp-content .toc h2 { color: var(--muted); letter-spacing: 0.12em; }

.related-posts { background: var(--surface-2); padding: 72px 0; }
.related-posts h2 { color: var(--ink); letter-spacing: -0.03em; }

.back-link { font-size: 0.95rem; }

/* ---- Pills and badges ------------------------------------------------- */
.sv-badge, .hero-badge, .trust-pill, .pill, .badge {
  letter-spacing: 0.02em;
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .related-card, .sv-related-card, .story-card, .blog-card, .advice-card, .info-card, .card { transition: none; }
  .related-card:hover, .sv-related-card:hover, .story-card:hover, .blog-card:hover,
  .advice-card:hover, .info-card:hover, .card:hover { transform: none; }
}

/* ---- Feature cards (/about) -------------------------------------------- */
/* Were solid orange and solid teal slabs with white 13px centred text. */
.feature-card, .feature-card.teal {
  background: #fff;
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: left;
  padding: 28px 26px;
}
.feature-card::before { display: none; }
.feature-card:hover, .feature-card.teal:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.feature-card .feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 18px;
  border-radius: 12px;
  background: var(--teal-tint);
  color: var(--teal);
}
.feature-card .feature-icon svg { stroke: currentColor; }
.feature-card h3 { color: var(--ink); font-size: 1.1rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 0.97rem; line-height: 1.6; opacity: 1; }

/* ---- Article contents rail (css/fac.css) ------------------------------ */
/* The short rule above each article heading: teal, not the button orange. */
.bp-content h2::before { background: #08a9ac; }

/* ---- Sitewide follow-ups from the page passes -------------------------- */
.cs-hero-eyebrow::before, .cs-hero-eyebrow::after { display: none !important; }
/* The slider caption was a bluish grey found nowhere else. */
.sg-slider-caption { color: var(--muted); }

/* ---- "Talk it through" box in long-form pages (.guide-inline-cta) ---- */
/* Was a pale teal box with teal buttons; now the white card and the orange
   primary the contact page uses. The guides carry the same block. */
.guide-inline-cta {
  margin: 32px 0;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.guide-inline-cta p { color: var(--body); font-size: 1rem; line-height: 1.65; margin: 0 0 16px; }
.guide-inline-cta .gic-actions { gap: 12px; }
.guide-inline-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px;
  border-radius: var(--btn-radius);
  font-size: 0.97rem; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.guide-inline-cta .gic-primary {
  background-color: var(--orange-cta); background-image: none; color: #fff;
  box-shadow: 0 10px 15px -3px rgba(244, 130, 34, 0.25), 0 4px 6px -4px rgba(244, 130, 34, 0.25);
}
.guide-inline-cta .gic-primary:hover { background-color: #9a4a0e; color: #fff; transform: none; filter: none; }
.guide-inline-cta .gic-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.guide-inline-cta .gic-secondary:hover { background: #fff; border-color: #cfcac2; }

.related-card .rdate { font-size: 0.8rem; }

@media (max-width: 640px) {
  .guide-inline-cta { padding: 22px 20px; }
}