/* Layout: a black foundation with full-bleed chapters and oversized type on a 12-column grid.
   Eight upright strata open the page; a photograph drops into every plate when one is supplied.
   Gold is a hairline and a single button, never a surface. One visual world: no theme switching. */
:root {
  /* black foundation */
  --black: #0a0a0b;
  --char: #131315;
  --rule-d: #2a2a2e;
  --text-d: #f3f1ec;
  --text-d2: #a8a49b;
  /* warm white editorial surfaces */
  --paper: #f4f2ed;
  --paper-2: #eae7df;
  --ink: #111113;
  --ink-2: #4a4945;
  --ink-3: #74716a;
  --rule-l: #d4d0c5;
  /* brand gold: restrained */
  --gold: #bf9c42;
  --gold-ink: #755a17;     /* gold that passes contrast as text on warm white */
  --on-gold: #111113;

  /* semantic tokens: every component reads these; a surface class re-maps them */
  --bg: var(--black); --bg-2: var(--char);
  --fg: var(--text-d); --fg-2: var(--text-d2); --fg-3: var(--text-d2);
  --rule: var(--rule-d); --accent: var(--gold);
  --logo-light: none; --logo-dark: inline-block;
  color-scheme: dark;

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --t-mega: clamp(3.1rem, 10.4vw, 10.5rem);
  --t-h2: clamp(2.2rem, 5.4vw, 5.25rem);
  --t-h3: clamp(1.35rem, 2vw, 1.9rem);
  --t-lede: clamp(1.1rem, 1.45vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;

  /* layout */
  --gap: clamp(1rem, 2vw, 2rem);
  --gutter: clamp(1rem, 4.5vw, 4.5rem);
  --sec: clamp(5rem, 11vw, 11rem);
  --header-h: 4.75rem;
}
.on-paper {
  --bg: var(--paper); --bg-2: var(--paper-2);
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --rule: var(--rule-l); --accent: var(--gold-ink);
  --logo-light: inline-block; --logo-dark: none;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--black); color: var(--text-d);
  font-family: var(--f-text); font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.028em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 96rem; margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 0.6rem 1rem; font: 600 var(--t-small) var(--f-display); }
.skip:focus { top: 0.5rem; }

/* ---------- type roles ---------- */
.label { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.label--gold { color: var(--accent); }
.slogan { text-transform: none; }   /* the slogan keeps its own lettering: lowercase i */
.num { font-family: var(--f-display); font-stretch: 62%; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 0.85; }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--fg-2); max-width: 38rem; }

/* ---------- supplied logos (original files only) ---------- */
.brand-logo { height: 2.75rem; width: auto; display: block; }
.site-footer .brand-logo { height: 3.5rem; }
.co-logo { flex: none; max-height: 4.25rem; max-width: min(11rem, 38%); width: auto; height: auto; object-fit: contain; }
/* a supplied file with its own black background: the black falls away against the page */
.logo--lighten { mix-blend-mode: lighten; }
/* a supplied black-on-white wordmark, shown white-on-black; the file itself is unchanged */
.logo--reverse { filter: invert(1); mix-blend-mode: lighten; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0.8rem 1.6rem; font: 600 0.92rem var(--f-display); letter-spacing: 0.01em; text-decoration: none; border: 1px solid var(--fg); background: none; color: var(--fg); cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn--solid:hover { background: var(--text-d); border-color: var(--text-d); color: var(--on-gold); }
.arrow { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 0.92rem var(--f-display); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; transition: border-color 0.25s, gap 0.25s; }
.arrow:hover { border-color: var(--gold); gap: 0.9rem; }
.arrow svg, .btn svg { flex: none; }

/* ---------- plates: a photograph when supplied, the sector texture until then ---------- */
.hatch { position: relative; }
.hatch::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask: var(--hatch) repeat; mask: var(--hatch) repeat; -webkit-mask-size: calc(var(--hw) * var(--hs, 1)) calc(var(--hh) * var(--hs, 1)); mask-size: calc(var(--hw) * var(--hs, 1)) calc(var(--hh) * var(--hs, 1)); }
.plate { display: block; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* with a photograph, the sector texture stays on as a faint overlay */
.plate.hatch.has-photo::before { opacity: 0.16; background: var(--text-d); animation: none; }
.hatch--steel { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2016L16%200M4%2016L16%204M0%204L4%200%22%2F%3E%3C%2Fsvg%3E"); --hw: 16px; --hh: 16px; }
.hatch--cross { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2010L10%200M0%200L10%2010%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E"); --hw: 10px; --hh: 10px; }
.hatch--ore { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M4%2010l3-5%203%205zM18%2023l3-5%203%205z%22%2F%3E%3Cg%20fill%3D%22%23000%22%20stroke%3D%22none%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --hw: 28px; --hh: 28px; }
.hatch--water { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2210%22%20viewBox%3D%220%200%2024%2010%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%205q3-4%206%200t6%200t6%200t6%200%22%2F%3E%3C%2Fsvg%3E"); --hw: 24px; --hh: 10px; }
.hatch--line { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M3.5%200v7%22%2F%3E%3C%2Fsvg%3E"); --hw: 7px; --hh: 7px; }
.hatch--furrow { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2210%22%20viewBox%3D%220%200%2020%2010%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2010a10%2010%200%200%201%2020%200%22%2F%3E%3C%2Fsvg%3E"); --hw: 20px; --hh: 10px; }
.hatch--grid { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20.5h14M.5%200v14%22%2F%3E%3C%2Fsvg%3E"); --hw: 14px; --hh: 14px; }
.hatch--dot { --hatch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); --hw: 8px; --hh: 8px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--black); color: var(--text-d); border-bottom: 1px solid var(--rule-d); }
.header-bar { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.75rem); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-family: var(--f-display); white-space: nowrap; }
.brand-mark .tm { font-size: 0.4em; vertical-align: 1.1em; }
.brand-mark { font-weight: 800; font-stretch: 118%; font-size: 1.65rem; letter-spacing: -0.03em; line-height: 1; }
.brand-word { font-weight: 500; font-stretch: 112%; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.primary { margin-left: auto; }
.primary ul { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.4rem); }
.primary a, .primary button { font: 500 0.9rem var(--f-display); text-decoration: none; background: none; border: 0; padding: 0.4rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-d2); box-shadow: 0 1px 0 transparent; transition: box-shadow 0.25s, color 0.25s; white-space: nowrap; }
.primary a:hover, .primary button:hover, .primary button[aria-expanded="true"] { color: var(--text-d); box-shadow: 0 2px 0 var(--gold); }
.primary button svg { transition: transform 0.25s; }
.primary button[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-cta { min-height: 2.6rem; padding: 0.5rem 1.25rem; border-color: var(--gold); }
.header-cta:hover { background: var(--gold); color: var(--on-gold); }
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.5rem 0; min-height: 2.75rem; font: 600 0.85rem var(--f-display); letter-spacing: 0.04em; cursor: pointer; }
.menu-toggle i { display: block; width: 1.5rem; height: 0.5rem; border-top: 2px solid currentColor; border-bottom: 2px solid var(--gold); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-top: 1px solid var(--rule-d); border-bottom: 1px solid var(--gold); max-height: calc(100vh - var(--header-h) - 1rem); overflow-y: auto; animation: drop 0.25s ease-out; }
.mega-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-block: 2.75rem 3.25rem; }
.mega-intro { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.mega-intro h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.08; }
.mega-sectors { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gap); }
.mega-sector { border-top: 1px solid var(--rule-d); padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.mega-sector > a { display: grid; grid-template-columns: 1.7rem 1fr; align-items: baseline; text-decoration: none; font: 600 1.02rem/1.2 var(--f-display); }
.mega-sector > a .num { font-size: 1.1rem; color: var(--gold); font-weight: 500; }
.mega-sector > a:hover span:last-child { box-shadow: 0 1px 0 var(--gold); }
.mega-cos { padding-left: 1.7rem; display: flex; flex-direction: column; gap: 0.22rem; font: 400 0.86rem/1.4 var(--f-display); color: var(--text-d2); }
.mega-cos a { text-decoration: none; }
.mega-cos a:hover { color: var(--text-d); box-shadow: 0 1px 0 var(--gold); }

.drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 1px solid var(--gold); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.drawer-inner { display: flex; flex-direction: column; padding-block: 0.5rem 1.5rem; }
.drawer a, .drawer summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.4rem; border-bottom: 1px solid var(--rule-d); font: 500 1.2rem var(--f-display); text-decoration: none; cursor: pointer; }
.drawer summary { list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer details ul a { font-size: 1rem; min-height: 2.9rem; padding-left: 0.25rem; justify-content: flex-start; gap: 0.75rem; color: var(--text-d2); }
.drawer details ul .num { color: var(--gold); font-size: 1.15rem; font-weight: 500; width: 1.4rem; }
.drawer .btn { margin-top: 1.25rem; justify-content: center; border: 1px solid var(--gold); }
@media (max-width: 76rem) {
  .primary, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .mega { display: none; }
}
@media (min-width: 76.01rem) { .drawer { display: none; } }

/* ---------- 01 hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--text-d); min-height: clamp(40rem, 92vh, 66rem); display: flex; align-items: flex-end; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; z-index: 0; }
.strips { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.strips li { border-left: 1px solid color-mix(in srgb, var(--text-d) 9%, transparent); min-width: 0; }
.strips li:first-child { border-left: 0; }
.strip { position: relative; display: block; height: 100%; text-decoration: none; color: var(--text-d2); transition: color 0.3s; }
.strip-plate { position: absolute; inset: 0; --hs: 2.5; opacity: calc(0.2 + var(--i) * 0.1); transition: opacity 0.6s ease; animation: strip-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 0.07s); }
.strip-plate.hatch::before { background: linear-gradient(180deg, transparent 4%, var(--text-d2) 30%, var(--gold) 58%, transparent 92%); background-size: 100% 190%; animation: sweep 18s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.2s); }
.strip-plate.has-photo { opacity: calc(0.42 + var(--i) * 0.07); }
.strip-plate img { filter: grayscale(1) brightness(0.8); transition: filter 0.6s; }
.strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, var(--black) 88%); pointer-events: none; }
.strip-id { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 6.75rem; padding: 0 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.strip-id .num { font-size: clamp(1.6rem, 2.6vw, 2.5rem); font-weight: 300; color: var(--text-d); transition: color 0.3s; }
.strip-name { font: 600 0.8rem/1.2 var(--f-display); letter-spacing: 0.01em; }
.strip:hover, .strip:focus-visible { color: var(--text-d); }
.strip:hover .strip-plate, .strip:focus-visible .strip-plate { opacity: 1; }
.strip:hover .strip-plate img, .strip:focus-visible .strip-plate img { filter: none; }
.strip:hover .num, .strip:focus-visible .num { color: var(--gold); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--black) 0%, color-mix(in srgb, var(--black) 72%, transparent) 38%, transparent 78%); -webkit-mask: linear-gradient(180deg, #000 58%, transparent 80%); mask: linear-gradient(180deg, #000 58%, transparent 80%); }
.hero-copy { position: relative; z-index: 3; width: 100%; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.1rem, 2vw, 1.75rem); padding-block: clamp(5rem, 10vw, 9rem) clamp(9.5rem, 15vw, 13rem); }
.hero-copy a { pointer-events: auto; }
.hero-brand { display: flex; align-items: center; gap: 1rem; }
.hero-brand .label { font-size: clamp(0.8rem, 1.1vw, 1rem); letter-spacing: 0.3em; }
.hero-brand::after { content: ""; width: clamp(2.5rem, 6vw, 6rem); height: 1px; background: var(--gold); }
.hero h1 { font-size: var(--t-mega); letter-spacing: -0.045em; line-height: 0.9; max-width: 11ch; }
.hero-line { font: 400 clamp(1.3rem, 2.5vw, 2.4rem)/1.15 var(--f-display); letter-spacing: -0.02em; margin-top: clamp(0.25rem, 1vw, 1rem); }
.hero-desc { font-size: var(--t-lede); color: var(--text-d2); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: clamp(0.5rem, 1.2vw, 1.25rem); }
@media (max-width: 60rem) {
  .strip-id { height: 3.4rem; padding: 0; align-items: center; }
  .strip-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--black) 78%, transparent), color-mix(in srgb, var(--black) 62%, transparent)); }
  .hero-copy { padding-bottom: 8rem; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--sec); background: var(--bg); color: var(--fg); }
.section.alt { background: var(--bg-2); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.sec-head .label { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.9rem; }
.sec-head .label::before { content: ""; width: 2.25rem; height: 1px; background: var(--gold); }
.sec-head h2 { grid-column: 1 / 9; font-size: var(--t-h2); }
.sec-head .lede { grid-column: 9 / 13; }
@media (max-width: 68rem) { .sec-head h2, .sec-head .lede { grid-column: 1 / -1; } }

/* ---------- 02 the group: one statement ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 4vw, 4rem); }
.statement .label { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.9rem; }
.statement .label::before { content: ""; width: 2.25rem; height: 1px; background: var(--gold); }
.statement h2 { grid-column: 1 / 12; font-size: clamp(2.6rem, 8vw, 8.25rem); letter-spacing: -0.045em; line-height: 0.94; }
.statement-body { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 2rem; }
.structure-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font: 500 var(--t-small) var(--f-display); color: var(--fg-2); }
.structure-key b { font-weight: 700; color: var(--fg); }
.structure-key svg { color: var(--accent); }
@media (max-width: 60rem) { .statement h2, .statement-body { grid-column: 1 / -1; } }

/* ---------- 03 the eight sectors, as chapters ---------- */
.chapters { display: flex; flex-direction: column; background: var(--black); color: var(--text-d); }
.rail-wrap { order: 2; border-top: 1px solid var(--rule-d); }
.rail-bar { display: flex; align-items: stretch; gap: var(--gap); }
.rail { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); min-width: 0; }
.rail-tab { appearance: none; background: none; border: 0; padding: 1.2rem 0.75rem 1.5rem 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.4rem; color: var(--text-d2); position: relative; min-width: 0; opacity: 0.65; transition: color 0.3s, opacity 0.3s; }
.rail-tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rail-tab .num { font-size: 1.7rem; font-weight: 400; line-height: 1; }
.rail-tab .tab-name { font: 600 0.82rem/1.2 var(--f-display); }
.rail-tab:hover { opacity: 1; color: var(--text-d); }
.rail-tab[aria-selected="true"] { opacity: 1; color: var(--text-d); }
.rail-tab[aria-selected="true"] .num { color: var(--gold); }
.rail-tab[aria-selected="true"]::before { transform: scaleX(1); }
.rail-steps { display: flex; align-items: center; gap: 0.5rem; }
.step { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border: 1px solid var(--rule-d); background: none; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.step:hover { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.step--prev svg { transform: scaleX(-1); }

.chapter { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(38rem, 84vh, 58rem); display: flex; align-items: flex-end; }
.chapter-plate { position: absolute; inset: 0; z-index: -1; --hs: 4; }
.chapter-plate.hatch { color: var(--text-d2); }
.chapter-plate.hatch::before { opacity: 0.6; background: radial-gradient(ellipse 34% 82% at 49% 8%, var(--gold) 0%, var(--text-d2) 42%, transparent 82%); }
.chapter-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 4%, color-mix(in srgb, var(--black) 45%, transparent) 45%, transparent 85%), linear-gradient(90deg, color-mix(in srgb, var(--black) 88%, transparent) 8%, transparent 44%), linear-gradient(270deg, color-mix(in srgb, var(--black) 92%, transparent) 30%, transparent 58%); }
.chapter-grid { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: end; padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 5vw, 5rem); }
.ch-id { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; min-width: 0; }
.ch-id .num { font-size: clamp(8rem, 21vw, 20rem); font-weight: 200; line-height: 0.76; margin-left: -0.04em; margin-block: 0.5rem 0; }
.ch-id h3 { font-size: clamp(2.3rem, 5.6vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.96; }
.ch-summary { font-size: var(--t-lede); line-height: 1.5; color: var(--text-d2); max-width: 32rem; }
.ch-cos { grid-column: 8 / 13; min-width: 0; }
.ch-cos > .label { display: block; padding-bottom: 0.9rem; }
.chapter.is-entering .chapter-plate { animation: fade 1.1s ease both; }
/* fill backwards only: once the entrance ends nothing is left isolating the company list, so logo blending reaches the page */
.chapter.is-entering .ch-id > *, .chapter.is-entering .ch-cos { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.chapter.is-entering .ch-id > *:nth-child(2) { animation-delay: 0.06s; }
.chapter.is-entering .ch-id > *:nth-child(3) { animation-delay: 0.12s; }
.chapter.is-entering .ch-id > *:nth-child(4) { animation-delay: 0.18s; }
.chapter.is-entering .ch-cos { animation-delay: 0.22s; }
@media (max-width: 60rem) {
  .rail-tab { padding: 0.9rem 0 1rem; align-items: center; }
  .rail-tab .num { font-size: 1.4rem; }
  .rail-tab .tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rail-steps { display: none; }
  .ch-id, .ch-cos { grid-column: 1 / -1; }
  .chapter { min-height: 0; }
  .chapter-plate.hatch::before { background: radial-gradient(ellipse 70% 34% at 88% 0%, var(--gold) 0%, var(--text-d2) 45%, transparent 85%); }
  .chapter-plate::after { background: linear-gradient(0deg, var(--black) 55%, transparent 96%), linear-gradient(90deg, color-mix(in srgb, var(--black) 85%, transparent) 20%, transparent 80%); }
}

/* company item: the reusable unit, used in chapters and in the portfolio */
.co { padding-block: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-width: 0; }
.co-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.co-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.co-name { font: 600 clamp(1.25rem, 1.8vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -0.02em; }
.tm { font-size: 0.45em; font-weight: 500; letter-spacing: 0; vertical-align: 0.9em; margin-left: 0.1em; line-height: 0; }
.co-name a, .rel-name a { text-decoration: none; }
.co-name a { box-shadow: 0 1px 0 transparent; transition: box-shadow 0.25s, color 0.25s; }
.co-name a:hover { box-shadow: 0 1px 0 var(--gold); }
.co-stage { font: 600 0.64rem var(--f-display); font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; padding: 0.15rem 0.45rem; }
.co-desc { color: var(--fg-2); font-size: 1rem; line-height: 1.45; }
.co-geo { font: 500 0.8rem/1.4 var(--f-display); letter-spacing: 0.02em; color: var(--fg-3); }
.co-caps { font: 400 0.86rem/1.45 var(--f-display); color: var(--fg-3); }
.co-creds { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font: 600 0.74rem var(--f-display); letter-spacing: 0.04em; color: var(--fg-2); }
.co-site { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 0.86rem var(--f-display); text-decoration: none; color: var(--fg-2); white-space: nowrap; }
.co-site:hover { color: var(--fg); box-shadow: 0 1px 0 var(--gold); }
.co-main .co-site { margin-top: 0.25rem; }

/* ---------- 04 integrated capabilities ---------- */
.caps { border-bottom: 1px solid var(--rule); }
.cap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1rem; align-items: baseline; padding-block: clamp(1.75rem, 3.2vw, 3rem) clamp(2rem, 3.6vw, 3.5rem); border-top: 1px solid var(--rule); }
.cap > .num { grid-column: 1 / 2; font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 400; color: var(--accent); }
.cap h3 { grid-column: 2 / 8; font-size: clamp(2.6rem, 7.4vw, 7.25rem); letter-spacing: -0.05em; line-height: 0.9; }
.cap-body { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cap-scope { font-size: var(--t-lede); line-height: 1.4; color: var(--fg); max-width: 28rem; }
.cap-sectors { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; }
.cap-sectors a { font-size: 1.25rem; font-weight: 500; color: var(--fg-2); text-decoration: none; box-shadow: 0 1px 0 transparent; transition: color 0.25s, box-shadow 0.25s; }
.cap-cos { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; font: 500 0.95rem/1.4 var(--f-display); }
.cap-cos a { text-decoration: none; color: var(--fg-2); box-shadow: 0 1px 0 var(--rule); transition: color 0.25s, box-shadow 0.25s; }
.cap-cos a:hover { color: var(--fg); box-shadow: 0 1px 0 var(--gold); }
.cap-sectors a:hover { color: var(--accent); box-shadow: 0 1px 0 var(--gold); }
/* the capability that runs across the other three */
.cap--link { border-top: 2px solid var(--gold); }
@media (max-width: 60rem) {
  .cap > .num { grid-column: 1 / -1; }
  .cap h3, .cap-body { grid-column: 1 / -1; }
}

/* ---------- 05 operating model + canadian foundation ---------- */
.model { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.model li { position: relative; border-top: 1px solid var(--rule); padding: clamp(1.5rem, 2.5vw, 2.5rem) 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.model li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--gold); }
.model h3 { font-size: clamp(1.8rem, 3.5vw, 3.6rem); letter-spacing: -0.04em; }
.model p { color: var(--fg-2); max-width: 22rem; font-size: 1rem; line-height: 1.5; }
@media (max-width: 60rem) {
  .model { grid-template-columns: minmax(0, 1fr); }
  .model li { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 2rem 1.5rem; }
  .model li:last-child { padding-bottom: 0; }
  .model li::before { left: -5px; top: 0.6rem; }
  .model p { max-width: none; }
}

/* canadian foundation: the closing statement of the operating-model section */
.foundation { margin-top: clamp(4rem, 8vw, 8rem); padding-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--fg); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); align-items: start; }
.foundation > div { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 1.25rem; }
.foundation h3 { font-size: clamp(1.9rem, 4vw, 3.75rem); letter-spacing: -0.04em; line-height: 0.98; }
.foundation .lede { grid-column: 8 / 13; }
@media (max-width: 60rem) { .foundation > div, .foundation .lede { grid-column: 1 / -1; } }

/* ---------- 07 portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-bottom: 1.5rem; }
.filter { appearance: none; background: none; border: 0; min-height: 2.75rem; padding: 0.4rem 0; font: 500 0.92rem var(--f-display); cursor: pointer; display: inline-flex; gap: 0.45rem; align-items: baseline; color: var(--fg-3); box-shadow: 0 2px 0 transparent; transition: color 0.25s, box-shadow 0.25s; }
.filter .num { font-size: 1.05rem; font-weight: 500; }
.filter:hover { color: var(--fg); }
.filter[aria-pressed="true"] { color: var(--fg); box-shadow: 0 2px 0 var(--gold); }
.filter[aria-pressed="true"] .num { color: var(--accent); }
.pf-list { border-top: 1px solid var(--fg); }
.pf-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--gap); row-gap: 0.35rem; padding-block: 1.35rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pf-row .co-name { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.pf-sector { font: 500 0.9rem var(--f-display); color: var(--fg-2); display: flex; gap: 0.5rem; align-items: baseline; }
.pf-sector .num { font-size: 1.05rem; font-weight: 500; color: var(--accent); }
.pf-what { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pf-link { justify-self: end; }
.pf-count { margin-top: 1.1rem; font: 500 var(--t-small) var(--f-display); color: var(--fg-3); }
@media (max-width: 60rem) {
  .pf-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-row .co-head { grid-column: 1; }
  .pf-link { grid-column: 2; grid-row: 1; }
  .pf-what, .pf-sector { grid-column: 1 / -1; }
}

/* ---------- 06 the 8CO intelligence layer ---------- */
.il { margin: 0; }
.il-sectors { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: clamp(0.5rem, 1vw, 1rem); }
.il-sectors a { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; text-decoration: none; min-width: 0; }
.il-plate { --hs: 1.5; height: clamp(6rem, 13vw, 12rem); border: 1px solid var(--rule); color: var(--fg-2); opacity: 0.6; margin-bottom: 0.5rem; transition: opacity 0.4s, color 0.4s; }
.il-plate.has-photo { opacity: 0.9; }
.il-sectors .num { font-size: 1.5rem; font-weight: 400; color: var(--gold); }
.il-sectors b { font: 600 1.02rem/1.15 var(--f-display); letter-spacing: -0.01em; min-height: 2.3em; }
.il-text { font-size: 0.95rem; line-height: 1.4; color: var(--fg-2); padding-bottom: 1.25rem; }
.il-sectors a:hover .il-plate { opacity: 1; color: var(--gold); }
.il-links { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: clamp(0.5rem, 1vw, 1rem); height: clamp(1.75rem, 3vw, 3rem); }
.il-links i { justify-self: start; width: 1px; background: var(--gold); }
.il-base { --hs: 1.5; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 3rem; padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 2rem); border: 1px solid var(--gold); color: var(--gold); text-decoration: none; }
.il-base::before { opacity: 0.28; }
.il-base > * { position: relative; color: var(--fg); }
.il-id { display: flex; align-items: baseline; gap: 1rem; }
.il-id .num { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 300; color: var(--gold); }
.il-id b { font: 500 clamp(1.3rem, 2.2vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.il-cos { display: flex; flex-wrap: wrap; gap: 0.35rem clamp(1.25rem, 2.5vw, 2.5rem); font: 500 clamp(1.3rem, 2.2vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.il-cos span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--gold); margin-right: clamp(1.25rem, 2.5vw, 2.5rem); vertical-align: middle; }
.il figcaption { margin-top: 1.1rem; font: 400 var(--t-small) var(--f-display); color: var(--fg-2); }
@media (max-width: 68rem) {
  /* the layer turns upright: one gold line down the left, joining every sector to the base */
  .il-sectors { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--gold); }
  .il-sectors a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.25rem; row-gap: 0.15rem; padding: 0.9rem 0 0.9rem 1.1rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .il-plate { display: none; }
  .il-sectors b { min-height: 0; }
  .il-text { grid-column: 2; padding-bottom: 0; }
  .il-links { display: none; }
  /* the layer's own row reads like the seven above it */
  .il-sectors li:last-child a { border-bottom: 1px solid var(--rule); }
  .il-base { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.25rem; row-gap: 0.15rem; align-items: baseline; padding: 0.9rem 0 0.9rem 1.1rem; border: 0; border-left: 1px solid var(--gold); color: var(--fg); }
  .il-base::before { display: none; }
  .il-id { display: contents; }
  .il-id .num { font-size: 1.5rem; font-weight: 400; }
  .il-id b { font: 600 1.02rem/1.15 var(--f-display); letter-spacing: -0.01em; }
  .il-cos { grid-column: 2; flex-direction: row; gap: 0 0.45rem; font: 400 0.95rem/1.4 var(--f-text); letter-spacing: 0; color: var(--fg-2); }
  .il-cos span + span::before { content: "\00b7"; display: inline; width: auto; height: auto; background: none; margin-right: 0.45rem; vertical-align: baseline; }
}

/* ---------- 08 growth ---------- */
.growth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gap); align-items: start; }
.growth-statement { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 2rem; }
.growth-statement blockquote { margin: 0; font-family: var(--f-text); font-weight: 400; font-size: clamp(1.6rem, 3.1vw, 3rem); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.growth-note { font: 500 var(--t-small) var(--f-display); color: var(--fg-2); padding-left: 1rem; border-left: 2px solid var(--gold); max-width: 28rem; }
.principles { grid-column: 9 / 13; border-top: 1px solid var(--fg); }
.principles li { padding-block: 1.2rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.35rem; }
.principles h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
.principles p { color: var(--fg-2); font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 60rem) { .growth-statement, .principles { grid-column: 1 / -1; } }

/* ---------- 09 invest ---------- */
.invest { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--text-d); min-height: clamp(38rem, 84vh, 58rem); display: flex; align-items: flex-end; border-top: 1px solid var(--gold); }
.invest-plate { position: absolute; inset: 0; z-index: -1; }
.invest-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 4%, color-mix(in srgb, var(--black) 50%, transparent) 55%, color-mix(in srgb, var(--black) 25%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--black) 85%, transparent) 10%, transparent 60%); }
.invest-grid { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 3rem; align-items: end; padding-block: var(--sec) clamp(4rem, 8vw, 8rem); }
.invest-id { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; min-width: 0; }
.invest-id h2 { font-size: var(--t-mega); letter-spacing: -0.045em; line-height: 0.88; margin-block: 0.5rem 0.75rem; }
.invest-lede { font: 400 clamp(1.3rem, 2.3vw, 2.2rem)/1.18 var(--f-display); letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; }
.invest-note { font-size: var(--t-lede); line-height: 1.5; color: var(--text-d2); max-width: 34rem; }
.invest-id .btn { margin-top: 0.75rem; }
.invest-notice { font: 400 0.8rem/1.5 var(--f-display); color: var(--text-d2); max-width: 40rem; }
.invest-side { grid-column: 8 / 13; min-width: 0; display: flex; flex-direction: column; gap: clamp(2rem, 3.5vw, 3.25rem); }
.avenues { min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--text-d) 18%, transparent); }
.avenues li { padding-block: 1.15rem; border-top: 1px solid color-mix(in srgb, var(--text-d) 18%, transparent); font: 500 clamp(1.25rem, 1.9vw, 1.8rem)/1.15 var(--f-display); letter-spacing: -0.025em; }
/* secondary pathway: quieter than the six avenues, set off by a gold hairline only */
.invest-digital { padding-top: 1.25rem; border-top: 1px solid var(--gold); display: flex; flex-direction: column; gap: 0.7rem; }
.invest-digital-text { color: var(--text-d2); font-size: 1rem; line-height: 1.5; max-width: 30rem; }
.invest-digital-status { font: 500 0.8rem/1.4 var(--f-display); letter-spacing: 0.02em; color: var(--text-d2); }
@media (max-width: 60rem) { .invest-id, .invest-side { grid-column: 1 / -1; } .invest { min-height: 0; } }

/* ---------- 10 news ---------- */
.news { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gap); align-items: start; }
.news-cats { grid-column: 1 / 4; border-top: 1px solid var(--fg); font: 500 0.95rem var(--f-display); }
.news-cats li { padding-block: 0.6rem; border-bottom: 1px solid var(--rule); color: var(--fg-2); }
.news-list { grid-column: 5 / 13; border-top: 1px solid var(--fg); }
.news-item { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.4rem var(--gap); padding-block: 1.4rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.news-item h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.15; }
.news-item p { grid-column: 2; color: var(--fg-2); }
.news-empty { padding-block: 1.5rem; border-bottom: 1px solid var(--rule); color: var(--fg-2); max-width: 36rem; font-size: var(--t-lede); line-height: 1.5; }
@media (max-width: 60rem) { .news-cats, .news-list { grid-column: 1 / -1; } .news-cats { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } .news-cats li { border-bottom: 0; } }

/* ---------- 11 visitor routing, corporate contact + footer ---------- */
.closing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem) var(--gap); }
.closing-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
.closing-head h2 { font-size: clamp(2.6rem, 8vw, 8.25rem); letter-spacing: -0.045em; line-height: 0.94; }
.paths { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.path { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 0.4rem 1.25rem; padding-block: clamp(1.4rem, 2.2vw, 2rem) clamp(1.75rem, 2.8vw, 2.75rem); border-top: 1px solid var(--rule); text-decoration: none; }
.path h3 { font-size: clamp(1.5rem, 2.5vw, 2.4rem); letter-spacing: -0.035em; transition: color 0.25s; }
.path p { grid-column: 1; color: var(--fg-2); }
.path svg { grid-row: 1 / 3; grid-column: 2; color: var(--gold); transition: transform 0.25s; }
a.path:hover svg { transform: translateX(6px); }
a.path:hover h3 { color: var(--gold); }
.contact-block { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gap); padding-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--gold); }
.contact-intro { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.contact-intro > p:not(.label) { font: 500 clamp(1.3rem, 2.2vw, 2.1rem)/1.1 var(--f-display); letter-spacing: -0.03em; }
.contact-mail { font: 600 1.05rem var(--f-display); text-decoration: none; box-shadow: 0 1px 0 var(--gold); }
.office { grid-column: span 3; display: flex; flex-direction: column; gap: 0.5rem; font: 400 0.98rem/1.5 var(--f-display); color: var(--fg-2); min-width: 0; }
.contact-intro + .office { grid-column: 7 / 10; }
.office address { font-style: normal; }
.office a { text-decoration: none; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) {
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-intro { grid-column: 1 / -1; }
  .office, .contact-intro + .office { grid-column: span 6; }
}
@media (max-width: 36rem) {
  .paths { grid-template-columns: minmax(0, 1fr); }
  .office, .contact-intro + .office { grid-column: 1 / -1; }
}

.site-footer { background: var(--char); color: var(--text-d); padding-block: clamp(3rem, 6vw, 5rem) 1.75rem; font-family: var(--f-display); }
.strip-rule { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 1rem; border: 1px solid var(--rule-d); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.strip-rule span { color: var(--text-d2); opacity: 0.6; border-left: 1px solid var(--rule-d); }
.strip-rule span:first-child { border-left: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gap); }
.footer-brand { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.footer-brand > p:last-child { font-size: var(--t-small); color: var(--text-d2); max-width: 20rem; line-height: 1.5; }
.footer-col { grid-column: span 2; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.footer-col--wide { grid-column: span 4; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; color: var(--text-d2); }
.footer-col--wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem var(--gap); }
.footer-col a { text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: baseline; }
.footer-col a:hover { color: var(--text-d); box-shadow: 0 1px 0 var(--gold); }
.footer-col .num { font-size: 1rem; font-weight: 500; color: var(--gold); width: 1.1rem; }
.footer-legal { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--rule-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-d2); }
.footer-notices { display: flex; flex-direction: column; gap: 0.5rem; max-width: 44rem; }
.footer-legal ul { display: flex; gap: 1.5rem; }
@media (max-width: 60rem) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; } .footer-col--wide { grid-column: 1 / -1; }
}

/* ---------- company page ---------- */
.cp-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--text-d); min-height: clamp(30rem, 68vh, 46rem); display: flex; align-items: flex-end; }
.cp-hero-grid { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem var(--gap); padding-block: clamp(5rem, 10vw, 9rem) clamp(3rem, 6vw, 5.5rem); }
.cp-id { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 1.8vw, 1.6rem); min-width: 0; max-width: 100%; }
.cp-id .label a { text-decoration: none; color: inherit; }
.cp-id .label a:hover { box-shadow: 0 1px 0 var(--gold); }
.cp-hero h1 { font-size: clamp(2.8rem, 9vw, 9rem); letter-spacing: -0.045em; line-height: 0.92; overflow-wrap: anywhere; }
.cp-hero h1 .tm { font-size: 0.22em; vertical-align: 2.6em; }
.cp-desc { font: 400 clamp(1.3rem, 2.4vw, 2.3rem)/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--text-d); max-width: 26ch; text-wrap: balance; }
.cp-logo { flex: none; max-height: clamp(5rem, 11vw, 9.5rem); max-width: min(22rem, 70%); width: auto; height: auto; object-fit: contain; }
.cp-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gap); align-items: start; }
.cp-about-head { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 1.25rem; }
.cp-about-head .label { display: flex; align-items: center; gap: 0.9rem; }
.cp-about-head .label::before { content: ""; width: 2.25rem; height: 1px; background: var(--gold); }
.cp-about-head h2 { font-size: clamp(1.9rem, 3.8vw, 3.5rem); letter-spacing: -0.04em; }
.cp-facts { grid-column: 7 / 13; margin: 0; border-top: 1px solid var(--fg); }
.cp-facts > div { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2.4fr); gap: 0.25rem var(--gap); padding-block: 1.1rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.cp-facts dt { font: 600 var(--t-label) var(--f-display); font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.cp-facts dd { margin: 0; font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--f-display); letter-spacing: -0.012em; }
.cp-facts dd .num { color: var(--accent); font-weight: 500; font-size: 1.15em; margin-right: 0.3rem; }
.cp-facts dd a { text-decoration: none; box-shadow: 0 1px 0 var(--gold); display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 60rem) { .cp-about-head, .cp-facts { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .cp-facts > div { grid-template-columns: minmax(0, 1fr); } }
/* the four Group capabilities, with this company's own marked */
.capstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.capstrip li { border-top: 1px solid var(--rule); min-width: 0; }
.capstrip a { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 1.25rem 1.25rem 0.5rem 0; text-decoration: none; color: var(--fg-3); transition: color 0.25s; }
.capstrip .num { font-size: 1.3rem; font-weight: 400; }
.capstrip b { font: 500 clamp(1.5rem, 3.2vw, 3.2rem)/0.95 var(--f-display); letter-spacing: -0.04em; }
.capstrip a > span:last-child { font-size: 0.95rem; line-height: 1.4; max-width: 17rem; }
.capstrip a:hover { color: var(--fg); }
.capstrip .is-here { border-top: 2px solid var(--gold); }
.capstrip .is-here a { color: var(--fg); }
.capstrip .is-here .num { color: var(--gold); }
.cp-layer { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2rem; }
.cp-layer a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 500 clamp(1.1rem, 1.8vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -0.02em; }
.cp-layer a:hover { color: var(--gold); }
@media (max-width: 60rem) { .capstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
@media (max-width: 30rem) { .capstrip { grid-template-columns: minmax(0, 1fr); } }
.rel-list { border-top: 1px solid var(--fg); }
.rel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) auto; align-items: baseline; gap: 0.35rem var(--gap); padding-block: 1.35rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.rel-name { font: 600 clamp(1.3rem, 2vw, 1.9rem)/1.15 var(--f-display); letter-spacing: -0.02em; transition: color 0.25s; }
.rel-desc { color: var(--fg-2); }
.rel-sector { font: 500 0.9rem var(--f-display); color: var(--fg-2); display: flex; gap: 0.5rem; align-items: baseline; }
.rel-sector .num { font-size: 1.05rem; font-weight: 500; color: var(--accent); }
.rel svg { color: var(--accent); align-self: center; transition: transform 0.25s; }
.rel:hover .rel-name { color: var(--accent); }
.rel:hover svg { transform: translateX(5px); }
@media (max-width: 60rem) { .rel { grid-template-columns: minmax(0, 1fr) auto; } .rel-desc, .rel-sector { grid-column: 1 / -1; } .rel svg { grid-column: 2; grid-row: 1; } }
.cp-close { border-top: 1px solid var(--gold); }
.cp-close-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 2.25rem; }
.cp-close h2 { font-size: clamp(2rem, 5vw, 5rem); letter-spacing: -0.045em; line-height: 0.96; max-width: 18ch; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes strip-in { from { transform: translateY(6%); } to { transform: none; } }
@keyframes sweep { from { background-position: 0 0; } to { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  .site-header { position: static; } .menu-toggle, .filters, .rail-wrap, .skip { display: none; }
  .chapter[hidden] { display: flex !important; }
}

/* ---------- last updated (set by the shared core on every page) ---------- */
.updated { font-variant-numeric: tabular-nums; }
.updated:empty { display: none; }

/* ---------- legal pages (Privacy, Terms of Use, Accessibility) ---------- */
.legal-hero { background: var(--black); color: var(--text-d); padding-block: clamp(5rem, 10vw, 9rem) clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--rule-d); }
.legal-hero .label a { text-decoration: none; }
.legal-hero h1 { font-size: var(--t-h2); margin-top: 1.25rem; }
.legal { max-width: 44rem; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.legal section { display: grid; gap: 0.9rem; }
.legal h2 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.15; }
.legal p { color: var(--fg-2); }
.legal section:first-child p { font-size: var(--t-lede); line-height: 1.5; color: var(--fg); }