/* The copy owns its contrast; changing skies remain visible around it.
   A grid-positioned backing preserves all existing content positions. */
.hero > .hero-inner{
 --copy-surface:rgb(245 249 244 / .89);
 --copy-ink:#203a38;
 --copy-accent:#285f55;
 isolation:isolate;
}
html[data-scene-tone="dark"] .hero > .hero-inner{
 --copy-surface:rgb(8 29 33 / .87);
 --copy-ink:#eef2eb;
 --copy-accent:#c3dfd0;
}
.hero > .hero-inner::before{
 content:"";position:absolute;grid-column:1 / 2;grid-row:2 / 5;
 inset:-27px 20px -27px -27px;z-index:-1;pointer-events:none;
 border-radius:20px;background:var(--copy-surface);
 box-shadow:0 14px 42px -28px rgb(6 24 27 / .25);
}
html[data-scene-tone] .hero > .hero-inner > :is(h1.hero-editorial-heading,.lede){
 color:var(--copy-ink);text-shadow:none;
}
html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading em{
 color:var(--copy-accent);background:none;-webkit-text-fill-color:currentColor;text-shadow:none;
}
.hero.is-chat-collapsed > .hero-inner::before{inset:-27px 0}
/* Logos remain directly on the scene, with enough contrast to recognise them. */
html[data-scene-tone] .hero > .bridge-client-logos{opacity:.94}
html[data-scene-tone="dark"] .bridge-logo,
html[data-scene-tone="dark"] .bridge-logo--shoplevers span{color:#c8dfd5}
html[data-scene-tone="dark"] .bridge-logo-stage > :is(img,svg){
 filter:brightness(0) invert(90%) sepia(9%) saturate(430%) hue-rotate(95deg);opacity:.94;
}
html[data-scene-tone="light"] .bridge-logo,
html[data-scene-tone="light"] .bridge-logo--shoplevers span,
html[data-scene-tone="light"] .bridge-client-logos .client-more{color:#fff}
html[data-scene-tone="light"] .bridge-logo-stage > :is(img,svg){filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgb(6 26 31 / .55));opacity:1}
html[data-scene-layout][data-scene-tone="light"] .hero > .bridge-client-logos,
html[data-scene-tone="light"] .bridge-logo-stage{opacity:1}
/* The header mark also needs a stable silhouette against white cloud banks. */
html[data-scene-solar-phase="day"] .tyne-hero-logo img{
 filter:brightness(.55) saturate(.9) drop-shadow(0 1px 1px rgb(255 255 255 / .35));
}
@media(max-width:760px){
 html[data-scene-tone] .hero > .hero-inner{overflow:visible}
 .hero > .hero-inner::before,.hero.is-chat-collapsed > .hero-inner::before{
  inset:-22px -14px;grid-area:auto;border-radius:20px;
 }
 /* Leave a clear gap between the copy backing and the client row. */
 html[data-scene-layout] .hero > .bridge-client-logos{margin-top:12px}
 /* Settings must not intercept the chat's close button on short phones. */
 html:has(.hero-bridge-stage.is-mobile-chat) :is(.scene-settings-toggle,#scene-mode-switcher,.scene-settings-hint){visibility:hidden;pointer-events:none}
 /* Use the real label once, rather than a duplicate generated short label. */
 #scene-mode-switcher .scene-mode-choice__label{font-size:9px}
 #scene-mode-switcher .scene-mode-choice__label::after{content:none}
}