/* ============================================================
   QI LAB — "THE BRIEFING ROOM"
   Design system: dossier-grade dark navy, gold accent, redaction
   motif. Fraunces (display) + IBM Plex Sans (body) + IBM Plex Mono
   (data/labels). Built for CIO/CDO buyers in regulated GCC markets.
   ============================================================ */

:root {
  --navy-950: #05070d;
  --navy-900: #0a1226;
  --navy-800: #101d3a;
  --navy-700: #16305e;
  --navy-600: #1a3a6b;
  --gold: #c9a84c;
  --gold-bright: #e6c369;
  --gold-dim: rgba(201, 168, 76, 0.34);
  --gold-deep: #8a6a1f;
  --paper: #f2ede1;
  --ink: #eef1f7;
  --ink-dim: #aab2c4;
  --muted: #6f7996;
  --line: rgba(201, 168, 76, 0.22);
  --line-soft: rgba(238, 241, 247, 0.08);
  --redact: #030509;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--navy-950);
}

body {
  font-family: var(--font-body);
  background: var(--navy-950);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain + vignette atmosphere, applied once to body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,168,76,0.09), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(26,58,107,0.4), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
}
h1 em, h2 em, .display em { font-style: italic; color: var(--gold-bright); font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

p.lead { font-size: 1.15rem; color: var(--ink-dim); max-width: 56ch; }
.muted { color: var(--muted); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 14px 0;
  background: rgba(5, 7, 13, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { height: 28px; width: auto; }
.nav-brand span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a:not(.btn) {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-950);
}
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(201,168,76,0.55); }
.btn-ghost {
  border-color: var(--line-soft);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.btn-arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Corner-bracket frame (dossier motif) ---------- */
.bracket {
  position: relative;
}
.bracket::before, .bracket::after,
.bracket .bk-tl, .bracket .bk-br {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--gold-dim);
  opacity: 0;
  transition: opacity 0.4s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease);
}
.bracket::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.bracket::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.bracket:hover::before, .bracket:hover::after { opacity: 1; width: 22px; height: 22px; }

/* ---------- Redaction reveal (scroll animation) ---------- */
/* padding-bottom + matching negative margin gives descenders (y, g, p) room
   inside the overflow:hidden box without shifting line spacing below it —
   fixes italic Fraunces letters like the "y" in "Compliantly." getting clipped */
.redact-wrap { position: relative; overflow: hidden; display: inline-block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

.redact-bar {
  position: absolute;
  inset: 0;
  background: var(--redact);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.65s var(--ease);
  z-index: 3;
}
.redact-bar.wiped { transform: scaleX(0); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 140px 0 80px;
  /* Solid colour, not a gradient blend — reverted after the light/gradient
     experiment produced a muddy diagonal wash. background-color + a flat
     hairline grid pattern is the whole visual; no colour blending. */
  background-color: var(--navy-950);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line-soft) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line-soft) 40px);
  animation: hero-grid-drift 90s linear infinite;
}
.hero .container { width: 100%; }

/* Fail-safe animation: ONLY background-position (grid drift) and opacity
   (dot pulse) are animated — no filter/blur, no transform+blur combos, no
   large translucent colour blobs. Both properties are among the most widely
   and consistently supported animatable properties across browsers, so this
   renders the same everywhere without relying on GPU compositing quirks.
   z-index:1 keeps this above the page's fixed grain/vignette overlays
   (body::before/::after) — at z-index:0 it was rendering underneath them
   and effectively invisible. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 16% 26%, rgba(201,168,76,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 83% 20%, rgba(201,168,76,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 74%, rgba(238,241,247,0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 37% 84%, rgba(201,168,76,0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 58%, rgba(238,241,247,0.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 62%, rgba(238,241,247,0.2), transparent 60%);
  animation: hero-dots-pulse 7s ease-in-out infinite;
}
.hero .container { position: relative; z-index: 2; }

@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 -400px, -400px 0; }
}
@keyframes hero-dots-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero::after { animation: none; }
}

.hero-inner { max-width: 880px; }
.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  margin: 22px 0 26px;
}
.hero .lead { font-size: 1.25rem; margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- Sections ---------- */
section { position: relative; z-index: 2; padding: 120px 0; }
.section-tight { padding: 80px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top: 16px; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold-dim) 82%, transparent); }

/* ---------- Light paper section (brand light-grey component) ---------- */
/* <section> already carries z-index:2 above the global dark grain/vignette
   overlays (see body::before/::after), so this paints as a true clean light
   band, not a dark-tinted one. Use to break up long dark stretches. */
.section-paper { background: var(--paper); }
.section-paper .eyebrow, .section-paper .eyebrow::before { color: var(--navy-700); }
.section-paper .eyebrow::before { background: var(--navy-700); }
.section-paper h2, .section-paper h3, .section-paper .display { color: var(--navy-950); }
.section-paper p, .section-paper p.lead, .section-paper .credential-list li { color: rgba(10,18,38,0.7); }
.section-paper .muted { color: rgba(10,18,38,0.5); }
.section-paper blockquote, .section-paper .why-grid blockquote { color: var(--navy-950); border-left-color: var(--gold); }
.section-paper .credential-list li { border-bottom-color: rgba(10,18,38,0.12); }
.section-paper .credential-list li span:first-child { color: var(--navy-700); }
.section-paper .btn-ghost { border-color: rgba(10,18,38,0.22); color: var(--navy-950); }
.section-paper .btn-ghost:hover { border-color: var(--gold); color: var(--navy-700); background: rgba(201,168,76,0.08); }

/* ---------- Identity fork ---------- */
.fork {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
}
.fork-card {
  padding: 36px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
}
.fork-card.bad { color: var(--muted); }
.fork-card.good { border-color: var(--gold-dim); }
.fork-card p { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.45; }
.fork-or {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}
@media (max-width: 760px) {
  .fork { grid-template-columns: 1fr; }
  .fork-or { padding: 4px 0; }
}

/* ---------- Why this exists ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.why-grid blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 28px;
}
.credential-list { list-style: none; margin-top: 28px; }
.credential-list li {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 12px;
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Proof strip ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.proof-card {
  background: var(--navy-950);
  padding: 32px 26px;
  position: relative;
}
.proof-ref {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 18px;
}
.proof-num {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: -0.01em;
}
.proof-client {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- Way cards (Three Ways to Work With Me — overview, no pricing) ---------- */
.way-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.way-card {
  border: 1px solid var(--line-soft);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--navy-900);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.way-card:hover { transform: translateY(-6px); border-color: var(--gold-dim); }
.way-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin-top: 2px; }
.way-price { font-family: var(--font-mono); font-size: 0.92rem; color: var(--gold-bright); }
.way-desc { font-size: 0.88rem; color: var(--ink-dim); flex: 1; }
.way-link { font-size: 0.8rem; font-weight: 600; color: var(--gold); margin-top: auto; }
@media (max-width: 860px) { .way-grid { grid-template-columns: 1fr; } }

/* ---------- Tier cards (detail grid — supports 4 or 6 items) ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tier-grid.tier-grid-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .tier-grid.tier-grid-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tier-grid.tier-grid-6 { grid-template-columns: 1fr; } }
.tier-card {
  border: 1px solid var(--line-soft);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  background: var(--navy-900);
}
.tier-card:hover { transform: translateY(-6px); border-color: var(--gold-dim); }
.tier-card.featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  box-shadow: 0 20px 60px -20px rgba(201,168,76,0.25);
}
.tier-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.tier-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.tier-price { font-family: var(--font-mono); font-size: 1.1rem; color: var(--ink); }
.tier-period { font-size: 0.76rem; color: var(--muted); }
.tier-desc { font-size: 0.85rem; color: var(--ink-dim); flex: 1; }
.tier-link { font-size: 0.8rem; font-weight: 600; color: var(--gold); margin-top: auto; }
@media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---------- Qualification fork ---------- */
.qual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.qual-col { padding: 36px; background: var(--navy-950); }
.qual-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.qual-col.out .qual-label { color: var(--muted); }
.qual-col.in .qual-label { color: var(--gold); }
.qual-list { list-style: none; }
.qual-list li { font-size: 0.92rem; padding: 9px 0; display: flex; gap: 12px; color: var(--ink-dim); }
.qual-col.in .qual-list li { color: var(--ink); }
.qual-mark { font-family: var(--font-mono); flex-shrink: 0; }
.qual-col.out .qual-mark { color: var(--muted); }
.qual-col.in .qual-mark { color: var(--gold); }
@media (max-width: 760px) { .qual-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  border: 1px solid var(--gold-dim);
  padding: 64px 56px;
  text-align: center;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201,168,76,0.08), transparent 70%);
}
.cta-band h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cta-band p { margin: 18px auto 32px; }
.cta-steps { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 40px; }
.cta-step {
  padding: 16px 24px;
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  min-width: 200px;
}
.cta-step b { display: block; color: var(--gold); font-size: 0.65rem; letter-spacing: 0.14em; margin-bottom: 6px; }

/* ---------- CTA band — light paper variant ---------- */
.cta-band.on-paper {
  background: var(--paper);
  border-color: var(--gold);
}
.cta-band.on-paper .eyebrow, .cta-band.on-paper .eyebrow::before { color: var(--navy-700); }
.cta-band.on-paper .eyebrow::before { background: var(--navy-700); }
.cta-band.on-paper h2 { color: var(--navy-950); }
.cta-band.on-paper p.lead { color: rgba(10,18,38,0.72); }
.cta-band.on-paper .cta-step { border-color: rgba(10,18,38,0.16); color: rgba(10,18,38,0.68); }
.cta-band.on-paper .cta-step b { color: var(--navy-700); }

/* ---------- Footer ---------- */
footer { padding: 56px 0 40px; border-top: 1px solid var(--line-soft); }
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { height: 22px; }
.footer-brand span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 0.8rem; color: var(--ink-dim); }
.footer-links a:hover { color: var(--gold); }
.footer-legal { margin-top: 24px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.05em; }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--gold);
  z-index: 200;
  width: 0%;
  transition: width 0.1s linear;
}

/* ---------- Mobile nav ---------- */
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 0; top: 0; background: var(--navy-950); flex-direction: column; justify-content: center; align-items: center; gap: 32px; transform: translateY(-100%); transition: transform 0.4s var(--ease); }
  .nav-links.open { transform: translateY(0); }
  .nav-links a:not(.btn) { font-size: 1.3rem; }
  .nav-toggle { display: block; background: none; border: none; color: var(--ink); z-index: 101; }
}

/* Utility */
.text-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ============================================================
   INTERIOR PAGES — shared components
   ============================================================ */

/* ---------- Page hero (compact, for non-home pages) ---------- */
.page-hero {
  padding: 168px 0 72px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(5,7,13,0) 0%, var(--navy-950) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line-soft) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line-soft) 40px);
}
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin: 18px 0 0; max-width: 760px; }
.page-hero .lead { margin-top: 20px; }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- Nav active state ---------- */
.nav-links a.active:not(.btn) { color: var(--gold); }
.nav-links a.active:not(.btn)::after { width: 100%; }

/* ---------- Portrait (duotone treatment) ---------- */
.portrait-frame {
  position: relative;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.portrait-frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}
.portrait-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,18,38,0.15), rgba(5,7,13,0.75) 85%), var(--navy-600);
  mix-blend-mode: color;
}
.portrait-frame::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border: 1px solid var(--gold-dim);
  margin: 14px;
  pointer-events: none;
}
.portrait-cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 14px;
  text-transform: uppercase;
}

/* ---------- About grid ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- IP cards (Built, Not Proposed) ---------- */
.ip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.ip-card { background: var(--navy-950); padding: 28px; }
.ip-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); display: inline-block; padding: 3px 8px; margin-bottom: 12px; }
.ip-name { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.ip-desc { font-size: 0.84rem; color: var(--ink-dim); }
@media (max-width: 700px) { .ip-grid { grid-template-columns: 1fr; } }

/* ---------- Tier detail rows (How I Work) ---------- */
.tier-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 100px;
}
.tier-row:first-of-type { padding-top: 0; }
.tier-row-meta { position: sticky; top: 110px; align-self: start; }
.tier-row-name { font-family: var(--font-display); font-size: 1.6rem; margin: 14px 0 8px; }
.tier-row-price { font-family: var(--font-mono); color: var(--gold-bright); font-size: 1.05rem; }
.tier-row-period { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.tier-row-body p.lead { margin-bottom: 20px; }
.tier-row-features { list-style: none; margin-top: 20px; }
.tier-row-features li { font-size: 0.9rem; padding: 10px 0; border-top: 1px solid var(--line-soft); display: flex; gap: 12px; color: var(--ink-dim); }
.tier-row-features li::before { content: "◆"; color: var(--gold); font-size: 0.55rem; margin-top: 5px; }
.guarantee-note { margin-top: 20px; padding: 14px 18px; border-left: 2px solid var(--gold); background: rgba(201,168,76,0.06); font-size: 0.85rem; color: var(--ink-dim); }
.scope-note { margin-top: 20px; padding: 14px 18px; border-left: 2px solid var(--muted); background: rgba(255,255,255,0.03); font-size: 0.85rem; color: var(--ink-dim); }
@media (max-width: 760px) {
  .tier-row { grid-template-columns: 1fr; gap: 20px; }
  .tier-row-meta { position: static; }
}

/* ---------- Rate card mini-table (Fractional CAIO allocation tiers) ---------- */
.rate-list { margin-top: 22px; border-top: 1px solid var(--line-soft); }
.rate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rate-row-name { font-size: 0.9rem; color: var(--ink); }
.rate-row-name span { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.rate-row-price { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold-bright); white-space: nowrap; }
@media (max-width: 480px) { .rate-row { flex-direction: column; gap: 4px; } }

/* ---------- Capability programme tracks (General / Technical / Executive) ---------- */
.enable-tracks { margin-top: 8px; display: grid; gap: 26px; }
.enable-track-name { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.enable-format { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.enable-format-name { font-size: 0.9rem; color: var(--ink); }
.enable-format-name span { display: block; font-size: 0.78rem; color: var(--ink-dim); margin-top: 2px; }
.enable-format-price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-dim); white-space: nowrap; text-align: right; }
@media (max-width: 480px) {
  .enable-format { flex-direction: column; gap: 4px; }
  .enable-format-price { text-align: left; }
}

/* ---------- In-page quick-nav (mobile-friendly jump links for long detail pages) ---------- */
.quicknav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 6px;
  margin-top: 32px;
  scrollbar-width: none;
}
.quicknav::-webkit-scrollbar { display: none; }
.quicknav a {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border: 1px solid var(--line-soft);
  padding: 8px 16px;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.quicknav a:hover, .quicknav a.active { border-color: var(--gold); color: var(--gold-bright); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); padding: 26px 0; }
.faq-q { font-family: var(--font-display); font-size: 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; }
.faq-q::after { content: "+"; font-family: var(--font-mono); color: var(--gold); font-size: 1.2rem; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { font-size: 0.92rem; color: var(--ink-dim); max-width: 68ch; max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), margin 0.4s var(--ease); }
.faq-item.open .faq-a { max-height: 300px; margin-top: 16px; }

/* ---------- Case studies (Proof page) ---------- */
.case {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--line-soft);
}
.case:last-child { border-bottom: 1px solid var(--line-soft); }
.case-meta { font-family: var(--font-mono); }
.case-ref { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); }
.case-client { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-top: 10px; line-height: 1.25; }
.case-body dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px 20px; }
.case-body dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); padding-top: 3px; }
.case-body dd { font-size: 0.92rem; color: var(--ink-dim); }
.case-result { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-soft); font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold-bright); }
@media (max-width: 760px) { .case { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Field note (buyer language, unattributed) ---------- */
.field-note {
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold);
  padding: 28px 32px;
  margin-top: 8px;
}
.field-note-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.field-note p { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink); line-height: 1.5; }
.field-note-source { margin-top: 14px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }

/* ---------- Contact channels ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.channel-card { background: var(--navy-950); padding: 30px 26px; }
.channel-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.channel-value { font-size: 1.05rem; color: var(--ink); }
.channel-value a:hover { color: var(--gold-bright); }
@media (max-width: 760px) { .channel-grid { grid-template-columns: 1fr; } }

.alt-cta {
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px dashed var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.alt-cta p { font-size: 0.88rem; color: var(--ink-dim); margin: 0; }

/* ---------- 2026 visual refinement: governance signal ---------- */
.nav-brand img { transition: transform 0.4s var(--ease), filter 0.4s var(--ease); }
.nav-brand:hover img { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(201,168,76,0.28)); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

.hero { isolation: isolate; }
.hero-signal { position: absolute; width: min(68vw, 820px); aspect-ratio: 1; right: -12vw; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; }
.hero-signal::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(230,195,105,0.2) 0 1px, rgba(201,168,76,0.1) 2px, transparent 31%), radial-gradient(circle, rgba(22,48,94,0.55), transparent 66%); box-shadow: 0 0 100px 40px rgba(22,48,94,0.2); animation: signal-breathe 9s ease-in-out infinite; }
.signal-orbit { position: absolute; border: 1px solid rgba(201,168,76,0.2); border-radius: 50%; box-shadow: inset 0 0 35px rgba(22,48,94,0.25); }
.orbit-one { inset: 6%; border-right-color: rgba(230,195,105,0.65); transform: rotate(-28deg); animation: orbit-drift 24s linear infinite; }
.orbit-two { inset: 19%; border-left-color: rgba(230,195,105,0.52); transform: rotate(46deg); animation: orbit-drift 17s linear infinite reverse; }
.orbit-three { inset: 34%; border-top-color: rgba(230,195,105,0.68); transform: rotate(75deg); animation: orbit-drift 13s linear infinite; }
.signal-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 5px rgba(201,168,76,0.09), 0 0 22px 5px rgba(230,195,105,0.32); }
.node-one { top: 18%; right: 21%; animation: node-pulse 3.4s ease-in-out infinite; }
.node-two { bottom: 28%; left: 13%; animation: node-pulse 3.4s 1.2s ease-in-out infinite; }
.hero .container { z-index: 2; }
@keyframes orbit-drift { to { transform: rotate(332deg); } }
@keyframes signal-breathe { 0%, 100% { opacity: 0.65; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes node-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.65; } 50% { transform: scale(1.25); opacity: 1; } }

.proof-card, .way-card, .tier-card, .channel-card { transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease); }
.proof-card:hover, .channel-card:hover { transform: translateY(-4px); background: var(--navy-900); box-shadow: 0 18px 42px -28px rgba(230,195,105,0.9); z-index: 1; }
.way-card:hover, .tier-card:hover { box-shadow: 0 24px 46px -30px rgba(230,195,105,0.8), inset 0 1px 0 rgba(230,195,105,0.09); }
.page-hero::after { content: ""; position: absolute; width: 360px; height: 360px; top: -170px; right: 9%; border: 1px solid rgba(201,168,76,0.17); border-radius: 50%; box-shadow: 0 0 0 55px rgba(201,168,76,0.025), 0 0 0 120px rgba(22,48,94,0.1); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-signal::before, .signal-orbit, .signal-node { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 760px) {
  .hero-signal { width: 125vw; right: -55vw; top: 44%; opacity: 0.72; }
  .page-hero::after { width: 230px; height: 230px; right: -60px; top: -110px; }
}

/* ---------- Contact: briefing intake ---------- */
.contact-command { padding-top: 28px; }
.contact-command-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; padding: 42px; border: 1px solid var(--gold-dim); background: linear-gradient(135deg, rgba(22,48,94,0.26), rgba(5,7,13,0.2) 58%); position: relative; overflow: hidden; }
.contact-command-grid::after { content: ""; position: absolute; width: 280px; aspect-ratio: 1; right: -110px; bottom: -170px; border: 1px solid rgba(201,168,76,0.18); border-radius: 50%; box-shadow: 0 0 0 36px rgba(201,168,76,0.025), 0 0 0 92px rgba(22,48,94,0.18); pointer-events: none; }
.contact-command-copy, .contact-action-stack { position: relative; z-index: 1; }
.contact-command-copy h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 16px 0; max-width: 14ch; }
.availability { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.availability span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(230,195,105,0.75); }
.contact-action-stack { display: grid; gap: 10px; }
.contact-action { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 19px 20px; border: 1px solid var(--line-soft); background: rgba(5,7,13,0.42); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.contact-action:hover { transform: translateX(6px); border-color: var(--gold-dim); background: rgba(16,29,58,0.86); box-shadow: 0 14px 30px -24px rgba(230,195,105,0.95); }
.contact-action.primary { background: var(--gold); color: var(--navy-950); border-color: var(--gold-bright); }
.contact-action.primary:hover { background: var(--gold-bright); }
.contact-action-index { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gold); }
.contact-action.primary .contact-action-index { color: var(--navy-700); }
.contact-action strong, .contact-action small { display: block; }
.contact-action strong { font-size: 0.95rem; font-weight: 600; }
.contact-action small { margin-top: 2px; color: var(--ink-dim); font-size: 0.77rem; }
.contact-action.primary small { color: rgba(5,7,13,0.68); }
.contact-action-arrow { font-size: 1.15rem; transition: transform 0.25s var(--ease); }
.contact-action:hover .contact-action-arrow { transform: translate(2px, -2px); }
@media (max-width: 760px) { .contact-command-grid { grid-template-columns: 1fr; gap: 34px; padding: 28px; } .contact-command-copy h2 { max-width: none; } }

/* ---------- Hosting/browser fallbacks ----------
   These baseline rules deliberately avoid aspect-ratio, min(), and CSS Grid.
   Modern browsers enhance them with the rules above; older WebViews still get a
   complete static signal and a readable contact layout. */
.hero-signal {
  width: 68vw;
  height: 68vw;
  max-width: 820px;
  max-height: 820px;
}
.contact-command-grid { display: flex; flex-wrap: wrap; }
.contact-command-copy { flex: 1 1 320px; min-width: 0; }
.contact-action-stack { flex: 1 1 360px; min-width: 0; }
.contact-action { min-width: 0; }
.contact-action span:nth-child(2) { min-width: 0; }

@supports (display: grid) {
  .contact-command-grid { display: grid; }
}
@supports (width: min(1px, 1vw)) {
  .hero-signal { width: min(68vw, 820px); height: min(68vw, 820px); }
}
@supports (aspect-ratio: 1 / 1) {
  .hero-signal { height: auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) {
  .hero-signal { width: 125vw; height: 125vw; max-width: none; max-height: none; right: -55vw; top: 44%; }
}