/* ==========================================================================
   Nexura Enterprise — design system for the reconstructed nexurainfotech.com
   Tokens first; every component below is styled through them.
   Reference page: design-system.html
   ========================================================================== */
@font-face { font-family: 'Inter'; src: url(../fonts/Inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* neutrals: cool, with a slight bias toward Nexura blue */
  --ink: #0B1A2E; --text: #3A4758; --muted: #5F6C80; --faint: #8A96A8;
  --line: #E3E8EF; --line-strong: #C9D2DE; --canvas: #F4F6F9; --surface: #FFFFFF;
  /* brand */
  --primary: #266EB4; --primary-600: #1F5C98; --primary-50: #EAF2FB;
  /* industry code = the logo colours (ink variants are text-safe on white) */
  --fin: #266EB4; --fin-ink: #1F5C98; --fin-50: #EAF2FB;
  --hc: #039A49;  --hc-ink: #027A3A;  --hc-50: #E4F4EA;
  --pd: #F8B21A;  --pd-ink: #8A5E00;  --pd-50: #FEF4DC;
  --risk: #E52729; --risk-ink: #B71F1C; --risk-50: #FDECEC;
  /* dark bands */
  --night: #0B1A2E; --night-2: #13294A; --on-night: #EEF3F9; --on-night-mute: #A7B6CB; --line-night: rgba(255, 255, 255, .12);
  /* type */
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Outfit', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* shape and depth */
  --r-sm: 6px; --r: 12px; --r-lg: 20px;
  --sh-1: 0 1px 2px rgba(11, 26, 46, .06);
  --sh-2: 0 1px 2px rgba(11, 26, 46, .05), 0 16px 36px -16px rgba(11, 26, 46, .22);
  /* layout */
  --max: 1200px; --gutter: clamp(20px, 4vw, 48px); --sec: clamp(72px, 9vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font: 400 16px/1.65 var(--sans); color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
code { font: 500 .92em var(--sans); background: var(--canvas); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r-sm); color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }


/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 32px; height: 76px; }
.brand { display: block; line-height: 0; }
.brand img { height: 45px; width: auto; }
.hdr__nav { display: flex; gap: 4px; margin-left: auto; }
.hdr__nav a { font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: var(--r-sm); transition: color .2s, background .2s; }
.hdr__nav a:hover { color: var(--ink); background: var(--canvas); }
.hdr__nav a[aria-current] { color: var(--primary); background: var(--primary-50); }

/* ---------- actions ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px 0 22px; border-radius: 10px; border: 1px solid var(--primary); background: var(--primary); color: #fff; font: 600 15px/1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 26, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.btn .arr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .16); font-size: 15px; }
.btn:hover { background: var(--primary-600); border-color: var(--primary-600); box-shadow: 0 6px 16px -8px rgba(31, 92, 152, .6); }
.btn:active { background: #194C7E; }
.btn--hdr { min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: 9px; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-1); padding: 0 22px; }
.btn--ghost:hover { background: var(--canvas); border-color: var(--ink); box-shadow: var(--sh-1); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); text-decoration: none; }
.more:hover { color: var(--primary-600); }
.arr { display: inline-block; transition: transform .2s var(--ease); }
.more:hover .arr, .btn:hover .arr { transform: translateX(4px); }

/* ---------- type ---------- */
.counter { font: 600 12px var(--sans); letter-spacing: .14em; color: var(--faint); font-variant-numeric: tabular-nums; }
.eyebrow, .label { font: 600 12px var(--sans); letter-spacing: .16em; color: var(--primary); text-transform: uppercase; }
.counter + .eyebrow { margin-top: 6px; }
.display { font: 600 clamp(40px, 5.6vw, 72px)/1.03 var(--display); letter-spacing: -.035em; color: var(--ink); margin-top: 18px; max-width: 18ch; text-wrap: balance; }
.h1 { font: 600 clamp(30px, 3.6vw, 46px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-top: 14px; max-width: 24ch; text-wrap: balance; }
h3, .h3 { font: 600 20px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
em { font-style: normal; color: var(--primary); background: linear-gradient(transparent 64%, rgba(38, 110, 180, .14) 64%); padding: 0 .06em; }
.lede { font-size: 19px; line-height: 1.6; color: var(--text); margin-top: 20px; max-width: 62ch; }
.body { margin-top: 14px; max-width: 66ch; }
.small { font-size: 14px; color: var(--muted); margin-top: 10px; }
.small a { color: var(--primary); }
.sub { font: 600 12px var(--sans); letter-spacing: .16em; color: var(--muted); margin: 44px 0 14px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; color: var(--primary-600); white-space: nowrap; }
.tag i { font-style: normal; font-weight: 500; color: var(--primary); opacity: .45; }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec); }
main > .sec:nth-child(even):not(.dark):not(.endbegin) { background: var(--canvas); }
.sec.alt { background: var(--canvas); }
.sec.tight { padding-block: 32px 88px; }
.wrap > p:has(> .more:only-child), .wrap > p:has(> .btn:only-child) { margin-top: 40px; }
.cta-row { margin-top: 32px; }

/* home hero: soft brand glow and a faint grid behind the headline */
.sec.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 112px) clamp(64px, 8vw, 104px); }
.p-index .sec.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 60% at 88% 20%, rgba(38, 110, 180, .14), transparent 70%), radial-gradient(30% 50% at 72% 90%, rgba(3, 154, 73, .10), transparent 70%),
              linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.sec.hero { isolation: isolate; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); }
.facts > div { padding: 22px 24px; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts dt { font: 600 12px var(--sans); letter-spacing: .16em; color: var(--muted); }
.facts dd { font: 600 17px/1.4 var(--display); color: var(--ink); margin-top: 6px; }
.hero-anim { animation: rise .8s var(--ease) both; }
.lede.hero-anim { animation-delay: .06s; } .cta-row.hero-anim { animation-delay: .12s; } .facts.hero-anim { animation-delay: .2s; }
.played .hero-anim { animation: none; }
@keyframes rise { from { opacity: .001; transform: translateY(14px); } }

/* position: pillars and stats */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.pillars > div { display: flex; gap: 14px; align-items: flex-start; padding: 24px 26px; }
.pillars > div + div { border-left: 1px solid var(--line); }
.pillars__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-50); color: var(--primary); flex-shrink: 0; }
.pillars__ico svg, .qual__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pillars p { margin-top: 6px; color: var(--ink); font: 600 17px/1.35 var(--display); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); margin-top: 40px; }
.cols2:has(> div:empty) { grid-template-columns: 1fr; } .cols2 > div:empty { display: none; }
.cols2:has(> div:empty) > div { columns: 2 320px; column-gap: clamp(32px, 5vw, 72px); } .cols2:has(> div:empty) .body { break-inside: avoid; margin-top: 0; margin-bottom: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.stats > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.stat { font: 600 60px/1 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat small { font: 600 12px var(--sans); letter-spacing: .16em; color: var(--primary); vertical-align: middle; margin-left: 8px; }
.stats p + p { margin-top: 12px; font-size: 15px; }

/* cards */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.card__n { font: 600 12px var(--sans); letter-spacing: .16em; color: var(--primary); }
.card h3 { margin-top: 12px; } .card p:last-child { margin-top: 10px; font-size: 15px; }
.card--ind { border-top: 3px solid var(--ind); }
.card--ind .card__n { color: var(--ind-ink); margin-top: 18px; }
.ibadge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; flex-shrink: 0; }
.ibadge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ibadge--fin { background: var(--fin); } .ibadge--hc { background: var(--hc); } .ibadge--pd { background: var(--pd); color: var(--ink); }

/* dark bands: commitments and END / BEGIN */
.sec.dark, .sec.endbegin { background: radial-gradient(60% 80% at 100% 0%, var(--night-2), var(--night) 70%); color: var(--on-night-mute); }
.dark .h1, .dark h3, .endbegin .h1 { color: var(--on-night); }
.dark .eyebrow, .endbegin .eb span:last-child { color: #7DB3EA; }
.dark em, .endbegin em { color: #9CC8F2; background: linear-gradient(transparent 64%, rgba(125, 179, 234, .18) 64%); }
.rules { list-style: none; margin-top: 44px; display: grid; gap: 16px; }
.rules li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; padding: 28px; border: 1px solid var(--line-night); border-radius: var(--r); background: rgba(255, 255, 255, .03); }
.rules__n { font: 600 40px/1 var(--display); color: transparent; -webkit-text-stroke: 1.2px #7DB3EA; }
.rules h3 { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.25; }
.rules p { margin-top: 8px; }
.eb { display: flex; gap: 14px; font: 700 12px var(--sans); letter-spacing: .3em; color: var(--on-night-mute); }
.endbegin .lede { color: var(--on-night-mute); }
.endbegin .small { color: var(--on-night-mute); }
.endbegin .btn { background: #fff; color: var(--ink); border-color: #fff; }
.endbegin .btn .arr { background: var(--primary); color: #fff; }
.endbegin .btn:hover { background: var(--primary-50); border-color: var(--primary-50); }

/* people */
.person { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--sh-1); }
.portrait { width: 112px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--primary-50), #DCEBDD); border: 1px solid var(--line); font: 600 30px var(--display); color: var(--primary-600); }
.portrait--lg { width: 100%; max-width: 280px; aspect-ratio: 4 / 5; border-radius: var(--r-lg); font-size: 64px; }
.person__name { font: 600 18px var(--display); color: var(--ink); letter-spacing: .02em; }
.person__role { font: 600 12px var(--sans); letter-spacing: .12em; color: var(--primary); margin-top: 4px; text-transform: uppercase; }
.person p:last-child { margin-top: 12px; font-size: 15px; }
.engage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.engage__card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); transition: border-color .25s, box-shadow .25s; }
.engage__card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.engage__verb { font: 600 34px/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); margin: 14px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.engage__card p:last-child { font-size: 15px; }
.engage__card b { color: var(--ink); }
.engage__band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding: 18px 24px; border-radius: var(--r); background: var(--night); color: var(--on-night); }
.engage__band .tag { color: #9CC8F2; } .engage__band .tag i { color: #9CC8F2; }
.engage__band strong { font: 600 20px var(--display); letter-spacing: -.01em; }
.engage__clock { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.engage__clock svg { width: 20px; height: 20px; fill: none; stroke: #9CC8F2; stroke-width: 2; stroke-linecap: round; }

/* offerings and industries */
.qual { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.qual__col { padding: 24px 26px; border-top: 3px solid var(--primary); }
.qual__col--no { border-top-color: var(--risk); border-left: 1px solid var(--line); }
.qual__h { display: flex; align-items: center; gap: 10px; }
.qual__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-50); color: var(--primary); }
.qual__col--no .qual__ico { background: var(--risk-50); color: var(--risk-ink); }
.qual__col--no .tag { color: var(--risk-ink); } .qual__col--no .tag i { color: var(--risk); }
.qual__col p:last-child { margin-top: 12px; color: var(--ink); }
.flows { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 22px; }
.flows li { padding: 14px 0; font-size: 15px; }
.flows li + li { border-top: 1px solid var(--line); }
.flows b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.exp { margin-top: 18px; }
.exp summary { list-style: none; cursor: pointer; display: inline-flex; gap: 8px; font-weight: 600; color: var(--primary); }
.exp summary::-webkit-details-marker { display: none; }
.exp[open] summary .arr { transform: rotate(90deg); }
.archive-note { margin-top: 12px; padding: 10px 14px; font-size: 13px; color: var(--muted); background: var(--canvas); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.jump a { text-decoration: none; }
.jump a { display: inline-flex; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); transition: border-color .2s, background .2s; }
.jump a:hover { border-color: var(--primary); background: var(--primary-50); }
.ind-head { display: flex; align-items: center; gap: 16px; }
.ind-head .eyebrow { color: var(--ind-ink); }
.sec.industry .h1 { margin-top: 18px; }

/* stepper: numbered stages joined by a rule in the industry colour */
.stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.stages--5 { grid-template-columns: repeat(5, 1fr); }
.stages li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 30px; }
.stages li::before { content: ''; position: absolute; top: 9px; left: 0; right: -16px; height: 2px; background: var(--line); }
.stages li:last-child::before { right: 0; }
.stages li::after { content: ''; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ind, var(--primary)); }
.stages__n { display: none; }
.stages li > span:last-child { color: var(--ink); font-weight: 600; }
.stages .tag { align-self: flex-start; }

/* how we work */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.model { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); }
.model__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 13px var(--sans); letter-spacing: .14em; color: var(--primary); }
.model__h span { font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--canvas); border-radius: 999px; padding: 3px 10px; }
.model h3 { margin-top: 16px; } .model__sub { margin-top: 8px; color: var(--ink); font-weight: 500; }
.model p:last-child { margin-top: 12px; font-size: 15px; }
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.phases > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.phases h3 { margin-top: 14px; font-size: 18px; } .phases p { margin-top: 8px; font-size: 14px; }

/* leadership */
.bio { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 28px; align-items: start; }
.bio .h1 { margin-top: 0; }
.quote { margin: 28px 0 8px; padding: 20px 24px; border-radius: var(--r); background: var(--primary-50); font: 500 20px/1.5 var(--display); color: var(--ink); max-width: 52ch; }

/* contact */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: 48px; align-items: start; }
.form { display: grid; gap: 18px; }
.contact .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sh-2); }
.form label { display: grid; gap: 8px; font: 600 12px var(--sans); letter-spacing: .12em; color: var(--ink); }
.form input, .form textarea { font: 400 16px var(--sans); color: var(--ink); padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); letter-spacing: 0; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(38, 110, 180, .18); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.topic-note { font: 600 12px var(--sans); letter-spacing: .1em; color: var(--primary-600); background: var(--primary-50); border-radius: 999px; padding: 5px 12px; justify-self: start; }
.reassure { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.reassure p + p { margin-top: 12px; }
.reassure a { color: var(--primary); font-weight: 600; }

/* legal: sticky index + clauses */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 48px; align-items: start; }
.legal__toc { position: sticky; top: 100px; display: grid; gap: 2px; }
.legal__toc .label { margin-bottom: 10px; color: var(--muted); }
.legal__toc a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s; }
.legal__toc a:hover { color: var(--primary); border-color: var(--primary); }
.clause { padding: 28px 0; border-top: 1px solid var(--line); max-width: 720px; }
.clause:first-child { border-top: 0; padding-top: 0; }
.clause h2 { font-size: inherit; margin-bottom: 4px; }

/* admin */
.signin { max-width: 440px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--sh-2); }
.admin-brand { display: flex; align-items: center; gap: 12px; }
.admin-brand img { height: 38px; width: auto; }
.admin-brand span { font: 700 12px var(--sans); letter-spacing: .2em; color: var(--muted); border-left: 1px solid var(--line-strong); padding-left: 12px; }
.signin .h1 { margin-top: 24px; }
.signin .btn { width: 100%; justify-content: center; }
.signin .btn--ghost { margin-top: 24px; }
.or { display: flex; align-items: center; gap: 12px; font: 600 12px var(--sans); letter-spacing: .2em; color: var(--faint); margin: 20px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* footer (light, so the logo stays on a light surface) */
.ftr { background: var(--canvas); border-top: 1px solid var(--line); padding-block: 64px 36px; font-size: 14px; color: var(--muted); }
.ftr .brand img { height: 48px; }
.ftr__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ftr__legal { margin-top: 14px; line-height: 1.6; }
.ftr__nav { display: flex; gap: 8px 24px; flex-wrap: wrap; align-content: start; }
.ftr__nav a { color: var(--ink); font-weight: 500; }
.ftr a { text-decoration: none; } .ftr a:hover { color: var(--primary); }
.ftr__bot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.ftr__util { display: flex; gap: 22px; flex-wrap: wrap; }

/* design-system reference page */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 40px; }
.sw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.sw__chip { display: block; height: 72px; border-radius: 8px; border: 1px solid rgba(11, 26, 46, .08); }
.sw__name { font: 600 15px var(--display); color: var(--ink); margin-top: 12px; }
.sw__meta { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sw__use { font-size: 13px; margin-top: 6px; }
.types { margin-top: 36px; display: grid; }
.ts { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.ts__meta { font-size: 13px; color: var(--muted); } .ts__meta b { display: block; color: var(--ink); font-size: 14px; }
.ts .display, .ts .h1, .ts .lede { margin-top: 0; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.ds-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 16px; align-content: start; }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ds-space { align-items: flex-end; margin-top: 32px; }
.ds-space span { background: var(--primary); border-radius: 3px; opacity: .85; }
.ds-tile { flex: 1 1 180px; height: 110px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ds-tile--sh { box-shadow: var(--sh-2); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hdr__nav { display: none; }
  .btn--hdr { margin-left: auto; }
  .brand img { height: 38px; }
  .facts, .pillars, .engage, .stats, .cards3, .cards2, .cols2, .qual, .models, .contact, .bio, .legal, .ds-grid, .ts { grid-template-columns: 1fr; }
  .facts > div + div, .pillars > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .qual__col--no { border-left: 0; }
  .phases { grid-template-columns: 1fr 1fr; }
  .stages, .stages--5 { grid-template-columns: 1fr; gap: 0; }
  .stages li { padding: 0 0 20px 32px; }
  .stages li::before { top: 16px; left: 6px; right: auto; bottom: 0; width: 2px; height: auto; }
  .stages li:last-child::before { display: none; }
  .legal__toc { position: static; grid-template-columns: 1fr 1fr; }
  .person { grid-template-columns: 80px 1fr; } .portrait { width: 80px; font-size: 24px; }
  .portrait--lg { width: 160px; font-size: 44px; }
  .rules li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 520px) { .phases, .legal__toc { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }