/* ═══════════════════════════════════════════════════════════════
   Conners & Associates — shared design system
   Canonical source: approved homepage (conners_home.html).
   Tokens and components extracted verbatim; interior-page patterns
   (short hero, forms, FAQ, insights cards) extend the same system.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── TOKENS ───────────────────────── */
:root{
  --navy-950:#06182c;
  --navy-900:#0a2543;
  --navy-850:#0c2b4d;
  --navy-800:#103358;
  --blue-500:#3b82f6;
  --blue-400:#60a5fa;
  --blue-200:#a8c8f0;
  --paper:#f6f4ef;        /* warm ivory — the expensive paper */
  --paper-deep:#efece4;
  --ink:#13213a;
  --ink-soft:#54607a;
  --line:#ddd8cc;
  --line-navy:#1c3a60;
  --signal:#22c55e;

  --serif:'Newsreader', Georgia, serif;
  --sans:'Instrument Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --container:1160px;
  --pad:clamp(4.5rem, 10vw, 8.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--navy-900);
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue-500);color:#fff}

.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.5}
a{color:inherit;text-decoration:none}

/* grain — the texture that makes it feel printed */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ───────────────────────── NAV ───────────────────────── */
header{
  /* STICKY, not fixed. iOS Safari breaks position:fixed when the element
     (or an ancestor) carries transform / backdrop-filter / will-change — the
     header detaches and scrolls away. Sticky is tied to scroll position
     natively and survives all of that. It sits in normal flow at the top, so
     the hero padding below no longer reserves 76px for it. */
  position:-webkit-sticky;position:sticky;top:0;z-index:100;
  background:var(--navy-900);
  border-bottom:1px solid var(--line-navy);
  transition:background .3s ease;
  /* NO overflow here: overflow:hidden on a position:sticky element breaks
     sticky on iOS Safari (it sticks at the wrong offset). The fingerprint is
     clipped on .brand-mark instead. */
}
/* Mobile: solid deeper navy when scrolled — NO backdrop-blur. The hero video
   fills the whole first screen, so a blurred header sits over moving video for
   the entire hero scroll and flickers on mobile Safari. Solid is rock-stable. */
header.scrolled{
  background:var(--navy-950);
}
/* Desktop only: the frosted/translucent treatment (approved, GPU handles it). */
@media (min-width:881px){
  header.scrolled{
    background:rgba(10,37,67,.88);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;max-width:var(--container);margin:0 auto;
  padding:0 clamp(1.4rem,5vw,3rem);
}
.brand{display:flex;align-items:center;gap:.95rem}
/* Clip the fingerprint to the 76px nav here (not on the sticky header).
   Safari sizes the <img> taller than Chrome and would spill it past the seam. */
.brand-mark{display:flex;align-items:center;width:44px;height:76px;overflow:hidden}
/* fingerprint mark, fully contained in the 76px nav, baked-in bottom fade */
.brand-fp{
  display:block;height:52px;width:auto;
  filter:saturate(1.2) brightness(1.45) drop-shadow(0 4px 10px rgba(0,0,0,.2));
}
.brand-word{
  color:#fff;font-weight:600;font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;
}
.brand-word span{color:var(--blue-200);font-weight:400}
.nav-links{display:flex;align-items:center;gap:2.2rem}
.nav-links a{
  color:#c9d7ea;font-size:.9rem;font-weight:500;letter-spacing:.02em;
  position:relative;transition:color .15s ease;white-space:nowrap;
}
.nav-links a:not(.cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--blue-400);transition:width .25s ease;
}
.nav-links a:not(.cta):hover{color:#fff}
.nav-links a:not(.cta):hover::after{width:100%}
.cta{
  background:var(--blue-500);color:#fff;padding:.62rem 1.35rem;border-radius:999px;
  font-weight:600;font-size:.88rem;transition:background .15s ease, transform .15s ease;
}
.cta:hover{background:var(--blue-400);transform:translateY(-1px)}
.burger{display:none}

/* ───────────────────────── HERO (home) ───────────────────────── */
.hero{
  position:relative;background:var(--navy-900);color:#fff;
  /* sticky header is in-flow above; no 76px clearance needed here */
  padding:clamp(5rem,12vh,9rem) 0 clamp(4rem,9vh,7rem);
  overflow:hidden;
}
/* architectural hairline columns */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.6;
  background-image:
    linear-gradient(to right, rgba(96,165,250,.07) 1px, transparent 1px);
  background-size:calc(100%/6) 100%;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* Still frame shown instantly behind the video — same crop and same filter,
   so when the video fades in there is no jump in brightness or color. Stays
   visible under prefers-reduced-motion (where the video itself is hidden). */
.hero-poster{
  position:absolute;inset:0;z-index:0;
  background:var(--navy-900) center center / cover no-repeat;
  background-image:url("/assets/media/hero_poster.jpg");
  filter:brightness(.78) saturate(.8) contrast(1.04);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.78) saturate(.8) contrast(1.04);
  opacity:0;transition:opacity .7s ease;
}
.hero-video.is-playing{opacity:1}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(7,24,44,.94) 0%, rgba(7,24,44,.78) 34%, rgba(10,37,67,.34) 64%, rgba(10,37,67,.22) 100%),
    linear-gradient(to bottom, rgba(10,37,67,.7) 0%, rgba(10,37,67,.12) 32%, rgba(7,24,44,.85) 100%);
}
@media (prefers-reduced-motion: reduce){ .hero-video{display:none} }
/* glow field, very restrained */
.hero::before{
  content:"";position:absolute;top:-30%;right:-15%;width:60%;height:120%;
  background:radial-gradient(closest-side, rgba(59,130,246,.16), transparent 70%);
  pointer-events:none;z-index:2;
}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:3rem;align-items:end}
.hero .eyebrow{color:var(--blue-200)}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem, 6.2vw, 4.9rem);
  line-height:1.06;letter-spacing:-.015em;
  margin:1.6rem 0 0;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--blue-200)}
.cursor{
  display:inline-block;width:.55ch;height:.78em;margin-left:.18ch;
  background:var(--blue-400);vertical-align:baseline;transform:translateY(.08em);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.hero-sub{
  max-width:34rem;color:#b9c8dd;font-size:1.06rem;line-height:1.75;
  margin-top:2rem;font-weight:400;
}
.hero-sub strong{color:#fff;font-weight:500}
.hero-actions{display:flex;gap:1rem;margin-top:2.6rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:all .18s ease;
}
.btn-fill{background:var(--blue-500);color:#fff}
.btn-fill:hover{background:var(--blue-400);transform:translateY(-2px);box-shadow:0 14px 34px rgba(59,130,246,.3)}
.btn-ghost{border:1px solid var(--line-navy);color:#dbe6f4}
.btn-ghost:hover{border-color:var(--blue-400);color:#fff}
.btn svg{transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}

/* hero side column — the dossier card */
.dossier{
  border:1px solid var(--line-navy);border-radius:12px;
  background:linear-gradient(160deg, rgba(13,42,74,.82), rgba(9,32,58,.66));
  padding:1.8rem 1.7rem;backdrop-filter:blur(4px);
}
.dossier-head{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--blue-200);
  text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line-navy);
}
.dossier-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid rgba(28,58,96,.6);
}
.dossier-row:last-child{border-bottom:none;padding-bottom:.2rem}
.dossier-row .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:#7f97b6;text-transform:uppercase}
.dossier-row .v{color:#fff;font-weight:500;font-size:.98rem;text-align:right}

/* ───────────────── HERO (interior, short navy) ───────────────── */
.hero-short{
  position:relative;background:var(--navy-900);color:#fff;
  /* sticky header is in-flow above; no 76px clearance needed here */
  padding:clamp(3.2rem,8vh,5.5rem) 0 clamp(2.8rem,6vh,4.5rem);
  overflow:hidden;
}
.hero-short .hero-grid{opacity:.45}
.hero-short::before{
  content:"";position:absolute;top:-40%;right:-15%;width:55%;height:130%;
  background:radial-gradient(closest-side, rgba(59,130,246,.13), transparent 70%);
  pointer-events:none;z-index:2;
}
.hero-short .wrap{position:relative;z-index:3}
.hero-short .eyebrow{color:var(--blue-200)}
.hero-short h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.1;letter-spacing:-.012em;
  margin:1.4rem 0 0;text-wrap:balance;
}
.hero-short h1 em{font-style:italic;font-weight:300;color:var(--blue-200)}
.hero-short .hero-sub{margin-top:1.4rem}

/* ───────────────────────── SECTION SCAFFOLD ───────────────────────── */
section{padding:var(--pad) 0}
.s-paper{background:var(--paper);color:var(--ink)}
.s-navy{background:var(--navy-950);color:#fff}
.s-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:end;margin-bottom:clamp(2.8rem,6vw,4.5rem)}
.s-paper .eyebrow{color:var(--blue-500)}
.s-navy .eyebrow{color:var(--blue-200)}
h2{
  font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;margin-top:1.2rem;text-wrap:balance;
}
.s-lede{color:var(--ink-soft);font-size:1.05rem;max-width:30rem;align-self:end}
.s-navy .s-lede{color:#9fb2cc}

/* ───────────────────────── PROBLEMS — editorial index ───────────────────────── */
.problems{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.problem{
  display:grid;grid-template-columns:3.4rem 1fr;gap:1.3rem;
  padding:2rem 2rem 2rem 0;border-bottom:1px solid var(--line);
  position:relative;transition:background .2s ease;
}
.problem:nth-child(odd){border-right:1px solid var(--line);padding-right:2.4rem}
.problem:nth-child(even){padding-left:2.4rem;grid-template-columns:3.4rem 1fr}
.problem .num{
  font-family:var(--mono);font-size:.8rem;color:#a39b87;padding-top:.45rem;
  transition:color .2s ease;
}
.problem h3{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-.005em;line-height:1.25;
}
.problem p{color:var(--ink-soft);font-size:.97rem;margin-top:.55rem;line-height:1.65}
.problem::before{
  content:"";position:absolute;left:0;top:0;height:0;width:2px;background:var(--blue-500);
  transition:height .3s ease;
}
.problem:nth-child(even)::before{left:auto;right:0}
.problem:hover::before{height:100%}
.problem:hover .num{color:var(--blue-500)}
.problem-wide{grid-column:1 / -1;border-right:none !important;padding:2rem 0 !important;grid-template-columns:3.4rem 1fr}

/* expanded problem blocks (The Work) */
.problem-x{
  display:grid;grid-template-columns:3.4rem 1fr;gap:1.3rem;
  padding:clamp(2.2rem,4vw,3rem) 0;border-bottom:1px solid var(--line);
  position:relative;
}
.problem-x:first-child{border-top:1px solid var(--line)}
.problem-x .num{font-family:var(--mono);font-size:.8rem;color:#a39b87;padding-top:.5rem}
.problem-x h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-.005em;line-height:1.25}
.problem-x p{color:var(--ink-soft);font-size:1rem;margin-top:.8rem;max-width:44rem}
.problem-x .practice{
  margin-top:1.2rem;padding-left:1.2rem;border-left:2px solid var(--blue-500);
  font-size:.95rem;color:var(--ink);max-width:42rem;
}
.problem-x .practice .k{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-500);display:block;margin-bottom:.3rem;
}

/* question motif divider */
.motif{
  background:var(--navy-950);color:#fff;text-align:center;
  padding:clamp(3rem,7vw,5rem) 0;
}
.motif p{
  font-family:var(--mono);font-size:clamp(.95rem,2vw,1.2rem);letter-spacing:.02em;
  color:var(--blue-200);
}

/* engagement shapes */
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.shape{
  border:1px solid var(--line-navy);border-radius:12px;
  background:linear-gradient(160deg, rgba(13,42,74,.82), rgba(9,32,58,.66));
  padding:2rem 1.8rem;
}
.shape .tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-200);
}
.shape h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:#fff;margin-top:1rem}
.shape p{color:#9fb2cc;font-size:.95rem;margin-top:.7rem}

/* ───────────────────────── METHOD ───────────────────────── */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-navy)}
.step{padding:2.6rem 2.4rem 0 0;border-right:1px solid var(--line-navy)}
.step:last-child{border-right:none}
.step + .step{padding-left:2.4rem}
.step .big{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:3.4rem;line-height:1;color:var(--blue-400);opacity:.85;
}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-top:1.4rem;color:#fff}
.step p{color:#9fb2cc;font-size:.97rem;margin-top:.7rem}
.method-pull{
  margin-top:clamp(3rem,7vw,5rem);padding-top:2.4rem;border-top:1px solid var(--line-navy);
  font-family:var(--mono);font-size:.85rem;color:var(--blue-200);letter-spacing:.04em;
}
.method-pull b{color:#fff;font-weight:500}

/* ───────────────────────── AUTHORITY ───────────────────────── */
.auth{
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:3rem;align-items:center;
}
.auth blockquote{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.35;letter-spacing:-.005em;text-wrap:balance;
}
.auth blockquote em{font-style:italic;color:var(--blue-500)}
.auth-links{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);padding-left:2.4rem}
.auth-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 0;border-bottom:1px solid var(--line);
  font-weight:600;font-size:.98rem;transition:color .15s ease;
}
.auth-link:last-child{border-bottom:none}
.auth-link span.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:#a39b87;font-weight:400;text-transform:uppercase}
.auth-link:hover{color:var(--blue-500)}
.auth-link svg{flex:none;transition:transform .15s ease}
.auth-link:hover svg{transform:translate(2px,-2px)}

/* ───────────────────────── ABOUT ───────────────────────── */
.about-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
.headshot{
  aspect-ratio:4/5;border-radius:12px;border:1px solid var(--line);
  background:
    linear-gradient(160deg, var(--paper-deep), #e6e2d6);
  display:flex;align-items:center;justify-content:center;
  position:sticky;top:calc(76px + 2rem);
}
.headshot span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#a39b87;
}
.headshot img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;
}
.bio p{color:var(--ink);font-size:1.05rem;line-height:1.8}
.bio p + p{margin-top:1.3rem}
.bio .q{font-family:var(--mono);font-size:.95rem;color:var(--blue-500)}

/* is / is not */
.isnot{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-navy)}
.isnot-col{padding:2.4rem 2.4rem 0 0}
.isnot-col + .isnot-col{border-left:1px solid var(--line-navy);padding-left:2.4rem;padding-right:0}
.isnot-col .k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-200);
}
.isnot-col ul{list-style:none;margin-top:1.4rem}
.isnot-col li{
  padding:1.05rem 0;border-bottom:1px solid var(--line-navy);
  color:#dbe6f4;font-size:1rem;display:flex;gap:.9rem;align-items:baseline;
}
.isnot-col li::before{
  content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--blue-500);transform:translateY(-.1rem);
}
.isnot-col.not li::before{background:transparent;border:1px solid #51688a}
.isnot-col.not li{color:#8da2bf}

/* ───────────────────────── FORMS — the serious instrument ───────────────────────── */
.form-shell{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:clamp(1.8rem,4vw,3rem);
  box-shadow:0 24px 60px rgba(19,33,58,.07);
  max-width:46rem;
}
.form-head{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--ink-soft);
  text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem;
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.5rem}
.f-field{display:flex;flex-direction:column;gap:.45rem}
.f-field.full{grid-column:1 / -1}
.f-field label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.f-field label .req{color:var(--blue-500)}
.f-field input,.f-field select,.f-field textarea{
  font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:.78rem .95rem;transition:border-color .15s ease, box-shadow .15s ease;
  width:100%;appearance:none;
}
.f-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2354607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;
  padding-right:2.6rem;
}
.f-field textarea{min-height:8.5rem;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.f-submit{margin-top:2rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.f-submit button{border:none;cursor:pointer;font-family:var(--sans)}
.f-note{font-size:.85rem;color:var(--ink-soft)}
.f-success{
  display:none;padding:1.4rem 1.6rem;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);font-size:.98rem;color:var(--ink);margin-top:2rem;
}
.f-success.show{display:block}
.f-error{
  display:none;margin-top:1.2rem;font-size:.9rem;color:#b4231f;
}
.f-error.show{display:block}

/* availability line (contact) — the ONLY --signal use on the site */
.avail{display:inline-flex;align-items:center;gap:.7rem;font-size:.95rem;color:#dbe6f4;margin-top:1.6rem}
.avail .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--signal);flex:none}

/* ───────────────────────── INSIGHTS ───────────────────────── */
.feat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem}
.vid-card{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.vid-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(19,33,58,.1)}
.vid-thumb{
  aspect-ratio:16/9;background:linear-gradient(160deg, var(--navy-850), var(--navy-950));
  display:flex;align-items:center;justify-content:center;position:relative;
}
.vid-thumb .play{
  width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-navy);
  background:rgba(13,42,74,.7);display:flex;align-items:center;justify-content:center;
}
.vid-meta{padding:1.1rem 1.2rem 1.3rem}
.vid-meta .tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-500);
}
.vid-meta h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-top:.5rem;line-height:1.3}
.coming{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:2.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
.coming p{color:var(--ink-soft);font-size:1rem}

/* insight detail */
.embed-shell{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy-950);border:1px solid var(--line-navy)}
.embed-shell iframe{width:100%;height:100%;border:0;display:block}
.transcript{max-width:44rem}
.transcript h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.transcript p{color:var(--ink);margin-top:1.2rem;line-height:1.85}

/* ───────────────────────── FAQ ───────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.5rem 0;font-family:var(--serif);font-weight:400;font-size:1.25rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:1.1rem;color:var(--blue-500);flex:none;
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.6rem;color:var(--ink-soft);max-width:42rem}

/* pending blocks ship hidden until content exists */
[data-pending]{display:none !important}

/* ───────────────────────── CLOSING CTA ───────────────────────── */
.closing{text-align:center;position:relative;overflow:hidden}
.closing::before{
  content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:70%;height:120%;
  background:radial-gradient(closest-side, rgba(59,130,246,.14), transparent 70%);
  pointer-events:none;
}
.closing .wrap{position:relative}
.closing h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:1.4rem auto 0;max-width:24ch}
.closing p{color:#9fb2cc;max-width:34rem;margin:1.6rem auto 0}
.closing .btn{margin-top:2.6rem}

/* ───────────────────────── FOOTER ───────────────────────── */
footer{background:var(--navy-950);border-top:1px solid var(--line-navy);padding:3rem 0;color:#7f97b6}
.foot{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.foot .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.foot-links{display:flex;gap:1.8rem;font-size:.88rem}
.foot-links a:hover{color:#fff}

/* ───────────────────────── REVEAL ───────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;align-items:start}
  .dossier{max-width:30rem}
  .s-head{grid-template-columns:1fr}
  .problems{grid-template-columns:1fr}
  .problem:nth-child(odd){border-right:none;padding-right:0}
  .problem:nth-child(even){padding-left:0}
  .problem:nth-child(even)::before{left:0;right:auto}
  .problem{padding:1.8rem 0}
  .method{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line-navy);padding:2.2rem 0}
  .step + .step{padding-left:0}
  .step:last-child{border-bottom:none}
  .auth{grid-template-columns:1fr}
  .auth-links{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:1rem}
  .shapes{grid-template-columns:1fr}
  .about-split{grid-template-columns:1fr}
  .headshot{position:static;max-width:24rem}
  .isnot{grid-template-columns:1fr}
  .isnot-col{padding-right:0}
  .isnot-col + .isnot-col{border-left:none;border-top:1px solid var(--line-navy);padding-left:0;margin-top:2.2rem;padding-top:2.2rem}
  .f-grid{grid-template-columns:1fr}
}
@media (max-width: 880px){
  .nav-links{display:none}
  .burger{
    display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem;
  }
  .burger span{width:22px;height:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}
  .drawer{
    position:fixed;inset:76px 0 0 0;background:var(--navy-950);z-index:99;
    display:flex;flex-direction:column;padding:2.5rem clamp(1.4rem,5vw,3rem);
    transform:translateX(100%);transition:transform .3s ease;
  }
  .drawer.open{transform:none}
  .drawer a{
    font-family:var(--serif);font-size:1.7rem;font-weight:300;color:#fff;
    padding:1.1rem 0;border-bottom:1px solid var(--line-navy);
  }
  .drawer .cta{
    margin-top:auto;border:none;text-align:center;font-family:var(--sans);
    font-size:1rem;padding:1rem;border-radius:999px;
  }
}
@media (min-width: 881px){
  /* Approved homepage leaves the drawer in flow at desktop (it hides behind
     the fixed nav). visibility:hidden keeps that exact geometry while
     removing its links from the focus order. */
  .drawer{visibility:hidden}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
}