/* ═══════════════════════════════════════════════════════════════
   editorial.css — Cinematic polish layer
   ────────────────────────────────────────────────────────────
   Purpose: Lift the site from "good SaaS" to "editorial luxury."
   Reduces box energy, adds atmospheric depth, refines buttons,
   tightens microtype. Loaded AFTER style.css + enhancements.css
   so these rules take precedence.

   Direction: Apple / Aesop / Linear / Porsche.
   Discipline: quiet confidence, restrained motion, real depth.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. ATMOSPHERIC DEPTH — film grain + ambient vignette
─────────────────────────────────────────────────────────── */

/* Subtle SVG film grain — applied to body, very low opacity.
   Inline data-URI of fractalNoise — no extra HTTP request. */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient vignette — corners dim slightly to create depth.
   Only on dark sections (skipped on light bands). */
.hero::after,
.pad-section.bg-navy::after,
.pad-section.bg-navy-grad::after,
section.hero::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 75% at 50% 35%, transparent 0%, transparent 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.28) 100%);
  z-index:1;
}
.hero > *, .pad-section > *{position:relative;z-index:2}

/* ─────────────────────────────────────────────────────────
   2. REMOVE BOX ENERGY — borderless cards
   Override the noisy outlined cards with depth-only treatments
─────────────────────────────────────────────────────────── */

/* "Why us" cards — kill the border, lean on background + shadow */
.p-card{
  background:linear-gradient(160deg, rgba(15,32,68,.55) 0%, rgba(10,22,40,.35) 100%);
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.0);
  transition:background .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
}
.p-card:hover{
  background:linear-gradient(160deg, rgba(20,38,76,.7) 0%, rgba(13,29,58,.5) 100%);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 28px 70px rgba(0,0,0,.32);
  transform:translateY(-3px);
}

/* Audience cards — keep texture but kill the rectangle */
.aud-card{
  background:linear-gradient(155deg, rgba(13,29,58,.42) 0%, rgba(8,18,38,.25) 100%);
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  transition:background .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.aud-card:hover{
  background:linear-gradient(155deg, rgba(20,38,76,.6) 0%, rgba(13,29,58,.4) 100%);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.25);
  transform:translateY(-2px);
}

/* Course cards — soften the heavy borders */
.cc-card{
  background:linear-gradient(165deg, rgba(15,32,68,.62) 0%, rgba(10,22,40,.5) 100%);
  border:1px solid rgba(240,165,0,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px rgba(0,0,0,.18);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.cc-card:hover{
  border-color:rgba(240,165,0,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 28px 70px rgba(0,0,0,.4);
  transform:translateY(-4px);
}
.cc-card.feat{
  border:1px solid rgba(240,165,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 64px rgba(0,0,0,.42), 0 0 60px rgba(240,165,0,.06);
}

/* Hero credential panel — quieter, more refined */
.hero-panel{
  background:linear-gradient(160deg, rgba(13,29,58,.78) 0%, rgba(10,22,40,.92) 65%, rgba(15,12,38,.85) 100%);
  border:1px solid rgba(240,165,0,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 32px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hp-row{
  background:transparent;
  border:none;
  padding:0 0 18px;
  border-bottom:1px solid rgba(240,165,0,.1);
  margin-bottom:22px;
}
.hp-list li{border-bottom:1px solid rgba(255,255,255,.04)}
.hp-list li:last-child{border-bottom:none}

/* Trainer card — atmospheric not boxy */
.ip-card{
  background:linear-gradient(165deg, rgba(15,32,68,.85) 0%, rgba(10,22,40,.92) 100%);
  border:1px solid rgba(240,165,0,.14);
  box-shadow:0 32px 80px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05) inset;
}

/* Batch table — kill the box, lean on whitespace */
.batch-table-wrap{
  background:transparent;
  border:none;
  box-shadow:none;
}
.batch-table thead tr{
  background:transparent;
  border-bottom:1px solid rgba(240,165,0,.2);
}
.batch-table th{
  background:transparent;
  border-bottom:none;
  color:var(--muted);
  font-weight:600;
  letter-spacing:1.8px;
}
.batch-table td{
  border-bottom:1px solid rgba(255,255,255,.05);
}
.batch-table tr:hover td{background:rgba(240,165,0,.02)}

/* FAQ — borderless accordion */
.fq{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(240,165,0,.08);
  border-radius:0;
}
.fq.open{border-color:rgba(240,165,0,.2)}
.fq:hover{border-bottom-color:rgba(240,165,0,.2)}

/* Trust bar — quieter chrome */
.trust-bar{
  background:linear-gradient(180deg, rgba(8,16,32,.7) 0%, rgba(13,29,58,.5) 100%);
  border-bottom:1px solid rgba(240,165,0,.08);
}
.trust-item{padding:4px 14px;border-right:none}
.trust-bar .trust-item[style*="border:1px solid var(--gold)"]{
  border:1px solid rgba(240,165,0,.35)!important;
  background:rgba(240,165,0,.05)!important;
}

/* Icon-wrap — softer, more luxe */
.ic-wrap{
  background:linear-gradient(155deg, rgba(240,165,0,.08), rgba(240,165,0,.02));
  border:1px solid rgba(240,165,0,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.card:hover .ic-wrap,
.cc-card:hover .ic-wrap,
.p-card:hover .ic-wrap,
.aud-card:hover .ic-wrap{
  background:linear-gradient(155deg, rgba(240,165,0,.15), rgba(240,165,0,.04));
  border-color:rgba(240,165,0,.28);
}

/* ─────────────────────────────────────────────────────────
   3. SECTION TRANSITIONS — no hard cuts, atmospheric bleed
─────────────────────────────────────────────────────────── */
.pad-section{position:relative}
.pad-section + .pad-section::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:120px;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 100%);
  pointer-events:none;
}

.hero + .client-strip{position:relative}
.hero + .client-strip::before{
  content:'';
  position:absolute;
  top:-1px;left:0;right:0;
  height:80px;
  background:linear-gradient(180deg, var(--navy) 0%, transparent 100%);
  pointer-events:none;
}

/* ─────────────────────────────────────────────────────────
   4. EDITORIAL TYPOGRAPHY — microtype refinement
─────────────────────────────────────────────────────────── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Tighter, more dramatic display headings */
h1, .h-1{
  font-weight:700;
  letter-spacing:-1.2px;
  line-height:1.02;
}
h2, .h-2{
  font-weight:700;
  letter-spacing:-.6px;
  line-height:1.08;
}
h3, .h-3{
  font-weight:600;
  letter-spacing:-.2px;
  line-height:1.18;
}

/* Refined italic em — softer, more editorial */
h1 em, h2 em, .h-1 em, .h-2 em{
  font-style:italic;
  font-weight:600;
  color:var(--gold-light);
  letter-spacing:-.5px;
}

/* Premium body paragraph — readable line length, generous line-height */
p, .body, .hero-desc{
  line-height:1.78;
  max-width:62ch;
}
.text-center p{margin-left:auto;margin-right:auto}

/* Section subheading paragraph — quieter */
.sh-wrap p{
  font-size:15.5px;
  color:#a8b5d1;
  line-height:1.85;
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
  font-weight:400;
}

/* Badge — quieter chrome, more refined */
.badge{
  background:transparent;
  border:1px solid rgba(240,165,0,.22);
  color:var(--gold);
  font-weight:600;
  letter-spacing:2.5px;
  padding:5px 13px;
}

/* Refined divider — barely there */
.divg{
  width:36px;
  height:1px;
  background:rgba(240,165,0,.4);
  opacity:1;
}
.divg::after{display:none}

/* Headline emphasis bar — uses tg span to underline the keyword */
.tg span, h1 span.tg, h2 span.tg{
  color:var(--gold-light);
  font-style:italic;
  font-weight:600;
}

/* ─────────────────────────────────────────────────────────
   5. BUTTON REFINEMENT — Apple/Linear-grade physics
─────────────────────────────────────────────────────────── */
.btn{
  position:relative;
  font-weight:500;
  letter-spacing:.3px;
  transition:
    transform .28s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .28s cubic-bezier(.4, 0, .2, 1),
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease;
  will-change:transform;
}
.btn:active{transform:translateY(0) scale(.98);transition:transform .12s cubic-bezier(.4,0,.2,1)}

.btn-gold{
  background:linear-gradient(135deg, #f0a500 0%, #ffc845 100%);
  color:var(--navy);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.1) inset,
    0 4px 16px rgba(240,165,0,.22);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.1) inset,
    0 10px 28px rgba(240,165,0,.32);
}

.btn-ghost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-2px);
}

.btn-outline{
  border:1px solid rgba(240,165,0,.4);
  background:transparent;
}
.btn-outline:hover{
  background:rgba(240,165,0,.06);
  border-color:rgba(240,165,0,.65);
  transform:translateY(-2px);
}

.btn-lg{padding:14px 30px;font-size:13.5px;letter-spacing:.4px}

/* ─────────────────────────────────────────────────────────
   6. HERO REFINEMENT — editorial composition
─────────────────────────────────────────────────────────── */
.hero{padding:120px 0 100px;min-height:auto}
.hero-eyebrow{
  margin-bottom:28px;
  opacity:.85;
}
.hey-line{width:40px;height:1px;background:rgba(240,165,0,.45)}
.hey-txt{
  font-size:10.5px;
  letter-spacing:3.5px;
  color:#cbd5e1;
  font-weight:600;
}

.hero h1{
  font-size:clamp(40px, 6vw, 72px);
  letter-spacing:-1.5px;
  margin-bottom:22px;
}
.hero-desc{
  max-width:520px;
  font-size:17px;
  color:#a8b5d1;
  line-height:1.85;
  font-weight:400;
  margin-bottom:38px;
}
.hero-actions{margin-bottom:44px;gap:14px}
.hero-trust{gap:32px}
.ht-item{align-items:flex-start}
.ht-dot{
  width:4px;height:4px;
  background:rgba(240,165,0,.65);
  box-shadow:0 0 12px rgba(240,165,0,.5);
  margin-top:8px;
}
.ht-lbl strong{font-weight:600;color:#fff;font-size:13px;letter-spacing:.2px}
.ht-lbl span{font-size:11.5px;color:#8a9bbf;letter-spacing:.2px;margin-top:2px;display:block}

/* Soften the loud hero-glow */
.hero-bg{opacity:.6}
.hero-glow{opacity:.35;filter:blur(10px)}

/* ─────────────────────────────────────────────────────────
   7. CLIENT STRIP — refined editorial silhouette
─────────────────────────────────────────────────────────── */
.client-strip{
  padding:56px 0 64px;
  background:linear-gradient(180deg, rgba(10,22,40,.6) 0%, rgba(8,16,32,.4) 100%);
  border:none;
  position:relative;
}
.client-strip::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,165,0,.18),transparent);
}
.client-strip::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,165,0,.12),transparent);
}
.client-strip-label{
  opacity:.55;
  letter-spacing:3.5px;
  font-size:10px;
  margin-bottom:36px;
}
.cl-item{
  padding:10px 32px;
  opacity:.35;
  transition:all .5s ease;
  filter:grayscale(1) brightness(1.35);
}
.cl-item:hover{
  opacity:.85;
  filter:grayscale(0) brightness(1);
}
.cl-divider{height:18px;background:rgba(255,255,255,.05)}

/* ─────────────────────────────────────────────────────────
   8. SECTION HEADERS — editorial restraint
─────────────────────────────────────────────────────────── */
.sh-wrap{
  margin-bottom:64px;
}
.sh-wrap .badge{
  display:inline-block;
  margin-bottom:18px;
}
.sh-wrap h2{
  font-size:clamp(34px, 4.5vw, 52px);
  letter-spacing:-1px;
  margin-bottom:18px;
}

/* ─────────────────────────────────────────────────────────
   9. EDITORIAL CASE STUDY — luxury magazine-style feature
─────────────────────────────────────────────────────────── */
.editorial-case{
  position:relative;
  padding:120px 0 110px;
  background:
    radial-gradient(ellipse 60% 70% at 20% 30%, rgba(240,165,0,.05) 0%, transparent 70%),
    linear-gradient(180deg, #0a1628 0%, #0c1c3a 100%);
  overflow:hidden;
}
.editorial-case::before{
  content:'';
  position:absolute;
  top:0;right:0;width:40%;height:100%;
  background:linear-gradient(135deg, transparent 0%, rgba(240,165,0,.025) 100%);
  pointer-events:none;
}
.ec-wrap{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:80px;
  align-items:start;
  max-width:1080px;
  margin:0 auto;
}
.ec-eyebrow{
  font-size:10px;
  letter-spacing:4px;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:24px;
  opacity:.7;
}
.ec-quote{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.6px;
  color:#fff;
  font-style:italic;
  margin-bottom:28px;
  position:relative;
}
.ec-quote::before{
  content:'\201C';
  position:absolute;
  top:-32px;left:-22px;
  font-size:84px;
  color:var(--gold);
  opacity:.25;
  font-style:normal;
  line-height:1;
}
.ec-attribution{
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.2px;
  line-height:1.7;
}
.ec-attribution strong{
  color:#fff;
  font-weight:600;
  font-size:14px;
  display:block;
  margin-bottom:2px;
}
.ec-body{padding-top:6px}
.ec-body p{
  font-size:15.5px;
  color:#a8b5d1;
  line-height:1.95;
  margin-bottom:20px;
  max-width:none;
}
.ec-body p:last-of-type{margin-bottom:28px}
.ec-stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding:32px 0;
  border-top:1px solid rgba(240,165,0,.12);
  border-bottom:1px solid rgba(240,165,0,.12);
  margin:32px 0;
}
.ec-stat{}
.ec-stat-label{
  font-size:9.5px;
  letter-spacing:2.5px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:8px;
  opacity:.7;
}
.ec-stat-val{
  font-family:'Cormorant Garamond', serif;
  font-size:28px;
  color:var(--gold-light);
  font-weight:600;
  line-height:1;
  letter-spacing:-.3px;
}
.ec-stat-sub{
  font-size:11.5px;
  color:#cbd5e1;
  margin-top:6px;
  letter-spacing:.1px;
}
.ec-footer{
  font-size:12px;
  color:var(--muted);
  font-style:italic;
  letter-spacing:.2px;
}
@media(max-width:900px){
  .ec-wrap{grid-template-columns:1fr;gap:40px}
  .ec-stat-row{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .ec-quote::before{display:none}
}

/* ─────────────────────────────────────────────────────────
   10. MICROSPACING — vertical rhythm refinement
─────────────────────────────────────────────────────────── */
.pad-section{padding:112px 0}
.pad-section-sm{padding:80px 0}
@media(max-width:900px){
  .pad-section{padding:80px 0}
  .pad-section-sm{padding:64px 0}
}
@media(max-width:600px){
  .pad-section{padding:64px 0}
  .pad-section-sm{padding:48px 0}
}

.container{padding:0 28px}
@media(max-width:600px){.container{padding:0 22px}}

/* "Why us" grid — more breathing room */
.grid-2{gap:28px}
@media(min-width:900px){.grid-2{gap:36px}}

/* "Who this is for" grid — more luxe spacing */
.aud-grid{gap:14px;margin-top:60px}
.aud-card{padding:28px 24px}
.aud-card h4{font-size:15px;margin-bottom:7px}
.aud-card p{font-size:12.5px;line-height:1.7}

/* Course card refinement */
.cc-head{padding:32px 28px 20px!important}
.cc-body{padding:0 28px 8px!important}
.cc-foot{padding:18px 28px 22px!important;border-top:1px solid rgba(255,255,255,.04)}
.cc-card h3{font-size:21px;letter-spacing:-.3px;font-weight:600}
.cc-feats li{padding:7px 0;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.03)}
.cc-feats li:last-child{border-bottom:none}

/* ─────────────────────────────────────────────────────────
   11. TRAINER PANEL — editorial composition
─────────────────────────────────────────────────────────── */
.ip-wrap{grid-template-columns:380px 1fr;gap:72px;align-items:center}
.ip-content h2{
  font-size:clamp(32px, 4.2vw, 48px);
  letter-spacing:-1px;
}
.ip-content .lead{
  font-size:16px;
  line-height:1.85;
  color:#a8b5d1;
  max-width:520px;
}
.ip-pills{gap:7px;margin-bottom:22px}
.ip-pill{
  background:rgba(240,165,0,.06);
  border:1px solid rgba(240,165,0,.16);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.5px;
  padding:5px 11px;
}
.ip-quote{
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:18px;
  margin-top:18px;
  font-size:13px;
  font-style:italic;
  line-height:1.75;
  color:#cbd5e1;
  position:relative;
}

/* ─────────────────────────────────────────────────────────
   12. FAQ — editorial type
─────────────────────────────────────────────────────────── */
.fqq{padding:22px 4px;gap:18px}
.fqqt{font-size:15px;font-weight:500;color:#fff;letter-spacing:-.1px;line-height:1.45}
.fqt{
  width:22px;height:22px;
  background:transparent;
  border:1px solid rgba(240,165,0,.3);
  font-size:13px;
  font-weight:300;
}
.fq.open .fqt{background:var(--gold);border-color:var(--gold)}
.fqai{padding:0 4px 22px;font-size:14px;color:#a8b5d1;line-height:1.85;border-top:none}

/* ─────────────────────────────────────────────────────────
   13. FINAL CTA — softer, more refined gradient
─────────────────────────────────────────────────────────── */
section[style*="background:linear-gradient(135deg,var(--gold)"]{
  background:linear-gradient(135deg, #d4a44a 0%, #b8893a 40%, #e2b85a 100%)!important;
  padding:96px 0!important;
}

/* ─────────────────────────────────────────────────────────
   14. MOBILE LUXURY — premium scaled-down rhythm
─────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .hero{padding:80px 0 60px;min-height:auto}
  .hero h1{font-size:clamp(32px, 8vw, 44px);letter-spacing:-1px;line-height:1.06}
  .hero-desc{font-size:15px}
  .hero-eyebrow{margin-bottom:20px}
  .hero-wrap{grid-template-columns:1fr;gap:48px}
  .hero-trust{gap:20px;flex-wrap:wrap}
  .hero-actions{flex-direction:column;align-items:flex-start;width:100%}
  .hero-actions .btn{width:100%;justify-content:center}

  .sh-wrap{margin-bottom:40px}
  .sh-wrap h2{font-size:clamp(26px, 7vw, 36px);letter-spacing:-.6px}

  .ip-wrap{grid-template-columns:1fr;gap:32px}
  .ip-card{max-width:340px;margin:0 auto}

  .ec-wrap{gap:32px}
  .ec-quote{font-size:24px}

  .cl-item{padding:8px 18px}
  .cl-divider{display:none}

  .cc-card h3{font-size:19px}

  /* Tighter section padding */
  .container{padding:0 22px}
}

/* ─────────────────────────────────────────────────────────
   15. SOFT SHIFT ANIMATION — gentle reveal on scroll
─────────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay:.05s;
}
.revealed{opacity:1;transform:translateY(0)}

/* Sequential reveal stagger (apply to grid children) */
.grid-2 .reveal:nth-child(2),
.grid-3 .reveal:nth-child(2),
.cg .reveal:nth-child(2){transition-delay:.18s}
.grid-2 .reveal:nth-child(3),
.grid-3 .reveal:nth-child(3),
.cg .reveal:nth-child(3){transition-delay:.3s}
.grid-2 .reveal:nth-child(4){transition-delay:.42s}
.aud-grid .aud-card.reveal:nth-child(2){transition-delay:.1s}
.aud-grid .aud-card.reveal:nth-child(3){transition-delay:.2s}
.aud-grid .aud-card.reveal:nth-child(4){transition-delay:.3s}
.aud-grid .aud-card.reveal:nth-child(5){transition-delay:.4s}
.aud-grid .aud-card.reveal:nth-child(6){transition-delay:.5s}

/* ─────────────────────────────────────────────────────────
   16. FOCUS STATES — accessible + refined
─────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid rgba(240,165,0,.7);
  outline-offset:3px;
  border-radius:6px;
}

/* Selection */
::selection{background:rgba(240,165,0,.35);color:#fff}
::-moz-selection{background:rgba(240,165,0,.35);color:#fff}

/* ─────────────────────────────────────────────────────────
   17. PREFERS-REDUCED-MOTION — accessibility
─────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  body::before{display:none}
}