/* EuroCC Denmark — approved design (Paper: "euroCC final version"), with the dot globe from the variants.
   Values follow the Paper artboard at 1440px; below that the layout scales and stacks.
   Shared by final.html and its sub pages (use cases, news, events, about). */

/* All text is set in Avenir Book. The face is read from the visitor's own fonts (macOS and iOS ship it) and covers
   every weight, so headings stay Book rather than turning bold; elsewhere the fallbacks below are used. To serve it
   to everyone, add licensed Avenir Book .woff2 files to src. */
@font-face { font-family: 'Avenir Book'; src: local('Avenir Book'), local('Avenir-Book'); font-weight: 100 900; font-style: normal; }

:root {
  --white: #FFFFFF;
  --navy: #233564;
  --teal: #3E797D;
  --mint: #58B894;
  --green: #2E8B6E;
  --muted: #5C6879;
  --rule: #E0DFD8;
  --rule-cool: #D8DCE0;
  --cream: #F4F3EE;
  --green-soft: #E6F0EB;

  /* Dot globe on a white ground (same roles as the A · Atlas variant) */
  --globe-land: color-mix(in srgb, var(--navy) 42%, var(--white));
  --globe-land-2: var(--navy);
  --globe-host: var(--mint);
  --globe-home: var(--navy);
  --globe-line: var(--teal);
  --globe-fill: var(--navy);

  --font: 'Avenir Book', Avenir, 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font);
  --font-text: var(--font);
  --page: 1328px;
  --gutter: clamp(20px, 3.9vw, 56px);
  --sec: clamp(64px, 7.2vw, 104px);
  --sub: clamp(56px, 6.1vw, 88px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--navy); font: 400 16px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { display: block; max-width: 100%; }
picture { display: contents; } /* the <img> inside is styled and sized as before */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mint); color: var(--navy); }
.wrap { width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* Type. Headings are tracked in about half as tight as the Hanken Grotesk stand-in was: Avenir Book is set wider
   but its round letters (CC, oo) touch sooner */
.eyebrow { font: 700 11px/14px var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.h1 { font: 600 clamp(40px, 4.03vw, 58px)/1 var(--font-display); letter-spacing: -0.021em; color: var(--navy); }
.h2 { font: 600 clamp(32px, 3.06vw, 44px)/1.09 var(--font-display); letter-spacing: -0.018em; color: var(--navy); }
.lead { font-size: 18px; line-height: 29px; color: var(--muted); }
.body { font-size: 15px; line-height: 24px; color: var(--muted); }
.card-title { font: 600 20px/26px var(--font-display); letter-spacing: -0.013em; color: var(--navy); }

/* Controls */
.btn, .band {
  background: linear-gradient(90deg, var(--navy) 0%, var(--teal) var(--mid, 68%), var(--mint) 100%);
  background: linear-gradient(in oklab 90deg, var(--navy) 0%, var(--teal) var(--mid, 68%), var(--mint) 100%);
}
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: 999px; color: var(--white); font: 600 16px/20px var(--font-text); white-space: nowrap; transition: filter .3s, transform .2s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/22px var(--font-text); color: var(--teal); transition: color .2s; }
.link svg { width: 14px; height: 14px; flex: none; transition: transform .4s var(--ease); }
.link .in { width: 22px; height: 22px; }
.link:hover { color: var(--navy); }
.link:hover .arr { transform: translateX(3px); }
.link:hover .ext { transform: translate(2px, -2px); }
.links-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.links-row .in + span { margin-left: 1px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.nav-logo svg { display: block; width: 345px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font: 500 14px/18px var(--font-text); color: var(--navy); transition: color .2s; }
.nav-links a:not(.btn):hover, .nav-links a.is-active { color: var(--teal); }
.nav .btn { --mid: 69%; gap: 9px; padding: 12px 22px; font-size: 14px; line-height: 18px; }
.nav .btn svg { width: 14px; height: 14px; }

/* Mobile menu (below 1240px, where the text links leave the bar): a round button that turns into a cross, and a panel
   under the bar that fills the rest of the screen with the same links */
.nav-toggle, .nav-menu { display: none; }
.nav-toggle { width: 44px; height: 44px; flex: none; place-items: center; border-radius: 999px; border: 1px solid var(--rule); color: var(--navy); transition: border-color .2s, background-color .2s, color .2s; }
.nav-toggle:hover { border-color: var(--navy); }
.nav-toggle[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { top: 0; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .burger::after { top: 0; rotate: -45deg; }
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 100%); height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border-top: 1px solid var(--rule); visibility: hidden; opacity: 0; }
.nav.is-open { background: var(--white); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-open .nav-menu { visibility: visible; opacity: 1; }
.nav-menu .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 8px 48px; }
.menu-links { align-self: stretch; }
.menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--rule); font: 600 clamp(24px, 3.6vw, 32px)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--navy); transition: color .2s; }
.menu-links a svg { width: 18px; height: 18px; flex: none; color: var(--teal); transition: transform .4s var(--ease); }
.menu-links a:hover, .menu-links a.is-active { color: var(--teal); }
.menu-links a:hover svg { transform: translateX(4px); }
.nav-menu .btn { display: none; }
.nav .nav-menu .btn { padding: 17px 30px; font-size: 16px; line-height: 20px; }
.nav .nav-menu .btn svg { display: block; width: 15px; height: 15px; }
html.menu-open { overflow: hidden; }

/* Hero */
.hero { overflow: hidden; padding-top: clamp(40px, 5.3vw, 76px); }
.hero-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.hero-copy { flex: 0 0 480px; padding-bottom: 48px; }
.hero .lead { max-width: 466px; margin-top: 28px; font-size: 17px; line-height: 28px; }
.checks { display: grid; gap: 16px; margin-top: 36px; }
.checks li { display: flex; align-items: center; gap: 12px; font: 500 16px/24px var(--font-text); color: var(--navy); }
.checks svg { width: 17px; height: 17px; flex: none; color: var(--teal); }
.hero .btn { margin-top: 40px; }
.hero-stats { position: relative; display: flex; align-items: baseline; margin-top: 40px; padding-top: 20px; }
.hero-stats::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--rule); transform-origin: left; }
.hero-stat { display: flex; align-items: baseline; gap: 9px; }
.hero-stat:first-child { flex: 0 0 240px; }
.hero-stat b { font: 600 21px/24px var(--font-display); letter-spacing: -0.015em; color: var(--teal); }
.hero-stat + .hero-stat b { color: var(--navy); }
.hero-stat span { font: 500 13px/18px var(--font-text); color: var(--muted); }

/* Globe: the disc sits in an 800×600 box and runs off the bottom of the hero, as in the design */
.hero-globe { position: relative; flex: 0 1 800px; min-width: 0; aspect-ratio: 4 / 3; }
.globe { position: absolute; left: -0.25%; top: -0.33%; width: 100.5%; aspect-ratio: 1; container-type: inline-size; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-labels { position: absolute; inset: 0; pointer-events: none; }
.globe-label { position: absolute; display: grid; gap: 1px; white-space: nowrap; transform: translateY(-62%); pointer-events: auto; cursor: default; opacity: 0; }
.globe-label.is-end { transform: translate(-100%, -62%); text-align: right; }
.globe-label b { font: 600 clamp(11px, 1.87cqi, 15px)/1.2 var(--font-display); letter-spacing: -0.005em; color: var(--navy); transition: color .2s; }
.globe-label span { font: 400 clamp(9px, 1.37cqi, 11px)/1.3 var(--font-text); color: var(--muted); }
.globe-label.is-home b { font-size: clamp(14px, 2.36cqi, 19px); }
.globe-label.is-home span { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Sections */
.sec { padding-block: var(--sec); border-top: 1px solid var(--rule); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; padding-bottom: 52px; }
.head { display: grid; gap: 18px; max-width: 660px; }

/* Services slider */
.slider-nav { display: flex; gap: 12px; flex: none; }
.round-btn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--rule); color: var(--navy); transition: background .2s, border-color .2s, opacity .2s; }
.round-btn svg { width: 16px; height: 16px; }
.round-btn:not(:disabled):hover { border-color: var(--navy); }
.round-btn.is-solid { background: var(--navy); border-color: var(--navy); color: var(--white); }
.round-btn.is-solid:not(:disabled):hover { background: var(--teal); border-color: var(--teal); }
.round-btn:disabled { opacity: .35; cursor: default; }
.slider { --edge: max(var(--gutter), calc((100% - var(--page)) / 2)); position: relative; display: flex; gap: 24px; overflow-x: auto; padding-inline: var(--edge); scroll-padding-inline: var(--edge); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }
.svc-card { flex: 0 0 min(400px, 84vw); min-height: 640px; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; scroll-snap-align: start; }
.svc-media { position: relative; flex: none; height: 200px; display: grid; place-items: center; overflow: hidden; background: var(--cream); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-label { font: 600 11px/14px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; }
.svc-meta { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; padding-top: 8px; }
.svc-meta dt { font: 600 11px/20px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.svc-meta dd { font-size: 13px; line-height: 20px; color: var(--navy); }
.svc-for { display: flex; align-items: flex-start; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 20px; color: var(--muted); }
.svc-for b { flex: none; font: 700 11px/20px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--green-soft); font: 600 14px/20px var(--font-text); color: var(--teal); transition: background .2s; }
.svc-cta svg { width: 16px; height: 16px; flex: none; color: var(--green); transition: transform .2s; }
.svc-cta:hover { background: #DCEAE2; }
.svc-cta:hover svg { transform: translateX(3px); }
.progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-top: 40px; }
.progress button { position: relative; padding-top: 12px; border-top: 2px solid var(--rule); text-align: left; font: 400 13px/18px var(--font-text); color: var(--muted); transition: color .2s, border-color .2s; }
.progress button:hover { color: var(--navy); }
.progress button::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.progress button[aria-selected="true"] { color: var(--navy); font-weight: 600; }
.progress button[aria-selected="true"]::before { transform: scaleX(1); }

/* How to get started */
.start { display: flex; align-items: center; gap: 64px; }
.start-copy { flex: 1; min-width: 0; display: grid; gap: 48px; }
.start .head { gap: 20px; max-width: none; }
.start .h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.087; }
.start .lead { max-width: 560px; }
.steps { display: grid; gap: 32px; }
.step { display: flex; align-items: flex-start; gap: 24px; }
.step-num { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1.5px solid var(--teal); border-radius: 999px; font: 400 20px/24px var(--font-text); color: var(--teal); }
.step h3 { padding-top: 2px; font: 600 22px/28px var(--font-display); letter-spacing: -0.013em; color: var(--navy); }
.step p { margin-top: 6px; font-size: 16px; line-height: 26px; color: var(--muted); }
.start-art { flex: 0 1 620px; min-width: 0; display: grid; gap: 40px; }
.illu { width: 100%; height: auto; aspect-ratio: 3126 / 2123; }
.cta-box { display: grid; justify-items: start; gap: 24px; padding: 32px; background: var(--cream); border-radius: 20px; }
.cta-box h3 { font: 600 22px/28px var(--font-display); letter-spacing: -0.013em; color: var(--navy); }
.cta-box p { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--muted); }
.cta-box .btn { --mid: 82%; font-size: 15px; white-space: normal; }

/* Supercomputers */
.sys-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; }
.stats { flex: 0 0 480px; margin-top: 32px; }
.stat { position: relative; display: flex; align-items: baseline; gap: 20px; padding-block: 22px; }
.stat::before, .stat:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: left; }
.stat::before { top: 0; }
.stat:last-child::after { bottom: 0; }
.stat b { flex: none; width: 110px; font: 300 64px/64px var(--font-display); letter-spacing: -0.02em; color: var(--teal); }
.stat span { font-size: 17px; line-height: 22px; color: var(--navy); }
.table-box { margin-top: 72px; padding: 48px 32px 32px; border: 1px solid var(--rule); border-radius: 16px; }
.table-box h3 { max-width: 660px; font: 600 28px/34px var(--font-display); letter-spacing: -0.015em; color: var(--navy); }
.table-box > .body { max-width: 660px; margin-top: 12px; }
/* scrolls sideways only: overflow-x alone makes the box scroll up and down too, and the rows rising in (and the link
   arrow nudging out on hover) then showed a vertical scrollbar */
.table-scroll { margin-top: 32px; overflow: auto hidden; }
.systems { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; }
.systems th { padding: 0 0 12px; border-bottom: 1px solid var(--navy); text-align: left; font: 700 10px/12px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.systems td { padding-block: 18px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-size: 14px; line-height: 18px; }
.systems th:not(.c-web), .systems td.ctry, .systems td.spec, .systems td.cls { padding-right: 24px; }
.systems .c-web { padding-right: 4px; text-align: right; }
.systems td.sys { font: 600 19px/24px var(--font-display); letter-spacing: -0.007em; color: var(--navy); }
.systems td.ctry { color: var(--muted); }
.systems td.spec { color: var(--navy); }
.systems :is(td.spec, td.cls) > span { display: block; }
.systems :is(td.spec, td.cls) > span + span { margin-top: 4px; }
.systems td small { font: 400 13px/18px var(--font-text); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; }
.systems td.cls small { display: block; }
.systems td.cls { font: 600 12px/16px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.systems .c-web .link { gap: 8px; font-size: 13px; line-height: 16px; }
.systems .c-web .link svg { width: 12px; height: 12px; }
.systems tbody tr { transition: background .2s; }
.systems tbody tr:hover { background: color-mix(in srgb, var(--green-soft) 45%, transparent); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 20px; font-size: 13px; line-height: 16px; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 9px; }
.legend .updated { margin-left: auto; }

/* Use cases */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.case { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; }
.case-media { flex: none; height: 200px; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 24px 0; }
.tag { display: inline-flex; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 700 11px/14px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.case-date { font-size: 13px; line-height: 18px; color: var(--muted); }
.page-head .tags .case-date { align-self: center; margin-left: 4px; font-size: 14px; }
.tag.is-soft { background: var(--green-soft); border-color: var(--green-soft); color: var(--teal); }
.case-body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 16px 24px 26px; }
.case-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-top: 1px solid var(--rule); font: 600 14px/20px var(--font-text); color: var(--teal); transition: background .2s; }
.case-foot svg { width: 14px; height: 14px; transition: transform .2s; }
.case-foot:hover { background: color-mix(in srgb, var(--green-soft) 55%, transparent); }
.case-foot:hover svg { transform: translateX(3px); }
.cases + .links-row { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule); }

/* News & events */
.events .sec-head { align-items: flex-start; padding-bottom: 44px; }
.feeds { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 736fr); gap: 32px; }
.feed { display: flex; flex-direction: column; gap: 16px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; }
.feed-head h3 { font: 600 22px/28px var(--font-display); letter-spacing: -0.013em; color: var(--navy); }
.feed-head .link { gap: 8px; font-size: 14px; line-height: 20px; }
.feed-head .link svg { width: 13px; height: 13px; }
.news, .event { flex: 1; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; transition: border-color .2s; }
.news:hover, .event:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--rule)); }
.news { display: flex; overflow: hidden; }
.news-img { flex: 0 0 clamp(120px, 14vw, 200px); }
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; line-height: 18px; color: var(--muted); }
.meta-row .dot { width: 3px; height: 3px; flex: none; border-radius: 999px; background: currentColor; opacity: .55; }
.pill { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--cream); font: 700 11px/14px var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.pill.is-soft { background: var(--green-soft); color: var(--teal); }
.news h4 { font: 600 17px/23px var(--font-display); letter-spacing: -0.01em; color: var(--navy); transition: color .2s; }
.more { display: inline-flex; align-items: center; gap: 7px; padding-top: 2px; font: 600 13px/18px var(--font-text); color: var(--teal); }
.more svg { width: 12px; height: 12px; transition: transform .2s; }
.news:hover .more svg { transform: translateX(3px); }
.event { display: flex; align-items: flex-start; gap: 28px; padding: 24px; }
.feed .event:only-of-type { flex: none; }      /* a single upcoming event keeps its own height beside the news */
.event-date { flex: 0 0 72px; }
.event-date b { display: block; font: 600 44px/44px var(--font-display); letter-spacing: -0.02em; color: var(--navy); }
.event-date.is-range b { font-size: 26px; line-height: 44px; letter-spacing: -0.03em; white-space: nowrap; } /* a span of days, e.g. 11–13 */
.event-date span { display: block; padding-top: 6px; font: 700 11px/14px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.event-body { flex: 1; min-width: 0; display: grid; gap: 10px; }
.event h4 { font: 600 20px/26px var(--font-display); letter-spacing: -0.013em; color: var(--navy); transition: color .2s; }
.event p { font-size: 15px; line-height: 23px; color: var(--muted); }
.event-go { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: var(--cream); color: var(--navy); transition: background .2s, color .2s; }
.event-go svg { width: 16px; height: 16px; }
.event:hover .event-go { background: var(--navy); color: var(--white); }
.news:hover h4, .event:hover h4 { color: var(--teal); }
.feeds + .links-row { padding-top: 44px; }

/* FAQ */
.faq { display: flex; align-items: flex-start; gap: 80px; }
.faq .head { flex: 0 0 420px; }
.acc { flex: 1; min-width: 0; }
.acc details { padding-block: 24px; border-bottom: 1px solid var(--rule); }
.acc details:first-child { padding-top: 0; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; font: 600 19px/26px var(--font-display); letter-spacing: -0.01em; color: var(--navy); transition: color .2s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--teal); }
.pm { position: relative; flex: none; width: 18px; height: 18px; color: var(--navy); }
.pm::before, .pm::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 50%; height: 1.8px; margin-top: -0.9px; border-radius: 2px; background: currentColor; transition: transform .25s; }
.pm::after { transform: rotate(90deg); }
.acc details[open] .pm { color: var(--green); }
.acc details[open] .pm::after { transform: rotate(0deg); }
.acc details p { max-width: 700px; padding-top: 12px; font-size: 15px; line-height: 25px; color: var(--muted); }

/* About */
.about-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 72px; }
.about-row .head { flex: 0 1 600px; max-width: 600px; }
.text-md { font-size: 16px; line-height: 27px; color: var(--muted); }
.about-row .h2 + .text-md { padding-top: 8px; }
.team-figure { flex: 0 1 656px; min-width: 0; display: grid; gap: 14px; }
.team-figure img { width: 100%; aspect-ratio: 656 / 400; object-fit: cover; border: 1px solid var(--rule); border-radius: 12px; }
.team-figure figcaption { font-size: 13px; line-height: 21px; color: var(--muted); }
.project { display: flex; align-items: center; gap: 48px; margin-top: var(--sub); padding: 40px; border: 1px solid var(--rule); border-radius: 12px; }
.project-copy { flex: 1; min-width: 0; display: grid; gap: 20px; }
.project-label { display: grid; gap: 14px; }
.project h3, .project h2 { font: 600 26px/32px var(--font-display); letter-spacing: -0.015em; color: var(--navy); }
.project-copy > .link { justify-self: start; }
.ncc { flex: 0 1 460px; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.ncc svg { width: 100%; height: auto; }
.ncc b { padding-top: 4px; font: 500 72px/72px var(--font-display); letter-spacing: -0.02em; color: var(--teal); }
.ncc span { font-size: 17px; line-height: 24px; color: var(--muted); }
.team { margin-top: var(--sub); }
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; padding-bottom: 36px; }
.team-head .head { gap: 16px; max-width: 760px; }
.team-head h3 { font: 600 clamp(28px, 2.36vw, 34px)/1.18 var(--font-display); letter-spacing: -0.015em; color: var(--navy); }
.team-head .team-lead { max-width: 600px; font-size: 16px; line-height: 26px; color: var(--muted); }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; }
.person-photo { flex: none; aspect-ratio: 312 / 300; background: var(--cream); overflow: hidden; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .6s ease; }
.person:hover .person-photo img { transform: scale(1.03); }
.person-photo.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.person-photo.is-empty svg { width: 34px; height: 34px; color: var(--muted); }
.person-info { display: flex; flex-direction: column; padding: 20px 22px 24px; font-size: 13px; line-height: 20px; }
.person h4 { font: 600 17px/24px var(--font-display); letter-spacing: -0.01em; color: var(--navy); }
.person .role { min-height: 44px; padding-top: 4px; color: var(--muted); }
.person .org { padding-top: 2px; font-weight: 600; color: var(--navy); }
.person .mail { padding-top: 14px; color: var(--teal); overflow-wrap: anywhere; }
.person .tel { color: var(--muted); }
.person a:hover { color: var(--navy); }

/* Logo bands */
.band { --mid: 80%; border-radius: 12px; padding: 32px 40px; }
.band-label { font: 700 11px/14px var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--rule); }
.band-logos { display: flex; flex-wrap: wrap; align-items: center; }
.band-logos img { flex: none; object-fit: contain; filter: brightness(0) invert(1); }
.partners { display: flex; align-items: center; gap: 56px; margin-top: var(--sub); }
.partners .band-label { flex: 0 0 200px; }
.partners .band-logos { gap: 28px 52px; }
.funded { padding-bottom: 88px; }
.funded .band { display: grid; gap: 20px; }
.funded .band-logos { gap: 24px 44px; }

/* Contact */
.contact { display: flex; align-items: flex-start; justify-content: space-between; gap: 88px; }
.contact-copy { flex: 0 0 520px; }
.contact-copy .h2 { margin-top: 18px; }
.contact-copy .lead { margin-top: 18px; font-size: 17px; line-height: 28px; }
.assure { position: relative; display: grid; gap: 22px; margin-top: 40px; padding-top: 32px; }
.assure::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--teal); transform-origin: left; }
.assure li { display: flex; align-items: flex-start; gap: 14px; }
.assure svg { flex: none; width: 18px; height: 18px; color: var(--green); }
.assure b { display: block; font: 600 17px/22px var(--font-display); letter-spacing: -0.01em; color: var(--navy); }
.assure span { display: block; margin-top: 3px; font-size: 15px; line-height: 23px; color: var(--muted); }
/* A service page (services/): the contact section with the service's description above "Tell us about your project" */
.svc-page { padding-top: clamp(36px, 4.4vw, 64px); }
.svc-page .contact-copy { display: grid; gap: 0; }
.svc-page .contact-copy > .prose { margin-top: 32px; gap: 14px; }
.svc-page .prose h2 { padding-top: 14px; font-size: 19px; line-height: 26px; }
.svc-page .prose p, .svc-page .prose li { font-size: 16px; line-height: 26px; }
.svc-page .prose li::before { top: 10px; }
.svc-page .facts { margin-top: 36px; }
.svc-start { margin-top: 56px; }
.svc-note { margin-top: 12px; font-size: 15px; line-height: 23px; color: var(--navy); }
.svc-page .form { position: sticky; top: 112px; }
.form { flex: 0 1 720px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 36px; border: 1px solid var(--rule); border-radius: 12px; }
.field { grid-column: 1 / -1; display: grid; gap: 7px; }
.field.half { grid-column: auto; }
.field label { font: 600 13px/18px var(--font-text); color: var(--navy); }
.field input, .field select, .field textarea { width: 100%; height: 44px; padding: 0 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 8px; font: 400 14px/20px var(--font-text); color: var(--navy); appearance: none; transition: border-color .2s, box-shadow .2s; }
.field textarea { display: block; height: 86px; padding: 11px 14px; resize: vertical; }
.field select { padding-right: 40px; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%235C6879' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field select:invalid { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--navy) 22%, var(--rule)); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent); }
.help { font-size: 12px; line-height: 16px; color: var(--muted); }
.hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 22px; }
.form-status.is-ok { background: color-mix(in srgb, var(--mint) 16%, var(--white)); color: var(--navy); }
.form-status.is-error { background: color-mix(in srgb, #c0392b 10%, var(--white)); color: #8e2a1f; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form .btn:disabled { opacity: .6; cursor: progress; }
.consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-top: 4px; font-size: 13px; line-height: 20px; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 0; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 4px; background: var(--white); appearance: none; cursor: pointer; }
.consent input:checked { background: var(--navy); border-color: var(--navy); }
.consent a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.consent a:hover { color: var(--navy); }
.consent input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--white); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.submit-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.form .btn { --mid: 70%; padding: 16px 30px; font-size: 15px; }

/* Footer */
.footer { padding-top: 64px; background: var(--navy); color: var(--white); }
.foot-top { display: flex; justify-content: space-between; gap: 80px; padding-bottom: 52px; }
.foot-brand { flex: 0 1 440px; display: grid; align-content: start; gap: 22px; }
.foot-brand img { width: 54px; height: 72px; object-fit: contain; }
.foot-brand p { max-width: 420px; font-size: 15px; line-height: 25px; color: var(--rule-cool); }
.foot-cols { display: flex; gap: 80px; }
.foot-col { width: 220px; display: grid; align-content: start; gap: 12px; }
.foot-col h5 { padding-bottom: 6px; font: 700 10px/12px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--rule-cool); }
.foot-col a { display: inline-block; font-size: 15px; line-height: 18px; transition: color .2s; }
.foot-col a:hover { color: var(--mint); }
.foot-col svg { display: block; width: 18px; height: 18px; color: #E3E8F0; }
.foot-fund { display: flex; gap: 56px; padding: 30px 0 32px; border-top: 1px solid var(--muted); }
.fund-left { flex: 0 0 224px; display: grid; align-content: start; justify-items: start; gap: 22px; }
.foot-fund h5 { font: 700 10px/12px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--rule-cool); }
.eu { display: flex; align-items: center; gap: 12px; font: 600 13px/17px var(--font-text); }
.eu svg { flex: none; width: 54px; height: 36px; color: var(--cream); }
.fund-text { flex: 1; min-width: 0; display: grid; gap: 12px; font-size: 12px; line-height: 20px; color: var(--rule-cool); }
.bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 20px 0 28px; border-top: 1px solid var(--muted); font-size: 13px; line-height: 16px; color: var(--rule-cool); }
.bottom > div { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.bottom a:hover { color: var(--white); }

/* Sub pages: page head with breadcrumb, listings, articles */
.page-head { padding-block: clamp(36px, 4.4vw, 64px) clamp(48px, 5vw, 72px); }
.page-head.is-top { padding-top: clamp(48px, 5.6vw, 80px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: clamp(28px, 3.3vw, 48px); font: 500 13px/18px var(--font-text); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; flex: none; border-top: 1.4px solid; border-right: 1.4px solid; border-color: color-mix(in srgb, var(--muted) 55%, var(--white)); transform: rotate(45deg); }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--teal); }
.page-head .head { max-width: 860px; gap: 22px; }
.page-head .lead { max-width: 720px; }
.page-head .tags { padding: 0; }
.page-head .meta-row { font-size: 14px; }
.about-head .about-row .h1 + .text-md { padding-top: 8px; }
.listing { padding-bottom: var(--sec); }
.listing + .listing { padding-top: var(--sub); border-top: 1px solid var(--rule); }
.listing-head { padding-bottom: 32px; }
.listing-head h2 { font: 600 28px/34px var(--font-display); letter-spacing: -0.015em; color: var(--navy); }
.listing .links-row { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule); }
.events-list { display: grid; gap: 16px; }
.events-list .event h2, .events-list .event h3 { font: 600 20px/26px var(--font-display); letter-spacing: -0.013em; color: var(--navy); transition: color .2s; }
.event:hover h2, .event:hover h3 { color: var(--teal); }
.article-media { margin: 0 0 clamp(48px, 5vw, 72px); overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; }
.article-media img { width: 100%; aspect-ratio: 1328 / 520; object-fit: cover; }
/* with a caption (photo credit, names) the frame moves onto the image and the caption sits below it */
.article-media.has-caption { display: grid; gap: 12px; overflow: visible; border: 0; border-radius: 0; }
.article-media.has-caption img { border: 1px solid var(--rule); border-radius: 12px; }
.article-media figcaption, .prose-fig figcaption { font-size: 13px; line-height: 21px; color: var(--muted); }
.prose-fig { display: grid; gap: 12px; margin: 8px 0; }
.prose-fig img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; border: 1px solid var(--rule); border-radius: 12px; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: 48px clamp(48px, 6.7vw, 96px); padding-bottom: var(--sec); }
.prose { max-width: 720px; display: grid; gap: 18px; }
.prose h2 { padding-top: 22px; font: 600 26px/32px var(--font-display); letter-spacing: -0.013em; color: var(--navy); }
.prose h2:first-child { padding-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 29px; color: var(--muted); }
.prose ul { display: grid; gap: 10px; }
.prose :is(p, li) a:not(.link) { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose :is(p, li) a:not(.link):hover { color: var(--navy); }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 999px; background: var(--mint); }
.agenda { border-top: 1px solid var(--navy); }
.agenda div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.agenda dt { font: 600 15px/24px var(--font-text); color: var(--teal); }
.agenda dd { font-size: 16px; line-height: 24px; color: var(--navy); }
.prose .back-row { padding-top: 22px; }
.link .back { transition: transform .4s var(--ease); }
.link:hover .back { transform: translateX(-3px); }
.aside { position: sticky; top: 112px; display: grid; gap: 20px; }
.facts { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--rule); border-radius: 12px; }
.facts dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-block: 13px; border-top: 1px solid var(--rule); }
.facts dt { font: 600 11px/22px var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.facts dd { font-size: 15px; line-height: 22px; color: var(--navy); }
.aside .cta-box .btn { --mid: 76%; }
.project.is-full { margin-top: 0; align-items: flex-start; }
.project.is-full .ncc { position: sticky; top: 132px; }
.sec > .wrap > .team:first-child { margin-top: 0; }
.cta-wide { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px 80px; padding: clamp(32px, 4.4vw, 64px); background: var(--cream); border-radius: 20px; }
.cta-wide .head { max-width: 640px; }
.cta-wide .btn { flex: none; }

/* Motion & polish: hover depth, sticky-nav state, scroll reveals. Everything that moves is off for reduced motion. */
.nav { transition: background-color .35s, box-shadow .35s; }
.nav.is-scrolled { background: rgb(255 255 255 / .86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 12px 32px -26px rgb(35 53 100 / .5); }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--navy), var(--teal) 70%, var(--mint)); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:not(.btn):hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.svc-media img, .case-media img, .news-img img, .person-photo img { transition: transform 1.2s var(--ease); }
.svc-card:hover .svc-media img, .case:hover .case-media img, .news:hover .news-img img, .person:hover .person-photo img { transform: scale(1.045); }
.round-btn svg, .event-go svg { transition: transform .4s var(--ease); }
[data-prev]:not(:disabled):hover svg { transform: translateX(-2px); }
[data-next]:not(:disabled):hover svg, .event:hover .event-go svg { transform: translateX(2px); }
.systems td.sys { transition: color .25s; }
.systems tbody tr:hover td.sys { color: var(--teal); }
.acc details.is-closing .pm { color: var(--navy); }
.acc details.is-closing .pm::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { .slider { cursor: grab; } }
.slider.is-grabbing { cursor: grabbing; user-select: none; }
.slider.is-grabbing * { pointer-events: none; }
.slider.is-dragging { scroll-snap-type: none; }
.slider img { -webkit-user-drag: none; user-select: none; }

@keyframes rv-up { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes rv-zoom { from { scale: 1.12; } to { scale: 1; } }
@keyframes rv-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-pop { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes ncc-pulse { 0% { opacity: .9; scale: 1; } 75%, 100% { opacity: 0; scale: 2.4; } }

@media (prefers-reduced-motion: no-preference) {
  /* Menu: the panel fades, the button's lines cross, and the links rise in one after another */
  .nav-menu { transition: opacity .3s, visibility 0s .3s; }
  .nav.is-open .nav-menu { transition: opacity .3s; }
  .burger::before, .burger::after { transition: top .3s var(--ease) .15s, rotate .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] .burger::before, .nav-toggle[aria-expanded="true"] .burger::after { transition: top .3s var(--ease), rotate .4s var(--ease) .15s; }
  .nav.is-open .menu-links li, .nav.is-open .nav-menu .btn { animation: rv-up .8s var(--ease) both; }
  .nav.is-open .menu-links li:nth-child(2) { animation-delay: .04s; }
  .nav.is-open .menu-links li:nth-child(3) { animation-delay: .08s; }
  .nav.is-open .menu-links li:nth-child(4) { animation-delay: .12s; }
  .nav.is-open .menu-links li:nth-child(5) { animation-delay: .16s; }
  .nav.is-open .menu-links li:nth-child(6) { animation-delay: .2s; }
  .nav.is-open .nav-menu .btn { animation-delay: .26s; }

  /* Items rise in as they enter the viewport; items that enter together are staggered (--i is set by page.js) */
  .js [data-rv]:not(.is-in), .js [data-rv-group] > :not(.is-in) { opacity: 0; }
  [data-rv].is-in, [data-rv-group] > .is-in { animation: rv-up 1.05s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--step, 90ms)); }
  tbody[data-rv-group] { --step: 45ms; }
  .band-logos { --step: 70ms; }
  .is-in :is(.svc-media, .case-media, .news-img, .person-photo) img, .team-figure.is-in img { animation: rv-zoom 1.9s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--step, 90ms)); }
  .js .stat:not(.is-in)::before, .js .stat:not(.is-in)::after, .js .assure:not(.is-in)::before { transform: scaleX(0); }
  .stat.is-in::before, .stat.is-in::after, .assure.is-in::before { animation: rv-line 1.4s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--step, 90ms) + .1s); }

  /* Hero copy (and a sub page's head) rises in on load, in step with the globe's own intro */
  .js .hero-copy > *, .js .page-head .head > * { animation: rv-up 1.15s var(--ease) both; }
  .js .hero-copy > :nth-child(2), .js .page-head .head > :nth-child(2) { animation-delay: .08s; }
  .js .hero-copy > :nth-child(3), .js .page-head .head > :nth-child(3) { animation-delay: .16s; }
  .js .hero-copy > :nth-child(4), .js .page-head .head > :nth-child(4) { animation-delay: .26s; }
  .js .hero-copy > :nth-child(5) { animation-delay: .36s; }
  .js .hero-stats::before { animation: rv-line 1.6s var(--ease) .5s both; }

  /* The NCC network spreads out from the highlighted centre (delays set by page.js), which keeps a slow pulse */
  .project.is-in .ncc line { animation: rv-fade .8s ease both; animation-delay: calc(.35s + var(--d, 0ms)); }
  .project.is-in .ncc circle:not(.ncc-pulse) { transform-box: fill-box; transform-origin: center; animation: rv-pop .8s var(--ease) both; animation-delay: calc(.25s + var(--d, 0ms)); }
  .ncc-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
  .project.is-in .ncc-pulse { animation: ncc-pulse 3s ease-out 1.8s infinite; }
}
@media print { [data-rv], [data-rv-group] > * { opacity: 1 !important; animation: none !important; } }

/* Responsive */
@media (max-width: 1240px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-links { gap: 12px; }
  .js .nav-toggle { display: grid; }
  .js .nav-menu { display: block; }
  .hero-copy { flex-basis: clamp(400px, 34vw, 440px); }
  .hero-grid { gap: 32px; }
  .stats { flex-basis: 400px; }
  .sys-head, .sec-head, .team-head { gap: 48px; }
  .faq { gap: 56px; }
  .faq .head { flex-basis: 340px; }
  .about-row { gap: 48px; }
  .ncc { flex-basis: 380px; }
  .contact { gap: 56px; }
  .contact-copy { flex-basis: 420px; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols { gap: 48px; }
  .article { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
@media (max-width: 900px) {
  .hero-grid { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-copy { flex: none; padding-bottom: 0; }
  .hero-globe { flex: none; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); aspect-ratio: 1 / .82; }
  .globe { left: -14%; top: -3%; width: 128%; }
  .sec-head, .sys-head, .team-head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .sec-head { padding-bottom: 40px; }
  .start { flex-direction: column; align-items: stretch; gap: 48px; }
  .start-art { flex: none; }
  .stats { flex: none; width: 100%; margin-top: 0; }
  .table-box { margin-top: 48px; padding: 32px 24px 24px; }
  .cases { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .feeds { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .faq { flex-direction: column; gap: 32px; }
  .faq .head { flex: none; }
  .about-row { flex-direction: column; gap: 40px; }
  .about-row .head, .team-figure { flex: none; width: 100%; max-width: none; }
  .project { flex-direction: column; align-items: stretch; gap: 32px; padding: 28px; }
  .ncc { flex: none; width: 100%; max-width: 460px; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners { flex-direction: column; align-items: flex-start; gap: 24px; }
  .partners .band-label { flex: none; }
  .contact { flex-direction: column; gap: 48px; }
  .contact-copy, .form { flex: none; width: 100%; }
  .foot-top { flex-direction: column; gap: 40px; }
  .foot-brand { flex: none; }
  .foot-fund { flex-direction: column; gap: 24px; }
  .fund-left { flex: none; }
  .article { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; max-width: 560px; }
  .svc-page .form { position: static; }
  .project.is-full .ncc { position: static; }
  .cta-wide { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  /* phones: no globe (globe.js then loads and draws nothing); the hero is the copy alone */
  .hero-globe { display: none; }
  .hero { padding-bottom: 56px; }
  .progress { gap: 8px; padding-top: 28px; }
  .progress button { height: 14px; padding: 0; overflow: hidden; color: transparent !important; }
  .svc-card { min-height: 0; }
  .table-scroll { overflow: visible; }
  .systems { min-width: 0; table-layout: auto; }
  .systems colgroup, .systems thead { display: none; }
  .systems, .systems tbody, .systems tr, .systems td { display: block; }
  .systems tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .systems td, .systems td.ctry, .systems td.spec, .systems td.cls, .systems td.c-web { padding: 0; border: 0; text-align: left; }
  .systems td.sys, .systems td.ctry, .systems td.spec { grid-column: 1 / -1; }
  .systems td.ctry { margin-top: -10px; }
  .systems td.spec::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 700 10px/12px var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .systems td.cls { grid-column: 1; }
  .systems td.c-web { grid-column: 2; justify-self: end; }
  .legend .updated { flex-basis: 100%; margin-left: 0; }
  .news-img { flex-basis: 120px; }
  .news-body { padding: 18px; }
  .event { gap: 18px; padding: 20px; }
  .event-go { display: none; }
  .band { padding: 28px 24px; }
  .form { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .field.half { grid-column: 1 / -1; }
  .foot-cols { flex-wrap: wrap; gap: 32px 48px; }
  .foot-col { width: auto; min-width: 160px; }
  .bottom { flex-direction: column; align-items: flex-start; }
  .facts { padding: 22px; }
  .facts dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .agenda div { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .nav-logo svg { width: 190px; }
  .nav .btn { padding: 10px 16px; }
  .nav .btn svg { display: none; }
  /* no room for both in the bar: Get in Touch moves into the menu */
  .js .nav-links .btn { display: none; }
  .nav-menu .btn { display: inline-flex; }
  .globe-label span { display: none; }
  .hero-stat:first-child { flex-basis: 50%; }
  .hero-stat { flex-direction: column; gap: 2px; }
  .people { grid-template-columns: minmax(0, 1fr); }
  .news { flex-direction: column; }
  .news-img { flex: none; height: 160px; }
  .event-date { flex-basis: 56px; }
  .event-date b { font-size: 36px; line-height: 38px; }
  .event-date.is-range b { font-size: 21px; line-height: 38px; }
  .acc summary { font-size: 17px; line-height: 24px; }
  .start-copy { gap: 40px; }
  .step { gap: 18px; }
  .step-num { width: 44px; height: 44px; font-size: 18px; }
}