/* ============================================================================
   THE HYBRID — shared system for mocks d / e / f.
   RULED DIRECTION (David, 2026-08-19): v4's CHROME, DENSITY AND DARK MODERN
   SURFACE + direction B's WARM CINEMATIC PHOTOGRAPHY AND GRADE. His reason is
   consistency: every live TMA sales page is in the v4 register, so the homepage
   inherits that register and warms the ground. Blue belongs on the BUTTON, not
   on the room (brand doc: prep-blue is the "sole CTA accent").

   DELIBERATE DEPARTURES FROM v4, EACH WITH A REASON:
   · Surfaces hue-shift WARM (#0c0a08 family, from B) — "you got a blank black
     background for the most part" is the open complaint; warm ground + real
     photography fixes it. Abbey Road opens warm; MWTM is warm brown-black.
   · CTAs are near-black text on prep-blue with the soft glow, radius 12px —
     the BRAND LAW ("Black text on Prep blue. Always.") and what control-room
     and discipleship actually ship. v4's white-on-blue pills were off-family.
   · Nav links 14px / weight 500 — David disliked the v4 menu weight; this is
     the live family register (discipleship nav is 0.875rem/500).
   · The player has NO CARD anywhere. It lives on the page ground. That is the
     whole point of these three mocks.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

:root{
  --f:-apple-system,'SF Pro Display','Inter',system-ui,'Segoe UI',sans-serif;
  --fm:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;

  /* warm ground — B's soul under v4's skin */
  --bg:#0c0a08;
  --s1:#131009;
  --s2:#1a1510;
  --s3:#241d15;
  --ink:#f5f1e9;
  --ink2:#a89d8d;
  --ink3:#6f6558;
  --line:rgba(245,241,233,.10);
  --line2:rgba(245,241,233,.06);

  /* 🛑 canonical, tokens.css — blue acts, it does not decorate */
  --blue:#2183db;
  --blue-lift:#66aae8;
  --on-blue:#06070b;           /* brand law: dark text on prep blue, always */
  --emerald:#10b981;           /* success only */
  --glow-cta:0 0 20px rgba(33,131,219,.2),0 0 60px rgba(33,131,219,.06);
  --glow-cta-hover:0 0 30px rgba(33,131,219,.3),0 0 80px rgba(33,131,219,.1);

  --bar:76px;
  --nav:66px;
  --e:cubic-bezier(.22,.9,.28,1);
}

body{
  background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:16px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;   /* clip, never hidden */
  padding-bottom:var(--bar);
}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.04}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
canvas{display:block}
img{max-width:100%}
/* 🛑 no width:100% on .wrap children — it defeats the gutter. Three shippings. */
.wrap{width:min(1200px,100% - 52px);margin-inline:auto}
@media(max-width:700px){.wrap{width:min(1200px,100% - 30px)}}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:70;height:var(--nav);
  display:flex;align-items:center;transition:background .4s var(--e),border-color .4s;
  border-bottom:1px solid transparent;
}
#nav.stuck{background:rgba(12,10,8,.84);backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom-color:var(--line2)}
/* 🛑 THE TOP BAR SPANS THE PAGE NOW, AND THE LOGO IS SIZED HERE.
   David, 2026-08-23: "I'm looking at all these other sites and they all take up
   the entire length of the top bar, the width of the site. For their logo, it
   goes out left and their menu goes out right."
   MEASURED: .wrap is width:min(1200px,100% - 52px), which is right for reading
   body copy and wrong for a masthead. At 1440 it left 120px of dead gutter on
   each side, so the bar read as a floating island rather than a header. The nav
   gets its own width; body content is untouched.
   The logo lives here too, and THAT is why two earlier fixes changed nothing he
   could see: this shared sheet said 31px and the page-level overrides I wrote
   were fighting it one page at a time. 18px renders 131px wide and clears the
   masters' 120px lockup floor. Every page on this stylesheet moves together. */
.nav-in{display:flex;align-items:center;gap:30px;width:min(1800px,100% - 56px)}
@media(max-width:700px){.nav-in{width:calc(100% - 32px)}}
/* 18 -> 21px, David 2026-08-23: "let's get the logo just a little bit larger
   than that. Much better, though." 21px renders 153px wide, still inside the
   120-160px band audit_brand.js holds, and still above the masters' 120px
   floor with 27% to spare. */
.logo{display:block;height:21px;width:auto;flex:none}
/* 🛑 THE MENU SIZE AND ITS PLACE ON THE BAR — David, 2026-08-23.
   "Ours does not match the premium. Ours is pretty small too. The menu font
   size. I think the menu font size should come up at least two pixels."

   MEASURED on acquisition.com, the site he opened himself, at a 1920 viewport:
   its nav links are 16px / weight 500, sentence case, 20px apart. Ours were
   14px / 500. His "at least two pixels" lands exactly on the reference. Not a
   guess — 16px is what the page he was comparing us to actually renders.

   AND THE REAL DEFECT WAS NOT THE SIZE, IT WAS THE HOLE. The bar spans 1800px
   at 1440+, but the five links huddled against the logo and ended at x=639,
   while Sign in did not start until x=1550. 911px of empty bar down the middle,
   which is what reads as thin and unfinished no matter what size the type is.

   Acquisition does not push its menu right either — measured, its logo+menu is
   ONE CENTRED CLUSTER running x=612 to x=1530 on a 1920 page, with the whole
   right half empty. We keep our full-width span AND kill the hole: logo anchors
   left, menu takes the centre, Sign in + CTA anchor right. Three zones, no void.

   🛑 This is a departure from his 08-18 phrasing above ("their menu goes out
   right"). Menu-right was built and measured first: it just moves the hole to
   the other end — 812px of dead bar between the logo and the links. Centring is
   the version that has no hole, and it is what his own reference does. If he
   wants menu-right anyway, delete the .nav-mid block and put .nav-sp back
   before .nav-links in the markup; the sizes below stay either way.

   CENTRING NEEDS ROOM. Below 1200px the three zones collide (logo 153 + menu
   448 + Sign in/CTA 331 = 932px of content, and the gaps vanish first), so
   under 1200 the menu falls back to sitting beside the logo, exactly as before.
   Under 880 it is the hamburger, untouched. */
.nav-links{display:flex;gap:26px;margin-left:6px}
.nav-links a{font-size:16px;color:var(--ink2);font-weight:500;letter-spacing:0;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
/* 🛑 #nav-scoped ON PURPOSE. home.html carries its own `.nav-links{margin-left:0}`
   in a page <style> block that loads AFTER this file, so a bare `.nav-links`
   here ties on specificity and LOSES. That is the same specificity trap the
   deck gap and the burger both hit today. #nav .nav-links is (1,1,0) and wins
   on every page without anyone having to remember it. */
@media(min-width:1200px){
  #nav .nav-in{position:relative}
  #nav .nav-links{position:absolute;left:50%;transform:translateX(-50%);
    gap:30px;margin-left:0;margin-right:0}
}
.nav-sp{flex:1}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
/* RULING 08-18: Sign in pinned top right, the ONLY outlined button in the nav */
.signin{font-size:15px;font-weight:560;color:var(--ink2);padding:9px 17px;
  border:1px solid var(--line);border-radius:10px;transition:.25s var(--e)}
.signin:hover{color:var(--ink);border-color:rgba(245,241,233,.24)}
/* 🛑 44px MINIMUM ON TOUCH. Measured 2026-08-23 on a real phone viewport: this
   button, the primary call to action on the page, rendered 165x39. Apple's
   floor is 44x44 and a 39px button does not look wrong in a screenshot, it just
   misses under a thumb. min-height rather than padding, so the desktop shape is
   untouched and only the phone grows. audit_mobile.js holds it. */
@media(hover:none){.pill{min-height:44px}}
.pill{
  font-size:15px;font-weight:640;padding:10px 20px;border-radius:10px;
  background:var(--blue);color:var(--on-blue);white-space:nowrap;
  box-shadow:var(--glow-cta);
  transition:background .25s var(--e),transform .25s var(--e),box-shadow .25s var(--e);
}
.pill:hover{background:var(--blue-lift);transform:translateY(-1px);box-shadow:var(--glow-cta-hover)}
@media(max-width:880px){.nav-links{display:none}.nav-in{gap:14px}.signin{display:none}}

/* ─────────────────────────────────────────────────── HERO scaffolding ── */
#hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--nav) + 40px) 0 44px;isolation:isolate;
}
/* the loop — atmosphere, never a video player (media/video/README.md) */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.hero-bg video{width:100%;height:100%;object-fit:cover;
  opacity:var(--bgv-op,.28);filter:saturate(.92) contrast(1.05)}
.hero-bg .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,rgba(12,10,8,.88) 42%,rgba(12,10,8,.46) 74%,rgba(12,10,8,.34) 100%),
             linear-gradient(to top,var(--bg) 0%,transparent 36%,transparent 64%,rgba(12,10,8,.66) 100%)}

.kicker{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink2);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
h1.hh{font-size:clamp(34px,4.9vw,62px);line-height:1.04;letter-spacing:-.042em;max-width:17ch;text-wrap:balance}
h1.hh span{color:var(--blue)}
h1.hh em{font-style:normal;color:var(--ink2)}
.hero-p{margin-top:20px;font-size:clamp(16px,1.5vw,18.5px);color:var(--ink2);max-width:46ch;line-height:1.55}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:12px;transition:.26s var(--e);white-space:nowrap}
.btn-p{background:var(--blue);color:var(--on-blue);box-shadow:var(--glow-cta)}
.btn-p:hover{background:var(--blue-lift);transform:translateY(-2px);box-shadow:var(--glow-cta-hover)}
.btn-s{border:1px solid var(--line);color:var(--ink)}
.btn-s:hover{background:rgba(245,241,233,.06);border-color:rgba(245,241,233,.24);transform:translateY(-2px)}
/* two quiet doors — service and education sort themselves */
.doors{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.doors a{font-size:13.5px;color:var(--ink3);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s,border-color .25s}
.doors a:hover{color:var(--ink);border-color:rgba(245,241,233,.3)}
.doors a b{color:var(--ink2);font-weight:600;transition:color .25s}
.doors a:hover b{color:var(--ink)}
@media(max-width:560px){.hero-cta{flex-direction:column;align-items:stretch}}

/* ══════════════════════════════ THE PLAYER, DE-CARDED (shared pieces) ══ */
.pl-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:.15em;
  padding:4px 9px;border-radius:5px;border:1px solid var(--line);color:var(--ink3);
  transition:color .3s,border-color .3s,background .3s;
}
.pl-badge.mix{color:var(--on-blue);background:var(--blue);border-color:var(--blue)}
.pl-t{font-size:20px;font-weight:640;letter-spacing:-.032em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-a{font-size:13.5px;color:var(--ink2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-wave{position:relative;cursor:pointer;touch-action:none}
#waveCv{width:100%;height:72px}
.pl-flips{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none}
.pl-flips i{position:absolute;top:0;bottom:0;width:1px;background:rgba(245,241,233,.15)}
.pl-times{display:flex;justify-content:space-between;padding-top:4px;
  font-family:var(--fm);font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);
  transition:.22s var(--e);flex:none}
.ic:hover{color:var(--ink);background:rgba(245,241,233,.07)}
.ic.big{width:54px;height:54px;background:var(--ink);color:var(--bg)}
.ic.big:hover{background:#fff;color:#000;transform:scale(1.05)}
.ab-toggle{display:flex;gap:2px;padding:3px;border-radius:99px;background:rgba(12,10,8,.55);border:1px solid var(--line2);flex:none}
.ab-toggle button{padding:7px 15px;border-radius:99px;font-family:var(--fm);font-size:10px;font-weight:700;
  letter-spacing:.12em;color:var(--ink3);transition:.24s var(--e)}
.ab-toggle button.on{background:var(--blue);color:var(--on-blue)}
.ab-toggle button:not(.on):hover{color:var(--ink)}
.art{border-radius:10px;overflow:hidden;flex:none;position:relative;background:var(--s3)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art-f{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;
  background:linear-gradient(152deg,var(--a2,#2a2318),var(--a1,#0f0d09))}
.art-f b{font-size:12.5px;font-weight:640;letter-spacing:-.03em;line-height:1.1;color:rgba(245,241,233,.9)}
.art-f i{font-family:var(--fm);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,233,.42);font-style:normal;margin-top:4px}

/* ════════════════════════════════════ MINIMISED BAR (v4 chrome, warmed) ══ */
#bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--bar);
  display:flex;align-items:center;gap:16px;padding:0 clamp(14px,2vw,24px);
  background:rgba(15,12,9,.93);backdrop-filter:blur(30px) saturate(1.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .45s var(--e);
}
#bar.up{transform:none}
.bar-prog{position:absolute;left:0;top:0;height:2px;background:var(--blue);width:0;transition:width .12s linear}
.bar-art{width:46px;height:46px;border-radius:7px;overflow:hidden;position:relative;background:var(--s3);flex:none}
.bar-meta{min-width:0;flex:none;max-width:min(30vw,260px)}
.bar-t{font-size:13.5px;font-weight:560;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-a{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-mid{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
#barWave{flex:1;height:30px;cursor:pointer;min-width:60px}
.bar-time{font-family:var(--fm);font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.bar-badge{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border-radius:4px;
  border:1px solid var(--line);color:var(--ink3);flex:none}
.bar-badge.mix{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
@media(max-width:820px){.bar-meta{display:none}.bar-time{display:none}}
@media(max-width:520px){.bar-badge{display:none}}

/* ─────────────────────────────────────────────────────── SECTIONS ── */
section{padding:clamp(66px,9vh,112px) 0}
.sec-h{max-width:62ch}
.eyebrow{font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.sec-h h2{font-size:clamp(27px,3.6vw,42px);margin-top:14px;text-wrap:balance}
.sec-h p{margin-top:16px;color:var(--ink2);font-size:16.5px;line-height:1.55;max-width:54ch}
.anim{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e),transform .6s var(--e)}
.anim.visible{opacity:1;transform:none}

/* ── THE WORK — album storytelling grid. Click a record, it plays. */
#work{background:var(--s1);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rec-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:40px}
@media(max-width:1040px){.rec-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.rec-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
.rec{cursor:pointer;transition:transform .35s var(--e);min-width:0} /* grid cells
  must shrink below chip-row min-content or phones scroll sideways (found @390) */
.rec:hover{transform:translateY(-4px)}
.rec-cv{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--s3);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9)}
.rec-cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--e)}
.rec:hover .rec-cv img{transform:scale(1.045)}
/* .cvf is UNSCOPED on purpose — the same typographic sleeve serves the work
   grid, the student rail and the bar art. Scoping it to .rec-cv once left the
   student rail falling back to default serifs (caught in Playwright 08-19). */
.cvf{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
  background:linear-gradient(152deg,var(--a2,#2a2318),var(--a1,#0f0d09))}
.cvf b{font-size:14px;font-weight:640;letter-spacing:-.03em;line-height:1.15;color:rgba(245,241,233,.92)}
.cvf i{font-family:var(--fm);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,233,.42);font-style:normal;margin-top:4px}
.rec-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,10,8,.42);
  opacity:0;transition:opacity .3s}
.rec:hover .rec-play,.rec.on .rec-play{opacity:1}
.rec.on .rec-cv{outline:2px solid var(--blue);outline-offset:2px}
.rec-play i{width:44px;height:44px;border-radius:50%;background:rgba(245,241,233,.94);display:grid;place-items:center;color:#000}
.rec b.rt{display:block;font-size:13.5px;font-weight:600;margin-top:11px;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec span.ra{display:block;font-size:12px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.rtag{font-family:var(--fm);font-size:8px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;border:1px solid var(--line);color:var(--ink3)}
.rtag.ba{color:var(--blue);border-color:rgba(33,131,219,.42)}
.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin-top:46px}
@media(max-width:760px){.proof-strip{grid-template-columns:1fr}}
.ps{background:var(--s2);padding:26px 24px}
.ps b{display:block;font-size:clamp(24px,2.8vw,32px);font-weight:640;letter-spacing:-.038em}
.ps span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink3)}

/* ── MENTOR + STUDENTS — the rail is a component; student slots land here.
   Card contract: {who, name, title, note} + optional A/B audio. Shipping with
   client records until David renders student before/afters (his call). */
.st-rail{display:flex;gap:14px;overflow-x:auto;padding:40px 0 8px;scrollbar-width:none}
.st-rail::-webkit-scrollbar{display:none}
.st{flex:none;width:230px;padding:18px;border-radius:14px;background:var(--s1);
  border:1px solid var(--line2);cursor:pointer;
  transition:border-color .3s var(--e),transform .3s var(--e)}
.st:hover{border-color:rgba(245,241,233,.18);transform:translateY(-3px)}
.st.on{border-color:rgba(33,131,219,.45)}
.st-who{font-family:var(--fm);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);min-height:26px;line-height:1.4}
.st-cv{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:var(--s3);margin-top:10px}
.st-cv img{width:100%;height:100%;object-fit:cover;display:block}
.st b{display:block;font-size:14.5px;font-weight:620;margin-top:12px;letter-spacing:-.02em}
.st span{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.st-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.st-foot .rtag{font-size:7.5px}
.st-note{margin-top:18px;font-size:13px;color:var(--ink3)}

/* ── FREE — the Headphone Blueprint capture, high on the page on purpose */
#free{background:var(--s1);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.bp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:900px){.bp{grid-template-columns:1fr;gap:30px}}
.bp-form{display:flex;gap:10px;margin-top:26px;max-width:480px}
.bp-form input{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(12,10,8,.5);color:var(--ink);font:inherit;font-size:15px}
.bp-form input::placeholder{color:var(--ink3)}
.bp-form input:focus{outline:none;border-color:rgba(33,131,219,.5)}
@media(max-width:560px){.bp-form{flex-direction:column}}
.bp-ok{display:none;margin-top:26px;font-size:15px;color:var(--emerald);font-weight:600}
.bp-stat{display:flex;gap:34px;margin-top:30px}
.bp-stat b{display:block;font-size:24px;font-weight:640;letter-spacing:-.035em}
.bp-stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink3)}
.bp-visual{border-radius:16px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.bp-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* ── THE LADDER — product imagery behind each card, real hover states */
.lad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
@media(max-width:900px){.lad{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
.card{position:relative;display:flex;flex-direction:column;padding:0;border-radius:16px;
  background:var(--s1);border:1px solid var(--line2);overflow:hidden;
  transition:border-color .35s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.card:hover{border-color:rgba(245,241,233,.2);transform:translateY(-3px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.card.feat{border-color:rgba(33,131,219,.4)}
.card.feat:hover{border-color:rgba(33,131,219,.6)}
.card-img{position:relative;height:150px;overflow:hidden;background:var(--s3)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  opacity:.55;filter:saturate(.9);transition:opacity .45s var(--e),transform .45s var(--e)}
.card:hover .card-img img{opacity:.85;transform:scale(1.04)}
/* for near-black source photos (the overhead rig shot) that die under the dim */
.card-img.bright img{opacity:.85;filter:brightness(1.55) saturate(1.05)}
.card:hover .card-img.bright img{opacity:1}
.card-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--s1) 4%,rgba(19,16,9,.25) 55%,rgba(12,10,8,.15) 100%)}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
.card-tag{font-size:12px;font-weight:620;letter-spacing:.01em;color:var(--ink3)}
.card.feat .card-tag{color:var(--blue-lift)}
.card-n{font-size:22px;font-weight:640;letter-spacing:-.032em;margin-top:8px}
.card-pr{display:flex;align-items:baseline;gap:7px;margin-top:14px}
.card-pr b{font-size:36px;font-weight:660;letter-spacing:-.042em}
.card-pr span{font-size:13px;color:var(--ink3)}
.card-d{margin-top:12px;font-size:14.5px;color:var(--ink2);line-height:1.55}
.card-not{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:13px;color:var(--ink3);line-height:1.5}
.card-b{margin-top:auto;padding-top:24px}
.card-b a{display:flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:12px;
  font-size:14.5px;font-weight:600;border:1px solid var(--line);transition:.26s var(--e)}
.card-b a:hover{background:rgba(245,241,233,.07);border-color:rgba(245,241,233,.26)}
.card.feat .card-b a{background:var(--blue);border-color:var(--blue);color:var(--on-blue);box-shadow:var(--glow-cta)}
.card.feat .card-b a:hover{background:var(--blue-lift);box-shadow:var(--glow-cta-hover)}
.lad-note{margin-top:20px;font-size:14px;color:var(--ink3);line-height:1.6}
.lad-note a{color:var(--ink2);border-bottom:1px solid var(--line)}

footer{border-top:1px solid var(--line2);padding:44px 0 40px;color:var(--ink3);font-size:13.5px}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* the mock label lives in the nav's empty center — anywhere else it eventually
   floats over real content mid-scroll (it covered G's SIDE A eyebrow at top-left) */
.tagchip{position:fixed;left:50%;transform:translateX(-50%);top:17px;z-index:75;font-size:10.5px;padding:7px 12px;
  border-radius:6px;font-family:var(--fm);letter-spacing:.04em;color:var(--ink2);
  background:rgba(19,16,9,.92);border:1px solid var(--line)}
@media(max-width:880px){.tagchip{display:none}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .anim{opacity:1;transform:none}
}