/* Network-landscape hero, scoped to .dv-hero so site h1/p/canvas rules stay untouched.
   Approved geometry: full first screen, centred copy, midnight ground. */
.dv-hero{
  --dv-exit:#0d1030;                     /* colour the terrain fades into below the hero */
  position:relative;height:100vh;height:100svh;min-height:560px;max-height:1500px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 100%,#070a1c 0%,#03040a 60%);color:#fff;isolation:isolate;
}
.dv-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;z-index:0}
.dv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(56px,11vh,132px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,16,48,0),var(--dv-exit))}
.dv-hero .dv-copy{position:relative;z-index:2;text-align:center;padding:calc(72px + clamp(56px,11vh,130px)) 24px 0}
.dv-hero h1{margin:0;font-family:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;font-weight:300;
  letter-spacing:-.015em;line-height:1.08;font-size:clamp(2.3rem,4.7vw,5rem);color:#fff;text-wrap:balance;-webkit-font-smoothing:antialiased}
.dv-hero .dv-sub{margin:clamp(14px,2vh,22px) auto 0;max-width:40em;color:rgba(214,219,235,.72);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5}
:root .dv-hero .dv-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:clamp(12px,2.2vh,24px);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;font-size:.95rem;color:rgba(255,255,255,.88);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding:0;transition:color .2s,border-color .2s}
:root .dv-hero .dv-cta:hover,:root .dv-hero .dv-cta:focus-visible{color:#fff;border-color:var(--link-underline,#e58a4e);text-decoration:none}
.dv-hero a:focus-visible{outline:1px solid rgba(160,220,255,.8);outline-offset:4px}
@media (min-width:760px){.dv-hero h1{white-space:nowrap}}
@media (max-width:832px){.dv-hero .dv-copy{padding-top:calc(58px + clamp(48px,9vh,90px))}}

/* Site masthead floats over the hero at every width, light on midnight. */
.dv-home .masthead.over{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent}
.dv-home .masthead.over nav a{color:rgba(240,242,252,.88)}
.dv-home .masthead.over nav a:hover{color:#fff}
.dv-home .masthead.over .menu-btn{color:#eef0fa;border-color:rgba(238,240,250,.55)}
.dv-home .masthead.over .menu-btn:hover{color:#fff;border-color:#fff}
.dv-home .masthead.over :focus-visible{outline-color:#cfe0ff}
@media (max-width:832px){
  .dv-home .masthead.over.open{background:#05061a;box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .dv-home .masthead.over.open nav a{color:#f2f3fb}
}

/* Shared by both themes: one masthead treatment on every page.
   Logo, nav size, position and frame width come from the site's page-frame.css unchanged;
   only the ground under the masthead becomes midnight so the light logo reads identically. */
.dv-site .masthead nav a{color:rgba(240,242,252,.9)}
.dv-site .masthead nav a:hover{color:#fff}
.dv-site .masthead nav a[aria-current="page"]{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.dv-site .masthead .menu-btn{color:#eef0fa;border-color:rgba(238,240,250,.55)}
.dv-site .masthead .menu-btn:hover{color:#fff;border-color:#fff}
.dv-site .masthead :focus-visible{outline-color:#cfe0ff}
.dv-site .brand:hover{opacity:.9}

/* Article pages: the masthead sits on a full-bleed midnight band, continuous with the home hero sky. */
.dv-mastband{background:#05061a;position:relative;z-index:5}
.dv-mastband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,150,255,.32) 30%,rgba(170,140,255,.32) 70%,transparent)}
@media (max-width:832px){.dv-article .masthead.open nav a{color:#f2f3fb}}

/* Light theme: the existing site, entered through the midnight hero.
   The hero's terrain dissolves into the site's own indigo intro band; the band then meets the lavender page as on the live site. */
.dv-light .dv-hero{--dv-exit:#2b2d5e}
.dv-light .home-intro-band{position:relative;margin-top:-1px}

/* Selected hybrid theme: a sharp boundary beneath the dark hero. */
.dv-hero::after { content: none; display: none; }
.dv-light .home-intro-band { margin-top: 0; }

.dv-hero{background:#292944}
.dv-home .masthead.over.open{background:#292944}
.dv-hero .dv-sub{color:#c4cadd}