@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-2.woff2") format('woff2');
  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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dmsans-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dmsans-2.woff2") format('woff2');
  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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dmsans-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dmsans-2.woff2") format('woff2');
  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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dmsans-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dmsans-2.woff2") format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-2.woff2") format('woff2');
  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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-4.woff2") format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-3.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-1.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrainsmono-2.woff2") format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-3.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-1.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrainsmono-2.woff2") format('woff2');
  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;
}
:root { --bg: #F6F1E8; --bg-2: #EEE6D7; --ink: #1F1B16; --ink-2: #2B2620; --slate: #5C5751; --slate-2: #7A746C; --line: #DDD3C0; --line-2: #C9BFA9; --coral: #E85A4F; --coral-dark: #C9433A; --yellow: #F4CE3A; --yellow-deep: #E8B92A; --paper: #FFFCF5; --shadow: 0 1px 0 rgba(31,27,22,.06), 0 8px 30px -12px rgba(31,27,22,.18); --accent: var(--coral); --accent-soft: rgba(232,90,79,.10); --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --max: 1240px; --gutter: clamp(20px, 4vw, 56px); }
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; font-feature-settings: "ss01", "cv11"; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--ink); display: inline-block; }
.eyebrow.no-rule::before { display: none; }
h1, h2, h3, h4 { margin: 0px; font-weight: 400; }
h2.display { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.015em; }
h3.heading { font-family: var(--sans); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0px; }
.body-lg { font-size: 21px; line-height: 1.55; color: var(--ink-2); letter-spacing: -0.005em; }
.body-md { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.body-sm { font-size: 15px; line-height: 1.55; color: var(--slate); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.wrap { max-width: var(--max); margin: 0px auto; padding: 0 var(--gutter); }
section { position: relative; }
.section-pad { padding: clamp(72px, 10vw, 140px) 0px; }
.section-pad-sm { padding: clamp(56px, 7vw, 96px) 0px; }
.divider-rule { height: 1px; background: var(--line); margin: 0px; }
.nav { position: sticky; top: 0px; z-index: 50; backdrop-filter: blur(14px); background: rgba(246, 241, 232, 0.78); border-bottom: 1px solid transparent; transition: border-color 0.25s, background 0.25s; }
.nav.scrolled { border-bottom-color: var(--line); background: rgba(246, 241, 232, 0.92); }
.nav-inner { max-width: var(--max); margin: 0px auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 32px; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.nav-brand img { height: 36px; width: auto; }
.nav-brand .label { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.1; letter-spacing: -0.005em; }
.nav-brand .label small { display: block; font-weight: 400; color: var(--slate); font-size: 11.5px; letter-spacing: 0.02em; margin-top: 2px; }
.nav-links { display: none; gap: 28px; margin-left: auto; align-items: center; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav-links a { text-decoration: none; font-size: 13.5px; color: var(--ink-2); position: relative; padding: 6px 0px; transition: color 0.15s; }
.nav-links a:hover { color: var(--coral); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -2px; height: 2px; background: var(--coral); border-radius: 2px; }
.nav-cta { margin-left: auto; }
@media (min-width: 900px) {
  .nav-cta { margin-left: 0px; }
}
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s; letter-spacing: -0.005em; background: none; color: inherit; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--coral); border-color: var(--coral); }
.btn-coral { background: var(--coral); color: rgb(255, 255, 255); border-color: var(--coral); }
.btn-coral:hover { background: var(--coral-dark); border-color: var(--coral-dark); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-link { padding: 0px 0px 2px; text-decoration: none; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); border-radius: 0px; }
.btn-link:hover { color: var(--coral); border-color: var(--coral); }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.arrow { display: inline-block; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.hero { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 56px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
}
.hero-photo-col { position: relative; display: flex; flex-direction: column; }
.hero-photo-col .hero-photo { flex: 1 1 auto; min-height: 320px; aspect-ratio: auto; }
.hero-photo-col .hero-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
@media (max-width: 979px) {
  .hero-photo-col .hero-photo { aspect-ratio: 1195 / 896; min-height: 0px; }
}
.hero h1 { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.02em; color: var(--ink); }
.hero h1 .accent-word { background: linear-gradient(180deg, transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding: 0px 0.05em; }
.hero h1 .upright { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: 0.78em; letter-spacing: -0.01em; }
.hero-sub { margin-top: 28px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 540px; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-meta { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 28px; color: var(--slate); font-size: 13px; letter-spacing: -0.005em; }
.hero-meta strong { color: var(--ink); font-weight: 500; }
.hero-image { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.placeholder { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, rgba(31, 27, 22, 0.04) 0px, rgba(31, 27, 22, 0.04) 1px, transparent 1px, transparent 14px), linear-gradient(rgb(229, 219, 198), rgb(216, 203, 175)); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--slate); }
.placeholder .ph-label { position: absolute; left: 18px; bottom: 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); background: var(--paper); padding: 5px 9px; border: 1px solid var(--line-2); max-width: calc(100% - 36px); }
.placeholder .ph-corner { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(255, 252, 245, 0.7); border: 1px solid var(--line-2); padding: 4px 8px; }
.placeholder.no-face::after { content: "[ no-faces mode ]"; position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 4px 8px; }
.art-frame { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); }
.art-frame .art-svg { display: block; width: 100%; height: 100%; }
.art-frame .art-corner { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(255, 252, 245, 0.85); border: 1px solid var(--line-2); padding: 4px 8px; z-index: 2; }
.art-frame .art-label { position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--slate); background: rgba(255, 252, 245, 0.85); padding: 4px 8px; border: 1px solid var(--line-2); z-index: 2; }
.art-frame .art-credit { position: absolute; left: 0px; right: 0px; bottom: 0px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: rgba(246, 241, 232, 0.92); background: linear-gradient(to top, rgba(31, 27, 22, 0.78), rgba(31, 27, 22, 0)); padding: 22px 14px 8px; z-index: 2; text-align: right; }
.art-frame .art-credit a { color: rgba(246, 241, 232, 0.92); text-decoration: underline; text-underline-offset: 2px; }
.art-frame .art-credit a:hover { color: rgb(255, 255, 255); }
.hero-badge { position: absolute; right: -10px; bottom: 28px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 18px; font-size: 13px; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--shadow); }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--coral); box-shadow: rgba(232, 90, 79, 0.18) 0px 0px 0px 4px; }
.section-head { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: 220px 1fr; gap: 48px; }
}
.section-head .label-col { padding-top: 6px; }
.section-head h2 { max-width: 880px; }
.section-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--slate); text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-top: 56px; }
@media (min-width: 780px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat { background: var(--bg); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 6px; min-height: 148px; }
.stat .stat-num { font-family: var(--serif); font-style: italic; font-size: clamp(38px, 4.4vw, 56px); line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.stat .stat-label { font-size: 15px; color: var(--slate); margin-top: auto; line-height: 1.45; max-width: 200px; }
.stat.accent .stat-num { color: var(--coral); }
.where-section { padding-bottom: clamp(44px, 5vw, 68px); }
.problems-section { padding-top: clamp(44px, 5vw, 68px); }
.where-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 980px) {
  .where-grid { grid-template-columns: 1.05fr 1fr; align-items: start; }
}
.where-text p { color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.where-text p + p { margin-top: 18px; }
.where-text strong { font-weight: 500; color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
.where-facts { list-style: none; margin: 32px 0px 0px; padding: 0px; display: flex; flex-direction: column; gap: 14px; }
.where-facts li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.where-facts .wf-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-2); color: var(--coral); display: flex; align-items: center; justify-content: center; }
.where-facts .wf-icon svg { width: 22px; height: 22px; }
.where-facts .wf-text { font-size: 15px; line-height: 1.4; color: var(--slate); }
.where-facts .wf-text strong { font-weight: 600; color: var(--ink); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; font-size: 16px; }
.map-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 18px; }
.map-card .map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.map-card .map-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--slate); }
.map-card .map-coords { font-family: var(--mono); font-size: 11px; color: var(--slate-2); }
.map-svg { width: 100%; aspect-ratio: 4 / 3.2; background: rgb(236, 227, 207); border: 1px solid var(--line); }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--slate); }
.map-legend .swatch { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.1); }
.fire-timeline { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 28px; }
.fire-timeline h4 { font-family: var(--sans); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--slate); margin-bottom: 22px; }
.fire-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.fire-event { display: flex; flex-direction: column; gap: 6px; padding: 0px 0px 6px; border-bottom: 1px solid var(--line); }
.fire-event .bar { width: 100%; background: var(--coral); border-radius: 2px 2px 0px 0px; }
.fire-event .year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink); margin-top: 8px; }
.fire-event .scale { font-size: 12px; color: var(--slate); line-height: 1.3; }
.fire-focus { margin-top: 56px; display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
@media (min-width: 860px) {
  .fire-focus { grid-template-columns: 1.5fr 1fr; }
}
.fire-focus-main { background: var(--ink); color: var(--bg); padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; }
.fire-focus-main .focus-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(244, 206, 58, 0.4); border-radius: 999px; padding: 6px 12px; margin-bottom: 24px; }
.fire-focus-main .focus-tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.fire-focus-main .num { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; color: var(--coral); }
.fire-focus-main h3 { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.015em; color: var(--bg); margin-top: 8px; }
.fire-focus-main p { font-size: 18px; line-height: 1.6; color: rgba(246, 241, 232, 0.92); margin-top: 18px; max-width: 460px; }
.fire-focus-main .sdg { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 241, 232, 0.7); }
.fire-focus-main .sdg .sdg-chip { background: var(--yellow); color: var(--ink); padding: 4px 8px; border-radius: 2px; font-weight: 500; letter-spacing: 0.08em; }
.fire-focus-side { background: var(--bg-2); padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.fire-fact { border-left: 3px solid var(--ink); padding-left: 16px; }
.fire-fact.accent { border-left-color: var(--coral); }
.fire-fact .ff-num { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 54px); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.fire-fact.accent .ff-num { color: var(--coral); }
.fire-fact .ff-label { font-size: 14.5px; line-height: 1.4; color: var(--slate); margin-top: 8px; max-width: 220px; }
.fire-note { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 18px; margin-top: auto; }
.problems-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (min-width: 900px) {
  .problems-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .problems-grid.two { grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
}
.problems-grid.two { margin-top: 18px; }
.problem { background: var(--bg); padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 18px; min-height: 360px; }
.problem .num { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--coral); }
.problem h3 { font-family: var(--serif); font-style: italic; font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.problem p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.problem .sdg { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate); padding-top: 16px; border-top: 1px solid var(--line); }
.problem .sdg .sdg-chip { background: var(--yellow); color: var(--ink); padding: 4px 8px; border-radius: 2px; font-weight: 500; white-space: nowrap; }
.problem-tail { margin-top: 44px; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; max-width: 920px; color: var(--ink); }
.argument { background: var(--ink); color: var(--bg); }
.argument .eyebrow { color: rgba(246, 241, 232, 0.7); }
.argument .eyebrow::before { background: rgba(246, 241, 232, 0.7); }
.argument h2.display { color: var(--bg); }
.argument .section-num { color: rgba(246, 241, 232, 0.7); }
.argument .body-lg { color: rgba(246, 241, 232, 0.92); }
.compare { display: grid; grid-template-columns: 1fr; border: 1px solid rgba(246, 241, 232, 0.16); border-radius: 4px; overflow: hidden; margin-top: 56px; }
@media (min-width: 820px) {
  .compare { grid-template-columns: 1fr 1fr; }
}
.compare-row { display: contents; }
.compare-cell { padding: 28px 26px; border-top: 1px solid rgba(246, 241, 232, 0.12); border-right: 1px solid rgba(246, 241, 232, 0.12); font-size: 17px; line-height: 1.5; color: rgba(246, 241, 232, 0.86); }
.compare-cell.right { background: rgba(232, 90, 79, 0.06); color: var(--bg); }
.compare-cell.right strong { color: var(--coral); font-weight: 500; }
.compare-cell.head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 232, 0.5); padding: 14px 26px; background: rgba(246, 241, 232, 0.04); }
.compare-cell.head.right { color: var(--coral); background: rgba(232, 90, 79, 0.08); }
@media (max-width: 819px) {
  .compare-cell { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
}
.pullquote { margin-top: 64px; padding: clamp(36px, 5vw, 64px) 0px; border-top: 1px solid rgba(246, 241, 232, 0.16); border-bottom: 1px solid rgba(246, 241, 232, 0.16); }
.pullquote q { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.015em; color: var(--bg); max-width: 1000px; quotes: none; }
.pullquote q::before, .pullquote q::after { content: none; }
.pullquote .hi { color: var(--yellow); }
.pullquote .ascribe { margin-top: 22px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 241, 232, 0.6); }
.argument-slider { margin: 8px 0px; height: clamp(300px, 46vw, 560px); border-radius: 6px; overflow: hidden; }
.argument-slider .img-slider { min-height: 0px; }
.argument-slider .img-slider, .argument-slider .img-slide img { border-radius: 6px; }
.argument-close { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 64px; }
@media (min-width: 820px) {
  .argument-close { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.argument-close .col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
.argument-close .col p { font-size: 19px; line-height: 1.6; color: rgba(246, 241, 232, 0.92); }
.journey-v2 { margin-top: 56px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); display: grid; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .journey-v2 { grid-template-columns: 300px 1fr; }
}
.journey-rail { display: flex; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px; gap: 2px; }
@media (min-width: 880px) {
  .journey-rail { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-right: 1px solid var(--line); padding: 20px 16px; }
}
.rail-step { position: relative; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; text-align: left; cursor: pointer; font-family: var(--sans); display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 6px; color: var(--slate); transition: background 0.14s, color 0.14s; }
.rail-step:hover { background: rgba(31, 27, 22, 0.04); color: var(--ink); }
.rail-step.active { background: var(--ink); color: var(--paper); }
.rail-step::before { content: ""; position: absolute; left: calc(30px); top: -2px; width: 2px; height: 14px; background: var(--line-2); }
.rail-step:first-child::before { display: none; }
.rail-marker { position: relative; z-index: 1; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); display: flex; align-items: center; justify-content: center; transition: background 0.14s, border-color 0.14s, color 0.14s; }
.rail-num { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--slate); transition: color 0.14s; }
.rail-step.done .rail-marker { background: var(--bg-2); border-color: var(--line-2); }
.rail-step.active .rail-marker { background: var(--coral); border-color: var(--coral); }
.rail-step.active .rail-num { color: var(--paper); }
.rail-step.korail-only .rail-marker { border-color: var(--coral); }
.rail-step.korail-only .rail-num { color: var(--coral); }
.rail-step.korail-only.active .rail-num { color: var(--paper); }
.rail-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.rail-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.rail-flag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); }
.rail-step.active .rail-flag { color: var(--yellow); }
.journey-content { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .journey-content { grid-template-columns: 1.05fr 0.95fr; gap: 44px; }
}
.journey-card .panel-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
.journey-card h3 { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); }
.journey-card p { color: var(--ink-2); font-size: 18px; line-height: 1.6; margin-top: 18px; }
.journey-art .art-frame { width: 100%; }
.korail-callout { margin-top: 56px; background: var(--yellow); color: var(--ink); border-radius: 4px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) {
  .korail-callout { grid-template-columns: 1fr 1.2fr; gap: 48px; }
}
.korail-callout h3 { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.01em; max-width: 18ch; }
.korail-callout p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sdg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sdg-chips .chip { background: var(--ink); color: var(--bg); padding: 6px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
.method-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (min-width: 780px) {
  .method-grid { grid-template-columns: repeat(4, 1fr); }
}
.method-step { background: var(--bg); padding: 28px 22px 26px; min-height: 220px; display: flex; flex-direction: column; gap: 14px; }
.method-step .step-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); }
.method-step h4 { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.05; color: var(--ink); }
.method-step p { font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.track { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); margin-top: 36px; }
@media (min-width: 980px) {
  .track { grid-template-columns: 0.95fr 1.05fr; }
}
.origin { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(28px, 4vw, 48px); }
.origin h3 { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 18px; }
.origin p { color: var(--ink-2); line-height: 1.6; font-size: 17px; }
.origin p + p { margin-top: 14px; }
.origin .since { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; gap: 24px; align-items: baseline; }
.origin .since .yr { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1; color: var(--coral); letter-spacing: -0.02em; }
.origin .since .yr-label { font-size: 14px; color: var(--slate); line-height: 1.4; max-width: 180px; }
.locations { display: flex; flex-direction: column; }
.location-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.15s, padding 0.15s; }
.location-row:hover { background: rgba(232, 90, 79, 0.05); padding-left: 14px; padding-right: 14px; }
.location-row:first-child { border-top: 1px solid var(--line); }
.location-row .pin { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); position: relative; flex-shrink: 0; }
.location-row .pin::after { content: ""; position: absolute; inset: 6px; border-radius: 99px; background: var(--coral); }
.location-row .place { display: flex; flex-direction: column; }
.location-row .place .name { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; }
.location-row .place .detail { font-size: 13.5px; color: var(--slate); margin-top: 2px; }
.location-row .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.location-row.founding .name { color: var(--coral); }
.track-media { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.img-slider { position: relative; width: 100%; height: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--ink); }
.img-slider-track { position: absolute; inset: 0px; }
.img-slide { position: absolute; inset: 0px; margin: 0px; opacity: 0; transition: opacity 0.7s; pointer-events: none; }
.img-slide.active { opacity: 1; pointer-events: auto; }
.img-slide img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.img-slide figcaption { position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 56px 26px 24px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(to top, rgba(20, 17, 13, 0.92) 0%, rgba(20, 17, 13, 0.6) 55%, rgba(20, 17, 13, 0) 100%); color: var(--bg); }
.img-slide-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }
.img-slide-cap { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; max-width: 90%; }
.img-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--ink); background: rgba(246, 241, 232, 0.88); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; cursor: pointer; transition: background 0.15s, transform 0.15s; z-index: 2; }
.img-nav:hover { background: var(--paper); transform: translateY(-50%) scale(1.06); }
.img-nav.prev { left: 14px; }
.img-nav.next { right: 14px; }
.img-dots { position: absolute; top: 16px; right: 16px; display: flex; gap: 7px; z-index: 2; }
.img-dot { width: 8px; height: 8px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; background: rgba(246, 241, 232, 0.45); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.img-dot.on { background: var(--yellow); transform: scale(1.25); }
.partners { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-top: 48px; }
@media (min-width: 780px) {
  .partners { grid-template-columns: 1fr 1fr; }
}
.partner { background: var(--bg); padding: 36px 32px; display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: start; }
.partner-logo { width: 132px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.partner-logo .plogo { display: block; width: 100%; height: auto; }
.partner h4 { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); line-height: 1.05; }
.partner .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 8px; color: var(--slate); }
.partner .status .pip { width: 6px; height: 6px; border-radius: 99px; background: var(--coral); }
.partner.planned .status .pip { background: var(--yellow-deep); }
.partner p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-top: 14px; }
.partner-close { margin-top: 48px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; max-width: 920px; color: var(--ink); }
.flagship { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .flagship { grid-template-columns: 1.1fr 1fr; }
}
.flagship-text { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 22px; }
.flagship-text .eyebrow { color: var(--coral); }
.flagship-text .eyebrow::before { background: var(--coral); }
.flagship-text h3 { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.015em; }
.flagship-text p { color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.flagship-text .mission-tag { display: inline-flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line-2); padding: 8px 14px; border-radius: 999px; font-size: 13px; align-self: flex-start; }
.flagship-text .mission-tag .pip { width: 8px; height: 8px; border-radius: 99px; background: var(--coral); box-shadow: rgba(232, 90, 79, 0.18) 0px 0px 0px 4px; }
.team-photo { border-left: 1px solid var(--line); background: var(--bg); position: relative; min-height: 420px; }
@media (max-width: 979px) {
  .team-photo { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-top: 1px solid var(--line); min-height: 320px; }
}
.team-roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.roster-card { background: var(--paper); padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.roster-card .age { font-family: var(--mono); font-size: 11px; color: var(--coral); letter-spacing: 0.12em; text-transform: uppercase; }
.roster-card .first { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: -0.005em; }
.roster-card .pitch { font-size: 13.5px; color: var(--slate); line-height: 1.45; margin-top: 6px; }
@media (max-width: 760px) {
  .team-roster { grid-template-columns: repeat(2, 1fr); }
}
.changemakers-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) {
  .changemakers-grid { grid-template-columns: repeat(3, 1fr); }
}
.cm-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.cm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cm-card .portrait { aspect-ratio: 4 / 5; position: relative; }
.cm-card .info { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.cm-card .info .name { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--ink); }
.cm-card .info .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.cm-card .info .quote { font-size: 16px; color: var(--ink-2); line-height: 1.55; margin-top: 10px; }
.sponsor-wrap { background: var(--bg-2); }
.sponsor-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
@media (min-width: 980px) {
  .sponsor-grid { grid-template-columns: repeat(4, 1fr); }
}
.tier { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; position: relative; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.tier:hover { border-color: var(--ink); }
.tier.selected { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral) inset, var(--shadow); }
.tier.flagship-tier { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tier.flagship-tier .tier-label, .tier.flagship-tier .tier-desc { color: rgba(246, 241, 232, 0.85); }
.tier.flagship-tier .tier-amount { color: var(--yellow); }
.tier.flagship-tier.selected { box-shadow: 0 0 0 1px var(--yellow) inset, var(--shadow); }
.tier-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.tier h4 { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em; }
.tier.flagship-tier h4 { color: var(--bg); }
.tier-amount { font-family: var(--serif); font-style: italic; font-size: 48px; line-height: 1; color: var(--coral); letter-spacing: -0.02em; }
.tier-amount .per { font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--slate); margin-left: 6px; }
.tier.flagship-tier .tier-amount .per { color: rgba(246, 241, 232, 0.65); }
.tier-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tier .select-mark { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.tier.selected .select-mark { border-color: var(--coral); background: var(--coral); }
.tier.selected .select-mark::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--paper); }
.tier.flagship-tier .select-mark { border-color: rgba(246, 241, 232, 0.4); }
.tier.flagship-tier.selected .select-mark { background: var(--yellow); border-color: var(--yellow); }
.transparency { margin-top: 48px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) {
  .transparency { grid-template-columns: 240px 1fr; gap: 48px; }
}
.transparency h4 { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.05; }
.transparency p.body-sm { margin-top: 8px; }
.breakdown { display: flex; flex-direction: column; gap: 14px; }
.bk-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; font-size: 14px; }
.bk-row .bk-label { color: var(--ink); }
.bk-row .bk-val { font-family: var(--mono); font-size: 12.5px; color: var(--slate); }
.bk-bar { height: 8px; background: var(--bg-2); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.bk-bar > span { display: block; height: 100%; background: var(--coral); }
.bk-bar.y > span { background: var(--yellow-deep); }
.bk-bar.d > span { background: var(--ink); }
.bk-bar.s > span { background: var(--slate); }
.sponsor-cta-row { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sponsor-summary { font-size: 14px; color: var(--slate); margin-left: auto; white-space: nowrap; }
.sponsor-summary strong { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); margin-left: 8px; line-height: 1; white-space: nowrap; }
.sponsor-form { margin-top: 44px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: clamp(28px, 3.5vw, 44px); }
.sponsor-form .form-head { display: grid; grid-template-columns: 1fr; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
@media (min-width: 820px) {
  .sponsor-form .form-head { grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: end; }
}
.sponsor-form .form-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.sponsor-form .form-pick { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sponsor-form .form-pick-label { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.8vw, 34px); line-height: 1; color: var(--ink); }
.sponsor-form .form-pick-amount { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.8vw, 34px); line-height: 1; color: var(--coral); }
.sponsor-form .form-hint { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 460px; }
.sponsor-form .form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) {
  .sponsor-form .form-grid { grid-template-columns: 1fr 1fr; }
}
.sponsor-form .field { display: flex; flex-direction: column; gap: 8px; }
.sponsor-form .field.full { grid-column: 1 / -1; }
.sponsor-form .field > span { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.sponsor-form .field .opt { color: var(--slate); font-weight: 400; font-size: 13px; }
.sponsor-form input[type="text"], .sponsor-form input[type="email"], .sponsor-form input[type="tel"], .sponsor-form textarea { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 12px 14px; width: 100%; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.sponsor-form input::placeholder, .sponsor-form textarea::placeholder { color: var(--slate-2); }
.sponsor-form input:focus, .sponsor-form textarea:focus { outline: none; border-color: var(--coral); background: var(--paper); box-shadow: rgba(232, 90, 79, 0.16) 0px 0px 0px 3px; }
.sponsor-form .field.check { flex-direction: row; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.sponsor-form .field.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); flex-shrink: 0; }
.sponsor-form .field.check span { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.sponsor-form .form-actions { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sponsor-form .form-fine { font-size: 13px; color: var(--slate); max-width: 360px; line-height: 1.45; }
@media (min-width: 820px) {
  .sponsor-form .form-fine { margin-left: auto; text-align: right; }
}
.sponsor-form.done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sponsor-form.done .done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 500; }
.sponsor-form.done h3 { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.sponsor-form.done p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 640px; }
.euro { background: var(--coral); color: var(--bg); }
.euro .wrap { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.euro h2 { color: var(--bg); line-height: 1.04; padding-bottom: 6px; }
.euro .eyebrow { color: rgba(246, 241, 232, 0.8); }
.euro .eyebrow::before { background: rgba(246, 241, 232, 0.8); }
.euro .body-lg { color: rgba(246, 241, 232, 0.92); max-width: 720px; }
.stage-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
@media (min-width: 820px) {
  .stage-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.stage-card { background: rgba(31, 27, 22, 0.18); border: 1px solid rgba(246, 241, 232, 0.22); border-radius: 6px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 380px; }
.stage-card .stage-step { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.stage-card .stage-name { font-family: var(--serif); font-style: italic; font-size: 38px; line-height: 1; color: var(--bg); letter-spacing: -0.01em; }
.stage-card .stage-amount { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.05; color: rgba(246, 241, 232, 0.78); letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stage-card .stage-amount .unit { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: rgba(246, 241, 232, 0.6); text-transform: uppercase; }
.stage-card .stage-eur { font-family: var(--serif); font-style: italic; font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--yellow); margin-top: 4px; }
.stage-card .stage-meta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em; line-height: 1.45; color: rgba(246, 241, 232, 0.82); padding: 12px 0px; border-top: 1px solid rgba(246, 241, 232, 0.18); border-bottom: 1px solid rgba(246, 241, 232, 0.18); margin-top: 4px; }
.stage-card .stage-points { list-style: none; margin: auto 0px 0px; padding: 0px; display: flex; flex-direction: column; gap: 9px; }
.stage-card .stage-points li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.5; color: rgba(246, 241, 232, 0.94); }
.stage-card .stage-points li::before { content: ""; position: absolute; left: 0px; top: 9px; width: 8px; height: 8px; background: var(--coral); border: 1px solid rgba(246, 241, 232, 0.5); border-radius: 50%; }
.cost-strip { margin-top: 22px; background: var(--yellow); color: var(--ink); border-radius: 6px; padding: clamp(26px, 3vw, 38px); display: grid; gap: 22px; }
@media (min-width: 880px) {
  .cost-strip { grid-template-columns: auto 1fr; align-items: center; gap: 22px 48px; }
  .cost-strip-note { grid-column: 1 / -1; }
}
.cost-strip-head { display: flex; flex-direction: column; gap: 6px; }
.cost-strip-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(31, 27, 22, 0.7); max-width: 240px; line-height: 1.4; }
.cost-strip-total { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 8vw, 92px); line-height: 0.9; letter-spacing: -0.025em; color: var(--ink); }
.cost-strip-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.cost-stat { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: rgba(31, 27, 22, 0.06); border: 1px solid rgba(31, 27, 22, 0.14); border-radius: 5px; }
.cost-stat .cs-num { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.cost-stat .cs-cap { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(31, 27, 22, 0.66); }
.cost-strip-note { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 760px; }
.cost-strip-note strong { color: var(--ink); }
.implement-card { margin-top: 22px; background: var(--ink); border: 1px solid rgba(246, 241, 232, 0.16); border-radius: 6px; padding: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1fr; gap: 36px; position: relative; overflow: hidden; }
@media (min-width: 880px) {
  .implement-card { grid-template-columns: 1.6fr 1fr; gap: 56px; }
}
.implement-card::before { content: "04"; position: absolute; right: -10px; bottom: -42px; font-family: var(--serif); font-style: italic; font-size: 220px; line-height: 1; color: rgba(246, 241, 232, 0.05); pointer-events: none; }
.implement-step { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.implement-name { font-family: var(--serif); font-style: italic; font-size: clamp(44px, 5.5vw, 68px); line-height: 1; letter-spacing: -0.02em; color: var(--bg); margin-top: 12px; }
.implement-text p { font-size: 19px; line-height: 1.6; color: rgba(246, 241, 232, 0.92); margin-top: 20px; max-width: 620px; }
.implement-text p strong { color: var(--yellow); font-weight: 600; }
.implement-points { list-style: none; margin: 24px 0px 0px; padding: 0px; display: flex; flex-direction: column; gap: 11px; }
.implement-points li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; color: rgba(246, 241, 232, 0.94); }
.implement-points li::before { content: "→"; position: absolute; left: 0px; top: 0px; color: var(--coral); font-weight: 600; }
.implement-aside { position: relative; z-index: 1; align-self: center; border-top: 1px solid rgba(246, 241, 232, 0.16); padding-top: 28px; }
@media (min-width: 880px) {
  .implement-aside { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-left: 1px solid rgba(246, 241, 232, 0.16); padding-top: 0px; padding-left: 40px; }
}
.implement-aside-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 232, 0.6); }
.implement-stakeholders { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.implement-stakeholders span { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--bg); padding-bottom: 10px; border-bottom: 1px solid rgba(246, 241, 232, 0.14); }
.implement-aside-note { font-size: 14.5px; line-height: 1.55; color: rgba(246, 241, 232, 0.72); margin-top: 18px; }
.projects-open { padding-right: ; padding-bottom: ; padding-left: ; max-width: 1320px; margin: 0px auto; border-top: 1px solid rgba(246, 241, 232, 0.22); padding-top: 48px; }
.projects-open-heading { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 30px); color: var(--ink); font-weight: 700; margin-bottom: 32px; letter-spacing: -0.02em; }
.project-detail-panel { background: rgba(31, 27, 22, 0.55); border: 1px solid rgba(31, 27, 22, 0.35); border-radius: 8px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.project-detail-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.project-detail-theme { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); background: rgba(246, 241, 232, 0.08); padding: 4px 10px; border-radius: 3px; }
.project-detail-status { font-size: 14px; color: rgba(246, 241, 232, 0.72); line-height: 1.4; }
.project-detail-title { font-family: var(--serif); font-size: clamp(26px, 3.5vw, 36px); color: rgb(255, 255, 255); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 0px; }
.project-detail-desc { font-size: 17px; line-height: 1.65; color: rgb(246, 241, 232); }
.project-detail-ask { background: rgba(246, 241, 232, 0.1); border: 1px solid rgba(246, 241, 232, 0.22); border-radius: 6px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.project-ask-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 232, 0.72); font-weight: 400; }
.project-ask-body { font-size: 16px; line-height: 1.6; color: rgb(246, 241, 232); }
.project-sponsor-cta { align-self: flex-start; }
.contact { background: var(--bg); border-top: 1px solid var(--line); }
.contact .wrap { padding: clamp(64px, 8vw, 110px) var(--gutter); }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 56px; align-items: start; }
@media (min-width: 940px) {
  .contact-layout { grid-template-columns: 300px 1fr; gap: 56px; }
}
.contact-aside { display: flex; flex-direction: column; gap: 26px; }
.contact-aside-block { display: flex; flex-direction: column; gap: 5px; }
.contact-aside-block .ca-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.contact-aside-block a, .contact-aside-block .ca-text { font-size: 18px; line-height: 1.45; color: var(--ink); text-decoration: none; }
.contact-aside-block a { border-bottom: 1px solid var(--line-2); padding-bottom: 1px; width: fit-content; transition: color 0.15s, border-color 0.15s; }
.contact-aside-block a:hover { color: var(--coral); border-color: var(--coral); }
.contact-aside-socials { display: flex; gap: 12px; margin-top: 4px; }
.contact-aside-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.contact-aside-socials a:hover { background: var(--coral); border-color: var(--coral); color: var(--paper); }
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: clamp(26px, 3vw, 40px); }
.contact-form .form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) {
  .contact-form .form-grid { grid-template-columns: 1fr 1fr; }
}
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form .field.full { grid-column: 1 / -1; }
.contact-form .field > span { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); }
.contact-form .field .opt { color: var(--slate); font-weight: 400; font-size: 13px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 12px 14px; width: 100%; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.contact-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5751' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--slate-2); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--coral); background: var(--paper); box-shadow: rgba(232, 90, 79, 0.16) 0px 0px 0px 3px; }
.contact-form .field.check { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }
.contact-form .field.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); flex-shrink: 0; }
.contact-form .field.check span { font-weight: 400; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.contact-form .form-actions { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.contact-form .form-fine { font-size: 13px; color: var(--slate); max-width: 360px; line-height: 1.45; }
.contact-form .form-fine a { color: var(--coral); text-decoration: none; border-bottom: 1px solid; }
@media (min-width: 640px) {
  .contact-form .form-fine { margin-left: auto; text-align: right; }
}
.contact-form.done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact-form.done .done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.contact-form.done h3 { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.contact-form.done p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.contact-form.done p a { color: var(--coral); text-decoration: none; border-bottom: 1px solid; }
.trust { background: var(--ink); color: var(--bg); }
.trust .wrap { padding: clamp(64px, 8vw, 110px) var(--gutter); }
.trust h2 { color: var(--bg); }
.trust .eyebrow { color: rgba(246, 241, 232, 0.55); }
.trust .eyebrow::before { background: rgba(246, 241, 232, 0.55); }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 56px; }
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
.trust-block h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 232, 0.6); margin-bottom: 14px; }
.trust-block p { color: rgba(246, 241, 232, 0.92); font-size: 17px; line-height: 1.6; }
.trust-block ul { margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.trust-block li { color: rgba(246, 241, 232, 0.92); font-size: 17px; }
.trust-block .contact-list a { color: rgba(246, 241, 232, 0.92); text-decoration: none; border-bottom: 1px solid rgba(246, 241, 232, 0.25); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; }
.trust-block .contact-list a:hover { color: var(--coral); border-color: var(--coral); }
.trust-block .socials { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.trust-block .socials a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border: 1px solid rgba(246, 241, 232, 0.22); border-radius: 999px; color: rgba(246, 241, 232, 0.92); font-size: 13px; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.trust-block .socials a:hover { background: rgba(232, 90, 79, 0.15); border-color: var(--coral); color: var(--bg); }
.trust-block .socials svg { flex-shrink: 0; }
.footer { background: var(--ink); color: rgba(246, 241, 232, 0.55); border-top: 1px solid rgba(246, 241, 232, 0.12); }
.footer .wrap { padding: 28px var(--gutter) 36px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; font-family: var(--sans); font-size: 12.5px; }
.footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { color: rgba(246, 241, 232, 0.7); text-decoration: none; }
.footer a:hover { color: var(--bg); }
.footer .footer-socials { display: flex; gap: 14px; align-items: center; }
.footer .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(246, 241, 232, 0.18); border-radius: 50%; color: rgba(246, 241, 232, 0.7); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.footer .footer-socials a:hover { color: var(--bg); border-color: var(--coral); background: var(--coral); }
.footer .small { margin-left: auto; }
.sticky-cta { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(160%); background: var(--ink); color: var(--bg); padding: 12px 14px 12px 22px; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 40px -10px; display: flex; gap: 18px; align-items: center; z-index: 40; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); max-width: calc(-32px + 100vw); font-size: 14px; }
.sticky-cta.show { transform: translateX(-50%) translateY(0px); }
.sticky-text { display: flex; flex-direction: column; gap: 2px; }
.sticky-cta .label { color: rgba(246, 241, 232, 0.7); font-size: 12px; white-space: nowrap; }
.sticky-cta .child { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1; white-space: nowrap; }
.sticky-cta .btn { padding: 8px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) {
  .sticky-cta { left: 0px; right: 0px; bottom: 0px; transform: translateY(120%); width: 100%; max-width: 100%; border-radius: 16px 16px 0px 0px; padding: 12px 16px; gap: 12px; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.45) 0px -8px 30px -12px; }
  .sticky-cta.show { transform: translateY(0px); }
  .sticky-cta .child { font-size: 16px; }
  .sticky-cta .label { font-size: 11px; }
}
@media (max-width: 360px) {
  .sticky-cta .label { display: none; }
}
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0px); }
@media (max-width: 720px) {
  .fire-bar { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .fire-bar .fire-event:nth-child(n+5) { display: none; }
}
/* ==========================================================================
   UPDATES / BLOG
   Added for the student-updates section. Uses the same tokens as the
   main page — no new colours, no new fonts.
   ========================================================================== */

.page-head { padding: clamp(56px, 8vw, 110px) 0 clamp(32px, 4vw, 56px); }
.page-head .display { margin-top: 18px; }
.page-head .body-lg { margin-top: 22px; max-width: 720px; }

.updates-list { display: grid; gap: 28px; padding-bottom: clamp(72px, 10vw, 140px); }
@media (min-width: 860px) { .updates-list { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.update-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.update-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.update-card .cover { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: var(--bg-2); }
.update-card .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.update-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.update-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--coral); border: 1px solid rgba(232,90,79,.35); background: var(--accent-soft);
  padding: 3px 8px; border-radius: 999px;
}
.update-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--slate-2); text-transform: uppercase; }
.update-card h2 { font-family: var(--sans); font-weight: 500; font-size: 21px; line-height: 1.28; letter-spacing: -.01em; }
.update-card .excerpt { font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.update-card .more { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--coral); display: inline-flex; align-items: center; gap: 7px; }

.empty-state, .error-state {
  border: 1px dashed var(--line-2); border-radius: 14px;
  padding: 48px 32px; text-align: center; color: var(--slate);
  background: var(--paper);
}
.error-state { border-color: rgba(232,90,79,.4); }

/* ---- single post ---- */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.post-head { padding: clamp(48px, 7vw, 92px) 0 0; }
.post-head h1 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.015em;
  margin-top: 18px;
}
.post-head .post-standfirst { margin-top: 22px; font-size: 20px; line-height: 1.55; color: var(--ink-2); }
.post-cover { margin: 40px 0 8px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.post-cover img { width: 100%; display: block; }
.post-cover-video video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ink);
  max-height: min(78vh, 760px);   /* portrait phone video must not fill the screen */
  object-fit: contain;
}
.post-cover figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--slate-2); background: var(--paper); border-top: 1px solid var(--line); }

.post-body { padding: 8px 0 clamp(72px, 10vw, 130px); font-size: 18.5px; line-height: 1.72; color: var(--ink-2); }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 { font-family: var(--sans); font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); margin-top: 2em; }
.post-body h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ink); margin-top: 1.7em; }
.post-body a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .5em; }
.post-body img { border-radius: 12px; border: 1px solid var(--line); }
.post-body video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink);
  /* Phone footage is often portrait. Cap the height so a vertical clip does
     not fill the whole screen, and let it sit centred rather than stretched. */
  max-height: min(78vh, 760px);
  object-fit: contain;
}
.post-body figure { margin: 2em 0; }
.post-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--slate-2); text-align: center; }
.post-body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--coral);
  font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.35; color: var(--ink);
}
.post-body hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.post-body code { font-family: var(--mono); font-size: .86em; background: var(--bg-2); padding: 2px 6px; border-radius: 5px; }
.post-body pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; }

.post-foot { border-top: 1px solid var(--line); padding: 32px 0 clamp(72px, 10vw, 120px); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }

.post-cta { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-cta .inner { padding: clamp(40px, 6vw, 72px) 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.post-cta h2 { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; background: var(--paper); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 8px; }


/* Shams mobile improvements, 27 September 2026. Preserve on GitHub deployments. */
@media (max-width: 899px) {
 .nav-inner { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 0; }
 .nav-brand { flex: 1; min-width: 0; gap: 8px; }
 .nav-brand img { height: 30px; }
 .nav-brand .label { font-size: 11px; max-width: 130px; }
 .nav-cta { font-size: 12px; padding: 10px 12px; min-height: 44px; max-width: 145px; }
 .nav-links { display: flex; order: 3; width: 100%; margin: 0; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; }
 .nav-links a { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; font-size: 13px; }
 section[id] { scroll-margin-top: 128px; }
}
@media (max-width: 600px) {
 :root { --gutter: 20px; }
 .section-pad { padding: 52px 0; }
 .section-head { margin-bottom: 28px; gap: 16px; }
 .hero { padding-top: 28px; }
 .hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
 .hero-sub { font-size: 17px; margin-top: 20px; }
 .hero-meta { margin-top: 28px; gap: 14px; }
 .hero-badge { right: 8px; left: 8px; bottom: 12px; justify-content: center; font-size: 11px; padding: 10px; }
 .post-head .post-standfirst, .post-body { font-size: 17px; }
 .post-cover { margin-top: 24px; }
 .post-cover-video video, .post-body video { max-height: 65svh; }
 .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; }
 .contact-layout, .contact-form, .form-row, .hero-grid > *, .stage-grid > * { min-width: 0; }
 .contact-info a, .trust-block a { overflow-wrap: anywhere; }
 .sticky-cta { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
 .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 899px) { .nav-links a[href$="blog.html"] { order: -1; } }
@media (max-width: 600px) {
 .origin, .track-media, .partner, .partner > * { min-width: 0; }
 .origin .since { gap: 12px; flex-wrap: wrap; }
 .track-media svg { max-width: 100%; height: auto; }
 .partner { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
}
@media (max-width: 380px) { .nav-brand .label { display: none; } }
/* Kobir's reviewed header changes. */
.nav-toggle { display: none; }
@media (min-width: 900px) { .nav-brand .label { display: none; } }
@media (max-width: 899px) {
 .nav-inner { padding-bottom: 10px; }
 .nav-cta { display: none; }
 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; }
 .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; }
 .nav-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
 .menu-ready .nav-links { display: none; }
 .menu-ready.menu-open .nav-links { display: flex; flex-direction: column; gap: 0; overflow: auto; max-height: 65svh; border-top: 1px solid var(--line); padding-top: 8px; }
 .menu-open .nav-links a { padding: 12px 8px; }
 .menu-open .nav-links a.active::after { display: none; }
 section[id] { scroll-margin-top: 90px; }
}