/* Stillwater V8.1 — glass follows information, not empty grid.
 * V8 preserved. V7 checkpoint remains untouched.
 * Intro styles are task-driven: transparent editorial vs clear frosted utility.
 * No document text, labels, links or CSS grid card topology is changed.
 */
:root{--v81-water-border:rgba(236,252,255,.34);--v81-water-shadow:0 18px 44px -24px rgba(0,10,30,.41),inset 0 1px rgba(255,255,255,.23)}
/* Variant 1: photo-led introductory text directly on background. This is
 * deliberate: the structural glass region moves to the section BELOW. */
body[data-v7-template="projects"] > main > section.sub-hero,
body[data-v7-template="programs"] > main > section.sub-hero,
body[data-v7-template="hub"] > main > section.sub-hero,
body[data-v7-template="mission"] > main > section.sub-hero,
body[data-v7-template="article"] > main > section.sub-hero,
body[data-v7-template="directory"] > main > section.sub-hero{
  display:block!important;width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)))!important;
  min-height:0!important;height:auto!important;
  margin:18px auto 0!important;padding:0!important;
  background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body[data-v7-template="projects"] > main > section.sub-hero > .wrap,
body[data-v7-template="programs"] > main > section.sub-hero > .wrap,
body[data-v7-template="hub"] > main > section.sub-hero > .wrap,
body[data-v7-template="mission"] > main > section.sub-hero > .wrap,
body[data-v7-template="article"] > main > section.sub-hero > .wrap,
body[data-v7-template="directory"] > main > section.sub-hero > .wrap{
  width:min(1325px,calc(100% - clamp(35px,4vw,75px)))!important;
  max-width:1325px!important;min-height:0!important;
  margin:0 auto!important;padding:clamp(24px,3.2vw,47px) 0 clamp(20px,2vw,29px)!important;
}
body[data-v7-template="projects"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs),
body[data-v7-template="programs"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs),
body[data-v7-template="hub"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs),
body[data-v7-template="mission"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs),
body[data-v7-template="article"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs){
  text-shadow:0 2px 14px rgba(0,12,28,.67);
}
body:not([data-v7-template="home"]) .sub-hero h1{max-width:min(1010px,100%)!important}
/* Variant 2: high-legibility clear-frost introduction for information utilities.
 * No second photo in the surface. The existing authentic background shows through. */
body[data-v7-template="resources"] > main > section.sub-hero{
  display:block!important;min-height:0!important;height:auto!important;
  margin:16px auto 20px!important;
  background:linear-gradient(121deg,rgba(4,30,52,.39),rgba(30,80,112,.17) 63%,rgba(165,220,245,.095))!important;
  border:1px solid rgba(233,251,255,.47)!important;
  border-radius:25px!important;
  box-shadow:var(--v81-water-shadow)!important;
  -webkit-backdrop-filter:blur(17px) saturate(110%)!important;
  backdrop-filter:blur(17px) saturate(110%)!important;
  overflow:hidden!important;
}
body[data-v7-template="resources"] > main > section.sub-hero > .wrap{
  min-height:0!important;
  width:min(1270px,calc(100% - clamp(44px,6vw,120px)))!important;
  padding:clamp(21px,2vw,28px) 0 clamp(22px,2.1vw,29px)!important;
}
body[data-v7-template="resources"] .sub-hero :is(h1,p,.eyebrow,.breadcrumbs){
  text-shadow:0 2px 11px rgba(0,13,32,.64);
}
body[data-v7-template="resources"] .sub-hero .breadcrumbs{margin-bottom:12px!important}
body[data-v7-template="resources"] .sub-hero h1{margin:8px 0 13px!important}
body[data-v7-template="resources"] .sub-hero p:last-child{margin-bottom:0!important}
body[data-v7-template="resources"] .sub-hero::before,
body[data-v7-template="resources"] .sub-hero::after{display:none!important;}
/* The PAGE contains a single destination region. Section heading, filters and
 * cards now share this one region, rather than a decorative empty hero shell. */
body[data-v7-template="projects"] > main > section.section.projects{
 display:block!important;grid-template-columns:none!important;
 width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)))!important;
 margin:15px auto 31px!important;
 padding:clamp(26px,3.3vw,46px) 0!important;
 border:1px solid var(--v81-water-border)!important;
 border-radius:27px!important;
 background:linear-gradient(141deg,rgba(23,70,97,.24),rgba(8,46,74,.19))!important;
 box-shadow:var(--v81-water-shadow)!important;
 -webkit-backdrop-filter:blur(10px) saturate(106%)!important;
 backdrop-filter:blur(10px) saturate(106%)!important;
 overflow:visible!important;
}
body[data-v7-template="projects"] > main > section.section.projects > .wrap{
 width:min(1325px,calc(100% - clamp(42px,5.6vw,94px)))!important;
 max-width:1325px!important;display:block!important;
}
/* Programmes and About DEWR hub: same section-group principle, only one
 * large material plane behind heading + choices; individual cards stay glass. */
body[data-v7-template="programs"] > main > section.section,
body[data-v7-template="hub"] > main > section.section{
 display:block!important;
 width:min(1450px,calc(100% - clamp(24px,3.5vw,72px)))!important;
 margin:15px auto 30px!important;
 padding:clamp(26px,3.3vw,44px) 0!important;
 border:1px solid var(--v81-water-border)!important;
 border-radius:27px!important;
 background:linear-gradient(142deg,rgba(22,68,97,.22),rgba(9,44,72,.17))!important;
 box-shadow:var(--v81-water-shadow)!important;
 -webkit-backdrop-filter:blur(9px) saturate(107%)!important;
 backdrop-filter:blur(9px) saturate(107%)!important;
 overflow:visible!important;
}
body[data-v7-template="programs"] > main > section.section > .wrap,
body[data-v7-template="hub"] > main > section.section > .wrap{
 width:min(1325px,calc(100% - clamp(42px,5.6vw,94px)))!important;
 max-width:1325px!important;
}
/* Resources has no separate heading for its shortcut tiles, so keep this
 * choice group clear and uncluttered: individual cards supply affordance. */
body[data-v7-template="resources"] > main > section.hub-shortcuts{
 padding:20px 0 24px!important;
 margin:0 auto!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Move long reading content and decorative line breaks out of competition with
 * the landscape: articles retain the reliable light reading panel from V8. */
body[data-v7-template="article"] > main.page-area{
 margin-top:14px!important;
}
@media(max-width:760px){
 body[data-v7-template="resources"] > main > section.sub-hero{
  border-radius:21px!important;
  width:calc(100% - 24px)!important;margin:11px auto 13px!important;
 }
 body[data-v7-template="resources"] > main > section.sub-hero > .wrap{
  width:calc(100% - 38px)!important;padding:26px 0 28px!important;
 }
 body[data-v7-template="projects"] > main > section.section.projects,
 body[data-v7-template="programs"] > main > section.section,
 body[data-v7-template="hub"] > main > section.section{
  width:calc(100% - 24px)!important;
  border-radius:20px!important;
  padding:25px 0!important;margin:9px auto 24px!important;
 }
 body[data-v7-template="projects"] > main > section.section.projects > .wrap,
 body[data-v7-template="programs"] > main > section.section > .wrap,
 body[data-v7-template="hub"] > main > section.section > .wrap{
  width:calc(100% - 27px)!important;
 }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 body[data-v7-template="resources"] > main > section.sub-hero{background:#14435e!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
 body[data-v7-template="projects"] > main > section.section.projects,
 body[data-v7-template="programs"] > main > section.section,
 body[data-v7-template="hub"] > main > section.section{
  background:#123c58!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 }
}