/* ==========================================================================
   Bryder Group, the public look (26 October 2026).

   Loaded by the public pages only: home, /bryder-commerce/, /jack-ridder/,
   /news/, /press/, /careers/ (with careers.css after it), the three role
   pages, /privacy/ and 404. The portal, staff and auth pages keep calm.css and
   never load this file, so nothing here can change them.

   Related to studios.bryder.co.nz (same Geist type, the same greens, the
   same hand-drawn objects) but in its own voice: deep green leads where
   Studios uses ink, graph paper instead of dots, the logo's gradient bands,
   a pen underline instead of the highlighter, register data in Geist Mono,
   and one slanted band edge into #approach and into the footer.

   calm.js still runs on every public page. It needs .hdr, .menu-btn,
   #site-menu, .menu-close, [data-contact-form], [data-form-status],
   [type="submit"] and [data-year]; keep those hooks.

   careers.css reads calm's token names, so the aliases in :root below map
   them onto this palette. Its few hard-coded looks are overridden at the
   end of this file.
   ========================================================================== */

/* Geist and Geist Mono, SIL Open Font Licence 1.1, self-hosted (Latin
   subset, see assets/fonts/OFL-geist.txt). No third-party requests. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ---------------------------------------------------------------- */
:root {
  /* grounds and lines (the same as Studios) */
  --white: #fff; --paper: #f6f8f7; --mint-soft: #e3f4ef;
  --line: #e3e9e6; --line-2: #cbd5d1;
  /* text */
  --ink: #111816; --ink-hover: #26312e; --text: #3e4946; --muted: #5c6864; --link: #02695f;
  /* the three bands, flat (marks, fills) */
  --mint: #b3e4d8; --teal: #02b1a0; --deep: #024946; --deep-2: #03605b; --deeper: #01383b;
  /* the Group's own: the logo's gradient bands (Studios stays flat) */
  --g1: linear-gradient(100deg, #d1ece8, #b5dfda);
  --g2: linear-gradient(100deg, #17cfc1, #07a49a);
  --g3: linear-gradient(100deg, #025154, #01383b);
  --g3-dark: linear-gradient(100deg, #7fd3c8, #4cbcb0);
  /* type */
  --f: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fm: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* layout */
  --wrap: 1200px; --gut: clamp(16px, 4vw, 40px); --hdr: 72px;
  --sec: clamp(64px, 9vw, 120px);
  --tilt: clamp(20px, 4vw, 56px);
  /* shape */
  --r-sm: 10px; --r-btn: 12px; --r: 18px; --r-lg: 28px;
  --shadow: 0 1px 2px rgba(17, 24, 22, .05), 0 10px 28px -14px rgba(17, 24, 22, .2);
  --shadow-lg: 0 2px 6px rgba(17, 24, 22, .05), 0 26px 50px -22px rgba(17, 24, 22, .3);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* marks: the pen underline, teal on light and mint on dark */
  --ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5 86 3.8 128 5.6S182 9.6 197 6' fill='none' stroke='%2302b1a0' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ul-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5 86 3.8 128 5.6S182 9.6 197 6' fill='none' stroke='%23b3e4d8' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* calm-compatible names, for careers.css */
  --sheet: var(--white); --paper-2: #eef3f1; --ink-2: var(--deep); --ink-3: var(--link);
  --soft: var(--text); --maxw: var(--wrap); --pad: var(--gut);
  color-scheme: light;
}

/* ---- base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--text);
  font: 400 1.0625rem/1.6 var(--f);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--deep); }
a[href^="tel:"] { white-space: nowrap; }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; text-wrap: balance; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; }
[hidden] { display: none !important; }
::selection { background: var(--mint); color: var(--ink); }
/* Focus: deep green on the light grounds (mint there was 1.4:1, too faint to
   see), mint on the dark band and the footer. */
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .band :focus-visible, .ftr :focus-visible { outline-color: var(--mint); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.mono { font-family: var(--fm); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tnum, .is-literal { font-family: var(--fm); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* ---- marks ------------------------------------------------------------------ */
/* The pen underline: one per heading, on the last word or two. */
.ul { background: var(--ul) 0 100% / 100% .3em no-repeat; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-dark .ul, .ftr .ul { background-image: var(--ul-mint); }
/* The marker swipe: used once on the whole site, under "long term." */
.swipe { position: relative; z-index: 0; white-space: nowrap; }
.swipe svg { position: absolute; z-index: -1; left: -.05em; bottom: -.02em; width: calc(100% + .1em); height: .42em; overflow: visible; }
.swipe path { fill: none; stroke: var(--mint); stroke-width: .2em; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* The eyebrow pill. Its bullet is the logo's three bands, drawn small. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 6px 14px 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.4;
  letter-spacing: 0; text-transform: none;
}
.eyebrow::before, .mk {
  content: ""; flex: none; display: inline-block; width: 15px; height: 14px;
  background: var(--g1) 0 1.5px / 10px 3.4px no-repeat, var(--g2) 2px 5.8px / 11px 3.4px no-repeat, var(--g3) 4px 10.1px / 11px 3.4px no-repeat;
  transform: rotate(-14deg);
}
.on-dark .eyebrow { background: transparent; border-color: rgba(255, 255, 255, .22); color: #fff; }
.on-dark .eyebrow::before { background: var(--g1) 0 1.5px / 10px 3.4px no-repeat, var(--g2) 2px 5.8px / 11px 3.4px no-repeat, var(--g3-dark) 4px 10.1px / 11px 3.4px no-repeat; }

/* The 01 / 02 / 03 markers: skewed like the bands of the logo. */
.chip-band { display: inline-grid; place-items: center; width: 64px; height: 30px; flex: none; border-radius: 8px; transform: skewX(-14deg); font: 600 .85rem/1 var(--fm); color: var(--ink); }
.chip-band > span { transform: skewX(14deg); }
.chip-band.c1 { background: var(--g1); }
.chip-band.c2 { background: var(--g2); }
.chip-band.c3 { background: var(--g3); color: #fff; }
.on-dark .chip-band.c1 { background: var(--mint); color: var(--ink); }
.on-dark .chip-band.c2 { background: var(--teal); color: var(--ink); }
.on-dark .chip-band.c3 { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }

/* ---- buttons and links ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); border: 1.5px solid var(--deep);
  background: var(--deep); color: #fff;
  font: 600 1rem/1.2 var(--f); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--deep-2); border-color: var(--deep-2); color: #fff; transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }
.btn .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .ico.nudge { transform: translateX(3px); }
.btn-deep { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn-outline, .btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover, .btn--ghost:hover { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn-outline .ico, .btn--ghost .ico { color: var(--deep); }
.btn-mint { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn-mint:hover { background: #c6ece2; border-color: #c6ece2; color: var(--ink); }
.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-ghost-dark:hover { background: transparent; border-color: #fff; color: #fff; }
.btn-lg { min-height: 56px; padding: 0 24px; font-size: 1.0625rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.btn__arrow, .btn .arr { font-family: var(--f); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link, .arrow-link {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px;
  color: var(--ink); font-weight: 600; text-decoration: none; border: 0;
  background: linear-gradient(var(--mint), var(--mint)) 0 100% / 100% 2px no-repeat;
  transition: background-image .2s;
}
.text-link:hover, .arrow-link:hover { color: var(--ink); background-image: linear-gradient(var(--teal), var(--teal)); }
.text-link .ico { width: 17px; height: 17px; color: var(--deep); }
.arrow-link::after { content: "\2192"; color: var(--deep); }
.arrow-link[href^="http"]::after { content: "\2197"; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--white);
  color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease);
}
.pill:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.pill .ico { width: 16px; height: 16px; color: var(--deep); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: var(--mint-soft); color: var(--deep); font-size: .8rem; font-weight: 600; line-height: 1; }
.tag-o { background: transparent; border: 1px solid var(--line-2); color: var(--text); font-weight: 500; padding: 6px 10px; }

.icon-tile { width: 40px; height: 40px; border-radius: 12px; background: var(--mint-soft); color: var(--deep); display: grid; place-items: center; flex: none; }
.icon-tile .ico { width: 20px; height: 20px; }

/* ---- header and menu ---------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.hdr.is-stuck { box-shadow: var(--shadow); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; gap: 24px; }
.brand { flex: none; display: block; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.nav a { position: relative; padding: 6px 0; color: var(--ink); font-size: 15.5px; font-weight: 500; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { font-weight: 600; }
.hdr-end { display: flex; align-items: center; gap: 20px; flex: none; }
.hdr-link { color: var(--text); font-size: .95rem; font-weight: 500; text-decoration: none; }
.hdr-link:hover { color: var(--ink); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink); font: 600 .95rem/1 var(--f); cursor: pointer; }
.menu-btn:hover { border-color: var(--ink); }
.menu-btn .ico { width: 18px; height: 18px; }
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0 var(--gut) 28px; overflow: auto; background: var(--white); }
.menu-top { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.menu-top img { height: 38px; width: auto; }
.menu-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink); font: 600 .95rem/1 var(--f); cursor: pointer; }
.menu-close .ico { width: 18px; height: 18px; }
.menu-nav li a { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.menu-nav li a .ico { width: 18px; height: 18px; color: var(--deep); }
.menu-nav li a[aria-current] { color: var(--deep); }
.menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; justify-items: start; }
.menu-foot .btn { width: 100%; }
.menu-foot p { color: var(--muted); font-size: .95rem; }
@media (max-width: 1200px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr-end { margin-left: auto; }
}
@media (max-width: 560px) {
  .hdr-staff, .hdr-end .btn { display: none; }
  .hdr-end { gap: 16px; }
  .brand img { height: 36px; }
}

/* ---- grounds ---------------------------------------------------------------------- */
/* Graph paper (Studios uses dots): the Group's own sketch pad. */
.grid-ground { position: relative; isolation: isolate; }
.grid-ground::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(to bottom, transparent 20%, #000 90%);
  mask: linear-gradient(to bottom, transparent 20%, #000 90%);
}
.grid-dark { position: relative; isolation: isolate; }
.grid-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(100deg, transparent 45%, #000 95%);
  mask: linear-gradient(100deg, transparent 45%, #000 95%);
}
/* The slanted band edge: used exactly twice, into #approach and the footer. */
.slant { position: relative; z-index: 1; clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--tilt)); }
.pre-slant { padding-bottom: calc(var(--sec) + var(--tilt)) !important; }

/* ---- sections ---------------------------------------------------------------------- */
.sec { position: relative; padding-block: var(--sec); }
.sec-white { background: var(--white); }
.sec-paper { background: var(--paper); }
.sec h2, .h2 { font-size: clamp(2.1rem, 1.25rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.head h2 { max-width: 14em; }
.intro { max-width: 34em; padding-bottom: 6px; font-size: 1.125rem; line-height: 1.55; color: var(--text); }
.head-link { justify-self: end; margin-bottom: 10px; }
.note-muted { color: var(--muted); font-size: .9rem; }

/* ============================================================================
   HOME
   ============================================================================ */

/* ---- hero ---------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--paper); overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(ellipse 60% 70% at 74% 46%, #000 25%, transparent 72%);
  mask: radial-gradient(ellipse 60% 70% at 74% 46%, #000 25%, transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; padding-block: clamp(32px, 4.2vw, 60px) clamp(28px, 3.4vw, 48px); }
.hero h1 { max-width: 11.5em; margin-bottom: 24px; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -.045em; }
.hero .lede { max-width: 31em; margin-bottom: 30px; font-size: clamp(1.125rem, 1.04rem + .4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }
.lock { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-size: .9rem; color: var(--muted); }
.lock .ico { width: 16px; height: 16px; color: var(--deep); }
.hero-art { position: relative; height: min(520px, 46vw); }
.map { position: absolute; right: clamp(24px, 5vw, 72px); top: 0; height: 100%; width: auto; overflow: visible; }
.map .isl { stroke: var(--ink); stroke-width: 2.3; stroke-linejoin: round; }
.map .n { fill: var(--white); }
.map .s { fill: var(--mint-soft); }
.map .shade { fill: var(--mint); }
.map .route { fill: none; stroke: var(--deep); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .7; }
.map .ripple { fill: none; stroke: var(--teal); stroke-width: 2; }
.map .tag-txt { font: 600 16px var(--f); fill: #fff; letter-spacing: -.01em; }
.map .coord { font: 400 12.5px var(--fm); fill: var(--muted); }
.launch { position: absolute; right: 0; bottom: 34px; display: flex; gap: 12px; align-items: center; width: 250px; padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); font-size: .875rem; line-height: 1.45; color: var(--text); }
.launch small { display: block; font: 400 .78rem/1.4 var(--fm); color: var(--muted); }
.launch b { display: block; margin: 2px 0 1px; color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* ---- hero ledger: the company index, then the register line ------------------------- */
.ledger { position: relative; z-index: 1; background: var(--white); border-block: 1px solid var(--line); }
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.index a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 26px 24px 20px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.index a:first-child { border-left: 0; padding-left: 0; }
.index a::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 6px; border-radius: 0 0 4px 4px; transform-origin: top; transition: height .25s var(--ease); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%); }
.index a:first-child::before { left: 0; }
.index a:nth-child(1)::before { background: var(--g1); }
.index a:nth-child(2)::before { background: var(--g2); }
.index a:nth-child(3)::before { background: var(--g3); }
.index a:hover::before, .index a:focus-visible::before { height: 10px; }
.ix-n { grid-row: 1 / span 2; align-self: start; padding-top: 3px; font: 500 .84rem/1 var(--fm); color: var(--muted); }
.ix-name { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ix-st { grid-column: 2; font-size: .95rem; color: var(--muted); line-height: 1.4; }
.index .ico { grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--deep); transition: transform .25s var(--ease); }
.index a:hover .ico { transform: translateX(3px); }
.index a:hover .ix-name { color: var(--ink); }
.register-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.register-row div { padding: 18px 22px; border-left: 1px solid var(--line); }
.register-row div:first-child { border-left: 0; padding-left: 0; }
.register-row dt { margin-bottom: 3px; font: 400 .78rem/1.4 var(--fm); color: var(--muted); }
.register-row dd { color: var(--ink); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.register-row dd.mono { font-weight: 500; }
.register-row a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.register-row a:hover { text-decoration-color: var(--teal); }

/* ---- companies --------------------------------------------------------------- */
.cos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.co {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  color: inherit; text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s;
}
.co::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s var(--ease); }
.co { isolation: isolate; }
.co:hover { color: inherit; transform: translateY(-3px); border-color: var(--line-2); }
.co:hover::after { opacity: 1; }
.co-kb { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.co-art { position: relative; overflow: hidden; isolation: isolate; }
.co-kb .co-art { min-height: 440px; background: var(--g3); border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
.co-kb .co-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px;
}
.co-st .co-art { height: 240px; background: var(--mint-soft); }
.co-bc .co-art { height: 240px; background: var(--paper); }
.co-st .co-art::before, .co-bc .co-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(70% 80% at 50% 50%, #000, transparent 85%); mask: radial-gradient(70% 80% at 50% 50%, #000, transparent 85%);
}
.ill { position: absolute; left: 50%; top: 50%; width: auto; height: 84%; max-width: none; transform: translate(-50%, -50%); overflow: visible; }
.co-kb .ill { top: auto; bottom: 0; height: 94%; transform: translateX(-50%); }
.co-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 28px 30px 30px; }
.co-kb .co-body { justify-content: center; padding: 44px 48px 42px; }
.co-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.co-n { font: 500 .84rem/1 var(--fm); color: var(--muted); }
.co-name { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.05; letter-spacing: -.035em; }
.co-kb .co-name { font-size: clamp(2.1rem, 1.4rem + 1.8vw, 2.6rem); }
.dateline { padding: 9px 0; border-block: 1px solid var(--line); font: 400 .84rem/1.5 var(--fm); color: var(--muted); }
.dateline b { color: var(--ink); font-weight: 600; }
.co-text { font-size: 1rem; line-height: 1.6; color: var(--text); }
.co-kb .co-text { font-size: 1.0625rem; max-width: 34em; }
.fact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(17, 24, 22, .2); }
.fact-row div { padding: 12px 16px 2px 0; }
.fact-row div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.fact-row dt { font: 400 .78rem/1.4 var(--fm); color: var(--muted); }
.fact-row dd { margin-top: 2px; color: var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.co-go { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--ink); font-weight: 600; font-size: .98rem; }
.co-go span { padding-bottom: 2px; background: linear-gradient(var(--mint), var(--mint)) 0 100% / 100% 2px no-repeat; }
.co:hover .co-go span { background-image: linear-gradient(var(--teal), var(--teal)); }
.co-go .ico { width: 17px; height: 17px; color: var(--deep); transition: transform .25s var(--ease); }
.co:hover .co-go .ico { transform: translateX(3px); }
.co-kb:hover .co-go .ico { transform: translate(2px, -2px); }
.studio-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 30px; color: var(--muted); font-size: 1rem; text-align: center; }

/* ---- approach: the deep band -------------------------------------------------------- */
.band { position: relative; isolation: isolate; padding-top: calc(var(--tilt) + var(--sec)); padding-bottom: var(--sec); background: var(--deep); color: #cfe6e0; overflow: clip; }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(100deg, transparent 45%, #000 95%); mask: linear-gradient(100deg, transparent 45%, #000 95%);
}
.band h2 { color: #fff; }
.band .intro { margin-top: 18px; color: #cfe6e0; }
.band-mark { justify-self: end; align-self: end; width: min(260px, 100%); height: auto; margin: 0 6px -6px 0; }
.commit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); }
.commit li { padding: 34px 36px 6px 0; }
.commit li + li { padding-left: 36px; border-left: 1px solid rgba(255, 255, 255, .14); }
.commit h3 { margin: 22px 0 12px; color: #fff; font-size: 1.6rem; line-height: 1.12; letter-spacing: -.025em; }
.commit p { font-size: 1rem; line-height: 1.6; color: #cfe6e0; }

/* ---- governance ---------------------------------------------------------------------- */
.gov { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.frame { position: relative; }
.frame img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--line); }
/* The three tabs hang off the photo's corner, but never further than the page
   gutter allows (they caused sideways scroll at 320, 360 and about 600px). */
.tabs { position: absolute; right: max(-24px, calc(12px - var(--gut))); bottom: -22px; z-index: 2; display: grid; gap: 7px; transform: rotate(-8deg); pointer-events: none; }
.tabs i { display: block; width: 112px; height: 20px; border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(1, 56, 59, .5); }
.tabs i:nth-child(1) { background: var(--g1); }
.tabs i:nth-child(2) { margin-left: 22px; background: var(--g2); }
.tabs i:nth-child(3) { margin-left: 44px; background: var(--g3); }
.cap { margin-top: 18px; font: 400 .8rem/1.5 var(--fm); color: var(--muted); }
.gov-text h2 { font-size: clamp(2.4rem, 1.5rem + 2.8vw, 3.9rem); letter-spacing: -.045em; line-height: 1; }
.role-line { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 26px; color: var(--deep); font-weight: 600; }
.role-line::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--teal); }
.gov-text .body { max-width: 33em; margin-bottom: 16px; font-size: 1.0625rem; color: var(--text); }

/* ---- the ruled news list ----------------------------------------------------------- */
.rl { border-top: 1px solid var(--ink); }
.rl li { border-bottom: 1px solid var(--line); }
.rl a { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 14rem 2rem; gap: 8px 28px; align-items: baseline; padding: clamp(20px, 2.4vw, 30px) 0; color: var(--ink); text-decoration: none; }
.rl-date { font: 400 .84rem/1.4 var(--fm); color: var(--muted); }
.rl-title { color: var(--ink); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.rl-title span { padding-bottom: .06em; background: var(--ul) 0 100% / 0% .3em no-repeat; transition: background-size .35s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rl a:hover .rl-title span, .rl a:focus-visible .rl-title span { background-size: 100% .3em; }
.rl-sum { display: block; margin-top: 10px; color: var(--text); font-size: 1rem; line-height: 1.6; max-width: 62ch; }
.rl-src { color: var(--text); font-size: .95rem; font-weight: 500; }
.rl .ico { align-self: center; justify-self: end; width: 22px; height: 22px; color: var(--deep); transition: transform .25s var(--ease); }
.rl a:hover .ico { transform: translate(3px, -3px); }
.rl a[href^="/"]:hover .ico { transform: translateX(3px); }
.outlets { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; margin-top: 44px; }
.outlets p { font: 400 .8rem/1.4 var(--fm); color: var(--muted); }
.outlets ul { display: flex; flex-wrap: wrap; flex: 1; align-items: center; justify-content: space-between; gap: 22px 44px; }
.plogo { display: block; width: calc(var(--h) * var(--r)); height: var(--h); max-width: 100%; background-color: var(--muted); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

/* ---- the technology grid (greyscale until hovered) ------------------------------------ */
.tech { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); }
.tech li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 120px; padding: 22px 10px 18px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tech img, .tech svg { width: auto; height: 34px; filter: grayscale(1); opacity: .86; transition: filter .25s, opacity .25s; }
.tech img.wide { height: 24px; }
.tech svg { width: 34px; fill: var(--ink); }
.tech li:hover img, .tech li:hover svg, .tech li:focus-within img { filter: grayscale(0); opacity: 1; }
.tech span { font: 400 .8rem/1.2 var(--fm); color: var(--text); }

/* ---- company details: the register card -------------------------------------------- */
.details { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.details .head { display: block; margin: 0; }
.note-card { display: flex; gap: 14px; margin-top: 32px; padding: 20px 22px; border-radius: var(--r); background: var(--mint-soft); color: var(--text); font-size: .95rem; line-height: 1.55; }
.note-card strong { color: var(--ink); }
.note-card .icon-tile { width: 44px; height: 44px; background: var(--white); }
.register { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.reg-strip { display: grid; grid-template-rows: 3px 3px 4px; }
.reg-strip i:nth-child(1) { background: var(--g1); }
.reg-strip i:nth-child(2) { background: var(--g2); }
.reg-strip i:nth-child(3) { background: var(--g3); }
.reg-strip.only-3 { grid-template-rows: 10px; }
.reg-strip.only-3 i { background: var(--g3); }
.reg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 22px 30px 20px; border-bottom: 1px solid var(--line); }
.reg-head p { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.reg-head .text-link { font-size: .92rem; }
.register dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 6px 30px 10px; }
.register dl div { padding: 17px 0 16px; border-bottom: 1px solid var(--line); }
.register dl div:nth-last-child(-n+2) { border-bottom: 0; }
.register dl.one { grid-template-columns: 1fr; }
.register dl.one div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.register dt { margin-bottom: 3px; font: 400 .78rem/1.4 var(--fm); color: var(--muted); }
.register dd { color: var(--ink); font-size: 1.06rem; font-weight: 500; }
.register dd.mono { font-size: 1rem; }

/* ---- contact ------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.contact .head { display: block; margin: 0 0 34px; }
.contact .intro { margin-top: 20px; }
.c-list { border-top: 1px solid var(--line-2); }
.c-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.c-list .icon-tile { background: var(--white); border: 1px solid var(--line); }
.c-k { font: 400 .78rem/1.5 var(--fm); color: var(--muted); }
.c-v { color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.c-v a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.c-v a:hover { text-decoration-color: var(--teal); }
.c-v.mono { font-weight: 500; font-size: 1rem; }
.c-n { margin-top: 2px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.c-ledger { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line-2); }
.c-ledger div { padding: 22px 28px 0; border-left: 1px solid var(--line); }
.c-ledger div:first-child { padding-left: 0; border-left: 0; }
.c-ledger dt { margin-bottom: 4px; font: 400 .78rem/1.5 var(--fm); color: var(--muted); }
.c-ledger .c-n { max-width: 30em; margin-top: 4px; }

/* the form (the mailto contract lives in calm.js; only the look is here) */
.form { padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-lg); }
.form-req { margin-bottom: 20px; color: var(--muted); font-size: .875rem; }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.f { display: grid; gap: 7px; margin-bottom: 16px; }
.f-grid .f { margin: 0; }
.f label { color: var(--ink); font-size: .95rem; font-weight: 600; }
.f input, .f select, .f textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--f); transition: border-color .2s, box-shadow .2s; }
.f textarea { min-height: 132px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: #69736f; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 3px var(--mint); }
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 42px; }
.sel svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--deep); pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--mint-soft); color: var(--deep); font-size: .92rem; }
.form-status.is-error { background: #fbe9e4; color: #7a2e1d; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.form-foot p { flex: 1; min-width: 200px; color: var(--muted); font-size: .875rem; }

/* ---- footer --------------------------------------------------------------------------- */
.ftr { position: relative; isolation: isolate; padding-top: var(--tilt); background: var(--deeper); color: rgba(255, 255, 255, .76); font-size: .95rem; overflow: clip; }
.ftr::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(60% 100% at 88% 0%, #000, transparent 75%); mask: radial-gradient(60% 100% at 88% 0%, #000, transparent 75%);
}
.ftr a { color: #d6ece7; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 4px; }
.ftr .btn, .ftr .btn:hover { text-decoration: none; }
.ftr .btn-mint, .ftr .btn-mint:hover { color: var(--ink); }
.ftr .btn-ghost-dark, .ftr .btn-ghost-dark:hover { color: #fff; }
.ftr-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ftr-line { max-width: 14em; color: #fff; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.3rem); font-weight: 600; line-height: 1.04; letter-spacing: -.042em; text-wrap: balance; }
.ftr-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 4.6fr) repeat(3, minmax(0, 2.4fr)); gap: 36px; padding-block: 48px 44px; }
.ftr-brand img { height: 42px; width: auto; margin-bottom: 18px; }
.ftr-brand p { max-width: 30em; line-height: 1.6; }
.ftr-h { margin-bottom: 14px; color: var(--mint); font-size: .9rem; font-weight: 600; }
.ftr ul { display: grid; gap: 10px; }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 30px; border-top: 1px solid rgba(255, 255, 255, .14); font: 400 .8rem/1.5 var(--fm); color: rgba(255, 255, 255, .7); }

/* ============================================================================
   INNER PAGES
   ============================================================================ */

/* The inner-page hero (and the job pages' .page-head). */
.phero, .page-head { position: relative; isolation: isolate; background: var(--paper); border-bottom: 1px solid var(--line); }
.phero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(to bottom, transparent 20%, #000 90%); mask: linear-gradient(to bottom, transparent 20%, #000 90%);
}
.phero > .wrap, .page-head > .wrap { padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 84px); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 88px); align-items: center; }
.phero h1, .page-head h1, .h-xl { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.03; letter-spacing: -.045em; }
.phero .lede, .page-head .lede { margin-top: 22px; }
.crumb, .hero__crumb { margin-bottom: 26px; color: var(--muted); font-size: .9rem; }
.crumb a, .hero__crumb a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.crumb a:hover, .hero__crumb a:hover { color: var(--ink); text-decoration-color: var(--teal); }
.crumb span[aria-hidden] { padding-inline: 4px; color: #8c9793; }
.stamp { margin-top: 18px; font: 400 .84rem/1.5 var(--fm); color: var(--muted); }

/* type helpers shared with the calm markup on the job and policy pages */
.h-lg, .sec .h-lg { font-size: clamp(2.1rem, 1.25rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; }
.h-md, .sec .h-md { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; }
.lede { max-width: 34em; font-size: clamp(1.125rem, 1.04rem + .4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.lede a, .prose a, .rows a, .callout a, .faq a, .news-empty a, .note-card a, .register dd a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lede a:hover, .prose a:hover, .rows a:hover, .callout a:hover, .faq a:hover, .register dd a:hover { color: var(--deep); text-decoration-color: var(--teal); }
.muted { color: var(--muted); }
.body { max-width: 62ch; color: var(--text); }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 36px; }

/* sections in the calm markup: white and paper alternate */
.section { position: relative; padding-block: var(--sec); background: var(--white); }
.section--alt { background: var(--paper); }
.section--line { border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); background: var(--white); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head > * { grid-column: 1; }
.sec-head .eyebrow { justify-self: start; }
.sec-head > .lede, .sec-head > .intro { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; font-size: 1.125rem; line-height: 1.55; }
.sec-head h2 { max-width: 14em; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split__head .eyebrow { margin-bottom: 18px; }
.rows { border-top: 1px solid rgba(17, 24, 22, .2); }
.row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row dt { color: var(--ink); font-weight: 600; }
.row dd { color: var(--text); }
.prose { max-width: 68ch; color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.prose p + p, .prose ul + p, .prose p + ul, .prose ul + ul { margin-top: 16px; }
.prose strong { color: var(--ink); }
.prose h3 { margin: 36px 0 12px; font-size: 1.25rem; }
.prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--teal); }
.callout { padding: 20px 24px; border-left: 3px solid var(--teal); border-radius: 0 var(--r) var(--r) 0; background: var(--mint-soft); color: var(--ink); }
.figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.section--alt .card { background: var(--white); }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: var(--mint-soft); color: var(--text);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(100deg, transparent 40%, #000); mask: linear-gradient(100deg, transparent 40%, #000);
}
.cta-band h2 { color: var(--ink); }
.cta-band p { margin-top: 8px; max-width: 46ch; }
/* The at-a-glance box on a job page. */
.glance { padding: clamp(24px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.glance::before { content: ""; display: block; height: 10px; margin: calc(-1 * clamp(24px, 3vw, 30px)) calc(-1 * clamp(24px, 3vw, 30px)) 22px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--g1) 0 0 / 100% 3px no-repeat, var(--g2) 0 3px / 100% 3px no-repeat, var(--g3) 0 6px / 100% 4px no-repeat; }
.glance-name { color: var(--ink); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.glance-sub { margin-top: 2px; font: 400 .84rem/1.5 var(--fm); color: var(--muted); }
.glance dl { margin-top: 18px; }
.glance dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.glance dt { font: 400 .8rem/1.6 var(--fm); color: var(--muted); }
.glance dd { color: var(--ink); font-weight: 600; text-align: right; }

/* ---- Bryder Commerce -------------------------------------------------------------- */
.commerce-logo { margin: 6px 0 4px; }
.commerce-logo img { height: clamp(44px, 6vw, 72px); width: auto; }
.ph-art { position: relative; display: grid; place-items: center; min-height: 260px; }
.ph-art svg { width: min(340px, 100%); height: auto; overflow: visible; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.mint-card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 3.6vw, 44px); border-radius: var(--r-lg); background: var(--mint-soft); }
.mint-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(17, 24, 22, .05) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(100deg, transparent 40%, #000); mask: linear-gradient(100deg, transparent 40%, #000);
}
.mint-card .lede { margin-top: 14px; }
.mint-card .muted { margin-top: 14px; }
.mint-card .btn-row { margin-top: 26px; }
.photo-lg img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ---- Jack Ridder ---------------------------------------------------------------------- */
.profile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.profile .frame img { aspect-ratio: 1; }
.profile .tabs i { width: 84px; height: 16px; }
.profile .tabs i:nth-child(2) { margin-left: 16px; }
.profile .tabs i:nth-child(3) { margin-left: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text); font-size: .9rem; }
.phero .chips span { background: var(--white); }
.links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.head-4 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 6vw, 88px); align-items: start; }
.sticky { position: sticky; top: calc(var(--hdr) + 32px); }
.ruled { border-top: 1px solid rgba(17, 24, 22, .2); }
.ruled > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 10px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ruled h3 { font-size: 1.15rem; }
.ruled ul { display: grid; gap: 10px; }
.ruled li { position: relative; padding-left: 20px; }
.ruled li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 3px; border-radius: 2px; background: var(--g2); transform: rotate(-14deg); }
.ruled li strong { color: var(--ink); }
.prose-intro { display: grid; gap: 16px; max-width: 68ch; margin-bottom: 32px; color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.prose-intro strong { color: var(--ink); }
.prose-intro a, .ruled a { color: var(--link); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.mini h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.03em; }
.mini p { color: var(--text); }
.mini .text-link { align-self: flex-start; margin-top: auto; }
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; color: var(--ink); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024946' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); background-color: var(--mint-soft); border-color: var(--mint); }
.qa summary:hover::after { border-color: var(--ink); }
.qa .ans { padding: 0 64px 24px 0; max-width: 70ch; color: var(--text); }
.qa .ans a { color: var(--link); }

/* ---- newsroom (Georgia headlines on /news/ only) --------------------------------------- */
.newsroom .rl-title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; }
.newsroom .rl a { grid-template-columns: 11rem minmax(0, 1fr) 12rem 2rem; align-items: start; }
.newsroom .rl-date, .newsroom .rl-src { padding-top: .55em; }
.newsroom .rl .ico { align-self: start; margin-top: .5em; }
.rl-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; font: 400 .84rem/1.4 var(--fm); color: var(--muted); }
.news-empty { margin-top: 28px; color: var(--muted); }
.news-empty .mono { color: var(--ink); }

/* ---- press (/press/) ------------------------------------------------------------------- */
.press .phero .pills { margin-top: 30px; }
/* the release: a white sheet with the logo's bands across the top */
.rel-meta { margin-top: 30px; border-top: 1px solid rgba(17, 24, 22, .2); }
.rel-meta div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rel-meta dt { font: 400 .78rem/1.4 var(--fm); color: var(--muted); }
.rel-meta dd { margin-top: 2px; color: var(--ink); font-weight: 600; }
.release, .boiler { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.rel-in { padding: clamp(22px, 4vw, 52px); }
.rel-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-bottom: clamp(22px, 3vw, 32px); padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 400 .84rem/1.5 var(--fm); color: var(--muted); }
.rel-top b { color: var(--ink); font-weight: 600; }
.rel-top .nw { white-space: nowrap; } /* "For immediate release" wraps as one piece on narrow phones */
.rel-h { max-width: 22em; font-size: clamp(1.65rem, 1.15rem + 1.8vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; }
.rel-stand { max-width: 60ch; margin-top: 18px; color: var(--ink); font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem); font-weight: 500; line-height: 1.5; }
.rel-body { margin-top: 26px; }
.rel-ends { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--ink); font: 600 .9rem/1 var(--fm); }
.rel-ends::before, .rel-ends::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.rel-contact { display: grid; gap: 2px; margin-top: 28px; padding: 18px 22px; border-radius: var(--r); background: var(--mint-soft); color: var(--ink); }
.rel-k, .boiler-k, .reg-k { font: 400 .78rem/1.5 var(--fm); color: var(--muted); }
.rel-links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.rel-contact a, .reg-biz a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.rel-contact a:hover, .reg-biz a:hover { color: var(--deep); text-decoration-color: var(--teal); }
/* the boilerplate, as plain selectable text */
.boiler-in { padding: clamp(22px, 3.4vw, 40px); }
.boiler-text { margin-top: 10px; color: var(--ink); font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
/* the businesses under the register card */
.reg-biz { padding: 16px 30px 8px; border-top: 1px solid var(--line); }
.reg-biz li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reg-biz li:last-child { border-bottom: 0; }
.reg-biz b { color: var(--ink); font-weight: 600; }
.reg-biz li > span { color: var(--text); font-size: .98rem; }
/* brand assets: one card per file */
.assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.asset a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); color: inherit; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.asset a:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lg); color: inherit; }
.asset-art { display: grid; place-items: center; height: 200px; padding: 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.asset-art.on-deep { background: var(--deeper); }
.asset-art img { width: min(240px, 100%); height: auto; }
.asset-art.photo { display: block; overflow: hidden; padding: 0; }
.asset-art.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.asset-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 22px; }
.asset-name { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.asset-name .ico { color: var(--deep); transition: transform .25s var(--ease); }
.asset a:hover .asset-name .ico { transform: translate(2px, -2px); }
.asset-use { color: var(--text); font-size: .95rem; }
.asset-meta { margin-top: auto; padding-top: 10px; font: 400 .8rem/1.4 var(--fm); color: var(--muted); }
.usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.usage .card h3 { font-size: 1.15rem; }
.usage .card .text-link { align-self: flex-start; }
@media (max-width: 900px) {
  .rel-meta { display: none; } /* the sheet's own top line says the same, right below */
  .reg-biz { padding: 12px 22px 4px; }
}
@media (max-width: 760px) {
  .assets, .usage { grid-template-columns: 1fr; }
  .asset-art { height: 170px; }
  .asset-art.photo { height: 240px; }
}
@media (max-width: 560px) {
  .reg-biz li { grid-template-columns: 1fr; }
}

/* ---- privacy ---------------------------------------------------------------------- */
.toc { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.toc p { margin-bottom: 10px; font: 400 .8rem/1.4 var(--fm); color: var(--muted); }
.toc ol { display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .95rem; font-weight: 500; text-decoration: none; }
.toc li:last-child a { border-bottom: 0; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 400 .8rem/1.9 var(--fm); color: var(--muted); }
.toc a:hover { color: var(--deep); }
.policy .split__head { position: sticky; top: calc(var(--hdr) + 32px); }

/* ---- 404 -------------------------------------------------------------------------- */
.lost { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: center; min-height: 52vh; }
.lost svg { width: 140px; height: auto; justify-self: center; }

/* ============================================================================
   CAREERS (careers.css loads after this file; these win on specificity)
   ============================================================================ */
body .c-hero { padding-top: clamp(16px, 2.5vw, 32px); background: var(--paper); position: relative; isolation: isolate; }
body .c-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(17, 24, 22, .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(to bottom, transparent 40%, #000 95%); mask: linear-gradient(to bottom, transparent 40%, #000 95%);
}
body .c-hero { padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
body .c-hero .wrap { padding-inline: 0; }
body .c-hero__media { border-radius: var(--r-lg); background: var(--line); }
body .c-hero__card { border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
body .c-hero__card::before { content: ""; display: block; height: 10px; margin: calc(-1 * clamp(28px, 3.4vw, 44px)) calc(-1 * clamp(28px, 3.4vw, 44px)) clamp(24px, 3vw, 32px); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--g1) 0 0 / 100% 3px no-repeat, var(--g2) 0 3px / 100% 3px no-repeat, var(--g3) 0 6px / 100% 4px no-repeat; }
body .c-hero__card h1 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4rem); line-height: 1.03; letter-spacing: -.045em; }
body .role { border-radius: var(--r); border-color: var(--line); }
body .role:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
body .role__team { font: 400 .84rem/1.4 var(--fm); letter-spacing: 0; text-transform: none; color: var(--muted); }
body .role__title { font-weight: 600; letter-spacing: -.03em; }
body .role__go { color: var(--ink); padding-bottom: 2px; background: linear-gradient(var(--mint), var(--mint)) 0 100% / 100% 2px no-repeat; }
body .role__go::after { font-family: var(--f); color: var(--deep); }
body .role:hover .role__go { background-image: linear-gradient(var(--teal), var(--teal)); }
body .chip { border-color: var(--line); background: var(--paper); font-size: .875rem; }
body .section--alt .role .chip { background: var(--white); }
body .chip--off, body .section--alt .role .chip--off { background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-weight: 500; }
body .roles-foot { font: 400 .84rem/1.5 var(--fm); color: var(--muted); }
body .note__photo { position: relative; }
body .note__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
body .note__photo .tabs { right: max(-20px, calc(12px - var(--gut))); bottom: 28px; }
body .note__photo .tabs i { width: 92px; height: 16px; }
body .note__photo .tabs i:nth-child(2) { margin-left: 18px; }
body .note__photo .tabs i:nth-child(3) { margin-left: 36px; }
body .note__text .body { font-size: 1.0625rem; color: var(--text); }
body .note__sign { color: var(--ink); font-weight: 600; }
body .note__sign span { font: 400 .84rem/1.6 var(--fm); color: var(--muted); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(17, 24, 22, .2); counter-reset: pil; }
.pillar { counter-increment: pil; padding: 28px 28px 8px 0; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar::before { content: "0" counter(pil); display: inline-grid; place-items: center; width: 58px; height: 28px; margin-bottom: 18px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); background: var(--g1); color: var(--ink); font: 600 .8rem/1 var(--fm); }
.pillar:nth-child(4n+2)::before { background: var(--g2); }
.pillar:nth-child(4n+3)::before { background: var(--g3); color: #fff; }
.pillar:nth-child(4n+4)::before { background: var(--mint-soft); color: var(--deep); }
.pillar h3 { font-size: 1.25rem; }
.pillar p { margin-top: 10px; color: var(--text); font-size: 1rem; }
body .pillars--4 .pillar:nth-child(odd) { padding-left: 0; border-left: 0; }
@media (min-width: 1081px) { body .pillars--4 .pillar:nth-child(3) { padding-left: 28px; border-left: 1px solid var(--line); } }
body .steps li { border-radius: var(--r); border-color: var(--line); }
body .steps li::before { border-radius: 0; width: 58px; height: 28px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); background: var(--g1); color: var(--ink); font: 600 .8rem/1 var(--fm); content: "0" counter(step); }
body .steps li:nth-child(2)::before { background: var(--g2); }
body .steps li:nth-child(3)::before { background: var(--g3); color: #fff; }
body .steps li:nth-child(4)::before { background: var(--mint-soft); color: var(--deep); }
body .steps p { color: var(--text); }
body .acc__btn { font-weight: 600; letter-spacing: -.01em; }
body .acc__icon { border-color: var(--line-2); }
body .acc__btn[aria-expanded="true"] .acc__icon { background: var(--deep); border-color: var(--deep); }
body .acc__panel { color: var(--text); }
body .notice { border-radius: var(--r); border-color: var(--line-2); }
body .job-body { color: var(--text); }
body .job-body h2 { letter-spacing: -.03em; font-weight: 600; }
body .job-body li::marker { color: var(--teal); }
body .job-aside .btn { width: 100%; }

/* ============================================================================
   MOTION (all of it off under prefers-reduced-motion)
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rise { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .swipe path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s 1s var(--ease) forwards; }
  .map .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 2.4s 1s var(--ease) 3 both; }
  .map .ripple.r2 { animation-delay: 1.4s; }
  .map .route { stroke-dashoffset: 120; animation: route 1.2s 1.6s var(--ease) both; }
  .launch { animation: settle .7s 1.9s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .rv { animation: fadeup linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
  .rv-js .rv:not(.in) { opacity: 0; translate: 0 14px; }
  .rv-js .rv { transition: opacity .6s var(--ease), translate .6s var(--ease); }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ripple { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes route { from { opacity: 0; } to { opacity: .7; } }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeup { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .tech { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rl a { grid-template-columns: 9rem minmax(0, 1fr) 11rem 1.6rem; gap: 8px 20px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-art { height: auto; display: flex; flex-direction: column; align-items: center; }
  .map { position: relative; right: auto; top: auto; width: min(300px, 80%); height: auto; }
  .map .route { display: none; }
  .launch { position: relative; right: auto; bottom: auto; width: 100%; max-width: 420px; margin-top: 16px; }
  .register-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-row div, .register-row div:first-child { padding: 14px 14px 14px 0; border-left: 0; }
  .register-row div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .register-row div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .register-row div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .head, .sec-head { grid-template-columns: 1fr; align-items: start; }
  .sec-head > .lede, .sec-head > .intro { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .head-link { justify-self: start; }
  .co-kb { grid-template-columns: 1fr; }
  .co-kb .co-art { min-height: 0; height: 300px; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
  .co-kb .co-body { padding: 30px 28px; }
  .band-mark { display: none; }
  .commit { grid-template-columns: 1fr; }
  .commit li, .commit li + li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; padding: 26px 0 22px; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .commit .chip-band { grid-row: span 2; margin-top: 2px; }
  .commit h3 { margin: 0 0 10px; }
  .gov, .details, .contact, .two, .ph-grid, .profile, .head-4, .split, .lost { grid-template-columns: 1fr; }
  .gov .frame { max-width: 640px; }
  .sticky, .policy .split__head { position: static; }
  .register dl { grid-template-columns: 1fr; padding: 2px 22px 6px; }
  .register dl div { padding: 13px 0; }
  .register dl div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .reg-head { padding: 18px 22px; }
  .profile .frame { max-width: 300px; }
  .ph-art { min-height: 0; }
  .ph-art svg { width: min(200px, 56%); }
  .lost svg { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar, body .pillars--4 .pillar:nth-child(odd) { padding: 24px 0 18px; border-left: 0; border-bottom: 1px solid var(--line); }
  .newsroom .rl a { grid-template-columns: minmax(0, 1fr) 1.6rem; }
  /* One column from here down: without this, 761 to 900px put each headline
     in the 1.6rem arrow column and the page scrolled sideways. */
  .newsroom .rl a > * { grid-column: 1; }
  .newsroom .rl a > .ico { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
  .newsroom .rl-date, .newsroom .rl-src { padding-top: 0; }
}
/* Mid widths: the launch card sat on top of the map's coast, so it goes
   under the map instead, as on phones. */
@media (min-width: 901px) and (max-width: 1240px) {
  .hero-art { height: auto; display: flex; flex-direction: column; align-items: center; }
  .map { position: relative; right: auto; top: auto; height: min(430px, 42vw); width: auto; }
  .map .route { display: none; }
  .launch { position: relative; right: auto; bottom: auto; width: min(300px, 100%); margin-top: 14px; }
}
@media (max-width: 760px) {
  .grid--2, .cards-2 { grid-template-columns: 1fr; }
  .rl a { grid-template-columns: minmax(0, 1fr) 1.6rem; gap: 6px 16px; }
  .rl-date { grid-column: 1; grid-row: 1; }
  .rl-title { grid-column: 1; grid-row: 2; }
  .rl-src { grid-column: 1; grid-row: 3; }
  .rl .ico { grid-column: 2; grid-row: 1; align-self: start; }
  .newsroom .rl-date, .newsroom .rl-src { padding-top: 0; }
  .newsroom .rl .ico { margin-top: 0; }
  .ruled > div { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .c-ledger { grid-template-columns: 1fr; }
  .c-ledger div, .c-ledger div:first-child { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .cos { grid-template-columns: 1fr; }
  .tech { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tech li { min-height: 104px; padding: 18px 6px 14px; }
  .f-grid { grid-template-columns: 1fr; }
  .co-body { padding: 24px 22px; }
  .co-kb .co-body { padding: 26px 22px; }
  .co-kb .co-art { height: 260px; }
  .co-st .co-art, .co-bc .co-art { height: 210px; }
  .index { grid-template-columns: 1fr; }
  .index a, .index a:first-child { min-height: 64px; padding: 16px 0 12px; border-left: 0; border-top: 1px solid var(--line); }
  .index a:first-child { border-top: 0; }
  .index a::before, .index a:first-child::before { left: 0; right: auto; top: 50%; width: 6px; height: 34px; border-radius: 3px; transform: translateY(-50%); clip-path: none; }
  .index a:hover::before { height: 34px; width: 10px; }
  .index a { padding-left: 22px; }
  .index a:first-child { padding-left: 22px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .outlets { gap: 18px; }
  .outlets ul { justify-content: flex-start; gap: 20px 30px; }
  .qa .ans { padding-right: 0; }
}
@media (max-width: 560px) {
  .hero-grid { padding-top: 30px; }
  .hero h1 { margin-bottom: 20px; }
  .hero .lede { margin-bottom: 26px; }
  .acts .btn { flex: 1 1 100%; }
  .gov .tabs { bottom: -16px; }
  .tabs i { width: 80px; height: 15px; }
  .tabs i:nth-child(2) { margin-left: 15px; }
  .tabs i:nth-child(3) { margin-left: 30px; }
  .pill { padding: 0 14px; font-size: .9rem; }
  .ftr-top .btn { flex: 1 1 100%; }
  .ftr-acts { width: 100%; }
  .ftr-base { flex-direction: column; }
  .btn-row .btn { flex: 1 1 auto; }
  .mint-card .btn-row .btn, .cta-band .btn-row .btn { flex: 1 1 100%; }
}
@media (max-width: 340px) {
  .fact-row { grid-template-columns: 1fr; }
  .fact-row div + div { padding-left: 0; border-left: 0; }
}
@media print {
  .hdr, .menu, .ftr-acts, .skip { display: none !important; }
  .slant { clip-path: none; margin-top: 0; }
}