/* Homepage visual test inspired by the editorial layout of southampton.ac.uk/about.
     This standalone page uses original NGW content and is not an official university template. */
  :root {
    --prussian:#002e3b;
    --marine:#005c84;
    --marine-bright:#74c9e5;
    --seafoam:#b3dbd2;
    --gold:#fcbc00;
    --ink:#172b33;
    --body:#344c54;
    --muted:#536d77;
    --border:#dae4e7;
    --cloud:#f0f5f6;
    --white:#ffffff;
    --container:1216px;
  }
  *,*::before,*::after {box-sizing:border-box;}
  html {scroll-behavior:smooth;}
  body {margin:0;font:17px/1.65 Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;}
  a {color:#006386;text-underline-offset:3px;}
  a:hover {color:#003f57;}
  a:focus-visible,button:focus-visible {outline:3px solid var(--gold);outline-offset:4px;}
  button {font:inherit;}
  .skip {position:absolute;top:-100px;left:14px;padding:12px 16px;background:var(--gold);color:#102d36;font-weight:700;z-index:30;}
  .skip:focus {top:8px;}
  .container {width:min(calc(100% - 64px),var(--container));margin-inline:auto;}
  .utility-bar {background:var(--prussian);color:#fff;}
  .utility-inner {min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;letter-spacing:.018em;}
  .utility-inner a {color:#fff;text-decoration:none;}
  .utility-inner a:hover {text-decoration:underline;}
  .utility-inner a.utility-affiliation {color:#d4e5eb;white-space:nowrap;}
  .site-header {background:#fff;border-bottom:1px solid #e5edef;}
  .header-inner {min-height:126px;display:flex;align-items:center;justify-content:space-between;gap:35px;}
  .brand {display:flex;align-items:center;gap:20px;text-decoration:none;min-width:0;color:var(--prussian);}
  .brand:hover {color:var(--prussian);}
  /* Show the NGW emblem from images/ngw.png; clip the small name printed
     beneath the emblem because the full group name appears alongside. */
  .brand-logo {display:block;position:relative;flex:none;width:116px;height:90px;overflow:hidden;}
  .brand-logo img {position:absolute;display:block;left:0;top:-11px;width:116px;height:116px;max-width:none;}
  .brand-title {display:block;font-size:clamp(25px,2.8vw,34px);letter-spacing:-.045em;font-weight:800;line-height:1.13;}
  .brand-subtitle {display:block;margin-top:8px;font-size:14px;font-weight:500;letter-spacing:.01em;color:#42616a;}
  .header-side {text-align:right;border-left:3px solid var(--marine-bright);padding-left:12px;line-height:1.4;font-size:13px;color:#53666c;width:max-content;min-width:0;max-width:none;flex:0 0 auto;}
  .header-side .school-link {color:inherit;text-decoration:none;white-space:nowrap;}
  .header-side .school-link:hover {text-decoration:underline;color:#006386;}
  .header-side strong {display:block;color:var(--prussian);font-size:14px;}
  .main-nav {background:var(--marine);color:#fff;}
  .nav-inner {display:flex;min-height:58px;align-items:stretch;gap:0;}
  .nav-inner a {display:flex;align-items:center;justify-content:center;padding:12px 28px;border-bottom:4px solid transparent;text-decoration:none;color:#fff;font-size:16px;font-weight:700;}
  .nav-inner a:hover {background:#00466a;color:#fff;}
  .nav-inner a[aria-current="page"] {border-bottom-color:var(--gold);background:#004b70;}
  .nav-end {margin-left:auto;align-self:center;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#d2eefa;}
  /* Full-width split hero, after the University's About-page composition.
     The left text and right video are grid siblings: they cannot overlap. */
  .hero {background:#002e46;color:#fff;}
  .hero-stage {background:#002e46;overflow:hidden;}
  .hero-layout.container {width:100%;max-width:none;margin:0;}
  .hero-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
    gap:0;
    min-height:clamp(395px,28vw,475px);
    padding:0;
  }
  .hero-copy {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:48px clamp(26px,4vw,64px) 48px max(32px,calc((100vw - var(--container))/2));
  }
  .hero-video-panel {
    position:relative;
    min-width:0;
    width:100%;
    min-height:clamp(395px,28vw,475px);
    overflow:hidden;
    background:#051923;
    border:0;
    box-shadow:none;
    aspect-ratio:auto;
  }
  .hero-video-panel video {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#051923;
  }
  .eyebrow {font-size:13px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin:0 0 22px;color:#c7f0ef;}
  .eyebrow::before {content:"";display:inline-block;background:var(--gold);width:32px;height:3px;vertical-align:middle;margin-right:13px;}
  .hero h1 {color:#fff;max-width:540px;font-size:clamp(34px,3.1vw,50px);font-weight:800;line-height:1.12;letter-spacing:-.045em;margin:0 0 22px;text-wrap:balance;}
  .hero-tagline {max-width:500px;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:#e3f1f3;margin:0 0 28px;}
  .primary-cta {display:inline-flex;align-items:center;gap:28px;background:var(--gold);color:#172a2c;padding:13px 19px;font-weight:800;text-decoration:none;min-height:50px;}
  .primary-cta:hover {background:#ffe07a;color:#172a2c;}
  .primary-cta span {font-size:24px;line-height:1;}
  .hero-video-bar {background:var(--prussian);border-top:1px solid #2b5966;}
  .video-bar-inner {min-height:71px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px;}
  .video-desc {min-width:0;}
  .video-desc strong {display:block;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
  .video-caption {font-size:13px;color:#d3eaf0;margin:2px 0 0;}
  .video-controls {display:flex;align-items:center;gap:8px;flex:none;}
  .video-controls button {border:1px solid #9cc0cb;background:transparent;color:#fff;cursor:pointer;min-height:39px;padding:7px 13px;font-weight:700;font-size:13px;}
  .video-controls button:hover {background:#12536e;}
  .video-controls button:disabled {opacity:.45;cursor:default;}
  .video-fallback {display:none;background:#f3f8fa;color:#264450;padding:12px 24px;text-align:center;font-size:14px;margin:0;}
  section {scroll-margin-top:20px;}
  .intro-block {padding:76px 0 67px;background:#fff;}
  .intro-grid {display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);gap:clamp(38px,6vw,105px);align-items:start;}
  .section-kicker {font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.12em;color:#00658b;margin:0 0 17px;}
  h2 {font-size:clamp(30px,3.4vw,46px);letter-spacing:-.043em;line-height:1.18;color:var(--prussian);margin:0 0 23px;}
  h3 {font-size:24px;letter-spacing:-.025em;line-height:1.22;color:var(--prussian);margin:0 0 12px;}
  p {margin:0 0 18px;}
  p:last-child {margin-bottom:0;}
  .intro-text {color:var(--body);font-size:18px;line-height:1.77;}
  .intro-text p {margin-bottom:16px;}
  .explore-section {background:var(--cloud);padding:69px 0 84px;}
  .explore-top {display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px;}
  .explore-top h2 {margin:0;}
  .explore-top p {max-width:455px;margin:0;color:var(--body);}
  .feature-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .feature {background:#fff;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;min-height:229px;padding:26px 27px 20px;border-bottom:5px solid var(--marine);transition:transform .2s,box-shadow .2s;}
  .feature:hover {color:var(--ink);transform:translateY(-4px);box-shadow:0 9px 20px rgba(0,46,59,.11);border-bottom-color:#0093b6;}
  .feature-overline {color:#31697d;font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;}
  .feature-title {display:block;font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.18;margin-top:11px;}
  .feature-desc {display:block;font-size:15px;line-height:1.57;color:#51646c;margin-top:11px;}
  .feature-bottom {font-size:26px;color:var(--marine);align-self:flex-end;line-height:1;margin-top:17px;}
  .feature.feature-light {border-bottom-color:var(--gold);}
  .feature.feature-light:hover {border-bottom-color:#e7a000;}
  .about-band {background:#fff;padding:76px 0 78px;}
  .about-grid {display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:clamp(38px,6vw,95px);}
  .about-grid .copy {font-size:18px;line-height:1.75;color:var(--body);}
  .people-band {background:#e9f3f5;padding:74px 0 84px;}
  .people-head {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:25px;}
  .people-head h2 {margin:0;}
  .people-layout {display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;}
  .leader-card {padding:33px 34px;background:var(--prussian);color:#fff;}
  .leader-card .label {color:#9bd8dd;text-transform:uppercase;letter-spacing:.11em;font-size:13px;font-weight:800;}
  .leader-card h3 {color:#fff;font-size:29px;margin-top:20px;}
  .leader-card a {color:#fff;text-decoration:underline;text-underline-offset:5px;}
  .leader-card p {color:#cfebed;font-size:15px;}
  .staff-card {padding:29px 32px;background:#fff;}
  .staff-card h3 {font-size:23px;margin-bottom:18px;}
  .staff-list {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0;padding:0;}
  .staff-list li {border-top:1px solid var(--border);padding:13px 0;font-size:16px;}
  .staff-list a {font-weight:700;text-decoration:none;}
  .staff-list a:hover {text-decoration:underline;}
  .footer {background:var(--prussian);color:#e1f0f2;padding:58px 0 24px;}
  .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:54px;padding-bottom:49px;}
  .footer h2 {font-size:25px;line-height:1.22;color:#fff;margin:0 0 17px;}
  .footer h3 {color:#fff;font-size:17px;letter-spacing:0;margin:2px 0 17px;}
  .footer p {font-size:15px;color:#d1e6e8;}
  .footer a {color:#e0f5f9;text-decoration:underline;text-underline-offset:3px;}
  .footer ul {list-style:none;padding:0;margin:0;}
  .footer li {margin:7px 0;font-size:15px;}
  .footer-bottom {display:flex;justify-content:space-between;gap:16px;border-top:1px solid #486773;padding-top:20px;font-size:13px;color:#aac4cb;}
  @media (max-width:1020px) {
    .header-side {display:none;}
    .hero h1 {font-size:clamp(32px,3.6vw,44px);}
    .feature-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .staff-list {grid-template-columns:1fr;}
  }
  /* Stack only when the half-width text panel would become too narrow. */
  @media (max-width:980px) {
    .hero-layout {grid-template-columns:1fr;min-height:0;gap:0;padding:0;}
    .hero-copy {max-width:none;min-height:0;padding:54px 32px;}
    .hero-video-panel {width:100%;max-width:none;min-height:0;height:auto;aspect-ratio:16/9;}
    .hero h1 {max-width:720px;font-size:clamp(36px,5vw,49px);}
  }
  @media (max-width:720px) {
    .container {width:min(calc(100% - 36px),var(--container));}
    .utility-affiliation {display:none;}
    .utility-inner {min-height:34px;}
    .header-inner {min-height:108px;gap:13px;}
    .brand-logo {width:78px;height:61px;}
    .brand-logo img {width:78px;height:78px;top:-7px;}
    .brand {gap:12px;}
    .brand-title {font-size:clamp(23px,5vw,30px);}
    .brand-subtitle {font-size:12px;margin-top:5px;}
    .nav-inner {overflow-x:auto;scrollbar-width:thin;min-height:54px;}
    .nav-inner a {padding:13px 20px;font-size:15px;white-space:nowrap;}
    .nav-end {display:none;}
    .hero-layout {gap:0;padding:0;}
    .hero-layout.container {width:100%;}
    .hero-copy {min-width:0;padding:42px 18px;}
    .hero h1 {font-size:clamp(35px,8vw,48px);}
    .hero-video-panel {max-width:none;}
    .video-bar-inner {align-items:flex-start;flex-direction:column;gap:11px;}
    .intro-grid,.about-grid,.people-layout {grid-template-columns:1fr;gap:23px;}
    .intro-block,.explore-section,.about-band,.people-band {padding-block:52px;}
    .explore-top {align-items:start;flex-direction:column;}
    .feature-grid {grid-template-columns:1fr;gap:12px;}
    .feature {min-height:180px;}
    .staff-list {grid-template-columns:repeat(2,minmax(0,1fr));}
    .footer-grid {grid-template-columns:1fr 1fr;gap:32px;}
    .footer-grid > :first-child {grid-column:1/-1;}
  }
  @media (max-width:470px) {
    .brand-title {font-size:22px;}
    .hero-layout {gap:0;padding:0;}
    .hero h1 {font-size:40px;}
    .hero-tagline {font-size:18px;}
    .staff-list,.footer-grid {grid-template-columns:1fr;}
    .footer-grid > :first-child {grid-column:auto;}
    .footer-bottom {flex-direction:column;}
    .leader-card,.staff-card {padding:25px;}
  }
  @media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto;}
    .feature {transition:none;}
    .feature:hover {transform:none;}
  }

/* Shared presentation for public NGW inner pages (original research content is retained). */
body.ngw-inner {background:#f7fafb;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}
body.ngw-inner .utility-bar {background:var(--prussian)}
body.ngw-inner .site-header {background:#fff;color:var(--prussian);border-bottom:1px solid var(--border)}
body.ngw-inner .site-header .brand {color:var(--prussian);text-decoration:none}
body.ngw-inner .site-header .brand-title {color:var(--prussian)}
body.ngw-inner .site-header .brand-subtitle {color:var(--body)}
body.ngw-inner .site-header .header-side {color:var(--body)}
body.ngw-inner .site-header .school-link {color:var(--body)}
body.ngw-inner .main-nav {background:var(--marine);color:#fff}
body.ngw-inner .main-nav .nav-inner {display:flex;align-items:stretch;flex-wrap:nowrap;gap:0}
body.ngw-inner .main-nav a {display:inline-flex;align-items:center;color:#fff;text-decoration:none;border-radius:0;font-weight:700;line-height:1.4}
body.ngw-inner .main-nav a[aria-current="page"] {background:#003f5c;border-bottom:4px solid var(--gold);color:#fff}
body.ngw-inner .main-nav a:hover {background:#004768;color:#fff}
body.ngw-inner .main-nav .nav-end {color:#fff}
body.ngw-inner .wrap {width:min(1120px,calc(100% - 40px));max-width:none;margin-left:auto;margin-right:auto}
body.ngw-inner .intro,body.ngw-inner .hero {background:#eaf3f5;border-bottom:1px solid var(--border);color:var(--prussian);padding:43px 0}
body.ngw-inner .intro h1,body.ngw-inner .hero h1 {font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.024em;font-size:clamp(2rem,3.8vw,3rem);line-height:1.18;color:var(--prussian)}
body.ngw-inner .intro p,body.ngw-inner .hero p {color:#3e5961}
body.ngw-inner main {min-width:0}
body.ngw-inner a {text-underline-offset:3px}
body.ngw-inner main a,body.ngw-inner .layout a,body.ngw-inner .intro a,body.ngw-inner .hero a {color:#006c9b}
body.ngw-inner .panel,body.ngw-inner .card,body.ngw-inner .sidebox {background:#fff;border-color:var(--border);border-radius:3px;box-shadow:none}
body.ngw-inner .panel h2,body.ngw-inner .card h2,body.ngw-inner .sidebox h2 {color:var(--prussian)}
body.ngw-inner .panel {border-left:3px solid #93cfdf}
body.ngw-inner img,body.ngw-inner video {max-width:100%}
body.ngw-inner .footer {background:var(--prussian);color:#e1f0f2}
body.ngw-inner .footer a {color:#e0f5f9}
body.ngw-inner .footer p {color:#d1e6e8}
body.ngw-inner .footer .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:54px}
body.ngw-inner .footer ul {display:block;list-style:none;padding:0}
body.ngw-inner .footer li {margin:7px 0}
body.ngw-inner .footer h2 {font-size:25px;color:#fff}
body.ngw-inner .footer h3 {font-size:17px;color:#fff}
body.ngw-inner .footer .footer-bottom {display:flex}
body.ngw-inner .nav-inner .nav-end {margin-left:auto}
body.ngw-inner .layout,body.ngw-inner .grid {min-width:0}
body.ngw-inner .panel p,body.ngw-inner .panel li {overflow-wrap:break-word}
body.ngw-inner .panel pre,body.ngw-inner pre {max-width:100%;overflow-x:auto}
body.ngw-inner .sidebox {border-top:4px solid var(--marine)}
body.ngw-inner .crumbs,body.ngw-inner .crumb {color:#536b72}
body.ngw-inner .grid .card {border-top:4px solid var(--marine)}
body.ngw-inner .button {background:var(--marine);border-radius:2px;color:white}
body.ngw-inner .button:hover {background:#004363;color:white}
@media (max-width:1020px){body.ngw-inner .header-side {display:none}}
@media (max-width:760px){
 body.ngw-inner .footer .footer-grid {grid-template-columns:1fr 1fr;gap:24px}
 body.ngw-inner .footer .footer-grid>:first-child {grid-column:1/-1}
 body.ngw-inner .layout {max-width:100%}
 body.ngw-inner .intro,body.ngw-inner .hero {padding:34px 0}
}
@media (max-width:520px){
 body.ngw-inner .footer .footer-grid {grid-template-columns:1fr}
 body.ngw-inner .footer .footer-grid>:first-child {grid-column:auto}
 body.ngw-inner .footer .footer-bottom {flex-direction:column}
}