:root{
  --scs-ink:#0b1220;
  --scs-green:#16a34a;  /* brand */
  --scs-orange:#f97316; /* brand */
  --scs-blue:#2563eb;   /* brand */
}

/* --- LCP improvements for hero H1 (2025-10-15) --- */
/* Ensure the main hero title paints instantly with a system fallback and is never hidden before paint */
:where(.scs-title.hero-title){
  /* Paint immediately with system stack; your brand font (if any) can override later */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  margin: 0;
  opacity: 1 !important;
  visibility: visible !important;
  text-rendering: optimizeLegibility;
}

/* Gentle balance for multi-line headings without JS */
@supports (text-wrap: balance){
  :where(.scs-title.hero-title){ text-wrap: balance; }
}

/* Avoid accidental 'invisible until JS' on common hero wrappers */
:where(.hero, .page-hero, #hero, .scs-hero, .scs-hero-new){
  will-change: auto;
  contain: layout style paint;
}

/* Respect reduced motion to avoid animation delaying paint */
@media (prefers-reduced-motion: reduce){
  :where(.scs-title.hero-title){ transition: none !important; animation: none !important; }
}
/* --- End LCP improvements --- */


/* Book assessment / plan buttons */
a.btn.primary[data-plan="Basic"]   { background:var(--scs-green);  color:var(--scs-ink); }
a.btn.primary[data-plan="Plus"]    { background:var(--scs-blue);   color:#ffffff; }
a.btn.primary[data-plan="Premium"] { background:var(--scs-orange); color:var(--scs-ink); }

/* Generic primary button fallback (if data-plan missing) */
a.btn.primary { font-weight:700; border-radius:14px; padding:12px 18px; text-decoration:none; border:2px solid transparent; }
a.btn.primary:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:2px; }
a.btn.primary:hover{ filter:brightness(0.95); }

/* Ensure link text meets contrast on dark footers/headers */
footer a, header a { text-underline-offset: 2px; }

/* --- Touch target baseline (WCAG/Lighthouse) --- */
:root{
  --tap-min:44px;   /* minimum target size */
  --tap-gap:12px;   /* space between interactive items */
}

/* Tel / Mailto links (footer/header) */
a.link-invert[href^="tel"],
a.link-invert[href^="mailto"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-min);
  min-width:var(--tap-min);
  padding:10px 12px;
  margin:4px 6px;
  border-radius:10px;
  line-height:1.2;
  text-decoration: none;
}

/* Group container for contact links (footer/header rows) */
.footer .contact, header .contact, .contact-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--tap-gap);
}

/* Sibling spacing if no wrapper */
a.link-invert[href^="tel"] + a.link-invert[href^="mailto"],
a.link-invert[href^="mailto"] + a.link-invert[href^="tel"]{
  margin-left: var(--tap-gap);
}

/* Navigation & small controls */
nav a, .menu a, .btn, button{
  min-height:var(--tap-min);
  padding:12px 14px;
}

/* Icon-only links */
a.icon-only{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--tap-min);
  height:var(--tap-min);
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid rgba(255,255,255,.85);
  outline-offset:2px;
}

/* Touch pointers: bump padding slightly */
@media (pointer: coarse){
  a.link-invert[href^="tel"],
  a.link-invert[href^="mailto"],
  nav a, .menu a, .btn, button{
    padding:14px 16px;
  }
}

/* --- Heading utilities to preserve visuals regardless of semantic level --- */
.h1{ font-size: clamp(32px, 5vw, 48px); line-height:1.15; font-weight:800; }
.h2{ font-size: clamp(24px, 3.5vw, 36px); line-height:1.2;  font-weight:800; }
.h3{ font-size: clamp(20px, 2.5vw, 28px); line-height:1.25; font-weight:700; }
.h4{ font-size: clamp(18px, 2vw, 22px);  line-height:1.3;  font-weight:700; }
.h5{ font-size: 16px; line-height:1.35; font-weight:700; }
.h6{ font-size: 14px; line-height:1.4;  font-weight:700; }

/* --- Payload reduction rules --- */
/* Prefer gradients/flat color on small screens to avoid heavy hero background images */
@media (max-width: 768px){
  .hero, .page-hero, #hero, .scs-hero-new{
    background-image: none !important;
    background-color: var(--scs-bg, #0b1220) !important;
  }
}

/* If you upload AVIF/WebP versions, you can reference them via image-set in your main stylesheet.
   Fallback to PNG stays intact if modern formats are missing. Example (place in your main hero CSS):
   background-image: image-set(
     url('/img/scs-bg-1280.avif') type('image/avif') 1x,
     url('/img/scs-bg-1280.webp') type('image/webp') 1x,
     url('/img/scs-bg.webp') type('image/png') 1x
   );
*/

/* Ensure logos don’t render larger than necessary */
img[alt*="logo" i], img[src*="logo" i]{
  height:auto;
  max-width: 160px;
}

/* --- Hero background: modern image-set with fallbacks --- */
.scs-hero-new{
  background-size: cover;
  background-position: center;
  /* default (desktop common) */
  background-image: image-set(
    url('/img/scs-bg-1920.webp') type('image/webp') 1x,
    url('/img/scs-bg-1920.webp')  type('image/png')  1x
  );
}
@media (min-width: 2000px){
  .scs-hero-new{
    background-image: image-set(
      url('/img/scs-bg-2560.webp') type('image/webp') 1x,
      url('/img/scs-bg-2560.webp')  type('image/png')  1x
    );
  }
}
@media (max-width: 1366px){
  .scs-hero-new{
    background-image: image-set(
      url('/img/scs-bg-1280.webp') type('image/webp') 1x,
      url('/img/scs-bg-1280.webp')  type('image/png')  1x
    );
  }
}

/* --- Extend hero image-set to legacy hero sections --- */
.scs-hero, #fast-facts, .scs-hero.full-bleed{
  background-size: cover;
  background-position: center;
  background-image: image-set(
    url('/img/scs-bg-1920.webp') type('image/webp') 1x,
    url('/img/scs-bg-1920.webp')  type('image/png')  1x
  );
}
@media (min-width: 2000px){
  .scs-hero, #fast-facts, .scs-hero.full-bleed{
    background-image: image-set(
      url('/img/scs-bg-2560.webp') type('image/webp') 1x,
      url('/img/scs-bg-2560.webp')  type('image/png')  1x
    );
  }
}
@media (max-width: 1366px){
  .scs-hero, #fast-facts, .scs-hero.full-bleed{
    background-image: image-set(
      url('/img/scs-bg-1280.webp') type('image/webp') 1x,
      url('/img/scs-bg-1280.webp')  type('image/png')  1x
    );
  }
}

/* Ensure small screens avoid heavy hero imagery */
@media (max-width: 768px){
  .scs-hero, #fast-facts, .scs-hero.full-bleed{
    background-image: none !important;
    background-color: var(--scs-bg, #0b1220) !important;
  }
}

/* --- Improve LCP: avoid layout/paint for below-the-fold content until needed --- */
.below-the-fold{ content-visibility: auto; contain-intrinsic-size: 800px 600px; }

/* --- Unify header & footer logo size --- */
header .logo img,
header .site-logo,
img.footer-logo {
  height: 40px;      /* same visual height as footer */
  width: auto;       /* keep aspect ratio */
  max-width: 140px;  /* cap width to footer’s width */
}

/* Crisp on high-DPI */
header .logo img,
img.footer-logo {
  image-rendering: -webkit-optimize-contrast;
}

/* --- Unify header & footer logo size (140x40) --- */
header .logo img,
header .site-logo,
img.footer-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
}

/* --- Unify header & footer logo size (final) --- */
header .logo img,
header .site-logo,
img.footer-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
}

/* LCP hotfix (CSS): exact hero selector, to ensure instant paint */
#fast-facts > div > h1{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  margin: 0;
  line-height: 1.1;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.25rem);
}
#fast-facts .hidden,
#fast-facts .opacity-0,
#fast-facts [class*="opacity-0"],
#fast-facts .aos-init,
#fast-facts .aos-animate,
#fast-facts [data-aos]{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Mobile LCP guardrail: avoid heavy filters in hero */
@media (max-width: 640px){
  #fast-facts, #fast-facts *{
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ---- Mobile LCP hardening for hero (#fast-facts) ---- */
@media (max-width: 640px){
  /* Ensure hero always renders immediately */
  #fast-facts{ content-visibility: visible !important; contain: none !important; }
  /* Disable heavy effects that can delay paint */
  #fast-facts, #fast-facts *{
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* Stop any animations/transitions that could gate visibility */
    animation: none !important;
    transition: none !important;
  }
  /* Ensure headline is fully visible */
  #fast-facts > div > h1{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto !important;
  }
}


/* --- Accessibility: High-contrast primary button (WCAG AA) --- */
:where(a.btn.primary, button.btn.primary){
  /* Darker blue for ≥4.5:1 contrast with white text */
  background-color: #0b46b1; /* base */
  color: #ffffff;
  border-color: #0b46b1;
  text-shadow: none;
}
:where(a.btn.primary:hover, button.btn.primary:hover){
  background-color: #093a94; /* hover (darker = more contrast) */
  border-color: #093a94;
  color: #ffffff;
}
:where(a.btn.primary:active, button.btn.primary:active){
  background-color: #072f78; /* active */
  border-color: #072f78;
  color: #ffffff;
}
/* Ensure disabled state still passes UI component contrast (3:1) */
:where(a.btn.primary[aria-disabled="true"], button.btn.primary:disabled){
  background-color: #7c9fdf;  /* lighter but still distinct from white page */
  border-color: #7c9fdf;
  color: #2b2b2b;             /* readable on lighter button */
  opacity: 1;                 /* avoid low contrast due to opacity */
}

/* Strong focus indicator, visible against light/dark backgrounds */
:where(a.btn.primary:focus-visible, button.btn.primary:focus-visible){
  outline: 3px solid #000000;
  outline-offset: 3px;
  box-shadow: none;
}

/* --- Accessibility: High-contrast primary buttons (WCAG AA) --- */
.btn.primary{
  /* Base accessible palette */
  --btn-bg: #0a3d62;   /* deep blue */
  --btn-text: #ffffff;
  --btn-border: #062844;
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-border) !important;
  text-decoration: none;
}

/* Ensure link states keep contrast */
.btn.primary:visited{ color: var(--btn-text) !important; }
.btn.primary:hover{ filter: brightness(1.05); }
.btn.primary:active{ filter: none; transform: translateY(0); }
.btn.primary:focus-visible{ outline: 3px solid #ffd54f; outline-offset: 2px; }

/* Plan variants with accessible background shades */
.btn.primary[data-plan="Basic"]   { --btn-bg:#0845a6; --btn-border:#05316f; } /* deep blue */
.btn.primary[data-plan="Plus"]    { --btn-bg:#0a5c3b; --btn-border:#063c27; } /* deep green */
.btn.primary[data-plan="Premium"] { --btn-bg:#5b138f; --btn-border:#3c0d60; } /* deep purple */

/* Disabled still readable */
.btn.primary[aria-disabled="true"],
.btn.primary[disabled]{
  opacity: 0.85;
  filter: none;
  cursor: not-allowed;
}
/* --- End high-contrast buttons --- */

/* --- Accessibility: Strong contrast enforcement for primary buttons --- */
:where(body) .btn.primary{
  background-image: none !important;      /* kill gradients/images that lower contrast */
  background-color: #0a3d62 !important;   /* deep blue */
  color: #ffffff !important;
  border: 2px solid #062844 !important;
  text-shadow: none !important;
  box-shadow: none;
}
:where(body) .btn.primary > *{ color: inherit !important; }

/* Keep states accessible */
:where(body) .btn.primary:visited{ color:#ffffff !important; }
:where(body) .btn.primary:hover{ filter: brightness(1.05); }
:where(body) .btn.primary:active{ filter:none; transform:none; }
:where(body) .btn.primary:focus-visible{ outline:3px solid #ffd54f; outline-offset:2px; }

/* Plan variants (opaque, accessible shades) */
:where(body) .btn.primary[data-plan="Basic"]{
  background-color:#0845a6 !important; border-color:#05316f !important;
}
:where(body) .btn.primary[data-plan="Plus"]{
  background-color:#0a5c3b !important; border-color:#063c27 !important;
}
:where(body) .btn.primary[data-plan="Premium"]{
  background-color:#5b138f !important; border-color:#3c0d60 !important;
}

/* High-contrast user preference */
@media (prefers-contrast: more){
  :where(body) .btn.primary{ background-color:#07304d !important; border-color:#041b2e !important; }
  :where(body) .btn.primary[data-plan="Basic"]{ background-color:#063b8e !important; border-color:#04295f !important; }
  :where(body) .btn.primary[data-plan="Plus"]{ background-color:#084d31 !important; border-color:#053622 !important; }
  :where(body) .btn.primary[data-plan="Premium"]{ background-color:#4a1076 !important; border-color:#2f0a4a !important; }
}
/* --- End strong contrast enforcement --- */

/* --- LCP first‑paint clamp (hero) --- */
/* Ensure the hero section renders immediately and is not gated by containment */
#fast-facts, .scs-hero{
  content-visibility: visible !important;
  contain: none !important;
}

/* Prevent any pre-paint animations, transitions, or visual effects in the hero */
#fast-facts, #fast-facts *,
.scs-hero, .scs-hero *{
  animation: none !important;
  transition: none !important;
  opacity: unset;
}

/* Remove heavy compositing effects that delay text paint */
#fast-facts, #fast-facts *,
.scs-hero, .scs-hero *{
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Keep the headline undeniably visible */
#fast-facts > div > h1,
.scs-hero .scs-title.hero-title{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  will-change: auto !important;
}
/* --- End clamp --- */