/* =========================================================
   VISUAL REBALANCE — 2026-09-03
   Purpose: preserve strong yellow accents, use soft alternating
   backgrounds for content sections, and keep mobile readable.
   ========================================================= */
:root{
  --section-ivory:#FFF9ED;
  --section-blue:#EAF6FA;
  --site-ink:#111214;
  --site-muted:#50565E;
  --site-accent:#F2B200;
  --site-accent-deep:#A86E00;
}

/* ---------- HOME: yellow remains the accent ---------- */
.home-page #top{background:#F2B200 !important;}
.home-page #contact{background:#F2B200 !important;color:#111214 !important;}
.home-page #contact h2,.home-page #contact p{color:#111214 !important;-webkit-text-fill-color:#111214 !important;}
.home-page #contact .btn-dark{background:#111214 !important;color:#fff !important;border-color:#111214 !important;}

/* Soft section backgrounds only for content areas */
.home-page #story{background:var(--section-ivory) !important;}
.home-page #services{background:var(--section-blue) !important;}
.home-page #why-us{background:var(--section-ivory) !important;}
.home-page #profile{background:var(--section-blue) !important;}
.home-page #youtube{background:var(--section-ivory) !important;}
.home-page #news{background:var(--section-blue) !important;}
.home-page #contact-form{background:var(--section-ivory) !important;}

.home-page #story,.home-page #services,.home-page #why-us,.home-page #profile,
.home-page #youtube,.home-page #news,.home-page #contact-form{
  color:var(--site-ink) !important;
}
.home-page #story h2,.home-page #story h3,.home-page #story p,.home-page #story a,
.home-page #services h2,.home-page #services h3,.home-page #services p,
.home-page #why-us h2,.home-page #why-us h3,.home-page #why-us p,
.home-page #profile h2,.home-page #profile h3,.home-page #profile p,.home-page #profile summary,
.home-page #youtube h2,.home-page #youtube h3,.home-page #youtube p,
.home-page #news h2,.home-page #news h3,.home-page #news p,.home-page #news a,
.home-page #contact-form h2,.home-page #contact-form p,.home-page #contact-form label,.home-page #contact-form summary{
  color:var(--site-ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

.story-mobile-summary{display:none;}

/* Form validation */
.email-match-message{margin:7px 0 0;color:#62666D;font-size:13px;line-height:1.55;}
.email-match-message.is-match{color:#246B3F;}
.email-match-message.is-error{color:#B42318;}
.home-page #contact-form .submit:disabled{background:#D5D7DA !important;color:#73777E !important;cursor:not-allowed !important;}
.home-page #contact-form .submit:not(:disabled){background:#111214 !important;color:#fff !important;}

/* Related services: unmistakable buttons */
.service-page #related-services .related a,
.service-page #related-services .related-grid a{
  background:#111214 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:2px solid #111214 !important;
  box-shadow:none !important;
}
.service-page #related-services .related a:hover,
.service-page #related-services .related-grid a:hover{
  background:#F2B200 !important;
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
}

.hero-lead-mobile{display:none;}

@media (max-width:767px){
  /* ---------- HOME STORY: concise but readable ---------- */
  .home-page #story.section{padding:44px 0 46px !important;min-height:0 !important;}
  .home-page #story .story-simple{padding:0 !important;}
  .home-page #story .story-simple .section-title{font-size:30px !important;line-height:1.25 !important;margin-top:7px !important;}
  .home-page #story .story-lead,.home-page #story .story-closing{display:none !important;}
  .home-page #story .story-mobile-summary{display:block;margin:18px 0 0;font-size:15px;line-height:1.75;color:#3F444B !important;}
  .home-page #story .story-core{margin-top:18px !important;font-size:24px !important;line-height:1.42 !important;}
  .home-page #story .story-services-link{margin-top:18px !important;font-size:14px !important;}

  /* ---------- Service pages: image first, not text-first ---------- */
  body.service-page .hero{padding:18px 0 34px !important;min-height:0 !important;}
  body.service-page .hero-grid{display:flex !important;flex-direction:column !important;gap:18px !important;}
  body.service-page .hero-grid > .hero-image{order:1 !important;}
  body.service-page .hero-grid > :not(.hero-image){order:2 !important;}
  body.service-page .hero-image{border-radius:18px !important;overflow:hidden !important;box-shadow:0 10px 26px rgba(17,18,20,.08) !important;}
  body.service-page .hero-image img{width:100% !important;height:140px !important;object-fit:cover !important;aspect-ratio:auto !important;}
  body.service-page .hero-image::after{display:none !important;}
  body.service-page .hero .eyebrow{font-size:11px !important;line-height:1.3 !important;margin-top:0 !important;}
  body.service-page .hero h1,body.service-page #page-title{font-size:31px !important;line-height:1.22 !important;letter-spacing:-.025em !important;margin-top:6px !important;}
  body.service-page .hero-lead-desktop,body.service-page .hero-hook{display:none !important;}
  body.service-page .hero-lead-mobile{display:block !important;margin-top:12px !important;font-size:15px !important;line-height:1.72 !important;color:#3E444B !important;}
  body.service-page .hero-actions{display:flex !important;flex-wrap:wrap !important;gap:9px !important;margin-top:17px !important;}
  body.service-page .hero-actions .btn{min-height:46px !important;padding:11px 14px !important;font-size:13px !important;line-height:1.3 !important;}

  /* Alternating soft section backgrounds. Yellow stays reserved for accents/buttons. */
  .sns-pr-page .hero,.accessible-video-page .hero,.lecture-workshop-page .hero,.product-development-page .hero,.media-supervision-page .hero{background:var(--section-ivory) !important;}
  .sns-pr-page #overview,.accessible-video-page #overview,.lecture-workshop-page #overview,.product-development-page #overview,.media-supervision-page #overview{background:var(--section-blue) !important;}
  .sns-pr-page #channel,.accessible-video-page #problems,.lecture-workshop-page #problems,.product-development-page #problems,.media-supervision-page #problems{background:var(--section-ivory) !important;}
  .sns-pr-page #strengths,.accessible-video-page #use,.lecture-workshop-page #use,.product-development-page #fit,.media-supervision-page #examples{background:var(--section-blue) !important;}
  .sns-pr-page #fit,.accessible-video-page #strengths,.lecture-workshop-page #formats,.product-development-page #why-us,.media-supervision-page #price{background:var(--section-ivory) !important;}
  .sns-pr-page #audience,.accessible-video-page #price,.lecture-workshop-page #strengths,.product-development-page #price,.media-supervision-page #faq{background:var(--section-blue) !important;}
  .sns-pr-page #price,.accessible-video-page #faq,.lecture-workshop-page #price,.product-development-page #faq,.media-supervision-page #related-services{background:var(--section-ivory) !important;}
  .sns-pr-page #assurance,.accessible-video-page #related-services,.lecture-workshop-page #faq,.product-development-page #related-services{background:var(--section-blue) !important;}
  .sns-pr-page #faq,.lecture-workshop-page #related-services{background:var(--section-ivory) !important;}
  .sns-pr-page #works{background:var(--section-blue) !important;}
  .sns-pr-page #related-services{background:var(--section-ivory) !important;}

  body.service-page .section,body.service-page .overview-section{padding:38px 0 !important;min-height:0 !important;color:#111214 !important;}
  body.service-page .section-title,body.service-page .overview-title{font-size:26px !important;line-height:1.3 !important;letter-spacing:-.015em !important;margin-top:5px !important;}
  body.service-page .section-lead,body.service-page .overview-lead{font-size:15px !important;line-height:1.72 !important;margin-top:10px !important;color:#50565E !important;}
  body.service-page .eyebrow{font-size:10px !important;}

  /* Overview blocks: clear 2x2 summary, readable labels */
  body.service-page .overview-head{display:block !important;}
  body.service-page .decision-strip{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-top:20px !important;background:transparent !important;overflow:visible !important;}
  body.service-page .decision-item{padding:13px 12px !important;border:1px solid rgba(17,18,20,.12) !important;border-radius:14px !important;background:rgba(255,255,255,.82) !important;}
  body.service-page .decision-label{font-size:10px !important;line-height:1.25 !important;}
  body.service-page .decision-value{margin-top:4px !important;font-size:13px !important;line-height:1.4 !important;}

  /* Four-item sections: keep headings; hide secondary explanation on phone */
  body.service-page .problem-grid,body.service-page .use-grid,body.service-page .fit-grid,body.service-page .scope-grid{
    display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-top:20px !important;
  }
  body.service-page .problem-card,body.service-page .use-card,body.service-page .fit-card,body.service-page .scope-card{
    min-width:0 !important;min-height:0 !important;padding:15px 13px !important;border-radius:15px !important;background:rgba(255,255,255,.86) !important;
  }
  body.service-page .problem-card h3,body.service-page .use-card h3,body.service-page .fit-card h3,body.service-page .scope-card h3{
    margin-top:4px !important;font-size:14px !important;line-height:1.38 !important;
  }
  body.service-page .problem-card p,body.service-page .use-card p,body.service-page .fit-card p,body.service-page .scope-card p{display:none !important;}
  body.service-page .problem-kicker,body.service-page .use-tag,body.service-page .fit-kicker,body.service-page .scope-kicker{font-size:9px !important;line-height:1.2 !important;}
  body.service-page .scope-note,body.service-page .fit-note{margin-top:12px !important;padding:12px 13px !important;font-size:13px !important;line-height:1.55 !important;}

  /* Strength / format cards: titles remain readable; descriptions are optional detail */
  body.service-page .strengths-shell,body.service-page .approach-shell{margin-top:18px !important;padding:16px !important;border-radius:18px !important;}
  body.service-page .strengths-intro,body.service-page .approach-intro{padding:0 0 12px !important;}
  body.service-page .strengths-intro strong,body.service-page .approach-intro strong{font-size:16px !important;line-height:1.4 !important;}
  body.service-page .strengths-intro span,body.service-page .approach-intro span{margin-top:6px !important;font-size:13px !important;line-height:1.55 !important;}
  body.service-page .strength-grid,body.service-page .format-grid,.sns-pr-page .assurance-list{
    display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-top:12px !important;
  }
  body.service-page .strength-card,body.service-page .format-card,.sns-pr-page .assurance-item{
    min-width:0 !important;min-height:0 !important;padding:14px 12px !important;border-radius:14px !important;background:rgba(255,255,255,.88) !important;
  }
  body.service-page .strength-card h3,body.service-page .format-card h3,.sns-pr-page .assurance-item h3{font-size:14px !important;line-height:1.38 !important;margin-top:5px !important;}
  body.service-page .strength-card p,body.service-page .format-card p,.sns-pr-page .assurance-item p{display:none !important;}
  body.service-page .strength-num,body.service-page .format-no,.sns-pr-page .assurance-icon{width:32px !important;height:32px !important;font-size:10px !important;}
  body.service-page .strength-key{display:none !important;}

  /* SNS "what is this channel" section: visual + essential copy only */
  .sns-pr-page #channel .channel-grid{display:flex !important;flex-direction:column !important;gap:14px !important;margin-top:18px !important;}
  .sns-pr-page #channel .video-link-card{order:1 !important;}
  .sns-pr-page #channel .channel-copy{order:2 !important;}
  .sns-pr-page #channel .video-link-card img{width:100% !important;height:150px !important;object-fit:cover !important;}
  .sns-pr-page #channel .video-caption{padding:10px 12px !important;font-size:12px !important;}
  .sns-pr-page #channel .channel-copy p{display:none !important;}
  .sns-pr-page #channel .channel-copy p:first-of-type{display:block !important;margin:0 !important;font-size:14px !important;line-height:1.65 !important;}
  .sns-pr-page #channel .topic-tags{display:none !important;}
  .sns-pr-page #channel .hero-actions{margin-top:12px !important;display:block !important;}
  .sns-pr-page #channel .hero-actions .btn{min-height:44px !important;font-size:13px !important;}

  /* Audience */
  .sns-pr-page #audience .audience-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-top:18px !important;}
  .sns-pr-page #audience .audience-card{min-height:0 !important;padding:14px 12px !important;border-radius:14px !important;background:rgba(255,255,255,.86) !important;}
  .sns-pr-page #audience .audience-label{font-size:9px !important;}
  .sns-pr-page #audience .audience-card h3{font-size:14px !important;line-height:1.38 !important;margin-top:5px !important;}
  .sns-pr-page #audience .audience-card p,.sns-pr-page #audience .audience-points,.sns-pr-page #audience .audience-note{display:none !important;}

  /* Assurance */
  .sns-pr-page #assurance .assurance-wrap{margin-top:17px !important;display:block !important;}
  .sns-pr-page #assurance .assurance-lead{padding:16px !important;border-radius:15px !important;margin-bottom:10px !important;}
  .sns-pr-page #assurance .assurance-lead strong{font-size:16px !important;line-height:1.45 !important;}
  .sns-pr-page #assurance .assurance-lead p{display:none !important;}

  /* Price: readable, not microscopic */
  body.service-page .price-simple{gap:12px !important;margin-top:18px !important;}
  body.service-page .price-simple-item,body.service-page .price-simple{ }
  body.service-page .price-simple-item{padding:18px 16px !important;}
  body.service-page .price-simple-item span,body.service-page .price-simple > span{font-size:14px !important;}
  body.service-page .price-simple-item strong,body.service-page .price-simple > strong{font-size:25px !important;line-height:1.25 !important;margin-top:5px !important;}
  body.service-page .price-small{font-size:12px !important;line-height:1.55 !important;}
  body.service-page .price-bottom{margin-top:16px !important;padding-top:14px !important;}
  body.service-page .price-bottom p{font-size:13px !important;line-height:1.55 !important;}
  body.service-page .price-bottom .btn{margin-top:10px !important;min-height:44px !important;font-size:13px !important;}

  /* FAQ: whole list is scannable; answers stay inside accordions */
  body.service-page .faq{margin-top:14px !important;}
  body.service-page details{padding:10px 0 !important;}
  body.service-page summary{font-size:14px !important;line-height:1.45 !important;}
  body.service-page details p{font-size:14px !important;line-height:1.65 !important;}

  /* Related buttons: one-column = clear tap targets */
  body.service-page #related-services .related,body.service-page #related-services .related-grid{display:grid !important;grid-template-columns:1fr !important;gap:9px !important;margin-top:16px !important;}
  body.service-page #related-services .related a,body.service-page #related-services .related-grid a{min-height:48px !important;padding:11px 13px !important;font-size:13px !important;line-height:1.35 !important;}

  /* Keep mobile menu readable */
  .menu-drawer,.menu-drawer-head,.menu-links,.menu-links a{background:#fff !important;color:#111214 !important;-webkit-text-fill-color:#111214 !important;}
  .menu-close{background:#fff !important;color:#111214 !important;}
}

/* ---------- Dark mode: real dark palette, yellow remains the brand accent ---------- */
@media (prefers-color-scheme:dark){
  :root{--section-ivory:#171612;--section-blue:#101B20;--site-ink:#F7F7F8;--site-muted:#CED2D8;}
  html,body{background:#0B0C0E !important;color:#F7F7F8 !important;}
  .home-page #top,.home-page #contact{background:#F2B200 !important;color:#111214 !important;}
  .home-page #contact h2,.home-page #contact p{color:#111214 !important;-webkit-text-fill-color:#111214 !important;}
  .home-page #story,.home-page #services,.home-page #why-us,.home-page #profile,.home-page #youtube,.home-page #news,.home-page #contact-form{color:#F7F7F8 !important;}
  .home-page #story h2,.home-page #story h3,.home-page #story p,.home-page #story a,
  .home-page #services h2,.home-page #services h3,.home-page #services p,
  .home-page #why-us h2,.home-page #why-us h3,.home-page #why-us p,
  .home-page #profile h2,.home-page #profile h3,.home-page #profile p,.home-page #profile summary,
  .home-page #youtube h2,.home-page #youtube h3,.home-page #youtube p,
  .home-page #news h2,.home-page #news h3,.home-page #news p,.home-page #news a,
  .home-page #contact-form h2,.home-page #contact-form p,.home-page #contact-form label,.home-page #contact-form summary{
    color:#F7F7F8 !important;-webkit-text-fill-color:#F7F7F8 !important;
  }
  .service-page{background:#0B0C0E !important;color:#F7F7F8 !important;}
  .service-page .section,.service-page .overview-section{color:#F7F7F8 !important;}
  .service-page .section-title,.service-page .overview-title,.service-page h3,.service-page summary{color:#F7F7F8 !important;-webkit-text-fill-color:#F7F7F8 !important;}
  .service-page .section-lead,.service-page .overview-lead,.service-page .hero-lead-mobile,.service-page details p{color:#D6D9DE !important;}
  .service-page .decision-item,.service-page .problem-card,.service-page .use-card,.service-page .fit-card,.service-page .scope-card,
  .service-page .strength-card,.service-page .format-card,.sns-pr-page .assurance-item,.sns-pr-page .audience-card{
    background:#191B1F !important;border-color:rgba(255,255,255,.16) !important;color:#F7F7F8 !important;
  }
  .service-page .price-simple-item{background:#191B1F !important;color:#F7F7F8 !important;}
  .service-page input,.service-page textarea,.home-page input,.home-page textarea{background:#15171A !important;color:#F7F7F8 !important;border-color:rgba(255,255,255,.28) !important;}
  .menu-drawer,.menu-drawer-head,.menu-links,.menu-links a{background:#111214 !important;color:#F7F7F8 !important;-webkit-text-fill-color:#F7F7F8 !important;}
  .menu-close{background:#1B1D20 !important;color:#F7F7F8 !important;border-color:rgba(255,255,255,.25) !important;}
  @media(max-width:767px){
    .home-page #story .story-mobile-summary{color:#D6D9DE !important;}
    body.service-page .hero-lead-mobile{color:#D6D9DE !important;}
  }
}

/* ---------- Smartphone home: fixed alternating palette ----------
   Yellow hero → ivory → navy → ivory → navy → ivory → navy → ivory.
   These final rules also prevent automatic dark-mode colors from hiding text.
   Desktop remains unchanged. */
@media (max-width:767px){
  .home-page #top{
    background:#F7C400 !important;
    color:#111214 !important;
  }
  .home-page #top::after{
    background:linear-gradient(180deg,rgba(247,196,0,.28) 0%,rgba(247,196,0,.56) 58%,rgba(247,196,0,.72) 100%) !important;
  }

  .home-page #story,
  .home-page #why-us,
  .home-page #youtube,
  .home-page #contact-form{
    background:#FFF9ED !important;
    color:#111214 !important;
  }

  .home-page #services,
  .home-page #profile,
  .home-page #news{
    background:#163F63 !important;
    color:#FFFFFF !important;
  }

  .home-page #story h2,.home-page #story h3,.home-page #story p,.home-page #story a,
  .home-page #why-us h2,.home-page #why-us h3,.home-page #why-us p,
  .home-page #youtube h2,.home-page #youtube h3,.home-page #youtube p,
  .home-page #contact-form h2,.home-page #contact-form h3,.home-page #contact-form p,
  .home-page #contact-form label,.home-page #contact-form summary{
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }

  .home-page #services > .container > .eyebrow,
  .home-page #services > .container > .section-title,
  .home-page #services > .container > .section-lead,
  .home-page #profile > .container > .eyebrow,
  .home-page #profile > .container > .section-title,
  .home-page #profile .profile-summary,
  .home-page #profile .profile-details summary,
  .home-page #profile .profile-details .bio,
  .home-page #profile .profile-details .bio p,
  .home-page #news > .container > .eyebrow,
  .home-page #news > .container > .section-title,
  .home-page #news > .container > .section-lead{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }

  /* Light cards retain dark text inside the navy sections. */
  .home-page #profile .profile-points li,
  .home-page #news .news-box,
  .home-page #news .news-item,
  .home-page #news .news-link,
  .home-page #news .news-desc,
  .home-page #news .news-date,
  .home-page #news .news-empty{
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }

  .home-page #youtube .youtube-description,
  .home-page #youtube .youtube-hashtags{
    color:#3F4650 !important;
    -webkit-text-fill-color:#3F4650 !important;
  }
}

@media (max-width:767px) and (prefers-color-scheme:dark){
  .home-page #top{
    background:#F7C400 !important;
    color:#111214 !important;
  }

  .home-page #story,
  .home-page #why-us,
  .home-page #youtube,
  .home-page #contact-form{
    background:#FFF9ED !important;
    color:#111214 !important;
  }

  .home-page #services,
  .home-page #profile,
  .home-page #news{
    background:#163F63 !important;
    color:#FFFFFF !important;
  }

  .home-page #contact-form input,
  .home-page #contact-form textarea{
    background:#FFFFFF !important;
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
    border-color:#747A82 !important;
  }

  .home-page #contact-form input::placeholder,
  .home-page #contact-form textarea::placeholder{
    color:#6B7078 !important;
    -webkit-text-fill-color:#6B7078 !important;
    opacity:1 !important;
  }

  .home-page #why-us .why2-mobile-stage,
  .home-page #why-us .why2-mobile-perspective,
  .home-page #why-us .why2-mobile-convergence{
    background:#FFFFFF !important;
    color:#111214 !important;
    border-color:rgba(17,18,20,.16) !important;
  }

  .home-page #why-us .why2-mobile-stage h3,
  .home-page #why-us .why2-mobile-perspective h3,
  .home-page #why-us .why2-mobile-stage-body > p,
  .home-page #why-us .why2-mobile-perspective-copy,
  .home-page #why-us .why2-mobile-convergence strong,
  .home-page #why-us .why2-mobile-convergence p{
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }
}

/* =========================================================
   FINAL COLOR SYSTEM v3 — requested 2026-09-03
   Yellow = brand accent / hero / CTA
   Ivory + navy = alternating content sections
   Explicit text colors are fixed in both light and dark OS modes.
   ========================================================= */
:root{
  --brand-yellow:#F2B200;
  --brand-ivory:#FFF8E8;
  --brand-navy:#163F63;
  --brand-ink:#111214;
  --brand-white:#FFFFFF;
  --brand-muted:#4E545C;
}

/* Keep the requested visual palette even when the OS is in dark mode. */
html{color-scheme:light dark;}

/* ---------------- HOME ---------------- */
.home-page #top{
  background:var(--brand-yellow) !important;
  color:var(--brand-ink) !important;
}
.home-page #top h1,
.home-page #top p,
.home-page #top .eyebrow{
  color:var(--brand-ink) !important;
  -webkit-text-fill-color:var(--brand-ink) !important;
}

/* STORY → NEWS: ivory / navy alternating. SERVICES is one navy section. */
.home-page #story,
.home-page #why-us,
.home-page #youtube{
  background:var(--brand-ivory) !important;
  color:var(--brand-ink) !important;
}
.home-page #services,
.home-page #profile,
.home-page #news{
  background:var(--brand-navy) !important;
  color:var(--brand-white) !important;
}

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

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

/* White/light cards inside navy home sections stay dark for strong contrast. */
.home-page #services .service-card,
.home-page #profile .profile-points li,
.home-page #profile .profile-photo{
  background:#FFFFFF !important;
  color:var(--brand-ink) !important;
  border-color:rgba(17,18,20,.14) !important;
}
.home-page #services .service-card :is(h3,p,span,strong,.service-no,.service-arrow),
.home-page #profile .profile-points li,
.home-page #profile .profile-points li :is(h3,p,span,strong){
  color:var(--brand-ink) !important;
  -webkit-text-fill-color:var(--brand-ink) !important;
}
.home-page #services .service-card .service-no{color:#7A5600 !important;-webkit-text-fill-color:#7A5600 !important;}

/* Brand CTA stays strong yellow. */
.home-page #contact{
  background:var(--brand-yellow) !important;
  color:var(--brand-ink) !important;
}
.home-page #contact :is(h2,h3,p,a,strong,span){
  color:var(--brand-ink) !important;
  -webkit-text-fill-color:var(--brand-ink) !important;
}
.home-page #contact .btn-dark{
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#111214 !important;
}

/* Contact form = navy, fields = clearly white. */
.home-page #contact-form{
  background:var(--brand-navy) !important;
  color:var(--brand-white) !important;
}
.home-page #contact-form :is(h2,h3,p,label,summary,strong,.eyebrow,.section-title,.section-lead,.privacy){
  color:var(--brand-white) !important;
  -webkit-text-fill-color:var(--brand-white) !important;
}
.home-page #contact-form .eyebrow{color:#FFE08A !important;-webkit-text-fill-color:#FFE08A !important;}
.home-page #contact-form input,
.home-page #contact-form textarea{
  color-scheme:light !important;
  background:#FFFFFF !important;
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
  border:2px solid rgba(255,255,255,.96) !important;
  box-shadow:0 0 0 1px rgba(17,18,20,.08) !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:#FFD45A !important;
  box-shadow:0 0 0 4px rgba(255,212,90,.28) !important;
}
.home-page #contact-form .email-match-message{color:#F0F2F5 !important;-webkit-text-fill-color:#F0F2F5 !important;}
.home-page #contact-form .email-match-message.is-match{color:#C9F7D8 !important;-webkit-text-fill-color:#C9F7D8 !important;}
.home-page #contact-form .email-match-message.is-error{color:#FFD0CC !important;-webkit-text-fill-color:#FFD0CC !important;}
.home-page #contact-form .submit:not(:disabled){
  background:var(--brand-yellow) !important;
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
}
.home-page #contact-form .submit:disabled{
  background:#D8DADF !important;
  color:#686D74 !important;
  -webkit-text-fill-color:#686D74 !important;
}

/* ---------------- SERVICE PAGES ---------------- */
/* First section on every service page = strong yellow. */
body.service-page .hero{
  background:var(--brand-yellow) !important;
  color:var(--brand-ink) !important;
}
body.service-page .hero :is(h1,h2,h3,p,a,strong,span,.eyebrow,.hero-lead,.hero-lead-mobile,.hero-lead-desktop){
  color:var(--brand-ink) !important;
  -webkit-text-fill-color:var(--brand-ink) !important;
}
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-outline,
body.service-page .hero .btn-light{
  background:#FFFFFF !important;
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
  border-color:rgba(17,18,20,.22) !important;
}
body.service-page .hero-hook{
  background:#FFFFFF !important;
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
}

/* Explicit alternating order by page. */
.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(--brand-ivory) !important;
  color:var(--brand-ink) !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(--brand-navy) !important;
  color:var(--brand-white) !important;
}

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

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

/* Cards placed on navy remain white with dark text; this prevents dark-mode disappearance. */
body.service-page :is(
  #problems,#scope,#price,#formats,#why-us,#faq,#channel,#fit,#process,#works,#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,
  .why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card
){
  background:#FFFFFF !important;
  color:#111214 !important;
  border-color:rgba(17,18,20,.14) !important;
}
body.service-page :is(
  #problems,#scope,#price,#formats,#why-us,#faq,#channel,#fit,#process,#works,#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,
  .why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card
) :is(h1,h2,h3,h4,p,li,a,strong,span,small){
  color:#111214 !important;
  -webkit-text-fill-color:#111214 !important;
}

/* Preserve white text for accordion FAQ when FAQ itself is navy (no white card forced). */
.product-development-page #faq details,
.media-supervision-page #faq details{
  background:transparent !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.26) !important;
}
.product-development-page #faq details :is(summary,p,strong,span),
.media-supervision-page #faq details :is(summary,p,strong,span){
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

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

/* Other services = ivory. Buttons intentionally navy + white for readable contrast. */
body.service-page #related-services{
  background:var(--brand-ivory) !important;
  color:var(--brand-ink) !important;
}
body.service-page #related-services :is(h2,h3,p,.eyebrow,.section-title){
  color:var(--brand-ink) !important;
  -webkit-text-fill-color:var(--brand-ink) !important;
}
body.service-page #related-services :is(.related,.related-grid) a{
  background:var(--brand-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:2px solid var(--brand-navy) !important;
  box-shadow:none !important;
}
body.service-page #related-services :is(.related,.related-grid) a:hover{
  background:#0E2F4D !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* ---------------- DARK MODE SAFETY ---------------- */
@media (prefers-color-scheme:dark){
  html{color-scheme:dark;}

  /* Headers / menu must remain readable. */
  .site-header,.header{
    background:#101214 !important;
    color:#FFFFFF !important;
    border-bottom-color:rgba(255,255,255,.18) !important;
  }
  .site-header :is(.brand,.site-menu-btn),
  .header :is(.brand,.header-nav > a:not(.header-cta)){
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .site-menu-btn{
    background:#1A1D21 !important;
    border-color:rgba(255,255,255,.28) !important;
  }
  .menu-drawer,.menu-drawer-head,.menu-links,.menu-links a{
    background:#101214 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .menu-close{
    background:#1B1E22 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:rgba(255,255,255,.25) !important;
  }

  /* Explicit requested section palette wins over browser/OS dark rewriting. */
  .home-page #top,
  .home-page #contact,
  body.service-page .hero,
  body.service-page .cta{background:var(--brand-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(--brand-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(--brand-navy) !important;}

  /* White cards/fields stay truly white and readable in dark mode. */
  .home-page #contact-form input,
  .home-page #contact-form textarea,
  body.service-page :is(
    #problems,#scope,#price,#formats,#why-us,#channel,#fit,#process,#works,#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,
    .why-mobile-flow-card,.why-mobile-view-card,.why2-process-card,.why2-perspective-card
  ){
    color-scheme:light !important;
    background:#FFFFFF !important;
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }
}