/* Covectis. Round 6 (2026-10-12): Covectis's own identity. A deep-blue opening carries an original drawing,
   three planes, Market, Economics and Execution, with routes that resolve into one; the three stages change it.
   Then a white page for capabilities, sectors and about, and the blue again at the close. Manrope throughout.
   Round 7 (2026-10-12): larger type with a soft lift on the blue, a stronger drawing, a composed stage per
   chapter, a header that is solid as the scene leaves, and the capabilities shown and given their own page. */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* metric-matched fallback so the swap does not move the page */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'); size-adjust: 103%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%; }

:root {
  --blue: #156A96;
  --deep: #0E4B6B;
  --ink: #282827;
  --text-2: #3C3C3B;
  --muted: #5E5E5C;
  --pale: #EFF6FA;
  --rule: #D6E5EF;
  --white: #ffffff;
  --sky: #8CC4E4;                            /* light blue, the active route and small highlights on the blue */
  --sky-hi: #BFE3F6;                         /* the finished route and its arrow */
  --canvas-hi: #15628A;                      /* the light falling across the blue canvas */
  --canvas-lo: #0A3A54;                      /* the canvas's deepest edge */
  --on-blue: rgba(255, 255, 255, .96);
  --on-blue-2: rgba(255, 255, 255, .8);
  --on-blue-3: rgba(255, 255, 255, .66);
  --rule-on-blue: rgba(214, 229, 239, .26);
  /* a soft shadow under words on the blue, so they sit off the canvas */
  --lift: 0 1px 2px rgba(3, 20, 31, .35), 0 4px 24px rgba(3, 20, 31, .38);
  --lift-sm: 0 1px 2px rgba(3, 20, 31, .45), 0 2px 12px rgba(3, 20, 31, .4);
  /* fine grain over the blue gradients so they never band */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --canvas: var(--grain), radial-gradient(120% 90% at 78% 58%, var(--canvas-hi) 0%, #125A80 22%, var(--deep) 46%, #0C4260 74%, var(--canvas-lo) 100%), var(--deep);

  --sans: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --h1: clamp(2.875rem, min(1.4rem + 4.1vw, 9.2vh), 5.5rem);   /* by width, and by height on short laptops */
  --h2: clamp(2rem, 1.3rem + 2vw, 3.5rem);
  --h3: clamp(1.3125rem, 1.15rem + .5vw, 1.5625rem);
  --lede: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
  --body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --small: .8125rem;

  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 84px;
  --phases-h: 84px;
  --wm-h: clamp(36px, 1.2vw + 26px, 46px);  /* the mark at about 140 to 175px wide */
  --section-pad: clamp(88px, 12vh, 152px);
  --max: 1280px;
  --cta-h: 56px;
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--deep); overflow-x: clip; -webkit-text-size-adjust: 100%; }
html[data-tint="light"], html[data-tint="light"] body { background: var(--white); }
html.motion { scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--white); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.nf { background: var(--white); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--white); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; }
[id] { scroll-margin-top: var(--header-h); }
/* the capabilities section has its own top space: it meets the screen's top, so the header over it is the white one */
#capabilities { scroll-margin-top: 0; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--white); color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ico { width: 18px; height: 11px; flex: none; }
.ico--down { width: 10px; height: 16px; }

/* ---------- buttons: one geometry; light on the blue, deep blue on white ---------- */
.btn {
  --b-bg: var(--deep); --b-fg: var(--white); --b-edge: var(--deep); --b-hover: var(--blue); --b-focus: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--cta-h); padding: 0 26px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-edge); border-radius: var(--radius); text-decoration: none; white-space: nowrap;
  font: 600 1.0625rem/1 var(--sans); letter-spacing: -0.005em; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn .ico { transition: transform .35s var(--ease-out); }
.btn:hover, .btn:focus-visible { background: var(--b-hover); border-color: var(--b-hover); }
.btn:hover .ico, .btn:focus-visible .ico { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; }
.btn--light { --b-bg: var(--white); --b-fg: var(--deep); --b-edge: var(--white); --b-hover: var(--pale); --b-focus: var(--white); box-shadow: 0 6px 24px rgba(3, 20, 31, .28); }
.btn--ink { --b-bg: var(--deep); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; box-shadow: none; }
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 1.0625rem; color: var(--deep); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat; transition: color .25s ease; }
.textlink .ico { transition: transform .35s var(--ease-out); }
.textlink:hover .ico, .textlink:focus-visible .ico { transform: translateX(3px); }
.textlink:hover .ico--down, .textlink:focus-visible .ico--down { transform: translateY(3px); }
.textlink:hover, .textlink:focus-visible { color: var(--blue); }
.textlink--light { color: var(--white); background-image: linear-gradient(var(--sky), var(--sky)); text-shadow: var(--lift-sm); }
.textlink--light:hover, .textlink--light:focus-visible { color: var(--sky); }

/* ---------- the header: part of the blue over the opening, white over the page ----------
   Over the held scene it is clear. Anywhere else on the blue it is solid (.is-solid): a band of the canvas's own
   deep blue that fades out below the header, so there is no hard edge across the gradient. */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top); color: var(--white); transition: background-color .35s ease, color .35s ease; }
.head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(180deg, #0B3D58 0%, #0D4462 100%); box-shadow: 0 1px 0 rgba(214, 229, 239, .1), 0 10px 28px rgba(3, 20, 31, .28); }
.head.is-solid:not(.is-light)::before { opacity: 1; }
.head::after { content: ""; position: absolute; left: calc(var(--gutter) + env(safe-area-inset-left)); right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: 0; height: 1px; background: var(--rule-on-blue); transition: background-color .35s ease, left .35s ease, right .35s ease, opacity .35s ease; }
.head.is-solid:not(.is-light)::after { opacity: 0; }
.head__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left)); }
.head.is-light { background: #fff;   /* opaque: iPhone Safari colours the strip behind the clock from it */ color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.head.is-light::after { left: 0; right: 0; background: var(--rule); }
.wm-link { display: inline-flex; align-items: center; min-height: 44px; }
.wm-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.wm-wrap { position: relative; display: block; }
.wm { height: var(--wm-h); width: auto; transition: opacity .35s ease; }
.wm--ink { position: absolute; left: 0; top: 0; opacity: 0; }
.head.is-light .wm--rev { opacity: 0; }
.head.is-light .wm--ink { opacity: 1; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 500; color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(50% + .9em) / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
.head:not(.is-light) .nav__link { text-shadow: var(--lift-sm); }
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current] { background-size: 100% 1px; }
.head__cta { --b-bg: var(--white); --b-fg: var(--deep); --b-edge: var(--white); --b-hover: var(--pale); --b-focus: var(--white); }
.head.is-light .head__cta { --b-bg: var(--deep); --b-fg: var(--white); --b-edge: var(--deep); --b-hover: var(--blue); --b-focus: var(--blue); }
.menu { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-size: 1rem; font-weight: 500; }
.menu__bars { position: relative; width: 22px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s var(--ease-out); }
.menu[aria-expanded="true"] .menu__bars { border-bottom-color: transparent; transform: translateY(4px) rotate(45deg); }
.menu[aria-expanded="true"] .menu__bars::after { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; border-top: 1.5px solid currentColor; transform: rotate(-90deg); }
.sheet { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0; background: var(--white); color: var(--ink); overflow-y: auto; }
.sheet nav { display: flex; flex-direction: column; padding: 12px calc(var(--gutter) + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left)); }
.sheet__link { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); font-size: 1.625rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.sheet__link[aria-current] { color: var(--blue); }
.sheet__cta { margin-top: 32px; justify-content: space-between; }
.sheet__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--muted); text-underline-offset: 4px; }
.menu-open .head { background: var(--white); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* a backdrop filter would make the header the sheet's containing block and collapse it */
.menu-open .head::before { opacity: 0; }
.menu-open .head .nav__link { text-shadow: none; }
.menu-open .head .wm--rev { opacity: 0; }
.menu-open .head .wm--ink { opacity: 1; }
.menu-open, .menu-open body { overflow: hidden; }

/* ---------- the scene: one blue canvas, the drawing, the three stages ---------- */
.scene { position: relative; color: var(--white); background: var(--canvas); overflow-anchor: none; }
.scene__stage { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.scene__copy { order: -1; }
/* a fine horizon of light across the canvas, very faint */
.scene__stage::before { content: ""; position: absolute; left: 48%; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, rgba(140, 196, 228, 0) 0%, rgba(140, 196, 228, .16) 50%, rgba(140, 196, 228, 0) 100%); pointer-events: none; }
.scene__copy { position: relative; z-index: 2; display: grid; padding: calc(var(--header-h) + clamp(32px, 7vh, 104px)) calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left)); max-width: calc(min(50vw, 780px) + var(--gutter)); }
.cp { grid-area: 1 / 1; }
.h1 { font: 500 var(--h1)/1.02 var(--sans); letter-spacing: -0.035em; color: var(--white); text-shadow: var(--lift); }
.h1 .ln { display: block; white-space: nowrap; }
.lede { margin-top: clamp(22px, 3vh, 32px); max-width: min(26em, calc(46vw - 72px)); font-size: var(--lede); line-height: 1.5; color: var(--on-blue); text-shadow: var(--lift-sm); text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(28px, 4.4vh, 44px); }
.cp__k { display: flex; align-items: center; gap: 12px; font-size: var(--small); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-hi); text-shadow: var(--lift-sm); }
.cp__k span { color: var(--white); font-variant-numeric: tabular-nums; }
.cp__k::after { content: ""; width: 40px; height: 1px; background: var(--sky); opacity: .6; }
.cp__h { margin-top: 18px; font: 500 clamp(2.5rem, 1.45rem + 3vw, 4.625rem)/1.04 var(--sans); letter-spacing: -0.032em; color: var(--white); text-wrap: balance; text-shadow: var(--lift); }
.cp__p { margin-top: 20px; max-width: 20em; font-size: var(--lede); line-height: 1.5; color: var(--on-blue); text-wrap: pretty; text-shadow: var(--lift-sm); }

.scene__dg { position: relative; z-index: 1; align-self: flex-end; width: min(100%, 920px); margin: clamp(24px, 5vh, 48px) 0 0; padding: 0 calc(var(--gutter) / 2); }
.phases, .scene__stage .cp--1, .scene__stage .cp--2, .scene__stage .cp--3 { display: none; }
.flow { list-style: none; margin: 0; padding: clamp(32px, 6vh, 64px) calc(var(--gutter) + env(safe-area-inset-right)) clamp(56px, 10vh, 96px) calc(var(--gutter) + env(safe-area-inset-left)); display: grid; gap: clamp(44px, 7vh, 64px); }
.flow__item { border-top: 1px solid var(--rule-on-blue); padding-top: 28px; }
.flow__dg { margin: 0 0 22px; max-width: 560px; }
.flow .cp__h { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }

/* the pinned scene (wide, tall screens with motion): the stage holds for about 1.4 screens of scroll.
   The drawing sits up and to the right of the opening's words; for a chapter, the words are shorter, so the
   drawing moves a little left and up, towards them, and follows the route to the right as the story goes on. */
.pin .scene { height: 240vh; height: 240svh; }
.pin .scene__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; }
.pin .scene__copy { position: absolute; left: 0; top: 0; padding-bottom: 0; }
.pin .scene__dg { --w: min(56vw, calc((100svh - var(--header-h) - var(--phases-h) - 48px) * 1.643), 1180px);
  position: absolute; right: calc(var(--gutter) * .5); top: calc(var(--header-h) + (100svh - var(--header-h) - var(--phases-h) - var(--w) / 1.643) * .5); width: var(--w); margin: 0; padding: 0;
  transform: translate(5.5%, 0); transform-origin: 50% 60%; transition: transform 1s var(--ease); }
.pin .scene__stage[data-s="1"] .scene__dg { transform: translate(-6%, 5%) scale(1.03); }
.pin .scene__stage[data-s="2"] .scene__dg { transform: translate(-4.5%, 5%) scale(1.03); }
.pin .scene__stage[data-s="3"] .scene__dg { transform: translate(-3%, 5%) scale(1.03); }
.pin .flow { display: none; }
.pin .phases { display: flex; position: absolute; z-index: 3; left: calc(var(--gutter) + env(safe-area-inset-left)); right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: clamp(10px, 2vh, 22px); height: var(--phases-h); align-items: stretch; gap: clamp(16px, 2vw, 32px);
  transition: opacity .25s ease, visibility 0s; }
/* the controls belong to the held scene. As it leaves, the stage is clipped at the header line (site.js sets the
   clip), so the words, the drawing and the controls pass under a clean edge and never behind the header. */
.pin .scene__stage .cp--1, .pin .scene__stage .cp--2, .pin .scene__stage .cp--3 { display: block; }
.pin .cp { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .32s var(--ease), transform .4s var(--ease), visibility 0s .4s; }
.pin .cp.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .38s var(--ease) .08s, transform .45s var(--ease) .08s, visibility 0s; }
.pin .cp--1, .pin .cp--2, .pin .cp--3 { padding-top: clamp(24px, 14vh, 150px); }

.phase { position: relative; flex: 1; max-width: 280px; display: flex; align-items: center; gap: 14px; padding-top: 2px; color: var(--on-blue-2); text-decoration: none; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.005em; text-shadow: var(--lift-sm); transition: color .25s ease; }
.phase__n { font-size: .875rem; font-weight: 700; letter-spacing: .14em; color: var(--sky-hi); font-variant-numeric: tabular-nums; }
.phase__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(214, 229, 239, .34); }
.phase__bar::after { content: ""; position: absolute; inset: 0; background: var(--sky-hi); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.phase:hover, .phase:focus-visible { color: var(--white); }
.phase.is-on { color: var(--white); }
.phase.is-on .phase__bar::after { transform: scaleX(1); height: 3px; top: -1px; box-shadow: 0 0 10px rgba(140, 196, 228, .6); }
.phase:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.phase__next { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--on-blue-2); text-decoration: none; text-shadow: var(--lift-sm); }
.phase__next:hover, .phase__next:focus-visible { color: var(--white); }
.phase__next:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ---------- the white page ---------- */
.sec { position: relative; padding: var(--section-pad) calc(var(--gutter) + env(safe-area-inset-right)) var(--section-pad) calc(var(--gutter) + env(safe-area-inset-left)); background: var(--white); color: var(--ink); }
.sec + .sec { padding-top: 0; }
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: var(--small); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.label::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.h2 { font: 500 var(--h2)/1.08 var(--sans); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.ln2 { display: block; }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }

/* Capabilities on the home page: a shorter version of the /capabilities scroll-through (side index + sections) */
.caps__head { display: block; }
.caps .h2 { max-width: 14em; }
.hflow { margin-top: clamp(40px, 6vh, 64px); }
.hflow .csec { padding: clamp(28px, 4vh, 40px) 0 clamp(32px, 4.5vh, 44px); }
.hflow .csec:first-child { padding-top: 0; }
.hflow .csec__n { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.hflow .csec__n::after { min-height: 32px; margin-top: 16px; }
.hflow .csec__h { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); }
.hflow .csec__p { margin-top: 10px; font-size: 1.0625rem; }
.hflow__out { position: relative; margin-top: 18px; padding: 12px 0 0 30px; border-top: 1px solid var(--rule); max-width: 36em; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.hflow__out::before { content: ""; position: absolute; left: 0; top: calc(12px + .75em); width: 16px; height: 1.5px; background: var(--blue); }
.hflow__out .csec__l { display: block; margin: 0 0 4px; font-size: .75rem; }
@media (max-width: 899px) {
  .hflow .cidx { display: none; }
  .hflow .csec__n { margin-bottom: 14px; font-size: 1.75rem; }
  .hflow .csec__n::after { min-height: 0; margin-top: 0; }
}

/* Sectors (round 12): photo cards that turn over. The two faces share one grid cell, so the card is as tall as the
   longer face; .js turns the back away until the card is opened. */
.sxs { list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sx { perspective: 1600px; }
.sx__in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .75s var(--ease); }
.sx__front, .sx__back { grid-area: 1 / 1; min-height: clamp(380px, 34vw, 500px); border-radius: var(--radius); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sx__front { position: relative; display: flex; align-items: flex-end; width: 100%; margin: 0; padding: 0; border: 0; background: var(--deep); color: var(--white); text-align: left; cursor: pointer; }
.sx__front picture { position: absolute; inset: 0; }
.sx__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.sx__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 58, 84, 0) 30%, rgba(10, 58, 84, .55) 62%, rgba(8, 44, 64, .92) 100%); }
.sx__cap { position: relative; z-index: 1; display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 30px); }
.sx__name { font: 600 var(--h3)/1.2 var(--sans); letter-spacing: -0.02em; text-shadow: var(--lift-sm); }
.sx__line { font-size: 1rem; line-height: 1.5; color: var(--on-blue); text-shadow: var(--lift-sm); max-width: 24em; }
.sx__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-hi); }
.sx__plus { position: relative; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; }
.sx__plus::before, .sx__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.sx__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.sx__front:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .sx__front:hover .sx__img { transform: scale(1.04); } }
.sx__back { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); color: var(--white); background: var(--grain), radial-gradient(120% 90% at 85% 15%, var(--canvas-hi) 0%, #125A80 30%, var(--deep) 60%, var(--canvas-lo) 100%), var(--deep); }
.sx__bh { display: flex; align-items: center; gap: 12px; font: 600 var(--h3)/1.2 var(--sans); letter-spacing: -0.02em; }
.sx__bh::before { content: ""; width: 16px; height: 1.5px; background: var(--sky); }
.sx__p { margin-top: 14px; font-size: var(--body); line-height: 1.55; color: var(--on-blue); text-wrap: pretty; }
.sx__list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule-on-blue); }
.sx__list a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule-on-blue); font-size: 1rem; font-weight: 500; color: var(--white); text-decoration: none; }
.sx__list a::before { content: ""; flex: none; width: 12px; height: 1.5px; margin-right: 12px; background: var(--sky); }
.sx__list a:hover, .sx__list a:focus-visible { color: var(--sky-hi); }
.sx__close { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding: 16px 0 0; border: 0; background: none; cursor: pointer; font-size: var(--small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-hi); }
.sx__close::before { content: ""; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.sx__back :focus-visible { outline-color: #fff; }
.js .sx__back { transform: rotateY(180deg); }
.js .sx.is-open .sx__in { transform: rotateY(180deg); }
/* iPhone Safari draws the turned-away face through backface-visibility, so the face turned away is also hidden
   outright, at the half-turn when it is edge-on */
.js .sx__front, .js .sx__back { transition: visibility 0s .36s; }
.js .sx.is-open .sx__front, .js .sx:not(.is-open) .sx__back { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .js .sx__front, .js .sx__back { transition: none; } }
html:not(.js) .sx__in { grid-template-rows: auto auto; gap: 8px; }
html:not(.js) .sx__back { grid-area: 2 / 1; }
@media (prefers-reduced-motion: reduce) { .sx__in { transition: none; } }

/* About */
/* About (round 13): one centred column, the heading, the read under it, then the people */
.about__intro { display: grid; justify-items: center; gap: clamp(20px, 3vh, 28px); padding-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--rule); text-align: center; }
.about .label { justify-content: center; }
.about__p { max-width: 36em; margin: 0 auto; }
.about__p { font-size: var(--lede); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.about__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.about__line span { display: inline-flex; align-items: center; gap: 10px; }
.about__line span::before { content: ""; width: 12px; height: 1.5px; background: var(--blue); }

.cbody__grid { display: grid; grid-template-columns: minmax(240px, 3fr) minmax(0, 8fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }
.cidx { position: sticky; top: calc(var(--header-h) + 40px); }
.cidx__l { font-size: var(--small); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.cidx__list { list-style: none; margin: 18px 0 0; padding: 0; border-left: 1px solid var(--rule); }
.cidx__g { padding: 16px 0 4px 18px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--deep); }
.cidx__g:first-child { padding-top: 4px; }
.cidx__a { position: relative; display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0 10px 18px; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .25s ease; }
.cidx__a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--blue); transform: scaleY(0); transition: transform .35s var(--ease-out); }
.cidx__a:hover, .cidx__a:focus-visible { color: var(--ink); }
.cidx__a.is-on { color: var(--ink); font-weight: 600; }
.cidx__a.is-on::before { transform: none; }
.cidx__n { flex: none; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--blue); font-variant-numeric: tabular-nums; }
.csec { display: grid; grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 28px); padding: clamp(44px, 6vh, 64px) 0 clamp(52px, 7vh, 80px); border-top: 1px solid var(--rule); }
.csec:first-child { padding-top: 0; border-top: 0; }
/* the number, and a blue line from it down towards the next */
.csec__n { display: flex; flex-direction: column; align-items: flex-start; font: 500 clamp(2.5rem, 1.9rem + 1.8vw, 3.75rem)/1 var(--sans); letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.csec__n::after { content: ""; flex: 1; width: 1.5px; min-height: 48px; margin: 22px 0 0 .3em; background: linear-gradient(var(--blue), rgba(21, 106, 150, 0)); transform-origin: top; }
.csec:last-child .csec__n::after { display: none; }
.motion.rv .csec.is-in .csec__n::after { animation: grow 1.1s var(--ease) .2s backwards; }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.csec__k { margin-bottom: 10px; font-size: var(--small); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.csec__h { font: 600 clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem)/1.12 var(--sans); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.csec__p { margin-top: 14px; max-width: 32em; font-size: var(--lede); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.csec__l { margin-top: 28px; font-size: var(--small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }

/* ---------- the close and the footer: the blue again ---------- */
.close { position: relative; overflow: hidden; padding: clamp(96px, 15vh, 168px) calc(var(--gutter) + env(safe-area-inset-right)) clamp(80px, 12vh, 136px) calc(var(--gutter) + env(safe-area-inset-left)); color: var(--white);
  background: var(--grain), radial-gradient(90% 120% at 85% 30%, var(--canvas-hi) 0%, #125A80 24%, var(--deep) 52%, #0C4260 78%, var(--canvas-lo) 100%), var(--deep); }
.close__h { position: relative; max-width: 12em; font: 500 clamp(2.875rem, 1.5rem + 4.2vw, 5.75rem)/1.02 var(--sans); letter-spacing: -0.035em; text-wrap: balance; text-shadow: var(--lift); }
.close__p { position: relative; margin-top: clamp(18px, 3vh, 28px); max-width: 30em; font-size: var(--lede); line-height: 1.5; color: var(--on-blue); text-shadow: var(--lift-sm); text-wrap: balance; }
.close__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 56px); margin-top: clamp(32px, 5vh, 48px); }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.mail__addr { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); font-weight: 500; color: var(--white); text-decoration: none; background: linear-gradient(var(--sky), var(--sky)) 0 calc(100% - 8px) / 100% 1px no-repeat; overflow-wrap: anywhere; text-shadow: var(--lift-sm); }
.mail__addr:hover, .mail__addr:focus-visible { color: var(--sky); }
.copybtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--on-blue-2); transition: color .25s ease; }
.copybtn:hover, .copybtn:focus-visible, .copybtn[data-state="ok"] { color: var(--white); }
.copybtn svg { width: 15px; height: 15px; flex: none; }
.mail__status { flex-basis: 100%; min-height: 1.5em; font-size: .9375rem; color: var(--on-blue-2); }
.close :focus-visible, .foot :focus-visible { outline-color: #fff; }

.foot { padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left)); background: linear-gradient(180deg, var(--canvas-lo) 0%, var(--canvas-lo) 40%, var(--deep) 100%); color: var(--white); }   /* ends on the page's own deep blue, the colour iPhone paints under the home bar */
.nf .foot { padding-top: 8px; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; padding-top: clamp(28px, 4vh, 40px); }
.foot__wm { height: 36px; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-blue); font-size: 1rem; font-weight: 500; text-decoration: none; }
.foot__nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 5px; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: clamp(20px, 3vh, 32px); padding-top: 14px; border-top: 1px solid var(--rule-on-blue); }
.foot__base p { font-size: .875rem; color: var(--on-blue-2); }

/* 404 */
.nf__main { min-height: 70vh; padding: calc(var(--header-h) + clamp(64px, 12vh, 140px)) calc(var(--gutter) + env(safe-area-inset-right)) clamp(80px, 12vh, 140px) calc(var(--gutter) + env(safe-area-inset-left)); background: var(--white); color: var(--ink); }
.nf__p { margin-top: 18px; max-width: 30em; font-size: var(--body); line-height: 1.6; color: var(--text-2); }
.nf__ctas { margin-top: 32px; }

/* ---------- motion: the opening's entrance, reveals ---------- */
.motion .cp--0 .ln { animation: rise .7s var(--ease-out) both; }
.motion .cp--0 .ln:nth-child(2) { animation-delay: .07s; }
.motion .cp--0 .ln:nth-child(3) { animation-delay: .14s; }
.motion .cp--0 .lede { animation: rise .7s var(--ease-out) .2s both; }
.motion .cp--0 .actions { animation: rise .7s var(--ease-out) .28s both; }
.motion .phases { animation: fade .8s ease .45s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.motion.rv [data-reveal]:not(.is-in) { opacity: 0; }
.motion.rv [data-reveal].is-in { animation: rise .9s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 90ms); }

/* without the pin on a wide screen (reduced motion, a short window): the same composition, still; the stages in a row */
@media (min-width: 1000px) {
  html:not(.pin) .scene__stage { display: block; min-height: calc(min(54vw, 1080px) / 1.15 + var(--header-h) + 48px); padding-bottom: clamp(48px, 8vh, 96px); }
  html:not(.pin) .scene__dg { position: absolute; right: calc(var(--gutter) * .5); top: calc(var(--header-h) + 24px); width: min(54vw, 1080px); margin: 0; padding: 0; }
  html:not(.pin) .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
}

/* ---------- sizes ---------- */
@media (max-width: 1023px) {
  .caps__head { grid-template-columns: minmax(0, 1fr); }
  .sxs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sx__front, .sx__back { min-height: clamp(340px, 80vw, 440px); }
}
@media (max-width: 999px) {
  .cbody__grid { grid-template-columns: minmax(0, 1fr); }
  .cidx { position: static; padding: 22px 22px 10px; background: var(--pale); border-radius: var(--radius); }
  .cidx__list { border-left: 0; margin-top: 10px; }
  .cidx__a { padding-left: 0; border-top: 1px solid var(--rule); }
  .cidx__a::before { display: none; }
  .cidx__list li:first-child .cidx__a { border-top: 0; }
  .cidx__g { padding-left: 0; }
  .cidx__a.is-on { font-weight: 500; color: var(--ink); }
}
@media (max-width: 899px) {
  :root { --header-h: 68px; --wm-h: 34px; }
  .lede { max-width: 30em; }
  .nav { display: none; }
  .menu { display: inline-flex; }
  .scene__copy { max-width: none; }
}
@media (max-width: 599px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { justify-content: space-between; }
  .actions .textlink { align-self: flex-start; }
  .close__row { flex-direction: column; align-items: stretch; }
  .close__row .btn { justify-content: space-between; }
  .caps__aside .btn { display: flex; justify-content: space-between; }
  .csec { grid-template-columns: minmax(0, 1fr); }
  .csec__n { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 2.25rem; }
  .csec__n::after { flex: 1; width: auto; height: 1.5px; min-height: 0; margin: 0; background: linear-gradient(90deg, var(--blue), rgba(21, 106, 150, 0)); transform-origin: left; }
  .motion.rv .csec.is-in .csec__n::after { animation-name: grow-x; }
  .csec:last-child .csec__n::after { display: block; }
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- the brief opening (home, with motion): the logo assembles on the same blue, then hands over ---------- */
.intro-skip, .intro { display: none; }
.intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: var(--deep); }
.intro__lock { position: relative; width: min(60vw, 340px); aspect-ratio: 545 / 143; }
.intro__lock img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-on .intro__ring { animation: in-ring .5s cubic-bezier(.3, .1, .2, 1) .02s both; }
.intro-on .intro__arrow { animation: in-arrow .46s cubic-bezier(.16, 1, .3, 1) .22s both; }
.intro-on .intro__word { animation: in-word .5s cubic-bezier(.65, 0, .35, 1) .38s both; }
@keyframes in-ring { from { opacity: 0; clip-path: circle(0% at 16% 50%); transform: scale(1.04); } 30% { opacity: 1; } to { opacity: 1; clip-path: circle(60% at 16% 50%); transform: none; } }
@keyframes in-arrow { from { opacity: 0; clip-path: inset(0 76% 0 0); transform: translateX(-4%); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes in-word { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.intro-on .intro-skip { display: block; position: fixed; z-index: 51; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: var(--small); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-blue-2); animation: fade .3s linear .5s both; }
.intro-on .intro-skip:hover { color: var(--white); }
.intro-on .intro-skip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; animation: none; }
/* the page's own entrance waits for the hand-over */
.intro-on .cp--0 .ln, .intro-on .cp--0 .lede, .intro-on .cp--0 .actions, .intro-on .phases { animation-play-state: paused; }
.intro-on .head { opacity: 0; }

/* automation and ?capture see the finished page */
.capture .head { position: absolute; }
@media print { .skip, .intro, .intro-skip { display: none !important; } body, html { background: #fff; color: #111; } }

/* ---------- round 10: the Mark, drawn on a canvas (mark.js) ----------
   Held, the canvas fills the stage and the drawing sits right of the words; the scene is longer, so each beat plays and
   then rests. Not held, the canvas is a box of its own under the words and in each stacked stage. */
.mk { display: block; width: 100%; }
.scene__dg { pointer-events: none; }
.scene__dg .mk { aspect-ratio: 1.15 / 1; }
.flow__dg .mk { aspect-ratio: 1.25 / 1; }
.pin .scene { height: 600vh; height: 600svh; }
.scene__stage::before { display: none; }   /* the old planes' horizon line */
.pin .scene__dg, .pin .scene__stage[data-s] .scene__dg { inset: 0; width: auto; height: auto; margin: 0; padding: 0; transform: none; transition: none; align-self: stretch; }   /* stretch: the stacked layout's flex-end would shrink it to its content */
.pin .scene__dg .mk { width: 100%; height: 100%; aspect-ratio: auto; }
.cp__k { font-size: .875rem; }
/* the bottom edge (round 15): a hairline fixed bar whose colour follows the section at the foot of the screen
   (site.js), so iPhone Safari's toolbar follows it as you scroll */
/* (round 15c) Safari skips edge bars under 3px tall, so each is 12px, mostly past the screen's edge, and only on iOS */
.edge { position: fixed; left: 0; right: 0; z-index: 41; height: 12px; display: none; }
.edge--t { top: -6px; }
.edge--b { bottom: -8px; }
.edge[data-c="light"] { background: #fff; }
.edge[data-c="dark"] { background: var(--deep); }
@supports (-webkit-touch-callout: none) { .edge.is-on { display: block; } }
.capture .edge { display: none; }
/* touch screens (round 15): the cards cross-fade instead of turning; Safari held the front's words through the turn */
@media (hover: none) {
  .js .sx__in, .js .sx.is-open .sx__in { transform: none; transition: none; }
  .js .sx__back { transform: none; opacity: 0; transition: opacity .28s ease, visibility 0s .28s; }
  .js .sx.is-open .sx__back { opacity: 1; transition: opacity .28s ease .04s, visibility 0s; }
  .js .sx__front { opacity: 1; transition: opacity .28s ease, visibility 0s; }
  .js .sx.is-open .sx__front { opacity: 0; transition: opacity .22s ease, visibility 0s .22s; }
}
/* the edges of the blue match the page's own deep blue (html, theme-color), so on an iPhone the strip behind the
   clock and the home bar runs on without a seam (round 14, Carter) */
.pin .scene__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--deep) 0, rgba(14, 75, 107, 0) clamp(70px, 11vh, 120px), rgba(14, 75, 107, 0) calc(100% - clamp(80px, 12vh, 130px)), var(--deep) 100%); }
.close::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--deep) 0, rgba(14, 75, 107, 0) 110px, rgba(14, 75, 107, 0) calc(100% - 110px), var(--deep) 100%); }
/* held on a phone or tablet upright (round 12): the words from the top, the drawing below them (mark.js), a compact
   01 02 03 bar at the foot */
@media (max-width: 999px) {
  .pin { --phases-h: 60px; }
  .pin .scene__copy { padding-top: calc(var(--header-h) + clamp(18px, 3vh, 32px)); }
  .pin .cp--1, .pin .cp--2, .pin .cp--3 { padding-top: 4px; }
  .pin .cp__h { margin-top: 12px; font-size: clamp(2.125rem, 8.6vw, 3.5rem); }
  .pin .cp__p { margin-top: 14px; max-width: 26em; font-size: clamp(1.0625rem, 4.4vw, 1.375rem); }
  .pin .phases { gap: 12px; bottom: calc(6px + env(safe-area-inset-bottom)); }
  .pin .phase { gap: 8px; font-size: .9375rem; }
  .pin .phase__n { font-size: .75rem; }
  .pin .phase__next { display: none; }
}
/* the held scene's words sit centred in the space they have (round 12, Carter: "all the text is a little too high"):
   between the header and the 01 02 03 bar on desktop, between the header and the drawing on phones */
.pin .scene__copy { bottom: calc(var(--phases-h) + clamp(10px, 2vh, 22px)); align-content: safe center; padding-top: var(--header-h); padding-bottom: 3vh; }
.pin .cp { align-self: center; }
.pin .cp--1, .pin .cp--2, .pin .cp--3 { padding-top: 0; }
/* centred was a touch low for the opening (Carter): it sits halfway between centred and where it was */
.pin .cp--0 { position: relative; top: calc(-1 * clamp(24px, 5.5vh, 60px)); }
@media (max-width: 999px) {
  .pin .scene__copy { bottom: 42svh; padding-top: calc(var(--header-h) + 12px); padding-bottom: clamp(40px, 9vh, 100px); grid-template-rows: minmax(0, 1fr); align-content: stretch; }   /* one fixed row: the stages centre in it, the taller opening runs from its top */
  .pin .cp--0 { align-self: start; top: 0; padding-top: 2vh; }
}
@media (max-width: 999px) and (max-height: 759px) {   /* short phones: the opening keeps one action, so the drawing has room */
  .pin .cp--0 { padding-top: 0; }
  .pin .cp--0 .textlink { display: none; }
  .pin .cp--0 .actions { margin-top: 20px; }
}
@media (max-width: 520px) { .h1 { font-size: clamp(2rem, 9.6vw, 2.875rem); } }

/* ---------- round 11 (2026-10-16), from Zach's review ----------
   The headline in two lines (phones still wrap the second); capabilities lead on the left with the jump list on the
   right, on its own pale panel; News is its own section; the close carries the Mark. */
:root { --h1: clamp(2.5rem, min(.25rem + 3.95vw, 7.4vh), 4.75rem); }
@media (max-width: 899px) { .h1 .ln { white-space: normal; } }
@media (min-width: 1000px) { .cbody__grid { grid-template-columns: minmax(0, 8fr) minmax(250px, 3fr); } }
@media (max-width: 999px) { .hflow .cidx { display: none; } }
.hflow .cidx { padding: 26px 26px 18px; background: var(--pale); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); }
.hflow .cidx__list { border-left-color: rgba(21, 106, 150, .22); }
.hflow .csec { padding: clamp(22px, 3vh, 30px) 0 clamp(24px, 3.2vh, 32px); }
.hflow .csec__h { font-size: clamp(1.4375rem, 1.1rem + .95vw, 2rem); }
.hflow .csec__p { color: var(--muted); }
.hflow__out { margin-top: 14px; }
/* About: the people behind the partnership, each a photo over name, title and bio (the photos' white grounds sit straight on the page) */
.people__h { margin-top: clamp(56px, 8vh, 88px); text-align: center; font: 600 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.15 var(--sans); letter-spacing: -0.025em; color: var(--ink); }
.people { list-style: none; margin: clamp(28px, 4vh, 40px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(32px, 6vw, 96px); }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; }
.person__img { width: min(100%, 240px); aspect-ratio: 4 / 5; object-fit: cover; background: var(--white); }
.person__name { margin-top: 20px; font: 600 var(--h3)/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.person__role { margin-top: 6px; font-size: var(--small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--blue); }
.person__bio { margin-top: 12px; max-width: 30em; font-size: var(--body); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 599px) { .people { grid-template-columns: minmax(0, 1fr); gap: 44px; } .person__img { width: 200px; } }
.newsroom .sec__head { padding-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--rule); }
.nlist { list-style: none; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; display: grid; gap: 16px; }
.ncard { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr) auto; grid-template-rows: auto 1fr; gap: 10px clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 3.4vh, 36px) clamp(22px, 3vw, 40px); background: var(--pale); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background-color .25s ease; }
.ncard:hover, .ncard:focus-visible { background: #E4F0F7; }
.ncard__meta { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--muted); }
.ncard__meta time { font-weight: 600; color: var(--ink); }
.ncard__t { font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.625rem)/1.25 var(--sans); letter-spacing: -0.02em; text-wrap: balance; transition: color .25s ease; }
.ncard__p { grid-column: 2; font-size: var(--body); line-height: 1.55; color: var(--text-2); max-width: 40em; }
.ncard__go { grid-column: 3; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--deep); white-space: nowrap; }
.ncard__go .ico { transition: transform .35s var(--ease-out); }
.ncard:hover .ncard__t { color: var(--blue); }
.ncard:hover .ncard__go .ico { transform: translateX(3px); }
.close__in { position: relative; z-index: 1; }
.close__mk { position: absolute; right: calc(var(--gutter) * .5); top: 50%; width: min(31vw, 460px); transform: translateY(-50%); pointer-events: none; }
@media (min-width: 1000px) { .hflow .csec__k { display: none; } }   /* the jump list already groups the six by stage */
@media (min-width: 1024px) {
}
.close__mk .mk { aspect-ratio: 1.25 / 1; }
@media (max-width: 1023px) {
  .ncard { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ncard__meta { grid-row: auto; flex-direction: row; gap: 14px; }
  .ncard__p, .ncard__go { grid-column: auto; grid-row: auto; }
  .ncard__go { align-self: start; }
  .close__mk { position: relative; right: auto; top: auto; width: min(62vw, 340px); margin: calc(-1 * clamp(40px, 6vh, 72px)) 0 8px -3vw; transform: none; }
}