:root {
  --ink: #082d48;
  --ink-soft: #375b66;
  --paper: #f7ecd4;
  --paper-deep: #eedcb8;
  --card: rgba(255, 250, 239, .78);
  --line: rgba(8, 45, 72, .2);
  --mint: #168f94;
  --mint-soft: #93d8cf;
  --gold: #e1bc6d;
  --clay: #c7754d;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: linear-gradient(180deg, #fbf0d9, var(--paper)); color: var(--ink); font-family: var(--sans); line-height: 1.5; margin: 0; }
body::before { background: url("naqsh-pattern.svg") repeat; background-size: 185px 185px; content: ""; inset: 0; opacity: .12; pointer-events: none; position: fixed; z-index: -1; }
a { color: inherit; }
.wrap { margin: 0 auto; max-width: 1220px; width: min(1220px, calc(100% - 64px)); }
.skip-link { background: #fffaf0; border: 1px solid var(--ink); border-radius: 5px; color: var(--ink); left: 20px; padding: 10px 14px; position: fixed; top: -60px; z-index: 9; }
.skip-link:focus { top: 20px; }

.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 28px; justify-content: space-between; min-height: 98px; }
.brand { align-items: center; display: inline-flex; gap: 11px; text-decoration: none; }
.brand img { height: 38px; width: 38px; }
.brand span { display: grid; line-height: 1; }
.brand b { font-size: 18px; letter-spacing: -.05em; }
.brand small { color: var(--clay); font-size: 7px; font-weight: 800; letter-spacing: .14em; margin-top: 5px; }
.site-header nav { align-items: center; display: flex; gap: 24px; }
.site-header nav a { color: #315d67; font-size: 12px; font-weight: 700; text-decoration: none; }
.site-header nav a:not(.nav-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta { background: var(--ink); border-radius: 5px; color: #fff8e8 !important; padding: 10px 13px; }
.nav-cta span { color: var(--gold); margin-left: 6px; }

.hero { align-items: center; display: grid; gap: 66px; grid-template-columns: .91fr 1.09fr; min-height: 650px; padding: 74px 0 92px; }
.eyebrow { color: #38646d; font-size: 10px; font-weight: 800; letter-spacing: .16em; margin: 0 0 19px; }
.eyebrow::before { background: var(--mint); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin: 0 10px 1px 0; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.05em; }
h1 { font-size: clamp(52px, 6vw, 84px); line-height: .91; margin-bottom: 24px; max-width: 610px; }
h1 em, h2 em { color: var(--mint); font-style: italic; font-weight: 500; }
.hero-lead { color: var(--ink-soft); font-size: 18px; line-height: 1.65; margin-bottom: 30px; max-width: 570px; }
.hero-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.hero-signals span { border: 1px solid rgba(8, 45, 72, .24); border-radius: 999px; color: #315d67; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 8px 10px; }
.button { align-items: center; display: inline-flex; font-size: 13px; font-weight: 800; gap: 12px; justify-content: center; min-height: 49px; padding: 12px 15px; text-decoration: none; }
.button.primary { background: var(--ink); box-shadow: 0 12px 25px rgba(8, 45, 72, .16); color: #fff8e9; }
.button.primary span { color: var(--gold); }

.artifact-figure { background: #092f49; border: 1px solid rgba(225, 188, 109, .7); box-shadow: 0 28px 66px rgba(8, 45, 72, .2); margin: 0; overflow: hidden; }
.artifact-label { align-items: center; color: #cce2db; display: flex; font-size: 9px; font-weight: 800; justify-content: space-between; letter-spacing: .11em; padding: 15px 18px; }
.artifact-label i { background: #55d2c1; border-radius: 50%; box-shadow: 0 0 0 5px rgba(85, 210, 193, .14); display: inline-block; height: 7px; margin-right: 9px; width: 7px; }
.artifact-label b { color: #f1d187; font-size: 9px; }
.artifact-figure img { background: #f7f7f2; display: block; height: 356px; object-fit: contain; object-position: center; width: 100%; }
.rad-artifact img { background: #102335; object-position: center top; }
.skain-artifact img { background: #f4f5f8; }
.artifact-figure figcaption { border-top: 1px solid rgba(225, 240, 232, .18); color: #bad2ce; font-size: 11px; line-height: 1.55; padding: 14px 18px 16px; }

.workbench { background: linear-gradient(145deg, #0a4864, #062a45); border: 1px solid rgba(225, 188, 109, .62); box-shadow: 0 28px 66px rgba(8, 45, 72, .2); min-height: 440px; overflow: hidden; padding: 21px; position: relative; }
.workbench::before { background: url("naqsh-pattern.svg") repeat; background-size: 145px 145px; content: ""; inset: 0; opacity: .15; pointer-events: none; position: absolute; }
.workbench > * { position: relative; z-index: 1; }
.board-top { align-items: center; border-bottom: 1px solid rgba(226, 241, 233, .2); color: #cae3db; display: flex; font-size: 9px; font-weight: 800; justify-content: space-between; letter-spacing: .12em; padding-bottom: 14px; }
.board-top i { background: #55d2c1; border-radius: 50%; box-shadow: 0 0 0 5px rgba(85, 210, 193, .14); display: inline-block; height: 7px; margin-right: 9px; width: 7px; }
.board-top b { color: #f1d187; font-size: 9px; }
.research-flow { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr 25px 1fr 25px 1fr; margin: 56px auto 0; max-width: 570px; }
.flow-card { background: rgba(5, 32, 51, .56); border: 1px solid rgba(209, 235, 228, .27); min-height: 128px; padding: 16px 14px; }
.flow-card small { color: #b8d5d0; display: block; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.flow-card b { color: #fff7e8; display: block; font-family: var(--serif); font-size: 24px; line-height: .98; margin: 14px 0 8px; }
.flow-card span { color: #a9c7c4; font-size: 10px; line-height: 1.4; }
.flow-arrow { color: #f0cd80; font-size: 23px; text-align: center; }
.board-caption { bottom: 21px; color: #a8c9c3; font-size: 9px; font-weight: 700; left: 21px; letter-spacing: .09em; position: absolute; }

.proof-bar { background: #0b5268; border-bottom: 1px solid rgba(225, 188, 109, .7); border-top: 1px solid rgba(225, 188, 109, .7); color: #f8edd5; }
.proof-grid { align-items: center; display: grid; grid-template-columns: 2.15fr repeat(3, 1fr); min-height: 112px; }
.proof-grid p { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin: 0; padding-right: 30px; }
.proof-grid p strong { color: #f3d48c; font-weight: 500; }
.proof-grid > span { border-left: 1px solid rgba(250, 238, 205, .26); color: #c1e2db; font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 8px 22px; }

.section { padding: 132px 0; }
.section-intro { align-items: end; display: grid; gap: 60px; grid-template-columns: 1fr .65fr; margin-bottom: 54px; }
.section-intro h2 { font-size: clamp(42px, 4.2vw, 62px); line-height: .95; margin-bottom: 0; max-width: 720px; }
.section-intro > p:last-child { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-bottom: 3px; }
.signal-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); }
.signal-card { background: var(--card); border: 1px solid rgba(8, 45, 72, .22); min-height: 285px; padding: 24px; }
.signal-card > span { color: var(--clay); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.signal-card h3 { font-size: 22px; letter-spacing: -.045em; margin: 49px 0 12px; }
.signal-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin: 0; max-width: 300px; }
.signal-card small { color: var(--mint); display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; margin-top: 32px; }

.workspace-section { background: #0a3b56; color: #fff7e7; position: relative; }
.workspace-section::before { background: url("naqsh-pattern.svg") repeat; background-size: 190px 190px; content: ""; inset: 0; mix-blend-mode: screen; opacity: .15; pointer-events: none; position: absolute; }
.workspace-section .wrap { position: relative; z-index: 1; }
.workspace-layout { align-items: center; display: grid; gap: 86px; grid-template-columns: .82fr 1.18fr; }
.workspace-copy h2 { font-size: clamp(42px, 4vw, 58px); line-height: .97; margin-bottom: 23px; }
.workspace-copy p:not(.eyebrow) { color: #c4ddd8; font-size: 15px; line-height: 1.7; max-width: 445px; }
.workspace-copy .eyebrow { color: #c8dfd9; }
.workspace-copy .eyebrow::before { background: var(--gold); }
.research-board { background: rgba(5, 31, 49, .5); border: 1px solid rgba(234, 211, 144, .45); padding: 25px; }
.board-row { align-items: center; border-bottom: 1px solid rgba(225, 240, 232, .16); display: grid; gap: 17px; grid-template-columns: 106px 1fr auto; min-height: 79px; }
.board-row:last-child { border-bottom: 0; }
.board-row > span { color: #a8c8c4; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.board-row b { color: #fff7e6; font-size: 14px; letter-spacing: -.02em; }
.board-row small { color: #f0cf87; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: right; }
.likelihoods { display: grid; gap: 8px; }
.likelihoods i { background: rgba(183, 224, 215, .18); display: block; height: 5px; overflow: hidden; }
.likelihoods i::after { background: linear-gradient(90deg, #62d1c4, #e6be71); content: ""; display: block; height: 100%; width: var(--width); }

.boundary-section { padding: 112px 0 120px; }
.boundary-grid { display: grid; gap: 0; grid-template-columns: 1fr 1fr; }
.boundary-card { border-top: 2px solid var(--mint); padding: 25px 38px 0 0; }
.boundary-card + .boundary-card { border-color: var(--gold); padding-left: 38px; padding-right: 0; }
.boundary-card > span { color: var(--clay); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.boundary-card h2 { font-size: 39px; line-height: .98; margin: 37px 0 16px; }
.boundary-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0; max-width: 495px; }

.closing { align-items: end; border-top: 1px solid var(--line); display: flex; gap: 35px; justify-content: space-between; padding: 104px 0; }
.closing h2 { font-size: clamp(42px, 4.3vw, 62px); line-height: .95; margin: 0; max-width: 760px; }
.footer { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 1fr 1.2fr auto; min-height: 112px; }
.footer p { color: var(--ink-soft); font-size: 12px; margin: 0; }
.footer > a:last-child { font-size: 12px; font-weight: 800; text-decoration: none; }
.footer > a:last-child span { color: var(--mint); margin-left: 5px; }

@media (max-width: 900px) {
  .hero, .workspace-layout, .section-intro { gap: 42px; grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: 62px; }
  .workbench { max-width: 720px; width: 100%; }
  .artifact-figure { max-width: 720px; width: 100%; }
  .section-intro > p:last-child { max-width: 590px; }
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1.7fr repeat(3, 1fr); }
  .footer { grid-template-columns: 1fr auto; }
  .footer p { display: none; }
}
@media (max-width: 620px) {
  .wrap { width: min(100% - 38px, 1220px); }
  .site-header { min-height: 82px; }
  .site-header nav { display: none; }
  .hero { gap: 36px; padding: 53px 0 70px; }
  h1 { font-size: clamp(47px, 14vw, 64px); }
  .hero-lead { font-size: 16px; }
  .workbench { min-height: 385px; padding: 16px; }
  .artifact-figure img { height: auto; min-height: 0; }
  .artifact-label { align-items: start; gap: 12px; line-height: 1.35; }
  .artifact-label b { text-align: right; }
  .research-flow { gap: 7px; grid-template-columns: 1fr; margin-top: 28px; }
  .flow-card { min-height: 80px; padding: 12px; }
  .flow-card b { font-size: 21px; margin: 8px 0 4px; }
  .flow-arrow { font-size: 18px; transform: rotate(90deg); }
  .proof-grid { gap: 14px; grid-template-columns: 1fr; padding: 28px 0; }
  .proof-grid > span { border: 0; padding: 0; }
  .proof-grid > span:not(:first-of-type) { display: none; }
  .section { padding: 82px 0; }
  .section-intro { gap: 18px; margin-bottom: 38px; }
  .section-intro h2, .workspace-copy h2 { font-size: 43px; }
  .signal-grid, .boundary-grid { grid-template-columns: 1fr; }
  .signal-card { min-height: 0; }
  .signal-card h3 { margin-top: 30px; }
  .workspace-layout { gap: 43px; }
  .research-board { padding: 17px; }
  .board-row { gap: 10px; grid-template-columns: 88px 1fr; min-height: 74px; }
  .board-row small { display: none; }
  .boundary-section { padding: 78px 0; }
  .boundary-card, .boundary-card + .boundary-card { padding: 22px 0; }
  .boundary-card h2 { font-size: 37px; margin-top: 29px; }
  .closing { align-items: start; display: block; padding: 80px 0; }
  .closing .button { margin-top: 30px; }
  .footer { display: flex; flex-wrap: wrap; min-height: 0; padding: 27px 0; }
}