/* =========================================================
   UI FIX V8 — mobile clarity + dark-mode consistency
   Loaded LAST. 2026-09-03
   ========================================================= */
:root{
  --v8-yellow:#F2B200;
  --v8-ivory:#FFF8E8;
  --v8-navy:#123B5D;
  --v8-navy-deep:#0D2D48;
  --v8-ink:#111214;
  --v8-white:#FFFFFF;
  --v8-muted:#555B63;
  --v8-line:rgba(17,18,20,.16);
}

/* ---------- HEADER: always cheerful yellow ---------- */
html body .site-header,
html body .header{
  background:var(--v8-yellow) !important;
  color:var(--v8-ink) !important;
  border-bottom:1px solid rgba(17,18,20,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body .site-header .brand,
html body .header .brand,
html body .header-nav > a:not(.header-cta){
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
}
/* Service-page header CTA needs contrast against the yellow header. */
html body .header .header-cta{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid #111214 !important;
}
html body .header .header-cta *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
/* Home MENU button stays clean/white on yellow. */
html body .site-menu-btn{
  background:#FFFFFF !important;
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
  border:2px solid rgba(17,18,20,.20) !important;
}
html body .site-menu-btn *{
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
}

/* ---------- HOME MENU DRAWER: white + black, in both OS modes ---------- */
html body .menu-drawer,
html body .menu-drawer-head,
html body .menu-links,
html body .menu-links a{
  background:#FFFFFF !important;
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
  color-scheme:light !important;
}
html body .menu-drawer{
  border-left:1px solid var(--v8-line) !important;
  box-shadow:-18px 0 48px rgba(0,0,0,.16) !important;
}
html body .menu-drawer-head,
html body .menu-links a{
  border-color:rgba(17,18,20,.14) !important;
}
html body .menu-close{
  background:#FFFFFF !important;
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
  border:2px solid rgba(17,18,20,.22) !important;
}
html body .menu-links a::after{color:#62666D !important;}

/* ---------- PAGE NAV: no black band; ivory strip + navy/white pills ---------- */
html body.service-page .page-nav{
  background:var(--v8-ivory) !important;
  color:var(--v8-ink) !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(17,18,20,.12) !important;
  color-scheme:light !important;
}
html body.service-page .page-nav a{
  background:var(--v8-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid var(--v8-navy) !important;
  opacity:1 !important;
}
html body.service-page .page-nav a *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------- DARK/NAVY BUTTONS: dark background always gets white text ---------- */
html body a.btn-dark,
html body button.btn-dark,
html body a.btn[style*="background:#111"],
html body a.btn[style*="background: #111"]{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body a.btn-dark *,
html body button.btn-dark *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
/* Stronger than the generic yellow-section text rule that previously made hero buttons black-on-black. */
html body.service-page .hero.theme-yellow a.btn-dark,
html body.service-page .cta.theme-yellow a.btn-dark,
html body.home-page section.theme-yellow a.btn-dark{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid #111214 !important;
}
html body.service-page .hero.theme-yellow a.btn-dark *,
html body.service-page .cta.theme-yellow a.btn-dark *,
html body.home-page section.theme-yellow a.btn-dark *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
/* Any deliberately navy button must also stay white-text. */
html body section.theme-ivory :is(a.btn,button.btn,.story-services-link,.youtube-channel-btn),
html body #related-services :is(.related,.related-grid) a{
  background:var(--v8-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:var(--v8-navy) !important;
}
html body section.theme-ivory :is(a.btn,button.btn,.story-services-link,.youtube-channel-btn) *,
html body #related-services :is(.related,.related-grid) a *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------- PRICE: simple readable text, no oversized split card ---------- */
body.service-page .price-plain{
  max-width:760px;
  margin:24px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:grid !important;
  gap:7px !important;
}
body.service-page .price-plain span{
  font-size:15px !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  color:var(--v8-muted) !important;
  -webkit-text-fill-color:var(--v8-muted) !important;
}
body.service-page .price-plain strong{
  font-size:clamp(23px,3vw,31px) !important;
  line-height:1.4 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:var(--v8-ink) !important;
  -webkit-text-fill-color:var(--v8-ink) !important;
}
body.service-page #price .price-bottom{
  margin-top:22px !important;
  padding-top:20px !important;
}

/* ---------- SERVICE CTA: intentional two-line heading on mobile ---------- */
body.service-page .cta-title-fixed span{display:inline;}
@media(max-width:767px){
  body.service-page .cta{
    padding:58px 0 !important;
  }
  body.service-page .cta .container{
    text-align:center !important;
  }
  body.service-page .cta-title-fixed{
    margin:0 auto !important;
    max-width:100% !important;
    font-size:clamp(34px,9.2vw,42px) !important;
    line-height:1.22 !important;
    letter-spacing:-.035em !important;
    text-align:center !important;
  }
  body.service-page .cta-title-fixed span{
    display:block !important;
    white-space:nowrap !important;
  }
  body.service-page .cta p{
    margin:22px auto 0 !important;
    max-width:650px !important;
    font-size:16px !important;
    line-height:1.85 !important;
    text-align:left !important;
  }
  body.service-page .cta .btn{
    width:100% !important;
    margin-top:26px !important;
    padding:15px 18px !important;
    font-size:15px !important;
    line-height:1.45 !important;
    white-space:normal !important;
    text-align:center !important;
  }
}

/* ---------- MEDIA + PRODUCT price: mobile rhythm ---------- */
@media(max-width:767px){
  body.service-page #price .section-head{margin-bottom:0 !important;}
  body.service-page .price-plain{margin-top:18px !important;gap:6px !important;}
  body.service-page .price-plain span{font-size:14px !important;}
  body.service-page .price-plain strong{font-size:24px !important;line-height:1.38 !important;}
  body.service-page #price .price-bottom p{font-size:15px !important;line-height:1.8 !important;}
  body.service-page #price .price-bottom .btn{
    width:100% !important;
    background:var(--v8-navy) !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:var(--v8-navy) !important;
  }
}

/* ---------- MEDIA HERO: prevent oversized/wasteful wrapping ---------- */
@media(max-width:767px){
  body.media-supervision-page .hero h1{
    font-size:35px !important;
    line-height:1.3 !important;
    letter-spacing:-.035em !important;
  }
  body.media-supervision-page .hero-actions{
    gap:10px !important;
  }
  body.media-supervision-page .hero-actions .btn{
    width:100% !important;
    padding:14px 16px !important;
    font-size:15px !important;
    line-height:1.4 !important;
  }
}

/* ---------- KEEP 3-card layouts as slim vertical rows on mobile ---------- */
@media(max-width:767px){
  body.service-page :is(.strength-grid,.format-grid,.approach-grid,.assurance-list){
    grid-template-columns:1fr !important;
  }
  body.service-page :is(.strength-card,.format-card,.approach-card,.assurance-item){
    width:100% !important;
    min-height:0 !important;
  }
}

/* ---------- DARK MODE: do NOT recolor the intended brand sections/chrome ---------- */
@media(prefers-color-scheme:dark){
  html body .site-header,
  html body .header{
    background:var(--v8-yellow) !important;
    color:var(--v8-ink) !important;
    border-bottom-color:rgba(17,18,20,.18) !important;
  }
  html body .site-header .brand,
  html body .header .brand,
  html body .header-nav > a:not(.header-cta){
    color:var(--v8-ink) !important;
    -webkit-text-fill-color:var(--v8-ink) !important;
  }
  html body .menu-drawer,
  html body .menu-drawer-head,
  html body .menu-links,
  html body .menu-links a{
    background:#FFFFFF !important;
    color:var(--v8-ink) !important;
    -webkit-text-fill-color:var(--v8-ink) !important;
  }
  html body.service-page .page-nav{background:var(--v8-ivory) !important;}
  html body.service-page .page-nav a{
    background:var(--v8-navy) !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  body.service-page .price-plain span{
    color:var(--v8-muted) !important;
    -webkit-text-fill-color:var(--v8-muted) !important;
  }
  body.service-page .price-plain strong{
    color:var(--v8-ink) !important;
    -webkit-text-fill-color:var(--v8-ink) !important;
  }
}