/* Distinct entrances for About, Insights and Contact in the local design preview. */
html[data-theme="dark"] body.clarity-about .hero.shell,
html[data-theme="dark"] body.insights-page .hero.shell,
html[data-theme="dark"] body.contact-page .hero.shell{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:0;box-shadow:none}
html[data-theme="dark"] body.clarity-about .hero.shell:before,
html[data-theme="dark"] body.insights-page .hero.shell:before,
html[data-theme="dark"] body.contact-page .hero.shell:before{content:"";position:absolute;z-index:0;inset:-3%;background-repeat:no-repeat;background-size:cover;background-position:right center;pointer-events:none}
html[data-theme="dark"] body.clarity-about .hero.shell:after,
html[data-theme="dark"] body.insights-page .hero.shell:after,
html[data-theme="dark"] body.contact-page .hero.shell:after{content:"";position:absolute;z-index:0;inset:0;width:auto;height:auto;right:0;bottom:0;border:0;border-radius:0;transform:none;filter:none;pointer-events:none;animation:none}
html[data-theme="dark"] body.clarity-about .hero.shell>*,
html[data-theme="dark"] body.insights-page .hero.shell>*,
html[data-theme="dark"] body.contact-page .hero.shell>*{position:relative;z-index:1}

/* About: two paths meeting, rather than another photograph of the bridge. */
html[data-theme="dark"] body.clarity-about .hero.shell{background:#050708}
html[data-theme="dark"] body.clarity-about .hero.shell:before{background-image:url("koda-about-confluence.svg");animation:koda-about-flow 19s ease-in-out infinite alternate}
html[data-theme="dark"] body.clarity-about .hero.shell:after{background:linear-gradient(90deg,#050708 3%,rgba(5,7,8,.96) 31%,rgba(5,7,8,.62) 57%,rgba(5,7,8,.11) 100%)}
html[data-theme="dark"] body.clarity-about .hero h1{max-width:860px}
html[data-theme="dark"] body.clarity-about .hero .lead{max-width:780px}

/* Insights: a bright editorial desk, matching the site's ivory sections. */
html[data-theme="dark"] body.insights-page .hero.shell{color:#171a1b;background:#eeeae2}
html[data-theme="dark"] body.insights-page .hero.shell:before{background-image:url("koda-insights-ledger.svg");opacity:.85;animation:koda-ledger-float 17s ease-in-out infinite alternate}
html[data-theme="dark"] body.insights-page .hero.shell:after{background:linear-gradient(90deg,#eeeae2 0%,rgba(238,234,226,.99) 30%,rgba(238,234,226,.9) 52%,rgba(238,234,226,.1) 100%)}
html[data-theme="dark"] body.insights-page .hero .eyebrow{color:#b75527}
html[data-theme="dark"] body.insights-page .hero h1{max-width:850px;color:#171a1b}
html[data-theme="dark"] body.insights-page .hero h1 span{color:rgba(23,26,27,.44)}
html[data-theme="dark"] body.insights-page .hero .lead{max-width:780px;color:#4f5556}
html[data-theme="dark"] body.insights-page .hero .resource-intro{max-width:1120px}
html[data-theme="dark"] body.insights-page .hero .resource-intro>div{border:1px solid rgba(21,25,26,.12);background:rgba(255,253,248,.87);color:#171a1b;box-shadow:0 20px 55px rgba(35,32,27,.08);backdrop-filter:blur(14px)}
html[data-theme="dark"] body.insights-page .hero .resource-intro strong{color:#171a1b}
html[data-theme="dark"] body.insights-page .hero .resource-intro p{color:#555a5b}

/* Contact: a single illuminated threshold, with the call to action kept clear. */
html[data-theme="dark"] body.contact-page .hero.shell{background:#050708}
html[data-theme="dark"] body.contact-page .hero.shell:before{background-image:url("koda-contact-threshold.svg");animation:koda-threshold-breathe 14s ease-in-out infinite alternate}
html[data-theme="dark"] body.contact-page .hero.shell:after{background:linear-gradient(90deg,#050708 1%,rgba(5,7,8,.94) 31%,rgba(5,7,8,.48) 58%,rgba(5,7,8,.04) 100%)}
html[data-theme="dark"] body.contact-page .hero h1{max-width:850px}
html[data-theme="dark"] body.contact-page .hero .lead{max-width:700px}

@keyframes koda-about-flow{from{transform:scale(1) translateX(0)}to{transform:scale(1.05) translateX(-1.4%)}}
@keyframes koda-ledger-float{from{transform:scale(1) translateY(0)}to{transform:scale(1.04) translateY(-1.2%)}}
@keyframes koda-threshold-breathe{from{transform:scale(1);opacity:.72}to{transform:scale(1.045);opacity:1}}

@media(max-width:820px){
  html[data-theme="dark"] body.clarity-about .hero.shell:before,
  html[data-theme="dark"] body.insights-page .hero.shell:before,
  html[data-theme="dark"] body.contact-page .hero.shell:before{inset:0;background-size:auto 100%;background-position:65% center;opacity:.55}
  html[data-theme="dark"] body.clarity-about .hero.shell:before{background-position:87% center;opacity:.82}
  html[data-theme="dark"] body.clarity-about .hero.shell:after,
  html[data-theme="dark"] body.contact-page .hero.shell:after{background:linear-gradient(90deg,rgba(5,7,8,.96),rgba(5,7,8,.76))}
  html[data-theme="dark"] body.clarity-about .hero.shell:after{background:linear-gradient(90deg,rgba(5,7,8,.96),rgba(5,7,8,.64))}
  html[data-theme="dark"] body.insights-page .hero.shell:after{background:linear-gradient(90deg,rgba(238,234,226,.97),rgba(238,234,226,.82))}
  html[data-theme="dark"] body.insights-page .hero .resource-intro{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="dark"] body.clarity-about .hero.shell:before,
  html[data-theme="dark"] body.insights-page .hero.shell:before,
  html[data-theme="dark"] body.contact-page .hero.shell:before{animation:none}
}