:root {
  /* PROVISIONAL implementation tokens — exact BRAND values remain to be frozen. */
  --tg-graphite: #1b1d1d;
  --tg-graphite-soft: #242727;
  --tg-bone: #f2efe7;
  --tg-bone-bright: #f7f5ef;
  --tg-warm-grey: #8f8c86;
  --tg-stone: #b7b0a5;
  --tg-bronze: #8a6d4d;
  --tg-ink: #171a1c;
  --tg-muted: #6a6d6f;
  --tg-line: rgba(23,26,28,.25);
  --tg-line-light: rgba(247,245,239,.38);
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Source Sans 3", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shell: 1280px;
  --gutter: clamp(20px, 4.3vw, 68px);
  --section-pad: clamp(84px, 9vw, 150px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-synthesis:none; margin: 0; color: var(--tg-ink); background: var(--tg-bone-bright); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
body.menu-open { overflow: hidden; }

:where(a, button):focus-visible {
  outline: 2px solid #9a7b56;
  outline-offset: 4px;
}
.site-header :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.closing :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #f2efe7;
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 999; transform: translateY(-160%); background: var(--tg-bone-bright); padding: 10px 14px; color: var(--tg-ink); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100% - (2 * var(--gutter)), var(--shell)); margin-inline: auto; }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #f5f2eb; transition: background .25s ease, color .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(25,27,27,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.09); }
.header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 14px; letter-spacing: .28em; font: 600 15px/1 var(--tg-brand-serif,var(--serif)); white-space: nowrap; }
.brand-mark { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.52); font: 500 11px/1 var(--tg-brand-serif,var(--serif)); letter-spacing: .08em; padding: .03em 0 0 .08em; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); font-family: var(--sans); font-size: 14px; letter-spacing: .08em; }
.primary-nav a { position: relative; padding-block: 12px; }
.primary-nav a::after { content:""; position:absolute; left:0; bottom:5px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.menu-toggle { display:none; border:0; background:transparent; color:inherit; width:46px; height:46px; padding:9px; cursor:pointer; }
.menu-toggle span:not(.sr-only) { display:block; height:1px; background:currentColor; margin:6px 0; transition:.2s ease; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; color:#f5f2eb; overflow:hidden; background: var(--tg-graphite); }
.hero-media, .hero-media img, .closing-media, .closing-media img { position:absolute; inset:0; width:100%; height:100%; }
.hero-media img, .closing-media img { object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(17,18,18,.58) 0%, rgba(20,21,21,.36) 43%, rgba(20,21,21,.07) 68%, rgba(20,21,21,.14) 100%); }
.hero-inner { position:relative; z-index:2; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-top:120px; padding-bottom:92px; }
.hero-copy { width:min(760px, 58%); }
.eyebrow { margin:0 0 24px; text-transform:uppercase; letter-spacing:.28em; font:600 13px/1.3 var(--sans); }
.eyebrow-light { color:rgba(255,255,255,.9); }
.hero h1 { margin:0; font:400 clamp(56px, 7.4vw, 116px)/.91 var(--serif); letter-spacing:.035em; text-transform:uppercase; }
.hero h1 span { display:block; }
.hero-positioning { margin:26px 0 32px; font-size:clamp(16px,1.5vw,23px); letter-spacing:.01em; color:rgba(255,255,255,.91); }
.hero-positioning span { padding-inline:.22em; opacity:.72; }
.button { min-height:56px; display:inline-flex; align-items:center; justify-content:space-between; gap:36px; padding:0 30px; text-transform:uppercase; letter-spacing:.22em; font:600 13px/1 var(--sans); border:1px solid currentColor; transition:background .2s ease,color .2s ease,transform .2s ease; }
.button:hover { transform:translateY(-1px); }
.button-light { color:#fff; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.75); }
.button-light:hover { background:#f4f0e8; color:#1b1d1d; }
.button-dark { color:var(--tg-ink); background:transparent; }
.button-dark:hover { background:var(--tg-ink); color:var(--tg-bone); }
.scroll-cue { position:absolute; left:0; bottom:34px; font:500 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.22em; display:flex; align-items:center; gap:12px; opacity:.85; }
.scroll-cue span { font:300 24px/1 var(--sans); }

.section { padding-block:var(--section-pad); background:var(--tg-bone-bright); }
.section-intro { max-width:900px; margin:0 auto clamp(48px,6vw,78px); }
.section-intro-center { text-align:center; }
.section-intro .eyebrow { display:flex; justify-content:center; align-items:center; gap:18px; }
.section-intro .eyebrow span { display:block; width:58px; height:1px; background:var(--tg-line); }
.section-intro h2, .participate-intro h2 { margin:0; font:400 clamp(40px,4.3vw,66px)/1.06 var(--serif); letter-spacing:-.02em; }
.section-intro > p:last-child { max-width:760px; margin:22px auto 0; color:var(--tg-muted); font-size:17px; }

.domain-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.5vw,38px); }
.domain-card { min-width:0; }
.visual-slot { overflow:hidden; background:#d8d2c8; }
.visual-slot img { width:100%; height:100%; object-fit:cover; object-position:var(--asset-position,50% 50%); transition:transform .5s ease; }
.domain-card:hover .visual-slot img, .action-card:hover .visual-slot img { transform:scale(1.012); }
.domain-visual { display:block; aspect-ratio:3/2; }
.domain-copy { padding:20px 8px 0; }
.index-line { margin:0 0 2px; display:flex; align-items:center; gap:18px; color:#b5b2ac; font:400 48px/1 var(--serif); }
.index-line i { width:74px; height:1px; background:var(--tg-line); }
.domain-copy h3 { margin:7px 0 11px; font:400 clamp(28px,2.2vw,36px)/1.12 var(--serif); }
.domain-copy > p:not(.index-line) { margin:0; color:var(--tg-muted); font-size:15.5px; }
.text-link { display:inline-flex; gap:24px; align-items:center; margin-top:22px; text-transform:uppercase; letter-spacing:.22em; font:600 12px/1 var(--sans); padding-bottom:8px; border-bottom:1px solid currentColor; }
.mission-rule { margin:clamp(56px,7vw,94px) auto 0; display:flex; align-items:center; justify-content:center; gap:26px; text-transform:uppercase; letter-spacing:.28em; font:600 11px/1 var(--serif); white-space:nowrap; }
.mission-rule > span { width:72px; height:1px; background:var(--tg-line); }
.mission-rule b { font-weight:400; }

.approach { background:var(--tg-bone); }
.approach-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(42px,5vw,80px); align-items:center; }
.approach-copy h2 { max-width:680px; margin:0; font:400 clamp(42px,4.6vw,72px)/1.01 var(--serif); letter-spacing:-.025em; }
.approach-copy .lead { max-width:650px; margin:24px 0 0; color:var(--tg-muted); font-size:17px; }
.approach-visual { aspect-ratio:3/2; min-height:540px; }
.principles { margin:46px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--tg-line); }
.principles > div { padding:20px 24px 22px 0; border-bottom:1px solid var(--tg-line); }
.principles > div:nth-child(odd) { padding-right:28px; }
.principles > div:nth-child(even) { padding-left:28px; border-left:1px solid var(--tg-line); }
.principles dt { text-transform:uppercase; letter-spacing:.18em; font:600 12px/1.2 var(--serif); }
.principles dd { margin:10px 0 0; color:var(--tg-muted); font-size:13px; }

.participate { background:var(--tg-bone-bright); }
.participate-intro { display:grid; grid-template-columns:1.4fr .8fr; gap:60px; align-items:end; margin-bottom:46px; }
.participate-intro > p { margin:0 0 5px; color:var(--tg-muted); max-width:480px; justify-self:end; }
.participate-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--tg-line); }
.action-card { background:var(--tg-bone-bright); min-width:0; }
.action-visual { display:block; aspect-ratio:3/2; }
.action-copy { padding:26px clamp(22px,2.8vw,42px) 38px; }
.kicker { margin:0 0 3px; text-transform:uppercase; letter-spacing:.24em; font:600 11px/1.2 var(--serif); }
.action-copy h3 { margin:0 0 14px; font:400 clamp(38px,3.6vw,58px)/1 var(--serif); }
.action-copy > p:not(.kicker) { color:var(--tg-muted); font-size:15px; margin:0; }
.action-copy ul { list-style:none; padding:0; margin:24px 0 28px; border-top:1px solid var(--tg-line); }
.action-copy li { padding:12px 0; border-bottom:1px solid var(--tg-line); font:400 16px/1.3 var(--serif); }

.closing { position:relative; min-height:68vh; min-height:68svh; display:flex; align-items:center; color:#f4f1e9; background:var(--tg-graphite); overflow:hidden; }
.closing-media img { object-position:var(--asset-position,52% 52%); }
.closing-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,18,18,.78) 0%,rgba(16,18,18,.57) 43%,rgba(16,18,18,.18) 70%,rgba(16,18,18,.26) 100%); }
.closing-inner { position:relative; z-index:2; padding-block:100px; }
.closing-copy { max-width:620px; }
.closing-copy h2 { margin:0; font:400 clamp(52px,5.5vw,82px)/.98 var(--serif); }
.closing-copy > p:not(.eyebrow):not(.closing-note) { margin:26px 0 0; max-width:600px; font-size:18px; color:rgba(255,255,255,.84); }
.closing-note { margin:34px 0 0; text-transform:uppercase; letter-spacing:.27em; font:600 11px/1 var(--serif); color:rgba(255,255,255,.72); }

.site-footer { background:#17191a; color:#d7d5d0; padding:76px 0 28px; border-top:1px solid rgba(255,255,255,.09); }
.footer-grid { display:grid; grid-template-columns:1.5fr .8fr .8fr; gap:58px; }
.footer-wordmark { margin:0 0 18px; color:#f4f1e9; letter-spacing:.28em; font:600 18px/1 var(--serif); }
.footer-brand > p:last-child { max-width:360px; margin:0; color:#9fa1a0; font-size:13.5px; }
.footer-col { display:flex; flex-direction:column; gap:9px; }
.footer-col h2 { margin:0 0 8px; color:#f1eee7; font:400 20px/1.2 var(--serif); }
.footer-col a, .footer-placeholder { color:#aeb0ae; font-size:13px; }
.footer-col a:hover { color:#fff; }
.footer-placeholder { opacity:.75; }
.footer-bottom { margin-top:60px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); display:flex; justify-content:space-between; align-items:center; color:#858886; font-size:12px; }
.footer-bottom p { margin:0; }
.footer-bottom a { color:#d7d5d0; font-size:22px; min-width:44px; min-height:44px; display:grid; place-items:center; }

@media (max-width: 1100px) {
  .hero-copy { width:68%; }
  .approach-grid { grid-template-columns:1fr; }
  .approach-copy { max-width:920px; }
  .approach-visual { min-height:auto; aspect-ratio:16/9; }
  .footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
}

@media (max-width: 820px) {
  :root { --section-pad: 92px; --header-height: 76px; }
  .header-inner { min-height:76px; }
  .brand { font-size:14px; }
  .primary-nav { position:fixed; top:76px; left:0; right:0; display:grid; gap:0; padding:18px var(--gutter) 30px; background:rgba(24,26,26,.97); border-top:1px solid rgba(255,255,255,.08); transform:translateY(-140%); opacity:0; visibility:hidden; pointer-events:none; transition:transform .24s ease, opacity .24s ease, visibility 0s linear .24s; }
  .primary-nav.is-open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .primary-nav a { padding:17px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:18px; }
  .menu-toggle { display:block; }
  .hero-copy { width:79%; }
  .domain-grid { grid-template-columns:1fr 1fr; }
  .domain-card:last-child { grid-column:1 / -1; display:grid; grid-template-columns:1.18fr 1fr; gap:28px; align-items:center; }
  .domain-card:last-child .domain-copy { padding-top:0; }
  .participate-intro { grid-template-columns:1fr; gap:20px; }
  .participate-intro > p { justify-self:start; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 639px) {
  :root { --gutter:22px; --section-pad:78px; }
  .brand-mark { width:34px; height:34px; font-size:10px; }
  .brand-name { font-size:13px; letter-spacing:.22em; }
  .hero { min-height:100svh; }
  .hero-media img { object-position:center bottom; }
  .hero-shade { background:linear-gradient(180deg,rgba(18,19,19,.50) 0%,rgba(18,19,19,.23) 52%,rgba(18,19,19,.36) 100%); }
  .hero-inner { min-height:100svh; align-items:flex-start; padding-top:145px; padding-bottom:96px; }
  .hero-copy { width:100%; }
  .hero h1 { font-size:clamp(48px,14vw,70px); line-height:.97; }
  .hero-positioning { width:85%; font-size:18px; line-height:1.65; }
  .button { min-height:56px; padding:0 22px; gap:28px; }
  .scroll-cue { left:auto; right:0; }
  .section-intro { margin-bottom:40px; }
  .section-intro h2, .participate-intro h2 { font-size:clamp(38px,10.5vw,54px); }
  .section-intro > p:last-child { font-size:15.5px; }
  .domain-grid { grid-template-columns:1fr; gap:50px; }
  .domain-card:last-child { display:block; grid-column:auto; }
  .domain-visual { aspect-ratio:1.45/1; }
  .visual-slot img { object-position:var(--asset-position-mobile,var(--asset-position,50% 50%)); }
  .domain-copy { padding:16px 0 0; }
  .index-line { font-size:42px; }
  .domain-copy h3 { font-size:32px; }
  .mission-rule { gap:14px; font-size:9px; letter-spacing:.2em; }
  .mission-rule > span { width:38px; }
  .approach-grid { gap:34px; }
  .approach-copy h2 { font-size:clamp(39px,11vw,54px); line-height:1.03; }
  .approach-copy .lead { font-size:16px; }
  .approach-visual { aspect-ratio:1.23/1; }
  .principles { grid-template-columns:1fr 1fr; margin-top:34px; }
  .principles > div { padding:17px 13px 18px 0; }
  .principles > div:nth-child(even) { padding-left:16px; }
  .principles dt { font-size:10px; letter-spacing:.12em; }
  .principles dd { font-size:12px; }
  .participate-grid { grid-template-columns:1fr; gap:1px; }
  .action-copy { padding:24px 20px 34px; }
  .action-copy h3 { font-size:44px; }
  .closing { min-height:74svh; align-items:flex-start; }
  .closing-media img { object-position:var(--asset-position-mobile,50% 50%); }
  .closing-shade { background:linear-gradient(180deg,rgba(16,18,18,.66) 0%,rgba(16,18,18,.42) 58%,rgba(16,18,18,.58) 100%); }
  .closing-inner { padding-top:100px; }
  .closing-copy { max-width:90%; }
  .closing-copy h2 { font-size:clamp(48px,13vw,64px); }
  .closing-copy > p:not(.eyebrow):not(.closing-note) { font-size:16px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-col { padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
  .footer-bottom { margin-top:42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ==========================================================
   Browser QA Round 01 — FIX-HOME-01
   Desktop viewport composition
   Goal: when a desktop navigation anchor is activated, the
   section's complete primary composition should be readable
   within the available browser viewport whenever practical.
   The layout remains content-safe: no fixed-height clipping.
   ========================================================== */

:root {
  --header-height: 84px;
}

/* Anchor offset is controlled once at the scroll container level via
   html { scroll-padding-top: ... }. Do not add target scroll-margin here:
   combining both offsets causes a visible slice of the previous chapter. */

@media (min-width: 1101px) {
  /* A section occupies the viewport below the fixed header,
     but may grow naturally if user font/zoom/content requires it. */
  .domains,
  .approach,
  .participate {
    min-height: calc(100svh - var(--header-height));
    padding-block: clamp(30px, 4.2vh, 50px);
  }

  .domains > .shell,
  .participate > .shell {
    width: min(100% - (2 * var(--gutter)), var(--shell));
  }

  /* DOMAINS — preserve the three-column editorial read,
     reduce vertical excess rather than scale the whole page. */
  .domains .section-intro {
    max-width: 820px;
    margin-bottom: clamp(24px, 3vh, 34px);
  }
  .domains .section-intro .eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
  }
  .domains .section-intro h2 {
    font-size: clamp(42px, 3.4vw, 54px);
    line-height: 1.02;
  }
  .domains .section-intro > p:last-child {
    max-width: 720px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.45;
  }
  .domains .domain-grid {
    gap: clamp(20px, 2.2vw, 32px);
  }
  .domains .domain-visual {
    height: clamp(170px, 22vh, 220px);
    aspect-ratio: auto;
  }
  .domains .domain-copy {
    padding-top: 12px;
  }
  .domains .index-line {
    font-size: 34px;
    gap: 12px;
  }
  .domains .index-line i {
    width: 56px;
  }
  .domains .domain-copy h3 {
    margin: 4px 0 7px;
    font-size: clamp(25px, 1.75vw, 30px);
    line-height: 1.04;
  }
  .domains .domain-copy > p:not(.index-line) {
    font-size: 13px;
    line-height: 1.42;
  }
  .domains .text-link {
    margin-top: 11px;
    padding-bottom: 5px;
    font-size: 10px;
  }
  .domains .mission-rule {
    margin-top: clamp(22px, 3.2vh, 34px);
    font-size: 9px;
    gap: 18px;
  }

  /* APPROACH — the sentence remains the visual lead, but the
     hierarchy is compressed enough to read as one complete plate. */
  .approach {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .approach-grid {
    grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr);
    gap: clamp(36px, 4vw, 64px);
    align-items: center;
  }
  .approach-copy .eyebrow {
    margin-bottom: 16px;
    font-size: 11px;
  }
  .approach-copy h2 {
    max-width: 600px;
    font-size: clamp(43px, 3.35vw, 54px);
    line-height: .98;
  }
  .approach-copy .lead {
    margin-top: 14px;
    max-width: 580px;
    font-size: 14px;
    line-height: 1.45;
  }
  .approach-visual {
    height: clamp(330px, 47vh, 410px);
    min-height: 0;
    aspect-ratio: auto;
  }
  .principles {
    margin-top: 22px;
  }
  .principles > div {
    padding: 12px 16px 13px 0;
  }
  .principles > div:nth-child(odd) {
    padding-right: 18px;
  }
  .principles > div:nth-child(even) {
    padding-left: 18px;
  }
  .principles dt {
    font-size: 10px;
    letter-spacing: .15em;
  }
  .principles dd {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.38;
  }
  .approach > .shell:last-child .mission-rule {
    margin-top: clamp(20px, 3vh, 30px);
    font-size: 9px;
    gap: 18px;
  }

  /* PARTICIPATE / COOPERATE — retain both portals and their
     essential content in the first viewport. Lists become a compact
     2×2 reference matrix rather than a long vertical continuation. */
  .participate .participate-intro {
    grid-template-columns: 1.25fr .75fr;
    gap: 48px;
    margin-bottom: clamp(22px, 2.8vh, 30px);
  }
  .participate .participate-intro .eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
  }
  .participate .participate-intro h2 {
    font-size: clamp(42px, 3.4vw, 54px);
    line-height: 1.02;
  }
  .participate .participate-intro > p {
    max-width: 430px;
    font-size: 13px;
    line-height: 1.45;
  }
  .participate .action-visual {
    height: clamp(170px, 22vh, 220px);
    aspect-ratio: auto;
  }
  .participate .action-copy {
    padding: 16px clamp(20px, 2.2vw, 30px) 20px;
  }
  .participate .kicker {
    font-size: 9px;
  }
  .participate .action-copy h3 {
    margin-bottom: 8px;
    font-size: clamp(34px, 2.8vw, 46px);
  }
  .participate .action-copy > p:not(.kicker) {
    font-size: 12px;
    line-height: 1.4;
  }
  .participate .action-copy ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 14px 0 16px;
    border-top: 1px solid var(--tg-line);
    border-left: 1px solid var(--tg-line);
  }
  .participate .action-copy li {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-right: 1px solid var(--tg-line);
    border-bottom: 1px solid var(--tg-line);
    font-size: 12px;
    line-height: 1.2;
  }
  .participate .button {
    min-height: 44px;
    padding-inline: 20px;
    font-size: 10px;
  }
  .participate .mission-rule {
    margin-top: clamp(20px, 3vh, 30px);
    font-size: 9px;
    gap: 18px;
  }
}

/* Extra compression for the common 900px-tall laptop / browser case.
   This specifically targets the real viewport exposed by Browser QA R01. */
@media (min-width: 1101px) and (max-height: 820px) {
  .domains,
  .approach,
  .participate {
    padding-block: 26px;
  }
  .domains .section-intro { margin-bottom: 20px; }
  .domains .section-intro h2 { font-size: 44px; }
  .domains .domain-visual { height: 168px; }
  .domains .domain-copy > p:not(.index-line) { font-size: 12px; }
  .domains .mission-rule { margin-top: 18px; }

  .approach-grid { gap: 34px; }
  .approach-copy h2 { font-size: 43px; }
  .approach-copy .lead { font-size: 13px; }
  .approach-visual { height: 342px; }
  .principles { margin-top: 16px; }
  .principles > div { padding-top: 9px; padding-bottom: 10px; }
  .principles dd { font-size: 10.5px; }
  .approach > .shell:last-child .mission-rule { margin-top: 16px; }

  .participate .participate-intro { margin-bottom: 18px; }
  .participate .participate-intro h2 { font-size: 43px; }
  .participate .action-visual { height: 168px; }
  .participate .action-copy { padding-top: 13px; padding-bottom: 15px; }
  .participate .action-copy h3 { font-size: 36px; }
  .participate .action-copy > p:not(.kicker) { font-size: 11.5px; }
  .participate .action-copy ul { margin: 10px 0 12px; }
  .participate .action-copy li { min-height: 30px; padding: 6px 8px; font-size: 11.5px; }
  .participate .button { min-height: 40px; }
  .participate .mission-rule { margin-top: 16px; }
}

@media (max-width: 820px) {
  :root { --header-height: 76px; }
}

/* ==========================================================
   Mobile QA Round 01 — FIX-MOBILE-01
   Mobile editorial flow, touch ergonomics and content order.
   Mobile remains naturally scrollable; it is not forced into
   one-screen sections. The goal is a deliberate mobile layout,
   not a mechanically reduced desktop composition.
   ========================================================== */

@media (min-width: 1101px) {
  /* The Approach markup is structured so mobile can read:
     heading → visual → principles. Desktop restores the
     approved two-column editorial composition. */
  .approach-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .approach-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .approach .principles {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}

@media (max-width: 639px) {
  :root {
    --gutter: 20px;
    --section-pad: 68px;
  }

  body { overflow-x: hidden; }

  .header-inner { min-height: 76px; }
  .brand { gap: 11px; }
  .brand-name { font-size: 12px; letter-spacing: .20em; }
  .primary-nav {
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 24px;
  }
  .primary-nav a {
    min-height: 54px;
    display: flex;
    align-items: center;
  }

  /* HERO — preserve the dedicated mobile artwork and keep the
     identity, positioning and primary CTA comfortably above the fold
     on common phone sizes without clipping shorter screens. */
  .hero-inner {
    padding-top: 118px;
    padding-bottom: 82px;
  }
  .hero-copy .eyebrow {
    margin-bottom: 18px;
    font-size: 11px;
    line-height: 1.35;
  }
  .hero h1 {
    font-size: clamp(44px, 13vw, 60px);
    line-height: .96;
    letter-spacing: .025em;
  }
  .hero-positioning {
    width: 100%;
    margin: 20px 0 26px;
    font-size: 16px;
    line-height: 1.48;
  }
  .button {
    min-height: 54px;
    padding-inline: 20px;
    font-size: 12px;
  }
  .scroll-cue {
    bottom: 22px;
    font-size: 10px;
  }

  /* Shared section rhythm */
  .section-intro {
    margin-bottom: 32px;
  }
  .section-intro .eyebrow {
    margin-bottom: 16px;
    gap: 12px;
    font-size: 10px;
  }
  .section-intro .eyebrow span { width: 36px; }
  .section-intro h2,
  .participate-intro h2 {
    font-size: clamp(36px, 9.8vw, 46px);
    line-height: 1.03;
  }
  .section-intro > p:last-child {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.5;
  }

  /* DOMAINS — one editorial card at a time. */
  .domain-grid { gap: 42px; }
  .domain-visual { aspect-ratio: 1.5 / 1; }
  .domain-copy { padding-top: 14px; }
  .index-line { margin-bottom: 0; font-size: 36px; gap: 12px; }
  .index-line i { width: 54px; }
  .domain-copy h3 {
    margin: 4px 0 8px;
    font-size: 30px;
    line-height: 1.08;
  }
  .domain-copy > p:not(.index-line) {
    font-size: 14px;
    line-height: 1.48;
  }
  .text-link {
    margin-top: 16px;
    font-size: 10.5px;
  }
  .mission-rule {
    margin-top: 48px;
    gap: 10px;
    font-size: 8.5px;
    letter-spacing: .16em;
  }
  .mission-rule > span { width: 24px; }

  /* APPROACH — mobile order is now heading → image → principles,
     matching the approved assembly specification. */
  .approach-grid { gap: 26px; }
  .approach-copy .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }
  .approach-copy h2 {
    font-size: clamp(36px, 9.6vw, 44px);
    line-height: 1.02;
  }
  .approach-copy .lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
  }
  .approach-visual {
    aspect-ratio: 1.34 / 1;
    min-height: 0;
  }
  .approach .principles {
    margin-top: 0;
  }
  .principles > div {
    padding: 15px 12px 16px 0;
  }
  .principles > div:nth-child(odd) { padding-right: 14px; }
  .principles > div:nth-child(even) { padding-left: 14px; }
  .principles dt {
    font-size: 9.5px;
    letter-spacing: .11em;
  }
  .principles dd {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.42;
  }

  /* PARTICIPATE / COOPERATE — cards stack naturally with clear
     image → title → explanation → options → CTA hierarchy. */
  .participate-intro {
    gap: 14px;
    margin-bottom: 30px;
  }
  .participate-intro .eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
  }
  .participate-intro > p {
    font-size: 14px;
    line-height: 1.5;
  }
  .action-visual { aspect-ratio: 1.45 / 1; }
  .action-copy { padding: 22px 18px 30px; }
  .kicker { font-size: 9.5px; }
  .action-copy h3 {
    margin-bottom: 10px;
    font-size: 40px;
  }
  .action-copy > p:not(.kicker) {
    font-size: 14px;
    line-height: 1.48;
  }
  .action-copy ul { margin: 20px 0 22px; }
  .action-copy li {
    padding: 11px 0;
    font-size: 15px;
  }
  .action-copy .button {
    width: 100%;
  }

  /* CLOSING / FOOTER */
  .closing {
    min-height: 72svh;
  }
  .closing-inner {
    padding-top: 90px;
    padding-bottom: 70px;
  }
  .closing-copy { max-width: 100%; }
  .closing-copy .eyebrow { font-size: 10px; }
  .closing-copy h2 {
    font-size: clamp(44px, 12vw, 56px);
  }
  .closing-copy > p:not(.eyebrow):not(.closing-note) {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.5;
  }
  .closing-note {
    margin-top: 26px;
    font-size: 9.5px;
    letter-spacing: .20em;
  }
  .site-footer { padding: 56px 0 24px; }
  .footer-grid { gap: 26px; }
  .footer-wordmark { font-size: 16px; }
  .footer-brand > p:last-child {
    font-size: 13px;
    line-height: 1.55;
  }
  .footer-col { gap: 10px; padding-top: 20px; }
  .footer-col h2 { font-size: 19px; }
  .footer-col a,
  .footer-placeholder { min-height: 30px; display: flex; align-items: center; }
  .footer-bottom { margin-top: 34px; }
}

@media (max-width: 359px) {
  :root { --gutter: 18px; }
  .brand-name { font-size: 11px; }
  .hero h1 { font-size: 42px; }
  .mission-rule > span { display: none; }

  /* Avoid over-compressing the four principles on very narrow phones. */
  .principles { grid-template-columns: 1fr; }
  .principles > div,
  .principles > div:nth-child(odd),
  .principles > div:nth-child(even) {
    padding: 14px 0;
    border-left: 0;
  }
}

@media (hover: none) {
  .domain-card:hover .visual-slot img,
  .action-card:hover .visual-slot img,
  .button:hover {
    transform: none;
  }
}

/* ==========================================================
   Mobile QA Round 02 — FIX-MOBILE-02
   Mobile Anchor Landing Composition

   Principle:
   A mobile navigation jump does not need to contain an entire
   section inside one viewport. It should, however, land on a
   visually complete chapter opening: section identity + core
   statement + primary visual cue. Detailed content may continue
   naturally below the fold.

   This is viewport-aware, never viewport-locked. No fixed height
   clips content; user zoom, translations and shorter screens may
   extend the section naturally.
   ========================================================== */

html {
  scroll-padding-top: var(--header-height, 84px);
}

@media (max-width: 639px) {
  /* The anchor should begin close enough to the fixed header that
     the first screen reads as one intentional composition, without
     a large dead band above the section identity. */
  #domains,
  #approach,
  #participate-cooperate {
    padding-top: 54px;
  }

  /* DOMAINS — chapter opening + first domain becomes the landing
     composition. The remaining domains continue as the chapter. */
  #domains .section-intro {
    margin-bottom: 24px;
  }
  #domains .section-intro .eyebrow {
    margin-bottom: 13px;
  }
  #domains .section-intro h2 {
    font-size: clamp(34px, 9.2vw, 42px);
    line-height: 1.02;
  }
  #domains .section-intro > p:last-child {
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.46;
  }
  #domains .domain-grid {
    gap: 44px;
  }
  #domains .domain-visual {
    aspect-ratio: 1.52 / 1;
  }
  #domains .domain-copy {
    padding-top: 12px;
  }
  #domains .domain-copy h3 {
    font-size: 28px;
  }

  /* APPROACH — make the first viewport read as a complete editorial
     plate: eyebrow + core statement + short lead + full primary image.
     The four principles intentionally start in the following scroll. */
  #approach .approach-grid {
    gap: 20px;
  }
  #approach .approach-copy .eyebrow {
    margin-bottom: 12px;
  }
  #approach .approach-copy h2 {
    font-size: clamp(34px, 9vw, 41px);
    line-height: 1.01;
  }
  #approach .approach-copy .lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.46;
  }
  #approach .approach-visual {
    aspect-ratio: 1.42 / 1;
  }
  #approach .principles {
    margin-top: 4px;
  }

  /* PARTICIPER / COOPÉRER — the anchor introduces the two-door idea,
     then establishes Participer through its image/title before the
     detailed list continues. Coopérer remains immediately afterwards. */
  #participate-cooperate .participate-intro {
    gap: 11px;
    margin-bottom: 22px;
  }
  #participate-cooperate .participate-intro .eyebrow {
    margin-bottom: 11px;
  }
  #participate-cooperate .participate-intro h2 {
    font-size: clamp(34px, 9vw, 41px);
    line-height: 1.02;
  }
  #participate-cooperate .participate-intro > p {
    font-size: 13.5px;
    line-height: 1.45;
  }
  #participate-cooperate .action-visual {
    aspect-ratio: 1.55 / 1;
  }
  #participate-cooperate .action-copy {
    padding-top: 16px;
  }
  #participate-cooperate .action-copy h3 {
    font-size: 36px;
  }

  /* The mission rule is a chapter divider, not part of the anchor
     landing composition; give it breathing room after detailed content. */
  #domains .mission-rule,
  #approach .mission-rule,
  #participate-cooperate .mission-rule {
    margin-top: 44px;
  }
}

/* Short-phone refinement: preserve the same hierarchy without making
   typography tiny. The first image remains the principal visual cue. */
@media (max-width: 430px) and (max-height: 850px) {
  #domains,
  #approach,
  #participate-cooperate {
    padding-top: 44px;
  }

  #domains .section-intro h2,
  #participate-cooperate .participate-intro h2,
  #approach .approach-copy h2 {
    font-size: 34px;
  }

  #approach .approach-grid {
    gap: 16px;
  }
  #approach .approach-copy .lead {
    font-size: 13.5px;
  }
  #approach .approach-visual {
    aspect-ratio: 1.48 / 1;
  }

  #participate-cooperate .participate-intro {
    margin-bottom: 18px;
  }
  #participate-cooperate .action-visual {
    aspect-ratio: 1.62 / 1;
  }
}