/* ============================================================
   BeatQuantum — shared stylesheet
   Prove First · Speak Later
   Dark scheme only. Colours meet WCAG 2.1 AA contrast.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS  (served from /assets/fonts/)
   Fraunces        — variable display face (upright + italic),
                     one file each covers all weights 400–600.
   IBM Plex Sans   — body text: 300 / 400 / 500.
   IBM Plex Mono   — labels, nav, buttons: 400 / 500.
   All SIL Open Font License. font-display:swap avoids invisible
   text while the face loads.
   ============================================================ */

/* ---- Fraunces (variable, upright) ---- */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 600;              /* variable weight range used */
  font-display:swap;
  src:url("/assets/fonts/Fraunces-Variable.woff2") format("woff2-variations");
}
/* ---- Fraunces (variable, italic) ---- */
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fonts/Fraunces-Italic-Variable.woff2") format("woff2-variations");
}

/* ---- IBM Plex Sans 300 / 400 / 500 ---- */
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

/* ---- IBM Plex Mono 400 / 500 ---- */
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

:root{
  --bg:#0d0d0f;
  --bg-raised:#141417;
  --ink:#ededed;                 /* 16.6:1 on bg */
  --ink-soft:#a9a9ad;            /*  8.3:1 on bg */
  --ink-faint:#8a8a90;           /*  5.7:1 on bg — small muted text (was #6f6f74, failed AA) */
  --line:#26262b;
  --line-soft:#1c1c20;

  /* --- brand accent system ---
     --accent       brand red. Use for FILLS (buttons, badge bg) and
                    LARGE display accents only (clears 3:1 large-text).
     --accent-text  lighter tint for SMALL text, labels, links, icons
                    (6.9:1 on bg — clears 4.5:1 AA normal text).
     --accent-dim   border/rule red, perceivable as non-text UI
                    (3.3:1 on bg — clears 3:1 AA non-text). */
  --accent:#c92000;
  --accent-text:#ff6a4d;
  --accent-dim:#c52000;
  --accent-hover:#e02400;        /* button hover fill; white text = 4.8:1 */
  --on-accent:#ffffff;           /* text/icons on a brand-red fill = 5.7:1 */

  --display:"Fraunces",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --maxw:1100px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* atmosphere */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,32,0,0.07), transparent 60%),
    radial-gradient(100% 60% at 80% 120%, rgba(122,20,0,0.06), transparent 55%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- accessibility ----------
   Single global focus-visible ring (accent-text = 6.9:1, clears 3:1).
   Keyboard-only via :focus-visible, so mouse clicks stay clean. */
:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
  border-radius:2px;
}
/* Skip link: off-screen until focused, then pinned top-left. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--bg-raised);
  color:var(--ink);
  font-family:var(--mono);
  font-size:0.8rem;
  padding:12px 18px;
  border:1px solid var(--accent-dim);
  border-radius:2px;
  text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}
/* Centring helper (replaces inline style on the data-room gate). */
.wrap--center{display:flex;justify-content:center}
/* Platforms — supporting-evidence / NDA note row. */
.evidence-note{
  margin-top:40px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  color:var(--ink-faint);
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.04em;
}
.evidence-note svg{stroke:var(--accent-dim);flex:none}
.evidence-note a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
.evidence-note a:hover,.evidence-note a:focus-visible{color:#ff8a72}

/* ---------- header / nav ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(13,13,15,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  gap:24px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:500;
  font-size:1.3rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.brand-logo{
  display:block;
  width:28px;
  height:28px;
  flex:none;             /* never shrink/stretch with the flex row */
}
.brand-text{display:inline-block}
.brand .beat{color:var(--ink)}
.brand .quantum{color:var(--accent-text)}

/* brand lockup + readiness motif — the social "risk to resilience" mark
   (four dots and one square, red to green); balances the brand red in the header */
.brand-lockup{display:inline-flex;align-items:center;gap:14px}
.readiness{display:inline-flex;align-items:center;line-height:0}
.readiness svg{display:block;height:9px;width:auto}
/* Show the motif on phones (menu collapses below 720, leaving room) and on wide
   desktops. Hide it only in the 721-960 band, where the full six-item menu plus the
   brand and dots would crowd the nav, and on the very narrowest phones. */
@media(min-width:721px) and (max-width:960px){.readiness{display:none}}
@media(max-width:360px){.readiness{display:none}}

.menu{
  display:flex;
  align-items:center;
  gap:30px;
}
.menu a{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.menu a:hover,.menu a:focus-visible,.menu a.active{color:var(--accent-text)}
.menu .lock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft);
}
.menu .lock:hover,.menu .lock:focus-visible{color:var(--accent-text)}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:0.8rem}

/* ---------- generic page header ---------- */
.page-head{
  padding:96px 0 64px;
  border-bottom:1px solid var(--line-soft);
}
.page-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:24px;
}
.page-head h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  color:#f6f6f4;
  max-width:18ch;
}
.page-head h1 em{font-style:italic;color:var(--accent)}
.page-head .lede{
  margin-top:28px;
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:56ch;
  line-height:1.55;
}

/* ---------- hero (landing) ---------- */
.hero{
  padding:104px 0 86px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:28px;
  opacity:0;
  animation:rise .7s ease forwards;
}
h1.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  max-width:16ch;
  color:#f6f6f4;
  opacity:0;
  animation:rise .8s ease .08s forwards;
}
h1.hero-title em{font-style:italic;color:var(--accent)}
.hero-sub{
  margin-top:34px;
  font-size:1.18rem;
  font-weight:300;
  color:var(--ink-soft);
  max-width:52ch;
  line-height:1.55;
  opacity:0;
  animation:rise .8s ease .18s forwards;
}
.hero-belief{
  margin-top:30px;
  padding-left:22px;
  border-left:2px solid var(--accent-dim);
  font-family:var(--display);
  font-style:italic;
  font-size:1.12rem;
  color:var(--ink);
  max-width:48ch;
  opacity:0;
  animation:rise .8s ease .28s forwards;
}
.hero-cta{
  margin-top:46px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  opacity:0;
  animation:rise .8s ease .38s forwards;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.06em;
  font-weight:500;
  text-decoration:none;
  padding:15px 26px;
  border-radius:2px;
  border:none;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -12px rgba(201,32,0,0.5);
}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{
  background:var(--bg-raised);
  border-color:var(--accent-dim);
  box-shadow:none;
  color:var(--accent-text);
}
.cta-note{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.04em;
  color:var(--ink-faint);
}

/* ---------- sections ---------- */
section{padding:72px 0;border-bottom:1px solid var(--line-soft)}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:44px;
}
.sec-num{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--accent-text);
  letter-spacing:0.1em;
}
.sec-title{
  font-family:var(--display);
  font-weight:500;
  font-size:1.7rem;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.sec-lead{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:60ch;
  margin:-28px 0 44px;
}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.cell{background:var(--bg);padding:30px 28px;transition:background .3s ease}
.cell:hover{background:var(--bg-raised)}
.cell .k{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--accent-text);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:14px;
}
.cell .h{
  font-family:var(--display);
  font-weight:500;
  font-size:1.12rem;
  color:var(--ink);
  margin-bottom:9px;
  line-height:1.25;
}
.cell .d{font-size:0.94rem;color:var(--ink-soft);line-height:1.5}
.cell ul{list-style:none;margin-top:14px}
.cell ul li{
  font-size:0.88rem;
  color:var(--ink-soft);
  padding:6px 0 6px 18px;
  position:relative;
}
.cell ul li::before{
  content:"";
  position:absolute;
  left:0;top:14px;
  width:5px;height:5px;
  background:var(--accent-dim);
  border-radius:50%;
}

/* flagged cell (PQC edge) */
.cell.flag{
  background:linear-gradient(180deg, rgba(201,32,0,0.07), var(--bg) 70%);
  position:relative;
}
.cell.flag::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:var(--accent);
}
.badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-accent);
  background:var(--accent);
  padding:3px 8px;
  border-radius:2px;
  margin-bottom:14px;
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.step{background:var(--bg);padding:32px 28px;position:relative}
.step .phase{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.step .phase .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.step .h{font-family:var(--display);font-weight:500;font-size:1.12rem;margin-bottom:8px;color:var(--ink)}
.step .d{font-size:0.94rem;color:var(--ink-soft)}

/* ---------- think pillars ---------- */
.think{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.think .pillar{border-top:1px solid var(--line);padding-top:24px}
.think .label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:16px;
}
.think .statement{
  font-family:var(--display);
  font-weight:400;
  font-size:1.32rem;
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-0.01em;
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about .lead-stmt{
  font-family:var(--display);
  font-weight:400;
  font-size:1.55rem;
  line-height:1.4;
  letter-spacing:-0.01em;
  color:#f4f4f2;
}
.about .lead-stmt em{font-style:italic;color:var(--accent)}
.proof-list{list-style:none}
.proof-list li{
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  display:flex;gap:16px;
  font-size:1rem;color:var(--ink-soft);line-height:1.5;
}
.proof-list li:first-child{padding-top:0}
.proof-list li:last-child{border-bottom:none}
.proof-list .mk{font-family:var(--mono);font-size:0.72rem;color:var(--accent-text);flex:none;padding-top:4px}
.proof-list strong{color:var(--ink);font-weight:500}
.founder{margin-top:38px;padding-top:28px;border-top:1px solid var(--line);font-size:1rem;color:var(--ink-soft)}
.founder a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
.founder a:hover,.founder a:focus-visible{color:#ff8a72}
.founder .name{font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--ink);display:block;margin-bottom:6px}

/* ---------- sectors band ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.sector{background:var(--bg);padding:26px 24px;transition:background .3s ease}
.sector:hover{background:var(--bg-raised)}
.sector .name{
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:8px;
}
.sector .desc{font-size:0.88rem;color:var(--ink-soft);line-height:1.45}

/* ---------- frameworks ---------- */
.framework{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px;
  align-items:center;
  padding:34px 0;
  border-bottom:1px solid var(--line-soft);
}
.framework:last-of-type{border-bottom:none}
.framework .code{
  font-family:var(--mono);
  font-size:0.9rem;
  letter-spacing:0.1em;
  color:var(--accent-text);
  font-weight:500;
  white-space:nowrap;
}
.framework .body .ft{
  font-family:var(--display);
  font-weight:500;
  font-size:1.3rem;
  color:var(--ink);
  margin-bottom:7px;
  letter-spacing:-0.01em;
}
.framework .body .fd{font-size:0.98rem;color:var(--ink-soft);max-width:60ch;line-height:1.5}
.framework .gated{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.framework .gated svg{width:13px;height:13px;stroke:var(--accent-text)}

/* ---------- data room gate ---------- */
.gate{
  min-height:72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 0;
}
.gate-card{
  width:100%;
  max-width:440px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:4px;
  padding:48px 42px;
  position:relative;
}
.gate-card::before{
  content:"";
  position:absolute;top:0;left:0;
  width:100%;height:2px;background:var(--accent);
  border-radius:4px 4px 0 0;
}
.gate-lock{
  width:38px;height:38px;
  border:1px solid var(--accent-dim);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;
}
.gate-lock svg{width:17px;height:17px;stroke:var(--accent-text)}
.gate-card h1{
  font-family:var(--display);
  font-weight:500;
  font-size:1.65rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:14px;
}
.gate-card p{font-size:0.96rem;color:var(--ink-soft);line-height:1.55;margin-bottom:14px}
.gate-card .field{margin:22px 0 16px}
.gate-card label{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.gate-card input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink);
  font-family:var(--mono);
  font-size:0.9rem;
  padding:13px 14px;
  transition:border-color .2s ease;
}
.gate-card input::placeholder{color:var(--ink-faint)}
.gate-card input:focus{border-color:var(--accent-dim)}
.gate-card .btn{width:100%;justify-content:center;margin-top:6px}
.gate-note{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-size:0.88rem;
  color:var(--ink-faint);
  line-height:1.5;
}
.gate-note a{color:var(--accent-text);text-decoration:none}
.gate-note a:hover,.gate-note a:focus-visible{color:#ff8a72}
.gate-err{
  font-family:var(--mono);
  font-size:0.74rem;
  color:#ff8a72;
  margin-top:12px;
  min-height:1em;
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.contact-card{background:var(--bg);padding:40px 34px;transition:background .3s ease}
.contact-card:hover{background:var(--bg-raised)}
.contact-card .ct{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:16px;
}
.contact-card .ch{
  font-family:var(--display);
  font-weight:500;
  font-size:1.3rem;
  color:var(--ink);
  margin-bottom:12px;
}
.contact-card p{font-size:0.98rem;color:var(--ink-soft);line-height:1.55;margin-bottom:22px}
.contact-card a.mail{
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--accent-text);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
}
.contact-card a.mail:hover,.contact-card a.mail:focus-visible{color:#ff8a72}

/* ---------- closing CTA ---------- */
.close{
  padding:92px 0;
  text-align:center;
  border-bottom:none;
  background:radial-gradient(80% 120% at 50% 0%, rgba(201,32,0,0.08), transparent 60%);
}
.close h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.2rem);
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:30px;
  color:#f6f6f4;
}
.close h2 em{font-style:italic;color:var(--accent)}
.close p{color:var(--ink-soft);max-width:46ch;margin:0 auto 40px;font-size:1.08rem}

/* ---------- footer ---------- */
footer{padding:40px 0;border-top:1px solid var(--line-soft)}
.foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;color:var(--ink-faint);
}
.foot .prove{color:var(--ink-soft);letter-spacing:0.18em;text-transform:uppercase}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--accent-text)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- animation ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- landing: Centre of Excellence lead band ---------- */
.coe-hero{
  padding:88px 0 76px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(201,32,0,0.07), transparent 72%);
}
.coe-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:24px;
}
.coe-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.3rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:#f6f6f4;
  max-width:22ch;
}
.coe-title em{font-style:italic;color:var(--accent)}
.coe-sub{
  margin-top:24px;
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:62ch;
  line-height:1.55;
}
.coe-grid{margin-top:46px}
.coe-cta{margin-top:42px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- coe: engineering stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.stat{background:var(--bg);padding:34px 28px}
.stat .stat-num{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1;
  letter-spacing:-0.02em;
  color:#f6f6f4;
}
.stat .stat-label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-top:16px;
}
.stat .stat-breakdown{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-top:10px;
  line-height:1.5;
}

/* two-up commitments (cryptoagility); also carries .steps so it collapses via the .steps media rules */
.steps-2{grid-template-columns:repeat(2,1fr)}

/* candid limitations: muted marker, not the accent dot */
.cell.limit ul li::before{background:var(--ink-faint)}

/* ---------- figures: screenshot exhibit, founder portrait, comparison chart ----------
   Used sparingly. Each sits inside the dark, hairline-bordered system as an exhibit,
   never a full-bleed banner. */
.shot{
  margin:44px auto 0;
  max-width:760px;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  background:var(--bg-raised);
}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.03em;
  color:var(--ink-faint);
  line-height:1.5;
  padding:12px 16px;
  border-top:1px solid var(--line-soft);
}
.portrait{
  display:block;
  width:132px;
  height:auto;
  border:1px solid var(--line);
  border-radius:3px;
  margin-bottom:20px;
}
.chart{
  margin:40px 0 0;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-raised);
}
.chart svg{display:block;width:100%;height:auto;padding:26px 28px 12px}
.chart figcaption{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.03em;
  color:var(--ink-faint);
  line-height:1.5;
  padding:14px 28px;
  border-top:1px solid var(--line-soft);
}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .grid-3,.grid-4,.steps,.think,.sectors,.stats{grid-template-columns:1fr 1fr}
  .about,.contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-grid{gap:1px}
}
@media(max-width:720px){
  .menu{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--bg-raised);
    border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
  }
  .menu.open{display:flex}
  .menu a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .menu-toggle{display:block}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .grid-3,.grid-4,.grid-2,.steps,.think,.sectors,.stats{grid-template-columns:1fr}
  .hero{padding:72px 0 64px}
  section{padding:54px 0}
  .framework{grid-template-columns:1fr;gap:12px}
  .framework .gated{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  /* Hero intro elements rely on the `rise` animation to fade in from
     opacity:0. With animations disabled they would stay invisible, leaving
     the hero blank (logo/nav visible, then a screen of empty space). Restore
     them here exactly as .reveal above. */
  .eyebrow,h1.hero-title,.hero-sub,.hero-belief,.hero-cta{opacity:1;transform:none}
}