/* =====================================================================
   Site-wide type + colour harmonisation.
   Brings the inner pages (About, Services, Products, Contact — all carry
   body.about-page) onto the same reading scale as the homepage, and lifts
   low-contrast text to WCAG AA. Loaded after every page stylesheet.
   ===================================================================== */
:root{
  --fx-ink:#061c42;
  --fx-copy:#44565f;      /* body copy: ~7:1 on white / paper */
  --fx-muted:#5b6b73;     /* secondary text: ~5.4:1 */
  --fx-teal-text:#00707e; /* teal used as text: ~5.6:1 */
  --fx-h1:clamp(38px,3.7vw,56px);
  --fx-h2:clamp(30px,2.9vw,42px);
  --fx-h3-card:clamp(18px,1.35vw,20px);
  --fx-body:clamp(16px,1.15vw,17px);
  --fx-lead:clamp(16.5px,1.25vw,18px);
  --fx-small:14px;
  --fx-label:12.5px;
}

/* ---------- Headings ---------- */
.about-page main h1{font-size:var(--fx-h1);line-height:1.08}
.about-page main section h2{font-size:var(--fx-h2);line-height:1.14}
.about-page :is(.sv-step,.pr-benefit,.ab-value,.pr-space-card,.sv-detail-item,.ab-process-panel) h3{font-size:var(--fx-h3-card);line-height:1.3}

/* ---------- Body copy (was 12–15px on inner pages; homepage uses 16–17px) ---------- */
.about-page :is(.sv-copy,.pr-copy,.ct-copy,.ct-details-intro,.ct-intro-note),
.about-page :is(.ab-banner-copy,.sv-banner-copy,.pr-hero-copy,.ab-story-copy,.ab-process-panel,.ab-coverage-description,.sv-service-body,.sv-journey-heading,.pr-guide-panel,.pr-care-copy,.ab-closing,.sv-closing,.pr-closing) > p:not([class]),
.about-page [id*="-answer"] p,
.about-page .ab-value p{
  font-size:var(--fx-body);line-height:1.7;
}
/* Copy colour only where the background is light (measured < 4.5:1 before) */
.about-page :is(.pr-copy,.ct-copy,.ct-details-intro,.ct-intro-note,.pr-hero-copy > p:not([class])),
.about-page :is(#product-answer-1,#product-answer-2,#product-answer-3,#contact-answer-1,#contact-answer-2,#contact-answer-3) p{color:var(--fx-copy)}
.about-page :is(.ab-banner-copy,.sv-banner-copy,.pr-hero-copy) > p:not([class]),
.about-page .ct-intro-note{font-size:var(--fx-lead)}
.about-page :is(.sv-step,.pr-benefit,.pr-space-card) p,
.about-page .ct-form-heading p,
.about-page .ct-details-bottom p{font-size:15.5px;line-height:1.65}
.about-page :is(.pr-benefit,.pr-space-card) p,.about-page .ct-form-heading p{color:var(--fx-copy)}

/* ---------- Small print / notes (was 9–11px) ---------- */
.about-page :is(.sv-scope-note,.sv-service-note,.pr-fineprint,.ct-form-note,.ab-values-note,.ct-form-bottom > span){
  font-size:var(--fx-small);line-height:1.6;
}
.about-page :is(.sv-scope-note,.sv-service-note,.pr-fineprint,.ct-form-note,.ct-form-bottom > span){color:var(--fx-muted)}

/* ---------- Kickers / eyebrows (was 8–10px) ---------- */
.about-page :is(.ab-kicker,.sv-kicker,.pr-kicker,.ct-kicker,.sv-scope-title){font-size:var(--fx-label);letter-spacing:.14em}
.about-page :is(.ab-story-copy,.ab-process-copy,.ab-coverage,.ab-closing) .ab-kicker,.about-page .ct-kicker{color:var(--fx-teal-text)}
.about-page .pr-kicker{color:#3d6a55}

/* ---------- Tiny labels: index numbers, captions, tags (was 7–10px) ---------- */
.about-page :is(.pr-hero-index,.pr-hero-aside span,.pr-space-top small,.sv-service-eyebrow span,.sv-collage-label,.ab-philosophy span,.ct-live span,.ct-details small,.ct-area-copy dt){
  font-size:12px;letter-spacing:.12em;
}
.about-page :is(.sv-faq-number,.pr-faq-number,.ct-faq-question > span:first-child,.ab-value > span,.ab-process-tab span){font-size:12px}
.about-page :is(.sv-faq-number,.pr-faq-number,.ct-faq-question > span:first-child){color:#5d7266}
.about-page :is(.pr-hero-index,.pr-hero-aside span,.pr-space-top small,.ct-details small,.ct-area-copy dt,.ab-philosophy span){color:var(--fx-muted)}
.about-page .sv-service-eyebrow span{color:#4f6e62}
.about-page small{font-size:max(12px,.85em)}
.about-page main figcaption{font-size:max(13px,1em);text-shadow:0 1px 10px rgba(0,0,0,.28)}

/* ---------- Breadcrumbs (was 10–11px, ~3:1 contrast) ---------- */
.about-page :is(.ab-breadcrumb,.sv-breadcrumb,.pr-breadcrumb,.ct-breadcrumb) :is(a,span){font-size:13px;color:var(--fx-muted)}
.about-page :is(.ab-breadcrumb,.sv-breadcrumb,.pr-breadcrumb,.ct-breadcrumb) [aria-current]{color:var(--fx-ink)}

/* ---------- Links, buttons, tabs, list items ---------- */
.about-page :is(.ab-text-link,.ct-text-link,.pr-text-link,.sv-banner-link,.sv-specialist-link){font-size:15px}
.about-page :is(.ab-story-copy .ab-text-link,.ct-text-link,.pr-text-link){color:var(--fx-teal-text)}
.about-page :is(.ab-button,.ct-button,.sv-button,.pr-button){font-size:15px}
.about-page :is(.ab-process-tab,.pr-guide-tabs button){font-size:14.5px}
.about-page .ab-process-tab:not([aria-selected="true"]){color:var(--fx-muted)}
.about-page .ab-process-tab[aria-selected="true"]{color:var(--fx-teal-text)}
.about-page :is(.sv-scope li,.sv-assurances li,.pr-guide-panel li,.ab-banner-copy li,.ab-introbar li) {font-size:15px}
.about-page :is(.sv-scope li,.pr-guide-panel li) span{font-size:inherit}
.about-page :is(.ab-closing-actions,.sv-closing-actions,.pr-closing-actions) a{font-size:14.5px}
.about-page .ct-introbar,.about-page .ab-introbar a{font-size:13.5px}
.about-page .ab-introbar a{color:var(--fx-teal-text)}

/* ---------- Contact form ---------- */
.about-page .ct-field label,.about-page .ct-field > span{font-size:14px}
.about-page .ct-field small{font-size:12.5px;color:var(--fx-muted)}
.about-page .ct-select-value,.about-page .ct-field :is(input,select,textarea){font-size:15px}
.about-page .ct-email{font-size:15px}
.about-page .ct-details em{font-size:13px;color:var(--fx-muted)}

/* ---------- Homepage: placeholders + FAQ numbers below AA ---------- */
.booking-field :is(input,select)::placeholder{color:#5f7280}
.booking-field select:invalid{color:#5f7280}
.faq-number{color:#4d6373}

/* ---------- Header nav active colour (3.4:1 → 5.3:1) ---------- */
.main-nav a.active{color:#006f8a}

/* ---------- Let hero banners grow with the larger, readable copy ---------- */
@media (min-width:901px){
  .about-page .sv-banner{height:auto;min-height:360px}
  .about-page .sv-banner-copy{padding:34px 42px}
  .about-page .pr-hero{height:auto;min-height:390px}
}
.about-page .ab-introbar p{font-size:14px}
.about-page .ab-values-note{color:rgba(255,255,255,.72)}
.about-page .sv-detail-item p{font-size:15.5px;line-height:1.65}
.about-page .sv-faq-concierge :is(p,a){font-size:14px}

/* Dark products band keeps its light-on-dark palette */
.about-page .pr-care-section .pr-copy,.about-page .pr-care-section .pr-guide-panel > p{color:#b9d1cd}
.about-page .pr-care-section .pr-kicker{color:#8bb8a4}
.about-page .pr-care-section .pr-text-link{color:#c6dfbc}

/* ---------- Remaining AA fixes (measured) ---------- */
.about-page .ab-value > span{color:#8fb0bb}
.about-page .ab-process-visual figcaption span{color:var(--fx-muted)}
.about-page .ab-coverage h2 span{color:var(--fx-teal-text)}
.about-page .sv-service-tab small{color:#5b6b66}
.about-page .pr-closing p,.about-page .ct-intro-note p{color:var(--fx-copy)}
.about-page :is(.pr-closing-actions,.sv-closing-actions,.ab-closing-actions) a{color:var(--fx-muted)}
.about-page :is(.pr-closing-actions,.sv-closing-actions,.ab-closing-actions) a strong{color:var(--fx-ink)}
.cs-value.placeholder{color:#5f7280}
body.about-page main :is(.sv-copy,.pr-copy,.ct-copy){font-size:var(--fx-body);line-height:1.7}
body.about-page main :is(.pr-closing,.sv-closing,.ab-closing) p:not([class]){font-size:var(--fx-body)}
.about-page .sv-closing-actions p,.about-page .sv-closing-actions p span{font-size:13px}
.about-page .pr-care-photo figcaption p{font-size:13px}
/* Dark contact panel keeps light text */
.about-page .ct-details .ct-kicker{color:#92c5c0}
.about-page .ct-details .ct-details-intro{color:#b4d0d4}
.about-page .ct-details small{color:#9cc4ca}
.about-page .ct-details em{color:#b4cdd2}
.about-page .ct-details-bottom p{color:#a9c6cd}
.about-page .sv-closing-actions a{color:#cfe3dc}
.about-page .sv-closing-actions a strong{color:#fff}

/* ---------- Mobile/tablet: banners grow with readable copy instead of fixed heights ---------- */
@media (max-width:900px){
  .about-page .sv-banner{height:auto;min-height:305px}
  .about-page .pr-hero{height:auto}
  .about-page :is(.ab-kicker,.sv-kicker,.pr-kicker,.ct-kicker){font-size:11.5px;letter-spacing:.12em}
  .about-page .sv-collage-label{font-size:11px}
}
@media (max-width:650px){
  .about-page .sv-banner{height:auto;min-height:0;padding-bottom:18px}
  .about-page .ab-banner{height:auto;min-height:285px}
  .about-page .sv-collage{position:relative;left:auto;right:auto;bottom:auto;margin:8px auto 0}
  .about-page :is(.ab-banner-copy,.sv-banner-copy,.pr-hero-copy) > p:not([class]){font-size:16px}
}

/* ---------- Footer details from Business settings ---------- */
.footer-bottom-inner{flex-wrap:wrap;row-gap:10px}
.footer-about{flex:1 1 100%;max-width:640px;margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.72)}
.footer-legal{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7)}
.footer-legal span{margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.25)}
.aftercare .footer-column .footer-socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#fff;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff26;transition:background .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.aftercare .footer-column .footer-socials a:hover,.aftercare .footer-column .footer-socials a:focus-visible{background:#00a3b8;transform:translateY(-3px)}
.aftercare .footer-column .footer-socials a svg{width:18px;height:18px}
