:root {
  --ink: #12221e;
  --ink-soft: #52615c;
  --forest: #24493e;
  --sage: #98aa92;
  --fog: #e7ebe6;
  --paper: #f7f8f3;
  --white: #ffffff;
  --heat: #e5522f;
  --heat-soft: #f6b79d;
  --sky: #b9d9ea;
  --line: rgba(18, 34, 30, .12);
  --spring: cubic-bezier(.32, .72, 0, 1);
  --display: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --utility: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--fog); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 10px 14px; color: var(--white); background: var(--ink); transform: translateY(-160%); transition: transform 300ms var(--spring); }
.skip-link:focus { transform: translateY(0); }
.island-nav { position: absolute; z-index: 10; top: 22px; left: 50%; width: min(920px, calc(100% - 40px)); min-height: 66px; padding: 9px 12px 9px 16px; display: flex; align-items: center; gap: 38px; border-radius: 999px; color: var(--white); background: rgba(18,34,30,.92); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 18px 60px rgba(6,20,16,.16); transform: translateX(-50%); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--utility); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.brand small { display: block; margin-top: 1px; color: rgba(255,255,255,.46); font-size: 7px; font-weight: 400; letter-spacing: .08em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--heat); }
.brand-mark i { width: 12px; height: 12px; display: block; border: 2px solid var(--white); border-top-color: transparent; border-radius: 50%; transform: rotate(-22deg); }
.island-nav nav { display: flex; gap: 26px; margin-left: auto; }
.island-nav nav a { color: rgba(255,255,255,.68); font-size: 10px; transition: color 450ms var(--spring); }
.island-nav nav a:hover { color: var(--white); }
.live-status { padding: 8px 13px; display: flex; align-items: center; gap: 8px; border-radius: 999px; color: var(--ink); background: var(--sage); font-family: var(--utility); font-size: 8px; }
.live-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }

.hero { min-height: 850px; padding: 175px max(24px, calc((100vw - 1240px)/2)) 110px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 7vw; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(rgba(18,34,30,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,34,30,.07) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.hero-copy, .hero-object { position: relative; }
.eyebrow { margin: 0 0 18px; color: var(--heat); font-family: var(--utility); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.eyebrow-dark { color: var(--sky); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .93; letter-spacing: -.055em; text-wrap: balance; }
h1, h2, [id] { scroll-margin-top: 96px; }
h1 { margin: 0; font-size: clamp(68px, 9.4vw, 138px); }
h1 em { color: var(--forest); font-weight: 400; }
.hero-lede { max-width: 560px; margin: 34px 0; color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.primary-button, .secondary-button { min-height: 54px; width: max-content; padding: 7px 8px 7px 24px; display: inline-flex; align-items: center; gap: 18px; border-radius: 999px; font-size: 11px; font-weight: 700; transition: transform 600ms var(--spring), background-color 600ms var(--spring), color 600ms var(--spring); }
.primary-button { color: var(--white); background: var(--ink); }
.primary-button > i, .button-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--heat-soft); font-style: normal; transition: transform 600ms var(--spring); }
.primary-button:hover { transform: translateY(-2px); background: var(--forest); }
.primary-button:hover > i, .primary-button:hover .button-icon { transform: translate(2px,-2px) scale(1.04); }
.primary-button:active { transform: scale(.98); }
.secondary-button { padding: 7px 22px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.secondary-button:hover { transform: translateY(-2px); background: var(--white); }
.hero-object { min-height: 540px; display: grid; place-items: center; }
.hero-object::before { content: ""; width: 420px; height: 420px; position: absolute; border: 68px solid rgba(152,170,146,.35); border-radius: 50%; }
.signal-card { width: min(340px, 75%); min-height: 190px; padding: 28px; position: absolute; display: flex; flex-direction: column; justify-content: space-between; border-radius: 34px; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 34px 90px rgba(18,34,30,.16); }
.signal-card span, .signal-card small { font-family: var(--utility); font-size: 8px; letter-spacing: .14em; }
.signal-card strong { max-width: 240px; font-family: var(--display); font-size: 29px; line-height: 1.05; font-weight: 400; }
.signal-question { top: 45px; left: 5%; color: var(--ink); background: var(--sky); transform: rotate(-5deg); }
.signal-answer { right: 4%; bottom: 45px; color: var(--white); background: var(--forest); transform: rotate(4deg); }
.signal-answer small { color: var(--heat-soft); }
.signal-line { width: 3px; height: 155px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: var(--heat); transform: rotate(37deg); }
.signal-line i { width: 12px; height: 12px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 0 6px var(--fog); }

.section { padding: 132px max(24px, calc((100vw - 1240px)/2)); }
.catalog { color: var(--white); background: var(--ink); }
.section-heading { margin-bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-heading h2, .method h2 { margin: 0; font-size: clamp(48px, 6vw, 86px); }
.section-heading > p { max-width: 430px; margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.75; }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 18px; }
.project-shell { grid-column: span 7; padding: 7px; border-radius: 40px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.project-shell:nth-child(2n) { grid-column: 6 / span 7; }
.project-card { min-height: 510px; padding: 29px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; border-radius: 33px; color: var(--ink); background: var(--paper); box-shadow: inset 0 1px rgba(255,255,255,.8); transition: transform 700ms var(--spring), background-color 700ms var(--spring); }
.project-card:hover { transform: translateY(-5px); background: var(--white); }
.card-topline { grid-column: 1/-1; display: flex; justify-content: space-between; color: var(--ink-soft); font-family: var(--utility); font-size: 8px; letter-spacing: .1em; }
.card-topline, .metric strong, th, td { font-variant-numeric: tabular-nums; }
.verdict-dial { width: 112px; height: 112px; display: grid; place-content: center; align-self: center; position: relative; border-radius: 50%; font-family: var(--utility); }
.verdict-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.verdict-dial circle { fill: none; stroke-width: 10; }
.dial-track { stroke: rgba(18,34,30,.08); }.dial-value { stroke: var(--heat); stroke-linecap: round; }
.verdict-dial span, .verdict-dial small { position: relative; text-align: center; }
.verdict-dial span { font-size: 25px; font-weight: 700; }
.verdict-dial small { color: var(--ink-soft); font-size: 8px; }
.card-copy { max-width: 430px; align-self: end; padding-right: 20px; }
.status-label { color: var(--heat); font-family: var(--utility); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.card-copy h3 { margin: 11px 0 15px; font-family: var(--display); font-size: clamp(38px, 4vw, 59px); font-weight: 400; line-height: .96; letter-spacing: -.04em; }
.card-copy > p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.card-footer { grid-column: 1/-1; align-self: end; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--ink-soft); font-family: var(--utility); font-size: 8px; letter-spacing: .08em; }
.button-icon { width: 38px; height: 38px; background: var(--heat-soft); }
.loading-card { grid-column: 1/-1; min-height: 180px; display: grid; place-items: center; border-radius: 32px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); }
.loading-card.error { color: #ffd8cf; }

.method { display: grid; grid-template-columns: .84fr 1.16fr; gap: 9vw; color: var(--white); background: var(--forest); }
.method-copy { position: sticky; top: 130px; align-self: start; }
.method-list { list-style: none; margin: 0; padding: 0; }
.method-list li { min-height: 130px; padding: 28px 0; display: grid; grid-template-columns: 68px 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.13); transition: transform 550ms var(--spring), border-color 550ms var(--spring); }
.method-list li:hover { transform: translateX(9px); border-color: var(--heat-soft); }
.method-list > li > span { color: var(--heat-soft); font-family: var(--utility); font-size: 9px; }
.method-list strong { font-family: var(--display); font-size: 25px; font-weight: 400; }
.method-list p { margin: 7px 0 0; color: rgba(255,255,255,.53); font-size: 12px; }

.detail { padding-top: 165px; background: var(--fog); }
.detail-head { max-width: 1240px; margin: 0 auto 90px; }
.back-link, .text-link { display: inline-block; color: var(--forest); font-size: 11px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--heat-soft); text-underline-offset: 5px; }
.detail-title-row { margin-top: 68px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 70px; }
.detail-title-row h1 { max-width: 970px; font-size: clamp(62px, 8vw, 124px); }
.detail-lede { max-width: 740px; margin: 27px 0 0; color: var(--ink-soft); font-size: 17px; }
.decision-stamp { width: 180px; height: 180px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 50%; color: var(--white); background: var(--heat); transform: rotate(5deg); }
.decision-stamp span, .decision-stamp small { font-family: var(--utility); font-size: 8px; letter-spacing: .12em; }
.decision-stamp strong { min-width: 0; width: 100%; font-family: var(--display); font-size: 25px; line-height: 1; font-weight: 400; overflow-wrap: anywhere; }
.detail-actions { margin-top: 42px; display: flex; gap: 14px; }
.metric-strip { max-width: 1240px; margin: 0 auto 120px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding: 7px; border-radius: 34px; background: rgba(18,34,30,.06); box-shadow: inset 0 0 0 1px rgba(18,34,30,.04); }
.metric { min-height: 150px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: var(--paper); }
.metric:first-child { border-radius: 27px 0 0 27px; }.metric:last-child { border-right: 0; border-radius: 0 27px 27px 0; }
.metric span, .metric small { color: var(--ink-soft); font-family: var(--utility); font-size: 8px; letter-spacing: .08em; }
.metric strong { font-family: var(--display); font-size: 31px; font-weight: 400; }
.detail-grid { max-width: 1240px; margin: 0 auto 130px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.content-shell, .formula-shell { padding: 7px; border-radius: 36px; background: rgba(18,34,30,.06); box-shadow: inset 0 0 0 1px rgba(18,34,30,.045); }
.content-card { height: 100%; padding: 40px; border-radius: 29px; background: var(--paper); }
.content-card h2 { margin: 0 0 25px; font-size: clamp(40px, 4.5vw, 67px); }
.content-card > p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.8; }
.evidence-note { margin-top: 38px; padding: 20px; display: flex; flex-direction: column; gap: 8px; border-radius: 18px; background: var(--sky); }
.evidence-note span { font-family: var(--utility); font-size: 8px; letter-spacing: .08em; }.evidence-note strong { font-size: 12px; }
.risk-card { color: var(--white); background: var(--forest); }
.risk-row { padding: 19px 0; display: grid; grid-template-columns: 58px 1fr; gap: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.risk-row span { width: max-content; padding: 5px 8px; border-radius: 999px; font-family: var(--utility); font-size: 7px; text-transform: uppercase; }
.risk-high { color: var(--ink); background: var(--heat-soft); }.risk-medium { color: var(--ink); background: var(--sky); }
.risk-row p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; }
.formula-section, .economics-section, .supplier-section, .source-preview { max-width: 1240px; margin: 0 auto; padding: 80px 0 125px; }
.section-heading.compact { margin-bottom: 48px; align-items: start; }.section-heading.compact h2 { font-size: clamp(45px, 5vw, 76px); }.section-heading.compact > p { color: var(--ink-soft); }
.formula-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.formula-shell { border-radius: 30px; }.formula-card { min-height: 330px; padding: 25px; display: flex; flex-direction: column; border-radius: 23px; background: var(--paper); }
.formula-code { color: var(--heat); font-family: var(--utility); font-size: 9px; }.formula-card h3 { margin: 35px 0 12px; font-family: var(--display); font-size: 25px; font-weight: 400; }.formula-card > strong { font-family: var(--utility); font-size: 18px; }.formula-card p { color: var(--ink-soft); font-size: 11px; }.formula-card small { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--forest); font-size: 9px; }
.economics-section { padding-left: max(24px, calc((100vw - 1240px)/2)); padding-right: max(24px, calc((100vw - 1240px)/2)); max-width: none; color: var(--white); background: var(--ink); }
.economics-section .section-heading.compact > p { color: rgba(255,255,255,.5); }
.economics-table { overflow-x: auto; border-radius: 29px; background: rgba(255,255,255,.055); }
table { width: 100%; min-width: 760px; border-collapse: collapse; } th, td { padding: 22px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); } th { color: rgba(255,255,255,.45); font-family: var(--utility); font-size: 8px; letter-spacing: .09em; } td { color: rgba(255,255,255,.7); font-size: 11px; } td strong { color: var(--white); font-family: var(--display); font-size: 18px; font-weight: 400; }
.supplier-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.supplier-list article { min-height: 230px; padding: 30px; border-radius: 27px; background: var(--paper); }.supplier-list span { color: var(--heat); font-family: var(--utility); font-size: 8px; letter-spacing: .1em; }.supplier-list h3 { margin: 28px 0 12px; font-family: var(--display); font-size: 26px; font-weight: 400; }.supplier-list p { color: var(--ink-soft); font-size: 11px; }.supplier-list a { display: inline-block; margin-top: 18px; color: var(--forest); font-size: 10px; font-weight: 700; }
.decision-section { margin: 20px calc(max(24px, (100vw - 1240px)/2) * -1) 0; padding: 125px max(24px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; color: var(--white); background: var(--forest); }
.decision-copy h2 { margin: 0; font-size: clamp(52px, 6vw, 88px); }.decision-copy > p:last-child { max-width: 530px; color: rgba(255,255,255,.58); }
.gates-card { padding: 36px; border-radius: 31px; color: var(--ink); background: var(--sky); transform: rotate(1deg); }.gates-label { font-family: var(--utility); font-size: 9px; letter-spacing: .1em; }.gates-card ul { margin: 28px 0; padding: 0; list-style: none; }.gates-card li { padding: 15px 0 15px 27px; position: relative; border-top: 1px solid rgba(18,34,30,.12); font-size: 11px; }.gates-card li::before { content: "✓"; position: absolute; left: 0; color: var(--heat); font-weight: 700; }.kill-rule { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.45); font-size: 10px; }
.source-preview h2 { margin: 0 0 42px; font-size: clamp(48px,5vw,75px); }.source-grid { margin-bottom: 30px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }.source-grid a { min-height: 190px; padding: 21px; display: flex; flex-direction: column; border-radius: 21px; background: var(--paper); transition: transform 500ms var(--spring), background-color 500ms var(--spring); }.source-grid a:hover { transform: translateY(-3px); background: var(--white); }.source-grid span, .source-grid small { color: var(--ink-soft); font-family: var(--utility); font-size: 7px; letter-spacing: .08em; }.source-grid strong { margin: 24px 0 auto; font-family: var(--display); font-size: 18px; line-height: 1.15; font-weight: 400; }
footer { min-height: 130px; padding: 35px max(24px, calc((100vw - 1240px)/2)); display: flex; align-items: center; gap: 25px; color: rgba(255,255,255,.48); background: #09130f; font-size: 9px; }.footer-brand { color: var(--white); }.footer-brand + p { margin-right: auto; }
.reveal { animation: reveal 900ms var(--spring) both; }.delay-one { animation-delay: 150ms; } @keyframes reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 165px; }.hero-object { width: min(650px,100%); margin-left: auto; }.project-shell, .project-shell:nth-child(2n) { grid-column: span 12; }.method { grid-template-columns: 1fr; }.method-copy { position: static; }.detail-title-row { grid-template-columns: 1fr; }.decision-stamp { justify-self: end; margin-top: -50px; }.metric-strip { grid-template-columns: repeat(2,1fr); }.metric:nth-child(2) { border-right: 0; border-radius: 0 27px 0 0; }.metric:nth-child(3) { border-radius: 0 0 0 27px; }.metric:first-child { border-radius: 27px 0 0 0; }.metric:last-child { border-radius: 0 0 27px 0; }.detail-grid { grid-template-columns: 1fr; }.formula-grid { grid-template-columns: repeat(2,1fr); }.source-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 700px) {
  .island-nav { top: max(10px, env(safe-area-inset-top)); width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); min-height: 58px; }.island-nav nav { display: none; }.live-status { margin-left: auto; }.hero { min-height: auto; padding: 130px max(20px, env(safe-area-inset-right)) 80px max(20px, env(safe-area-inset-left)); gap: 55px; }.hero-lede { font-size: 15px; }.hero-object { min-height: 400px; }.hero-object::before { width: 285px; height: 285px; border-width: 48px; }.signal-card { min-height: 155px; padding: 22px; border-radius: 27px; }.signal-card strong { font-size: 23px; }.signal-question { top: 20px; left: 1%; transform: rotate(-3deg); }.signal-answer { right: 1%; bottom: 20px; transform: rotate(2deg); }.signal-line { height: 115px; }.section { padding: 90px 20px; }.section-heading, .section-heading.compact { align-items: stretch; flex-direction: column; gap: 22px; margin-bottom: 42px; }.project-card { min-height: 455px; padding: 22px; grid-template-columns: 1fr; }.verdict-dial { width: 90px; height: 90px; justify-self: end; margin-top: 24px; }.card-copy { margin-top: -35px; padding-right: 0; }.method { gap: 45px; }.detail { padding-top: 130px; }.detail-title-row { margin-top: 45px; gap: 20px; }.decision-stamp { width: 145px; height: 145px; margin-top: 10px; padding: 23px; transform: none; }.decision-stamp strong { font-size: 19px; }.detail-actions { align-items: stretch; flex-direction: column; }.detail-actions .primary-button, .detail-actions .secondary-button { width: 100%; justify-content: space-between; }.metric-strip { grid-template-columns: 1fr; }.metric, .metric:first-child, .metric:nth-child(2), .metric:nth-child(3), .metric:last-child { min-height: 125px; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0; }.metric:first-child { border-radius: 27px 27px 0 0; }.metric:last-child { border: 0; border-radius: 0 0 27px 27px; }.content-card { padding: 28px; }.formula-grid, .supplier-list, .source-grid { grid-template-columns: 1fr; }.decision-section { margin-left: -20px; margin-right: -20px; grid-template-columns: 1fr; gap: 45px; }.gates-card { padding: 26px; transform: none; } footer { padding-bottom: max(35px, env(safe-area-inset-bottom)); align-items: flex-start; flex-direction: column; }.footer-brand + p { margin: 0; }
}

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