/* 1AP — 1st Avenue Power
   Values taken directly from the approved Figma frames (1440 desktop).
   Fonts DM Sans 300/400/500 + DM Mono 500. One accent. One soft corner (top-right). */

:root {
  --paper: #F5F6F4; --white: #FFFFFF; --ink: #0F151B; --black: #000000;
  --grey: #6E7278;            /* body text on light */
  --line: #C9CAC6;            /* rules, input borders */
  --grey-card: #D9DAD6;       /* image placeholders */
  --facet-a: #E4E4E1; --facet-b: #D6D7D3;
  --blue: #001CFF; --bp-tint: #E3E7FF; --bp-line: #B9C2FF;

  --font-sans: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 20px;                  /* the corner */
  --pad-x: clamp(20px, 5.555vw, 80px);
  --pad-y: clamp(64px, 8.333vw, 120px);
  --max: 1440px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; }
.skip:focus { top: 16px; }

/* ---------- type (Figma text styles) ---------- */
.t-display { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -0.02em; font-weight: 300; }
.t-heading { font-size: clamp(30px, 3.05vw, 44px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 300; }   /* H1 */
.t-h2 { font-size: clamp(26px, 2.36vw, 34px); line-height: 1.16; letter-spacing: -0.01em; font-weight: 300; }
.t-h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; font-weight: 400; }
.t-stat { font-size: clamp(28px, 2.36vw, 34px); line-height: 1.05; letter-spacing: -0.01em; font-weight: 300; color: var(--blue); }
.t-body-l { font-size: 20px; line-height: 1.45; color: var(--grey); }
.t-body { font-size: 16px; line-height: 1.5; color: var(--grey); }
.t-small { font-size: 14px; line-height: 1.5; color: var(--grey); }
.label, .t-mono { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--blue); }
.label--grey { color: var(--grey); }
.t-annot { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--blue); }
.t-ui { font-size: 15px; line-height: 18px; font-weight: 500; }
.h-pair .lead { color: var(--blue); display: block; }
.h-pair .rest { color: var(--ink); display: block; }
.t-sub { font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; font-weight: 400; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--pad-y); }
.section--white { background: var(--white); }
.section--paper { background: var(--paper); }
.section-head { max-width: 1100px; margin-bottom: 40px; }
.section-head .t-heading { text-wrap: balance; }
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 64px; }

/* ---------- buttons (168x52, radius top-right 20) ---------- */
.btn { --bg: var(--blue); --fg: #fff; --bd: var(--blue);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 28px; height: 52px; background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  border-radius: 0 var(--r) 0 0; font-size: 15px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { border-color: var(--ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .arrow { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { --bg: var(--paper); --fg: var(--ink); --bd: var(--ink); }
.btn--ghost:hover { color: #fff; }
.btn--white { --bg: #fff; --fg: var(--blue); --bd: #fff; }
.btn--white:hover { border-color: var(--ink); }
.btn--sm { height: 44px; padding: 0 26px; }
.btn--row { height: 48px; padding: 0 28px; border-radius: 0 22px 0 0; }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 18px; font-weight: 500; color: var(--blue); }
.textlink .arrow { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.textlink:hover .arrow { transform: translateX(4px); }
.textlink--ink { color: var(--ink); }

/* ---------- nav (84 tall, rule under) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; height: 84px; }
.nav__logo { display: flex; align-items: center; height: 100%; }
.nav__logo svg { height: 24px; width: auto; }
.nav__links { display: flex; margin-left: auto; margin-right: clamp(24px, 4vw, 110px); }
.nav__links a { position: relative; width: 130px; font-size: 15px; line-height: 18px; font-weight: 500; color: var(--ink); padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; width: 120px; bottom: 0; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--blue); }
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease-out), opacity .3s; }
.nav__burger span:nth-child(1) { top: 16px; } .nav__burger span:nth-child(2) { top: 22px; } .nav__burger span:nth-child(3) { top: 28px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__cta { flex: none; }
@media (max-width: 1100px) { .nav__links a { width: auto; margin-right: 32px; } .nav__links a::after { width: 100%; } }
@media (max-width: 900px) {
  .nav__in { height: 68px; }
  .nav__links { position: fixed; inset: 68px 0 0 0; background: var(--paper); flex-direction: column; margin: 0; padding: 12px var(--pad-x) 32px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); border-top: 1px solid var(--line); }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { width: auto; margin: 0; font-size: 28px; line-height: 1.1; font-weight: 300; letter-spacing: -0.02em; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav.is-open .nav__cta { display: inline-flex; position: fixed; left: var(--pad-x); right: var(--pad-x); bottom: 28px; justify-content: center; }
}

/* ---------- blueprint field ---------- */
.bp { position: relative; overflow: hidden; background-color: var(--bp-tint); border: 1px solid var(--blue);
  background-image: linear-gradient(var(--bp-line) 1px, transparent 1px), linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
  background-size: var(--cell, 90px) var(--cell, 90px); background-position: var(--off, 0 0); }
.bp__flares { position: absolute; inset: 0; pointer-events: none; }
.flare { position: absolute; width: 14px; height: 14px; color: var(--blue); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.flare svg { width: 100%; height: 100%; display: block; }
.bp.is-in .flare { animation: flare-in .9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes flare-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.mega-flare { position: absolute; pointer-events: none; }
.mega-flare path { fill: none; stroke: var(--blue); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.mega-flare--white path { stroke: #fff; }
.glyph { width: 14px; height: 14px; }
.glyph--outline { fill: none; stroke: currentColor; stroke-width: 1.25; }

/* ---------- hero (760 tall, field = right half) ---------- */
.hero { position: relative; }
.hero__in { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; }
.hero__copy { padding: 176px var(--pad-x) 68px var(--pad-x); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.hero__copy .t-display { max-width: 660px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__field { position: relative; min-height: 420px; border: 0; border-left: 1px solid var(--blue); }
.hero__field svg.plant { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__annot { position: absolute; left: 16px; top: 16px; max-width: 78%; }
.hero--short .hero__in { min-height: 640px; }
.hero--short .hero__copy { padding-top: 150px; }
.hero--short .hero__copy .t-display { max-width: 680px; }
@media (max-width: 1100px) { .hero__copy { padding-top: 96px; } .hero--short .hero__copy { padding-top: 80px; } }
@media (max-width: 800px) {
  .hero__in, .hero--short .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy, .hero--short .hero__copy { padding-top: 48px; padding-bottom: 40px; gap: 36px; }
  .hero__field { border-left: 0; border-top: 1px solid var(--blue); min-height: 340px; }
}
.page-hero { padding: var(--pad-y) 0 80px; }
.page-hero .t-display { max-width: 1100px; text-wrap: balance; }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.rv.is-in { opacity: 1; transform: none; }
.rv-line { display: block; overflow: hidden; }
.rv-line > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.is-in .rv-line > span, .rv-line.is-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .rv, .rv-line > span { opacity: 1; transform: none; transition: none; } .flare { opacity: 1; transform: translate(-50%, -50%); animation: none !important; } }

/* ---------- folded facets (contiguous, no gap) ---------- */
.fold { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; perspective: 1800px; }
.fold__panel { --tilt: 0deg; position: relative; padding: 66px 32px 32px; min-height: 330px; background: var(--facet-a); color: var(--ink);
  transform: rotateY(var(--tilt)); transform-origin: var(--origin, center); transition: transform .8s var(--ease-out); display: flex; flex-direction: column; }
.fold__panel:nth-child(even) { background: var(--facet-b); }
.fold__panel:nth-child(odd) { --tilt: 5deg; --origin: left center; }
.fold__panel:nth-child(even) { --tilt: -5deg; --origin: right center; }
.fold:hover .fold__panel, .fold.is-flat .fold__panel { --tilt: 0deg; }
.fold__panel .glyph { width: 22px; height: 22px; color: var(--blue); margin-bottom: 36px; }
.fold__panel .t-stat { margin-bottom: 12px; }
.fold__panel .t-h3 { margin-bottom: 21px; }
.fold__panel p { font-size: 14px; line-height: 1.5; color: var(--grey); max-width: 363px; }
.fold--4 .fold__panel { min-height: 380px; padding: 72px 32px 32px; }
.fold--4 .fold__panel .ring { width: 52px; height: 52px; border: 1.25px solid currentColor; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; }
.fold--4 .fold__panel .ring .glyph { width: 28px; height: 28px; margin: 0; color: inherit; }
.fold--4 .fold__panel .t-h2 { margin-bottom: 47px; }
.fold--4 .fold__panel p { font-size: 16px; color: inherit; max-width: 252px; }
.fold__panel--blue { background: var(--blue) !important; color: #fff; }
.fold__panel--grey { background: var(--facet-a) !important; }
.fold__panel--white { background: #fff !important; box-shadow: inset 0 0 0 .75px var(--line); }
.fold__panel--ink { background: var(--black) !important; color: #fff; }
@media (max-width: 800px) { .fold { grid-template-columns: 1fr; } .fold__panel { --tilt: 0deg !important; min-height: 0; padding-top: 40px; } .fold--4 .fold__panel { min-height: 0; } }

/* ---------- image cards (410x448, radius TR 20) ---------- */
.card { background: var(--paper); border-radius: 0 var(--r) 0 0; overflow: hidden; display: flex; flex-direction: column; }
.card__img { height: 220px; background: var(--grey-card); position: relative; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card__img img { transform: scale(1.04); }
.card__img .t-annot { position: absolute; left: 16px; top: 16px; color: var(--grey); opacity: .8; }
.card__body { padding: 36px 32px 32px; display: flex; flex-direction: column; }
.card__body .glyph { width: 20px; height: 20px; color: var(--blue); margin-bottom: 16px; }
.card__body h3 { font-size: 22px; line-height: 1.3; font-weight: 400; margin-bottom: 39px; }
.card__body p { font-size: 16px; line-height: 1.5; color: var(--grey); }

/* ---------- proof card ---------- */
.proof { background: #fff; border-radius: 0 var(--r) 0 0; overflow: hidden; }
.proof__img { height: 420px; background: var(--grey-card); position: relative; overflow: hidden; }
.proof__img img { width: 100%; height: 100%; object-fit: cover; }
.proof__body { padding: 36px 36px 32px; }
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; background: var(--black); color: #fff; border-radius: 0 14px 0 0; }
.proof__title { font-size: 34px; line-height: 1.16; letter-spacing: -0.01em; font-weight: 300; margin-top: 16px; }
.proof__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--grey); text-transform: uppercase; font-weight: 500; margin-top: 9px; }
.proof__text { margin-top: 16px; display: grid; gap: 12px; }
.proof__text p { font-size: 16px; line-height: 1.5; color: var(--grey); max-width: 1208px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.stats .t-stat { font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--blue); }
.stats .t-small { margin-top: 3px; }
.proof__foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--grey); }
.proof__foot .glyph { color: var(--blue); width: 14px; height: 14px; flex: none; margin-top: 3px; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } .proof__img { height: 240px; } }

/* ---------- founders / operators ---------- */
.op { position: relative; background: var(--blue); color: #fff; border-radius: 0 var(--r) 0 0; padding: 36px; min-height: 392px; display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.op__img { width: 260px; height: 200px; background: var(--grey-card); border-radius: 0 16px 0 0; overflow: hidden; }
.op__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.op__head h3 { font-size: 22px; line-height: 1.3; font-weight: 400; }
.op__head .op__role { display: block; font-size: 16px; line-height: 1.5; margin-top: 7px; }
.op__bio { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; max-width: 544px; margin-top: 28px; }
@media (max-width: 640px) { .op { grid-template-columns: 1fr; padding: 28px; } .op__img { width: 100%; height: 220px; } }

.founder { background: var(--blue); color: #fff; border-radius: 0 var(--r) 0 0; overflow: hidden; display: flex; flex-direction: column; }
.founder__img { height: 280px; background: var(--grey-card); overflow: hidden; }
.founder__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(100%) contrast(1.05); transition: filter .8s var(--ease-out); }
.founder:hover .founder__img img { filter: grayscale(0%); }
.founder__body { padding: 36px 36px 36px; display: grid; gap: 0; }
.founder__body h3 { font-size: 34px; line-height: 1.16; letter-spacing: -0.01em; font-weight: 300; }
.founder__body .label { color: #fff; margin-top: 9px; }
.founder__body p { font-size: 16px; line-height: 1.5; margin-top: 22px; max-width: 544px; }
.founder__body .li { margin-top: 32px; }
.li { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--blue); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; transition: transform .3s var(--ease-out); }
.li:hover { transform: translateY(-2px); }
.founder .li { background: #fff; color: var(--blue); }

.person { display: grid; gap: 0; }
.person__img { aspect-ratio: 296 / 340; background: var(--grey-card); overflow: hidden; }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: grayscale(100%); transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out); }
.person:hover .person__img img { filter: grayscale(0); transform: scale(1.03); }
.person h3 { font-size: 22px; line-height: 1.3; font-weight: 400; margin-top: 12px; }
.person .person__role { font-size: 14px; line-height: 1.5; color: var(--grey); margin-top: 12px; }
.person .cred { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--blue); margin-top: 12px; }
.person .li { margin-top: 12px; }

/* ---------- bands ---------- */
.band { position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.band__in { display: grid; grid-template-columns: 1fr 560px; min-height: 480px; }
.band__copy { padding: 150px var(--pad-x) 68px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; }
.band__copy .t-heading { color: #fff; max-width: 700px; }
.band__img { position: relative; background: var(--grey-card); overflow: hidden; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band--full .band__in { grid-template-columns: 1fr; min-height: 420px; }
.band--full .band__copy { padding: 146px var(--pad-x) 68px; }
.band--full .band__copy .t-heading { max-width: 760px; }
@media (max-width: 900px) { .band__in { grid-template-columns: 1fr; min-height: 0; } .band__copy, .band--full .band__copy { padding: 64px var(--pad-x) 56px; } .band__img { min-height: 260px; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 12px; }
.form--contact { gap: 16px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 14px 20px; height: 52px; border-radius: 0; appearance: none; -webkit-appearance: none; transition: border-color .3s, box-shadow .3s; }
.form--contact .field input, .form--contact .field select { height: 56px; padding: 16px 20px; }
.field textarea { min-height: 180px; height: auto; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--bp-tint); }
.field select { color: var(--grey); 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' fill='none' stroke='%230F151B' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; padding-right: 44px; }
.field select.has-value { color: var(--ink); }
.form__msg { font-size: 14px; color: var(--grey); min-height: 1.4em; }
.form__msg.is-error { color: #B21717; }
.form__msg.is-ok { color: var(--blue); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.subscribe { display: grid; grid-template-columns: 520px 1fr; gap: 80px; align-items: start; }
.subscribe .form { max-width: 680px; }
@media (max-width: 900px) { .subscribe { grid-template-columns: 1fr; gap: 32px; } }
.contact-split { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 440px); gap: 80px; align-items: start; margin-top: 48px; }
.direct { display: grid; gap: 32px; }
.direct .label { display: block; margin-bottom: 8px; }
.direct a, .direct span { font-size: 20px; line-height: 1.45; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.direct .arrow { width: 16px; height: 16px; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- footer (300 tall) ---------- */
.footer { background: var(--ink); color: #fff; }
.footer__in { display: grid; grid-template-columns: 1fr 240px 240px 240px; padding-block: 68px 60px; min-height: 300px; }
.footer__brand svg { height: 44px; width: auto; margin-top: 2px; }
.footer__tag { font-size: 34px; line-height: 1.16; letter-spacing: -0.01em; font-weight: 300; margin-top: 12px; }
.footer__mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-top: 12px; }
.footer__glyph { width: 24px; height: 24px; margin-top: 29px; color: #fff; }
.footer .label { color: #fff; display: block; margin-bottom: 14px; }
.footer__col a, .footer__col span { display: block; font-size: 16px; line-height: 24px; color: #fff; }
.footer__col a { transition: opacity .3s; } .footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__col .muted { color: #fff; }
@media (max-width: 900px) { .footer__in { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 56px 0; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- misc ---------- */
.rule { height: 1px; background: var(--line); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* compare: three columns with left rule, then table with blue 1AP column */
.fbc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; }
.fbc > div { border-left: 1px solid var(--blue); padding: 4px 0 0 24px; }
.fbc h3 { font-size: 34px; line-height: 1.16; font-weight: 300; letter-spacing: -0.01em; }
.fbc p { font-size: 16px; line-height: 1.5; color: var(--grey); margin-top: 12px; }
@media (max-width: 800px) { .fbc { grid-template-columns: 1fr; } }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.tbl th, .tbl td { text-align: left; padding: 26px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--grey); }
.tbl th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); font-weight: 500; padding: 26px 16px; }
.tbl td:first-child { color: var(--ink); }
.tbl .hl { background: var(--blue); color: #fff; font-size: 22px; line-height: 1.3; font-weight: 400; border-bottom-color: var(--blue); }
.tbl th.hl { font-family: var(--font-sans); font-size: 22px; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 400; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap .tbl { min-width: 860px; }

/* delta table (Three ways) */
.delta { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.delta th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); font-weight: 500; text-align: left; height: 40px; padding: 0; border-bottom: 1px solid var(--line); }
.delta td { height: 52px; padding: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.delta td:nth-child(2), .delta td:nth-child(3) { color: var(--grey); }
.delta td:last-child { color: var(--blue); font-size: 22px; font-weight: 400; }
.delta th:not(:first-child), .delta td:not(:first-child) { padding-left: 12px; }

/* accordion (FAQ) */
.acc { display: grid; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0 13px; text-align: left; font-size: 22px; line-height: 1.3; font-weight: 400; }
.acc__btn .pm { position: relative; width: 16px; height: 16px; flex: none; color: var(--blue); }
.acc__btn .pm::before, .acc__btn .pm::after { content: ""; position: absolute; background: currentColor; left: 0; top: 7px; width: 16px; height: 1.5px; transition: transform .4s var(--ease-out); }
.acc__btn .pm::after { transform: rotate(90deg); }
.acc__item.is-open .acc__btn .pm::after { transform: rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { max-width: 900px; color: var(--grey); padding-bottom: 32px; font-size: 16px; line-height: 25px; }

/* roles list + chips (40 tall, radius TR 20) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { height: 40px; padding: 0 22px; font-size: 14px; line-height: 21px; border: 1px solid var(--line); background: var(--paper); border-radius: 0 var(--r) 0 0; transition: background .3s, color .3s, border-color .3s; }
.chip.is-on, .chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.roles { border-top: 1px solid var(--line); margin-top: 32px; }
.role { display: grid; grid-template-columns: 1.6fr 1fr 1fr 28px; gap: 16px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: padding-left .4s var(--ease-out); }
.role:hover { padding-left: 8px; }
.role h3 { font-size: 22px; line-height: 1.3; font-weight: 400; }
.role span { font-size: 14px; line-height: 1.5; color: var(--grey); }
.role .arrow { color: var(--blue); width: 16px; height: 16px; justify-self: end; transition: transform .4s var(--ease-out); }
.role:hover .arrow { transform: translateX(4px); }
@media (max-width: 640px) { .role { grid-template-columns: 1fr 28px; } .role span { display: none; } }

/* news (approved NEWS frame) */
.featured { display: grid; grid-template-columns: 1fr 600px; background: var(--blue); color: #fff; border-radius: 0 var(--r) 0 0; overflow: hidden; min-height: 480px; }
.featured__copy { padding: 64px 48px 56px; display: flex; flex-direction: column; }
.featured__copy .label { color: #fff; }
.featured__copy .t-heading { color: #fff; margin-top: 26px; max-width: 560px; }
.featured__copy .textlink { color: #fff; margin-top: auto; padding-top: 40px; }
.featured__img { background: var(--grey-card); overflow: hidden; }
.featured__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .featured { grid-template-columns: 1fr; } .featured__img { min-height: 260px; order: -1; } }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: 32px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-card { display: grid; gap: 16px; align-content: start; color: var(--ink); }
.news-card__img { height: 240px; background: var(--grey-card); border-radius: 0 16px 0 0; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.news-card:hover .news-card__img img { transform: scale(1.04); }
.news-card h3 { font-size: 22px; line-height: 1.3; font-weight: 400; }
.news-card .read { font-size: 16px; line-height: 1.5; color: var(--grey); display: inline-flex; gap: 10px; align-items: center; }
.news-card .read .arrow { width: 14px; height: 14px; }

/* three-layer feature rows (copy 480 + fig 760) */
.layer { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 40px; align-items: center; }
.layer--rev { grid-template-columns: minmax(0, 1fr) 480px; }
.layer--rev > :first-child { order: 2; }
.layer__copy { display: grid; gap: 16px; max-width: 440px; }
.layer__copy .glyph { width: 24px; height: 24px; color: var(--blue); }
.layer__copy .t-h2 { margin-top: -2px; }
.layer__copy p { font-size: 16px; line-height: 1.5; color: var(--grey); }
.layer__fig { position: relative; height: 320px; --cell: 70px; }
.layer__fig svg { width: 100%; height: 100%; }
.layer__fig .t-annot { position: absolute; left: 16px; top: 16px; }
@media (max-width: 1000px) { .layer, .layer--rev { grid-template-columns: 1fr; } .layer--rev > :first-child { order: 0; } .layer__copy { max-width: none; } }

/* way rows (img 520 + copy 720) */
.way { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 40px; align-items: start; }
.way__img { height: 484px; background: var(--grey-card); position: relative; overflow: hidden; }
.way__img img { width: 100%; height: 100%; object-fit: cover; }
.way__body { display: grid; gap: 20px; max-width: 720px; }
.way__body h3 { font-size: 34px; line-height: 1.16; letter-spacing: -0.01em; font-weight: 300; }
.way__body .t-body-l { font-size: 20px; line-height: 1.45; color: var(--grey); }
.way__note { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--blue); }
.way__note .glyph { flex: none; margin-top: 4px; width: 14px; height: 14px; }
@media (max-width: 1000px) { .way { grid-template-columns: 1fr; } .way__img { height: 320px; } }

/* map */
.usmap { width: 100%; height: auto; }
.usmap path { fill: var(--facet-a); stroke: var(--paper); stroke-width: 1; transition: fill .6s var(--ease-out); }
.usmap path.on { fill: var(--blue); }
.map-wrap { position: absolute; inset: 10% 6% 8% 6%; display: flex; align-items: center; }
.map-wrap .usmap { width: 100%; height: 100%; }
.map-wrap .usmap path.on { animation: state-in 1.2s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .12s + .4s); }
@keyframes state-in { from { fill: var(--facet-a); } to { fill: var(--blue); } }

/* svg figure states */
.svg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--blue); font-weight: 500; }
svg .node { transition: transform .4s, fill .4s; transform-box: fill-box; transform-origin: center; }
svg.is-drawn .node { animation: node-pulse 2.6s ease-in-out infinite; }
svg.is-drawn .node:nth-child(odd) { animation-delay: -1.3s; }
@keyframes node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
svg .node.is-fault { fill: #B21717 !important; stroke: #B21717; animation: none; transform: scale(1.5); }
svg .fault-seg { transition: opacity .3s; } svg .fault-seg.is-fault { opacity: .15; }
svg .reroute { opacity: 0; }
svg.is-simplified .nL, svg.is-simplified .lL { opacity: .22; transition: opacity 1.2s var(--ease-out); }
svg .busline { stroke-width: 2.2; }
svg.plant .panel, svg.plant .hall polygon, svg.plant .batt polygon, svg.plant .sub polygon { fill: currentColor; fill-opacity: 0; transition: fill-opacity 1.2s var(--ease-out) 1.2s; }
svg.plant.is-drawn .panel { fill-opacity: .10; }
svg.plant.is-drawn .hall polygon:first-child { fill-opacity: .16; }
svg.plant.is-drawn .hall polygon { fill-opacity: .08; }
svg.plant.is-drawn .batt polygon { fill-opacity: .12; }
svg.plant.is-drawn .sub polygon { fill-opacity: .06; }

/* post body + preview bar */
.post-body { font-size: 18px; line-height: 1.6; color: var(--grey); display: grid; gap: 18px; max-width: 780px; }
.post-body h2 { font-size: 34px; letter-spacing: -0.01em; font-weight: 300; margin-top: 16px; color: var(--ink); }
.post-body h3 { font-size: 22px; font-weight: 400; margin-top: 8px; color: var(--ink); }
.post-body p { margin: 0; } .post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post-body img { max-width: 100%; height: auto; } .post-body blockquote { border-left: 1px solid var(--blue); padding-left: 20px; margin: 0; }
.post-body ul, .post-body ol { padding-left: 22px; list-style: revert; display: grid; gap: 6px; }
.post-body strong { font-weight: 500; color: var(--ink); }
.preview-bar { background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 12px; padding: 10px var(--pad-x); } .preview-bar a { color: #fff; text-decoration: underline; margin-left: 8px; }

.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.max-p { max-width: 62ch; }

/* MOTION: "blueprint field drawing itself in on load" — grid wipes in, then flares pop */
.bp[data-draw-grid], .hero__field.bp { background-image: none; }
.bp[data-draw-grid]::before, .hero__field.bp::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--bp-line) 1px, transparent 1px), linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
  background-size: var(--cell, 90px) var(--cell, 90px); background-position: var(--off, 0 0);
  clip-path: inset(0 100% 100% 0); }
.bp.is-in[data-draw-grid]::before, .hero__field.bp.is-in::before { animation: grid-wipe 1.6s var(--ease-out) forwards; }
@keyframes grid-wipe { 40% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
.bp .bp__flares { z-index: 1; }
/* MOTION: "rotating slowly" (mounts) */
.rotor { transform-box: fill-box; transform-origin: center; }
svg.is-drawn .rotor-a { animation: rotor 14s ease-in-out infinite; }
svg.is-drawn .rotor-b { animation: rotor 16s ease-in-out infinite reverse; }
@keyframes rotor { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rotor { animation: none !important; } .bp::before { animation: none !important; clip-path: none !important; } }