/* =========================================================
   FINAL POLISH — 2026-09-03
   Last-loaded accessibility + color layer.
   Keeps the requested yellow / ivory / navy system consistent
   in light and dark OS modes and improves mobile card layout.
   ========================================================= */
:root{
  --tl-yellow:#F2B200;
  --tl-ivory:#FFF8E8;
  --tl-navy:#163F63;
  --tl-navy-deep:#0F304C;
  --tl-ink:#111214;
  --tl-white:#FFFFFF;
  --tl-muted:#51565D;
  --tl-line-dark:rgba(17,18,20,.15);
  --tl-line-light:rgba(255,255,255,.24);
}

/* ---------- TOP PAGE: exact section rhythm ---------- */
.home-page #top{
  background:var(--tl-yellow) !important;
  color:var(--tl-ink) !important;
}
.home-page #story,
.home-page #why-us,
.home-page #youtube{
  background:var(--tl-ivory) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}
.home-page #services,
.home-page #profile,
.home-page #news,
.home-page #contact-form{
  background:var(--tl-navy) !important;
  color:var(--tl-white) !important;
}
.home-page #contact{
  background:var(--tl-yellow) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}

/* Ivory sections = black/dark copy. */
.home-page :is(#story,#why-us,#youtube) :is(
  h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,
  .eyebrow,.section-title,.section-lead,.story-core,.story-mobile-summary,.story-closing
){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}
.home-page :is(#story,#why-us,#youtube) :is(.section-lead,.story-mobile-summary,.story-closing){
  color:var(--tl-muted) !important;
  -webkit-text-fill-color:var(--tl-muted) !important;
}

/* Navy sections = white copy. */
.home-page :is(#services,#profile,#news,#contact-form) :is(
  h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,label,
  .eyebrow,.section-title,.section-lead,.news-date,.news-link,.news-desc,.news-empty,.privacy
){
  color:var(--tl-white) !important;
  -webkit-text-fill-color:var(--tl-white) !important;
}
.home-page :is(#services,#profile,#news,#contact-form) .eyebrow{
  color:#FFE08A !important;
  -webkit-text-fill-color:#FFE08A !important;
}

/* SERVICES must never become a blank white area in dark mode. */
.home-page #services{
  background:var(--tl-navy) !important;
  color:var(--tl-white) !important;
}
.home-page #services > .container > :is(.eyebrow,.section-title,.section-lead){
  color:var(--tl-white) !important;
  -webkit-text-fill-color:var(--tl-white) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.home-page #services .service-card{
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  border-color:var(--tl-line-dark) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.home-page #services .service-card :is(h3,p,span,strong,.service-no,.service-arrow){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.home-page #services .service-card .service-no{
  color:#765400 !important;
  -webkit-text-fill-color:#765400 !important;
}
.home-page #services .service-card img{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* Profile cards remain white/dark on the navy section. */
.home-page #profile .profile-points li{
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  border-color:var(--tl-line-dark) !important;
}
.home-page #profile .profile-points li :is(h3,p,span,strong){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* News stays readable directly on navy. */
.home-page #news .news-item,
.home-page #news .news-box{
  background:transparent !important;
  color:var(--tl-white) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.home-page #news :is(.news-link,.news-desc,.news-date,.news-empty){
  color:var(--tl-white) !important;
  -webkit-text-fill-color:var(--tl-white) !important;
}
.home-page #news .news-category{
  background:#FFE08A !important;
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* Contact = yellow; contact form = navy with conspicuous white fields. */
.home-page #contact :is(h1,h2,h3,p,a,strong,span){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}
.home-page #contact .btn-dark{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#111214 !important;
}
.home-page #contact-form input,
.home-page #contact-form textarea{
  color-scheme:light !important;
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
  border:2px solid #FFFFFF !important;
  box-shadow:0 0 0 1px rgba(17,18,20,.12) !important;
}
.home-page #contact-form input::placeholder,
.home-page #contact-form textarea::placeholder{
  color:#686D74 !important;
  -webkit-text-fill-color:#686D74 !important;
  opacity:1 !important;
}
.home-page #contact-form input:focus,
.home-page #contact-form textarea:focus{
  border-color:#FFD75A !important;
  box-shadow:0 0 0 4px rgba(255,215,90,.32) !important;
}
.home-page #contact-form .email-match-message{
  color:#F3F5F7 !important;
  -webkit-text-fill-color:#F3F5F7 !important;
}
.home-page #contact-form .email-match-message.is-match{
  color:#C8F6D8 !important;
  -webkit-text-fill-color:#C8F6D8 !important;
}
.home-page #contact-form .email-match-message.is-error{
  color:#FFD4D0 !important;
  -webkit-text-fill-color:#FFD4D0 !important;
}
.home-page #contact-form .submit:not(:disabled){
  background:var(--tl-ivory) !important;
  color:var(--tl-navy) !important;
  -webkit-text-fill-color:var(--tl-navy) !important;
  border:2px solid var(--tl-ivory) !important;
}

/* Top logo: no white plate; transparent logo floats naturally on yellow. */
.home-page #top .hero-logo-wrap{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.home-page #top .hero-logo{
  background:transparent !important;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.16)) !important;
}

/* ---------- BUTTON CONTRAST ON HOME ---------- */
/* Ivory background -> navy button. */
.home-page #story .story-services-link,
.home-page #youtube .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:11px 18px !important;
  border:2px solid var(--tl-navy) !important;
  border-radius:999px !important;
  background:var(--tl-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  text-decoration:none !important;
  font-weight:900 !important;
}
.home-page #story .story-services-link span,
.home-page #youtube .btn span{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------- SERVICE PAGES: exact alternation ---------- */
body.service-page .hero{
  background:var(--tl-yellow) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}
body.service-page .hero :is(h1,h2,h3,h4,p,a,strong,span,small,.eyebrow,.hero-lead,.hero-lead-mobile,.hero-lead-desktop){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* Exact content order: starts ivory and alternates navy/ivory. */
.sns-pr-page :is(#overview,#strengths,#audience,#assurance,#faq),
.accessible-video-page :is(#overview,#use,#strengths,#faq),
.lecture-workshop-page :is(#overview,#use,#strengths,#faq),
.product-development-page :is(#overview,#fit,#price),
.media-supervision-page :is(#overview,#examples,#price){
  background:var(--tl-ivory) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}
.sns-pr-page :is(#channel,#fit,#price,#process,#works),
.accessible-video-page :is(#problems,#scope,#price),
.lecture-workshop-page :is(#problems,#formats,#price),
.product-development-page :is(#problems,#why-us,#faq),
.media-supervision-page :is(#problems,#approach,#faq){
  background:var(--tl-navy) !important;
  color:var(--tl-white) !important;
}

/* Ivory service sections = dark text. */
.sns-pr-page :is(#overview,#strengths,#audience,#assurance,#faq) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.accessible-video-page :is(#overview,#use,#strengths,#faq) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.lecture-workshop-page :is(#overview,#use,#strengths,#faq) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.product-development-page :is(#overview,#fit,#price) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.media-supervision-page :is(#overview,#examples,#price) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* Navy service sections = white section copy. */
.sns-pr-page :is(#channel,#fit,#price,#process,#works) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.accessible-video-page :is(#problems,#scope,#price) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.lecture-workshop-page :is(#problems,#formats,#price) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.product-development-page :is(#problems,#why-us,#faq) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead),
.media-supervision-page :is(#problems,#approach,#faq) :is(h1,h2,h3,h4,h5,p,li,summary,a,strong,span,small,.eyebrow,.section-title,.section-lead,.overview-title,.overview-lead){
  color:var(--tl-white) !important;
  -webkit-text-fill-color:var(--tl-white) !important;
}
.sns-pr-page :is(#channel,#fit,#price,#process,#works) .eyebrow,
.accessible-video-page :is(#problems,#scope,#price) .eyebrow,
.lecture-workshop-page :is(#problems,#formats,#price) .eyebrow,
.product-development-page :is(#problems,#why-us,#faq) .eyebrow,
.media-supervision-page :is(#problems,#approach,#faq) .eyebrow{
  color:#FFE08A !important;
  -webkit-text-fill-color:#FFE08A !important;
}

/* White cards on navy sections always carry dark text. */
body.service-page :is(#channel,#fit,#price,#process,#works,#problems,#scope,#formats,#why-us,#approach) :is(
  .decision-item,.problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
  .format-card,.approach-card,.assurance-item,.price-simple-item,.work-card,.video-link-card,
  .flow-band-item,.why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card,
  .why2-convergence,.approach-shell,.strengths-shell
){
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  border-color:var(--tl-line-dark) !important;
  color-scheme:light !important;
}
body.service-page :is(#channel,#fit,#price,#process,#works,#problems,#scope,#formats,#why-us,#approach) :is(
  .decision-item,.problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
  .format-card,.approach-card,.assurance-item,.price-simple-item,.work-card,.video-link-card,
  .flow-band-item,.why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card,
  .why2-convergence,.approach-shell,.strengths-shell
) :is(h1,h2,h3,h4,h5,p,li,a,strong,span,small,.work-tag,.video-caption,.approach-intro,.strengths-intro){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* FAQ on navy pages stays transparent/white rather than becoming a white-on-white card. */
.product-development-page #faq details,
.media-supervision-page #faq details{
  background:transparent !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.28) !important;
}
.product-development-page #faq details :is(summary,p,strong,span,a),
.media-supervision-page #faq details :is(summary,p,strong,span,a){
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* Service CTA = strong yellow, existing black/white buttons retained. */
body.service-page .cta{
  background:var(--tl-yellow) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}
body.service-page .cta :is(h1,h2,h3,p,a,strong,span){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}
body.service-page .cta .btn,
body.service-page .cta .btn-dark{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#111214 !important;
}

/* Other services = ivory; buttons = navy/white. */
body.service-page #related-services{
  background:var(--tl-ivory) !important;
  color:var(--tl-ink) !important;
  color-scheme:light !important;
}
body.service-page #related-services :is(h1,h2,h3,p,.eyebrow,.section-title,.section-lead){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}
body.service-page #related-services :is(.related,.related-grid) a{
  background:var(--tl-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid var(--tl-navy) !important;
  box-shadow:none !important;
}
body.service-page #related-services :is(.related,.related-grid) a:hover{
  background:var(--tl-navy-deep) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------- BUTTON CONTRAST ON SERVICE CONTENT ---------- */
/* Ivory -> navy/white. */
.sns-pr-page :is(#overview,#strengths,#audience,#assurance,#faq) .btn,
.accessible-video-page :is(#overview,#use,#strengths,#faq) .btn,
.lecture-workshop-page :is(#overview,#use,#strengths,#faq) .btn,
.product-development-page :is(#overview,#fit,#price) .btn,
.media-supervision-page :is(#overview,#examples,#price) .btn{
  background:var(--tl-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid var(--tl-navy) !important;
}
/* Navy -> ivory/navy. */
.sns-pr-page :is(#channel,#fit,#price,#process,#works) .btn,
.accessible-video-page :is(#problems,#scope,#price) .btn,
.lecture-workshop-page :is(#problems,#formats,#price) .btn,
.product-development-page :is(#problems,#why-us,#faq) .btn,
.media-supervision-page :is(#problems,#approach,#faq) .btn{
  background:var(--tl-ivory) !important;
  color:var(--tl-navy) !important;
  -webkit-text-fill-color:var(--tl-navy) !important;
  border:2px solid var(--tl-ivory) !important;
}
.sns-pr-page :is(#channel,#fit,#price,#process,#works) .btn span,
.accessible-video-page :is(#problems,#scope,#price) .btn span,
.lecture-workshop-page :is(#problems,#formats,#price) .btn span,
.product-development-page :is(#problems,#why-us,#faq) .btn span,
.media-supervision-page :is(#problems,#approach,#faq) .btn span{
  color:var(--tl-navy) !important;
  -webkit-text-fill-color:var(--tl-navy) !important;
}

/* ---------- MOBILE: 3-card rows become a readable vertical stack ---------- */
@media (max-width:767px){
  body.service-page .strength-grid,
  .lecture-workshop-page .format-grid,
  .media-supervision-page .approach-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.service-page .strength-card,
  .lecture-workshop-page .format-card,
  .media-supervision-page .approach-card{
    width:100% !important;
    min-height:0 !important;
    padding:14px 16px !important;
  }

  /* Two-card comparison layouts remain two columns. */
  .sns-pr-page .audience-grid,
  .sns-pr-page .price-simple,
  .accessible-video-page .price-simple,
  .product-development-page .price-simple{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .lecture-workshop-page .price-simple{
    grid-template-columns:1fr !important;
  }

  /* Logo remains transparent on mobile too. */
  .home-page #top .hero-logo-wrap{
    background:transparent !important;
    padding:0 !important;
    box-shadow:none !important;
  }
}

/* ---------- DARK MODE: never lose text ---------- */
@media (prefers-color-scheme:dark){
  :root,html{color-scheme:dark !important;}
  body{background:#0B0D10 !important;color:#F7F8FA !important;}

  /* Keep brand section colors unchanged; only header/chrome becomes dark. */
  .site-header,.header{
    background:#0E1115 !important;
    color:#FFFFFF !important;
    border-bottom-color:rgba(255,255,255,.20) !important;
  }
  .site-header .brand,.header .brand,
  .site-header .site-menu-btn,.header .site-menu-btn,
  .header-nav > a:not(.header-cta){
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .site-menu-btn{
    background:#171A1F !important;
    color:#FFFFFF !important;
    border-color:rgba(255,255,255,.28) !important;
  }
  .menu-drawer,.menu-drawer-head,.menu-links,.menu-links a{
    background:#0E1115 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .menu-close{
    background:#191D22 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:rgba(255,255,255,.26) !important;
  }

  /* Repeat crucial top section colors after legacy dark-mode rules. */
  .home-page #top,.home-page #contact,body.service-page .hero,body.service-page .cta{
    background:var(--tl-yellow) !important;
  }
  .home-page :is(#story,#why-us,#youtube),
  body.service-page #related-services,
  .sns-pr-page :is(#overview,#strengths,#audience,#assurance,#faq),
  .accessible-video-page :is(#overview,#use,#strengths,#faq),
  .lecture-workshop-page :is(#overview,#use,#strengths,#faq),
  .product-development-page :is(#overview,#fit,#price),
  .media-supervision-page :is(#overview,#examples,#price){
    background:var(--tl-ivory) !important;
  }
  .home-page :is(#services,#profile,#news,#contact-form),
  .sns-pr-page :is(#channel,#fit,#price,#process,#works),
  .accessible-video-page :is(#problems,#scope,#price),
  .lecture-workshop-page :is(#problems,#formats,#price),
  .product-development-page :is(#problems,#why-us,#faq),
  .media-supervision-page :is(#problems,#approach,#faq){
    background:var(--tl-navy) !important;
  }

  /* Native white fields/cards must not be auto-darkened by the browser. */
  .home-page #contact-form :is(input,textarea),
  .home-page #services .service-card,
  .home-page #profile .profile-points li,
  body.service-page :is(#channel,#fit,#price,#process,#works,#problems,#scope,#formats,#why-us,#approach) :is(
    .decision-item,.problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
    .format-card,.approach-card,.assurance-item,.price-simple-item,.work-card,.video-link-card,
    .flow-band-item,.why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card,
    .why2-convergence,.approach-shell,.strengths-shell
  ){
    color-scheme:light !important;
    background:#FFFFFF !important;
    color:var(--tl-ink) !important;
    -webkit-text-fill-color:var(--tl-ink) !important;
  }

  /* News detail page dark-mode readability. */
  .news-detail-page{
    background:#0B0D10 !important;
    color:#F7F8FA !important;
  }
  .news-detail-page .news-detail-main,
  .news-detail-page .news-detail-body{
    background:#0B0D10 !important;
    color:#F7F8FA !important;
  }
  .news-detail-page :is(.news-detail-title,.news-detail-body h2,.news-detail-body p,.news-detail-back){
    color:#F7F8FA !important;
    -webkit-text-fill-color:#F7F8FA !important;
  }
  .news-detail-page :is(.news-detail-date,.news-detail-lead){
    color:#D5D9DF !important;
    -webkit-text-fill-color:#D5D9DF !important;
  }
  .news-detail-page .news-service-list li,
  .news-detail-page .news-detail-message{
    background:#171B20 !important;
    color:#F7F8FA !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  .news-detail-page .news-detail-actions .btn-outline{
    background:var(--tl-ivory) !important;
    color:var(--tl-navy) !important;
    -webkit-text-fill-color:var(--tl-navy) !important;
    border-color:var(--tl-ivory) !important;
  }
  .news-detail-page .news-detail-actions .btn-dark{
    background:var(--tl-yellow) !important;
    color:var(--tl-ink) !important;
    -webkit-text-fill-color:var(--tl-ink) !important;
    border-color:var(--tl-yellow) !important;
  }

  /* Thanks page dark-mode readability. */
  body.thanks-page{
    background:#0B0D10 !important;
    color:#F7F8FA !important;
  }
  body.thanks-page main{
    background:radial-gradient(circle at 50% 35%,rgba(242,178,0,.10),transparent 32%),#0B0D10 !important;
  }
  body.thanks-page .thanks :is(h1,p,strong,.reply,.note){
    color:#F7F8FA !important;
    -webkit-text-fill-color:#F7F8FA !important;
  }
  body.thanks-page .thanks .eyebrow{
    color:#FFE08A !important;
    -webkit-text-fill-color:#FFE08A !important;
  }
  body.thanks-page .reply a{
    color:#FFE08A !important;
    -webkit-text-fill-color:#FFE08A !important;
  }
  body.thanks-page .btn{
    background:var(--tl-yellow) !important;
    color:var(--tl-ink) !important;
    -webkit-text-fill-color:var(--tl-ink) !important;
  }
  body.thanks-page .footer{
    background:#0E1115 !important;
    color:#D5D9DF !important;
    border-top-color:rgba(255,255,255,.16) !important;
  }
}

/* ---------- LAST-PASS CARD SAFETY ---------- */
/* Every service information card is deliberately light with dark text,
   irrespective of the OS theme. This avoids legacy dark rules producing
   dark-on-dark or white-on-white combinations. */
body.service-page :is(
  .decision-item,.problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
  .format-card,.approach-card,.assurance-item,.price-simple-item,.work-card,.video-link-card,
  .flow-band-item,.why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card,
  .why2-convergence,.approach-shell,.strengths-shell
){
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
  border-color:var(--tl-line-dark) !important;
  color-scheme:light !important;
}
body.service-page :is(
  .decision-item,.problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
  .format-card,.approach-card,.assurance-item,.price-simple-item,.work-card,.video-link-card,
  .flow-band-item,.why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card,
  .why2-convergence,.approach-shell,.strengths-shell
) :is(h1,h2,h3,h4,h5,p,li,a,strong,span,small,.work-tag,.video-caption,.approach-intro,.strengths-intro){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* Home WHY US cards stay light/dark even when legacy dark-mode rules fire. */
.home-page #why-us :is(
  .why2-process-card,.why2-perspective-card,.why2-convergence,
  .why2-mobile-stage,.why2-mobile-perspective,.why2-mobile-convergence
){
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
  border-color:var(--tl-line-dark) !important;
  color-scheme:light !important;
}
.home-page #why-us :is(
  .why2-process-card,.why2-perspective-card,.why2-convergence,
  .why2-mobile-stage,.why2-mobile-perspective,.why2-mobile-convergence
) :is(h1,h2,h3,h4,p,li,strong,span,small,mark){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}
.home-page #why-us :is(.why2-stage-sub,.why2-perspective-target,.why2-mobile-sub,.why2-mobile-target){
  color:#765400 !important;
  -webkit-text-fill-color:#765400 !important;
}

@media (prefers-color-scheme:dark){
  .site-header :is(.header-home,.news-detail-home),
  .header :is(.header-home,.news-detail-home){
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:rgba(255,255,255,.26) !important;
  }
  .header .header-cta,
  .site-header .header-cta{
    background:var(--tl-yellow) !important;
    color:var(--tl-ink) !important;
    -webkit-text-fill-color:var(--tl-ink) !important;
    border-color:var(--tl-yellow) !important;
  }
  .crumb{
    color:#E7EAF0 !important;
    -webkit-text-fill-color:#E7EAF0 !important;
  }
  .crumb a{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .page-nav{
    background:#0E1115 !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  .page-nav a{
    background:#171A1F !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:rgba(255,255,255,.24) !important;
  }
  .footer{
    background:#0B0D10 !important;
    color:#D9DDE3 !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  .footer a,.footer span{
    color:#D9DDE3 !important;
    -webkit-text-fill-color:#D9DDE3 !important;
  }
}

/* ---------- BUTTON CHILD-TEXT SAFETY ---------- */
/* Yellow service hero keeps its intentional black and white button pair. */
body.service-page .hero .btn-dark{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#111214 !important;
}
body.service-page .hero .btn-dark :is(span,strong){
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
body.service-page .hero :is(.btn-light,.btn-outline){
  background:#FFFFFF !important;
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
  border-color:rgba(17,18,20,.24) !important;
}
body.service-page .hero :is(.btn-light,.btn-outline) :is(span,strong){
  color:var(--tl-ink) !important;
  -webkit-text-fill-color:var(--tl-ink) !important;
}

/* Preserve button text contrast even when legacy section selectors style spans. */
.sns-pr-page :is(#overview,#strengths,#audience,#assurance,#faq) .btn :is(span,strong),
.accessible-video-page :is(#overview,#use,#strengths,#faq) .btn :is(span,strong),
.lecture-workshop-page :is(#overview,#use,#strengths,#faq) .btn :is(span,strong),
.product-development-page :is(#overview,#fit,#price) .btn :is(span,strong),
.media-supervision-page :is(#overview,#examples,#price) .btn :is(span,strong){
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
body.service-page .cta .btn :is(span,strong){
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}