/* ==========================================================================
   SELF-HOSTED WEBFONTS
   Served from assets/fonts/ — no Google Fonts request, no third-party
   dependency, no layout shift. Total weight: ~156 KB across 8 files.
   Faces: Bebas Neue 400 · Oswald 500/600 · Montserrat 400/500/600/700
          Playfair Display 500 italic
   ========================================================================== */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/oswald-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/oswald-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url('fonts/playfair-display-latin-500-italic.woff2') format('woff2')}

/* ==========================================================================
   MAN OF HIS HOUSE — Core Stylesheet
   "Because it's not your house. It's His."

   Locked brand decisions (do not change):
     Display face ....... Bebas Neue
     Palette ............ Iron / Charcoal / Stone / Clay / Gold
     Aesthetic .......... Locker room + field house. Hard edges. No soft radii.

   Everything in this file is shared by all five pages. Change it once here
   and it changes site-wide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Surface */
  --iron:      #111111;   /* base black */
  --iron-2:    #171717;   /* raised panel */
  --iron-3:    #1c1c1c;   /* inset well */
  --charcoal:  #2b2b2b;   /* alt section */
  --hairline:  #2e2e2e;   /* dividers on dark */
  --hairline-2:#3d3d3d;   /* borders on dark */

  /* Ink */
  --stone:     #d9d9d6;   /* primary on dark */
  --stone-dim: #a9a9a3;   /* secondary on dark */
  --stone-mute:#83837d;   /* tertiary / captions */
  --ink:       #111111;   /* primary on light */
  --ink-dim:   #3a3a3a;   /* secondary on light */

  /* Accent */
  --clay:      #c8a56a;   /* light gold — text accent */
  --gold:      #b8863b;   /* core gold — structure, buttons */
  --gold-deep: #7d5a22;   /* shadow gold */
  --gold-lite: #f2ddab;   /* highlight gold */

  /* Signal */
  --flag:      #9b2f2f;   /* "not for you", errors */
  --go:        #4f7a4a;   /* success */

  /* Type */
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --subhead: 'Oswald', 'Arial Narrow', sans-serif;
  --accent:  'Playfair Display', Georgia, serif;
  --body:    'Montserrat', -apple-system, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gut: 24px;
  --max: 1180px;
  --max-narrow: 860px;
  --sec: clamp(72px, 9vw, 120px);   /* vertical section padding */
  --sec-sm: clamp(52px, 6vw, 80px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;      /* clears the sticky nav on anchor jumps */
  background:var(--iron);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--body);
  background:var(--iron);
  color:var(--stone);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit}
/* [hidden] must beat component display rules (.btn is inline-flex, .assess-nav is flex) */
[hidden]{display:none!important}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--iron)}

:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:var(--max-narrow)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--iron);padding:14px 22px;
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  text-decoration:none;
}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.015em;
  line-height:.93;
  text-transform:uppercase;
}
h1{font-size:clamp(52px,7.6vw,110px)}
h2{font-size:clamp(38px,5vw,68px)}
h3{font-size:clamp(26px,2.6vw,34px)}
h4{font-size:clamp(20px,2vw,24px)}

p{max-width:68ch}
p + p{margin-top:1em}

.eyebrow{
  display:inline-block;
  font-family:var(--subhead);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:11.5px;
  color:var(--clay);
  margin-bottom:14px;
}
.eyebrow--dark{color:var(--gold)}

.lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--stone-dim);line-height:1.7}
.lede--dark{color:var(--ink-dim)}

.scripture{
  font-family:var(--accent);
  font-style:italic;
  color:var(--clay);
  line-height:1.5;
}
.scripture cite{
  display:block;
  font-family:var(--subhead);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color:var(--stone-mute);
  margin-top:10px;
}

/* Brushed-metal gold fill for display type */
.gold-metal{
  background:linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 22%, var(--clay) 40%,
    var(--gold-lite) 50%, var(--clay) 60%, var(--gold) 78%, var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-metal{color:var(--gold);background:none}
}

/* Section heading block */
.sec-head{max-width:760px;margin:0 auto var(--sec-sm);text-align:center}
.sec-head h2{margin-bottom:18px}
.sec-head p{margin-left:auto;margin-right:auto}
.sec-head--left{text-align:left;margin-left:0}
.sec-head--left p{margin-left:0}

/* Rule with a gold tick */
.rule{height:1px;background:var(--hairline);position:relative;margin:var(--sec-sm) 0}
.rule::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--gold)}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--subhead);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:13.5px;
  padding:17px 32px;
  text-decoration:none;
  border:2px solid var(--gold);
  background:transparent;
  color:var(--stone);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .25s var(--ease),border-color .25s var(--ease);
  text-align:center;
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-101%);transition:transform .3s var(--ease);z-index:0;
}
.btn > *{position:relative;z-index:1}
.btn span{position:relative;z-index:1}
.btn:hover,.btn:focus-visible{color:var(--iron)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(0)}

.btn.solid{background:var(--gold);color:var(--iron);font-weight:500}
.btn.solid::after{background:var(--clay)}
.btn.solid:hover,.btn.solid:focus-visible{color:var(--iron)}

.btn.ghost{border-color:var(--hairline-2);color:var(--stone-dim)}
.btn.ghost::after{background:var(--stone)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--iron);border-color:var(--stone)}

.btn.on-light{border-color:var(--ink);color:var(--ink)}
.btn.on-light::after{background:var(--ink)}
.btn.on-light:hover,.btn.on-light:focus-visible{color:var(--clay)}

.btn.sm{padding:11px 20px;font-size:12px}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */
.progressbar{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--clay),var(--gold-lite));
  z-index:120;transition:width .1s linear;
}

nav.site{
  position:sticky;top:0;z-index:100;
  background:rgba(17,17,17,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
nav.site.stuck{
  background:rgba(12,12,12,.97);
  border-bottom-color:var(--gold);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1320px;margin:0 auto;padding:14px var(--gut);
}
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brandmark svg,.brandmark img{width:38px;height:38px;flex-shrink:0;display:block}
.brandmark b{
  font-family:var(--display);font-weight:400;font-size:21px;
  letter-spacing:.07em;color:var(--stone);line-height:1;white-space:nowrap;
}
.brandmark:hover b{color:var(--clay)}

.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a:not(.btn){
  font-family:var(--subhead);font-size:12px;text-transform:uppercase;
  letter-spacing:.19em;text-decoration:none;color:var(--stone);
  padding:6px 0;position:relative;white-space:nowrap;
}
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold);transition:width .25s var(--ease);
}
.navlinks a:not(.btn):hover::after,
.navlinks a:not(.btn):focus-visible::after,
.navlinks a[aria-current="page"]::after{width:100%}
.navlinks a[aria-current="page"]{color:var(--clay)}
.navlinks .btn{padding:11px 20px;font-size:11.5px}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;background:transparent;border:none;cursor:pointer;padding:9px;
}
.burger i{display:block;height:3px;width:100%;background:var(--gold);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{display:none;background:var(--iron);border-bottom:3px solid var(--gold)}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:19px var(--gut);
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.18em;
  font-size:14px;text-decoration:none;color:var(--stone);
  border-top:1px solid var(--hairline);
}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--clay);background:var(--iron-2)}
.mobile-menu a.highlight{color:var(--gold);font-weight:600}

@media(max-width:1000px){
  .navlinks{display:none}
  .burger{display:flex}
}
@media(min-width:1001px){.mobile-menu{display:none!important}}

/* --------------------------------------------------------------------------
   6. SECTIONS / SURFACES
   -------------------------------------------------------------------------- */
section{padding:var(--sec) 0;position:relative}
.s-iron{background:var(--iron)}
.s-char{background:var(--charcoal)}
.s-stone{background:var(--stone);color:var(--ink)}
.s-stone h1,.s-stone h2,.s-stone h3,.s-stone h4{color:var(--ink)}
.s-stone p{color:var(--ink-dim)}
.s-stone .scripture{color:var(--gold)}
.s-stone .eyebrow{color:var(--gold)}
.s-gold{background:var(--gold);color:var(--ink)}
.s-gold h2,.s-gold h3{color:var(--ink)}
.s-gold p{color:#2c2313}
.topline{border-top:4px solid var(--gold)}
.botline{border-bottom:4px solid var(--gold)}

/* Field-lines texture — subtle yard-marker feel behind dark sections */
.fieldlines{
  position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:repeating-linear-gradient(90deg,var(--clay) 0 1px,transparent 1px 96px);
}
.topo{position:absolute;inset:0;opacity:.07;pointer-events:none;width:100%;height:100%}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:4px solid var(--gold);background:var(--iron)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%, rgba(184,134,59,.16) 0%, transparent 58%);
}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;padding:clamp(80px,11vw,132px) var(--gut) clamp(70px,9vw,104px);
  display:grid;grid-template-columns:1.45fr 1fr;gap:64px;align-items:center;
}
.hero h1{color:#fff}
.hero h1 .his{
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 22%,var(--clay) 40%,
    var(--gold-lite) 50%,var(--clay) 60%,var(--gold) 78%,var(--gold-deep) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s ease-in-out infinite;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .his{color:var(--gold);background:none}
}
.hero .kicker{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.24em;
  font-size:13px;color:var(--clay);margin:26px 0 16px;
}
.hero .lede{max-width:540px;margin-bottom:34px}
.hero-trust{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--stone-mute);
}
.hero-trust span{display:flex;align-items:center;gap:8px}
.hero-trust span::before{content:"";width:6px;height:6px;background:var(--gold);flex-shrink:0}

.promise{border-left:3px solid var(--gold);padding-left:26px}
.promise p{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.11em;
  font-size:16px;line-height:2.05;color:var(--stone);max-width:none;
}
.promise b{color:var(--gold);font-weight:600}

/* Compact page hero for interior pages */
.phero{
  position:relative;overflow:hidden;background:var(--iron);
  border-bottom:4px solid var(--gold);text-align:center;
  padding:clamp(70px,8.5vw,108px) 0 clamp(56px,7vw,84px);
}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 0%, rgba(184,134,59,.15) 0%, transparent 60%);
}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;margin-bottom:16px}
.phero .sub{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.2em;
  font-size:13px;color:var(--clay);margin-bottom:22px;
}
.phero .lede{max-width:660px;margin:0 auto 30px}
.phero .scripture{display:block;font-size:19px;margin:0 auto 32px;max-width:600px}

/* --------------------------------------------------------------------------
   8. STAT ROW
   -------------------------------------------------------------------------- */
.stat-row{display:flex;margin-top:36px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;flex-wrap:wrap}
.stat{flex:1;min-width:110px;padding:20px 10px;text-align:center;border-right:1px solid rgba(0,0,0,.18)}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--display);font-size:clamp(32px,3.4vw,42px);color:var(--gold);line-height:1}
.stat span{
  display:block;font-family:var(--subhead);text-transform:uppercase;
  font-size:10px;letter-spacing:.15em;margin-top:6px;opacity:.8;
}
.s-iron .stat{border-right-color:var(--hairline)}

/* --------------------------------------------------------------------------
   9. QUARTER CARDS
   -------------------------------------------------------------------------- */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hairline);border:1px solid var(--hairline)}
.qcard{
  background:var(--iron);padding:38px 28px 30px;position:relative;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.qcard:hover{background:var(--iron-2)}
.qcard .qnum{
  font-family:var(--display);font-size:64px;color:var(--charcoal);
  position:absolute;top:12px;right:20px;line-height:1;transition:color .3s var(--ease);
}
.qcard:hover .qnum{color:var(--gold-deep)}
.qcard h3{margin-bottom:6px}
.qcard .qsub{
  display:block;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.15em;font-size:11px;color:var(--stone);margin-bottom:18px;
}
.qcard ul{list-style:none}
.qcard li{padding:9px 0;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--stone-dim)}
.qcard li::before{content:"— ";color:var(--gold)}

/* --------------------------------------------------------------------------
   10. PATH / PRICING CARDS
   -------------------------------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pcard{
  border:1px solid var(--hairline-2);padding:44px 32px 38px;
  display:flex;flex-direction:column;background:var(--charcoal);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.pcard:hover{transform:translateY(-5px);border-color:var(--gold)}
.pcard.featured{border:2px solid var(--gold);background:var(--iron);position:relative}
.pcard.featured::before{
  content:attr(data-flag);position:absolute;top:-13px;left:28px;
  background:var(--gold);color:var(--iron);font-family:var(--subhead);
  text-transform:uppercase;font-size:11px;letter-spacing:.17em;padding:5px 15px;
}
.pcard h3{color:#fff;margin-bottom:6px}
.pcard .plabel{
  display:block;font-family:var(--subhead);text-transform:uppercase;
  font-size:11px;letter-spacing:.2em;color:var(--clay);margin-bottom:20px;
}
.pcard > p{font-size:14.5px;color:var(--stone-dim);margin-bottom:22px}
.pcard ul{list-style:none;margin-bottom:30px;flex:1}
.pcard li{font-size:13.5px;color:var(--stone);padding:8px 0;border-top:1px solid var(--hairline)}
.pcard li::before{content:"+ ";color:var(--gold);font-weight:700}
.price{font-family:var(--display);font-size:clamp(48px,5.5vw,68px);color:var(--gold);line-height:1}
.price small{font-size:.36em;letter-spacing:.06em}
.price-note{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;color:var(--stone-mute);margin:8px 0 24px;
}

/* --------------------------------------------------------------------------
   11. ASSESSMENT
   -------------------------------------------------------------------------- */
.assess-shell{max-width:880px;margin:0 auto;background:var(--iron);border:1px solid var(--hairline-2);position:relative}
.assess-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 32px;border-bottom:1px solid var(--hairline);background:var(--iron-2);flex-wrap:wrap;
}
.assess-top .step-name{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--clay)}
.assess-top .step-count{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--stone-mute)}
.assess-track{height:4px;background:var(--charcoal)}
.assess-track i{display:block;height:100%;width:0;background:var(--gold);transition:width .45s var(--ease)}
.assess-body{padding:clamp(26px,4vw,48px)}

.q-item{margin-bottom:34px}
.q-item:last-child{margin-bottom:0}
.q-item .q-label{
  display:block;font-family:var(--subhead);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay);margin-bottom:8px;
}
.q-item p{color:var(--stone);font-size:16px;margin-bottom:16px;max-width:none}
.scale{display:flex;gap:8px}
.scale button{
  flex:1;padding:14px 0;background:transparent;border:1px solid var(--hairline-2);
  color:var(--stone-mute);font-family:var(--subhead);font-size:16px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.scale button:hover{border-color:var(--clay);color:var(--clay)}
.scale button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--iron);font-weight:600}
.scale-key{
  display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--stone-mute);margin-top:8px;font-family:var(--subhead);
}
.assess-nav{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-top:26px;border-top:1px solid var(--hairline);flex-wrap:wrap}
.assess-msg{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--flag);margin-top:14px;min-height:18px;
}
.assess-msg.ok{color:var(--clay)}

/* Results */
.report-head{text-align:center;padding-bottom:30px;border-bottom:2px solid var(--gold);margin-bottom:32px}
.report-head .grade{font-family:var(--display);font-size:clamp(64px,9vw,110px);line-height:1;color:var(--gold)}
.report-head .grade-label{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--stone-mute);margin-top:6px}
.rbar{margin-bottom:22px}
.rbar .rlabel{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--subhead);text-transform:uppercase;font-size:12px;
  letter-spacing:.15em;margin-bottom:7px;
}
.rbar .rlabel em{font-style:normal;color:var(--stone-mute);font-size:11px}
.rbar .track{height:14px;background:var(--charcoal);position:relative}
.rbar .fill{height:100%;width:0;background:var(--gold);transition:width .9s var(--ease)}
.rbar.weak .fill{background:linear-gradient(90deg,var(--flag),#c4623f)}
.rbar.weak .rlabel{color:var(--clay)}
.verdict{margin-top:32px;padding:30px;background:var(--charcoal);border-left:4px solid var(--gold)}
.verdict .scripture{display:block;font-size:18px;margin-bottom:14px}
.verdict h4{color:#fff;margin-bottom:10px}
.verdict p{color:var(--stone);font-size:15px}
.first-rep{margin-top:22px;background:var(--iron);border:1px solid var(--hairline-2);padding:20px 22px}
.first-rep b{
  display:block;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;color:var(--gold);margin-bottom:6px;
}
.first-rep p{font-size:14.5px;color:var(--stone)}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-box{
  max-width:780px;margin:0 auto;background:var(--charcoal);
  border:1px solid var(--hairline-2);padding:clamp(26px,4vw,50px);
}
.fld{margin-bottom:26px}
.fld:last-of-type{margin-bottom:0}
.fld > label,.fld .flabel{
  display:block;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--clay);margin-bottom:9px;
}
.fld .hint{display:block;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--stone-mute);margin-top:-3px;margin-bottom:9px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{
  width:100%;
  background:var(--iron)!important;background-color:var(--iron)!important;
  border:1px solid var(--hairline-2);
  color:var(--stone)!important;-webkit-text-fill-color:var(--stone);
  caret-color:var(--clay);
  padding:15px;font-family:var(--body);font-size:15px;
  appearance:none;-webkit-appearance:none;border-radius:0;
  transition:border-color .2s;
}
.fld input:-webkit-autofill,.fld textarea:-webkit-autofill,.fld select:-webkit-autofill{
  -webkit-text-fill-color:var(--stone);
  -webkit-box-shadow:0 0 0 1000px var(--iron) inset;
  box-shadow:0 0 0 1000px var(--iron) inset;
  transition:background-color 99999s ease-in-out 0s;
}
.fld ::placeholder{color:#6e6e68;opacity:1}
.fld textarea{min-height:118px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold);outline:none}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--flag)}
.fld .err{display:block;font-family:var(--subhead);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--flag);margin-top:7px;min-height:14px}

.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip-row label{
  flex:1 1 auto;min-width:130px;border:1px solid var(--hairline-2);padding:14px 12px;
  text-align:center;cursor:pointer;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;color:var(--stone);transition:all .18s;
}
.chip-row label:hover{border-color:var(--clay)}
.chip-row input{position:absolute;opacity:0;width:0;height:0}
.chip-row input:checked + span,.chip-row label.sel{border-color:var(--gold);background:var(--iron);color:var(--gold)}
.chip-row label:has(input:checked){border-color:var(--gold);background:var(--iron);color:var(--gold)}
.chip-row label:has(input:focus-visible){outline:3px solid var(--clay);outline-offset:3px}

.check-row{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;color:var(--stone-dim)}
.check-row input{margin-top:4px;accent-color:var(--gold);width:19px;height:19px;flex-shrink:0}
.check-row label{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--stone-dim);font-size:13.5px;margin:0}

.form-msg{
  margin-top:20px;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.14em;font-size:12.5px;color:var(--clay);display:none;
}
.form-msg.show{display:block}
.form-msg.error{color:var(--flag)}
.form-msg.success{color:var(--gold)}
.form-note{font-size:12.5px;color:var(--stone-mute);margin-top:20px}

/* Honeypot — hidden from humans, catches bots */
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden}

/* Inline email capture band */
.capture{background:var(--iron-2);border-top:4px solid var(--gold);padding:var(--sec-sm) 0}
.capture .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.capture h2{color:#fff;margin-bottom:14px}
.capture p{color:var(--stone-dim);font-size:15px}
.capture-form{display:flex;gap:10px;flex-wrap:wrap}
.capture-form input{
  flex:1 1 240px;background:var(--iron);border:1px solid var(--hairline-2);
  color:var(--stone);padding:16px;font-size:15px;border-radius:0;
}
.capture-form input:focus{border-color:var(--gold);outline:none}
.capture-form .btn{flex:0 0 auto}
.capture .form-msg{margin-top:14px}
.capture .form-note{font-size:11.5px;margin-top:12px}

/* --------------------------------------------------------------------------
   13. ACCORDION / MODULES
   -------------------------------------------------------------------------- */
.qblock{margin-bottom:64px;scroll-margin-top:150px}
.qblock:last-child{margin-bottom:0}
.qtitle{display:flex;align-items:baseline;gap:20px;border-bottom:2px solid var(--gold);padding-bottom:14px;margin-bottom:6px;flex-wrap:wrap}
.qtitle h2{font-size:clamp(34px,4.4vw,54px)}
.qtitle .qtag{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--clay)}

details.mod{border-bottom:1px solid var(--hairline)}
details.mod summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:22px 4px;
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.09em;
  font-size:15.5px;color:var(--stone);transition:color .2s;
}
details.mod summary::-webkit-details-marker{display:none}
details.mod summary:hover{color:var(--clay)}
details.mod summary .num{color:var(--gold);margin-right:16px;font-family:var(--display);font-size:21px}
details.mod summary .plus{color:var(--gold);font-size:24px;transition:transform .25s var(--ease);flex-shrink:0;line-height:1}
details.mod[open] summary .plus{transform:rotate(45deg)}
details.mod[open] summary{color:var(--clay)}
.mod-body{padding:0 4px 30px;max-width:780px}
.mod-body .scripture{display:block;font-size:16px;margin-bottom:12px}
.mod-body p{font-size:15px;color:var(--stone-dim);margin-bottom:16px}
.rep{border-left:3px solid var(--gold);padding:14px 18px;background:var(--iron-3);font-size:14px;color:var(--stone)}
.rep b{display:block;font-family:var(--subhead);text-transform:uppercase;letter-spacing:.15em;font-size:10.5px;color:var(--gold);margin-bottom:5px}

/* Sticky sub-nav for long pages */
.subnav{
  position:sticky;top:69px;z-index:80;background:rgba(17,17,17,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.subnav ul{list-style:none;display:flex;gap:0;max-width:var(--max);margin:0 auto;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{
  display:block;padding:16px 22px;text-decoration:none;white-space:nowrap;
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;color:var(--stone-dim);border-bottom:3px solid transparent;transition:all .2s;
}
.subnav a:hover{color:var(--clay)}
.subnav a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* --------------------------------------------------------------------------
   14. CARDS / GRIDS
   -------------------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grid-2.top{align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hairline);border:1px solid var(--hairline)}
.split-6040{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}

.card{background:var(--charcoal);border:1px solid var(--hairline-2);padding:34px 28px;transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.card h3{color:#fff;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--stone-dim)}
.card .cnum{font-family:var(--display);font-size:46px;color:var(--gold);line-height:1;display:block;margin-bottom:10px}

.step{background:var(--charcoal);padding:36px 26px;text-align:center}
.step b{font-family:var(--display);font-size:48px;color:var(--gold);display:block;line-height:1}
.step h3{color:#fff;margin:12px 0 10px;font-size:23px}
.step p{font-size:13.5px;color:var(--stone-dim);margin:0 auto}

.pillbox{border:1px dashed var(--gold);padding:36px}
.pillbox h3{color:var(--gold);margin-bottom:16px}
.pillbox ul{list-style:none}
.pillbox li{padding:11px 0;border-top:1px solid var(--hairline);font-size:14.5px;color:var(--stone-dim)}
.pillbox li b{color:var(--stone)}

.checklist{list-style:none}
.checklist li{padding:13px 0;border-top:1px solid rgba(0,0,0,.15);font-size:15px}
.s-iron .checklist li,.s-char .checklist li{border-top-color:var(--hairline)}
.checklist.yes li::before{content:"✓";color:var(--gold);font-weight:700;margin-right:12px}
.checklist.no li::before{content:"✕";color:var(--flag);font-weight:700;margin-right:12px}

/* Comparison table */
.compare{width:100%;border-collapse:collapse;font-size:14px}
.compare th,.compare td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.compare thead th{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.15em;
  font-size:11.5px;color:var(--clay);border-bottom:2px solid var(--gold);
}
.compare tbody th{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--stone);font-weight:400;width:23%}
.compare td{color:var(--stone-dim)}
.compare .yes{color:var(--gold);font-weight:700}
.compare .no{color:var(--stone-mute)}
.table-scroll{overflow-x:auto}
.table-scroll table{min-width:640px}

/* Link list (podcast platforms etc.) */
.linklist{display:flex;flex-direction:column;gap:12px}
.linklist a{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  text-decoration:none;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;padding:19px 24px;
  border:2px solid currentColor;transition:background .2s,color .2s;
}
.s-stone .linklist a{color:var(--ink)}
.s-stone .linklist a:hover{background:var(--ink);color:var(--clay)}
.s-iron .linklist a,.s-char .linklist a{color:var(--stone);border-color:var(--hairline-2)}
.s-iron .linklist a:hover,.s-char .linklist a:hover{border-color:var(--gold);background:var(--gold);color:var(--iron)}
.linklist .arrow{font-size:19px}

/* --------------------------------------------------------------------------
   15. PODCAST
   -------------------------------------------------------------------------- */
.ep-featured{
  border:2px solid var(--gold);background:var(--iron-2);
  padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,48px);align-items:center;
}
.ep-featured .epnum{
  font-family:var(--display);font-size:clamp(72px,11vw,150px);line-height:.8;
  color:var(--gold);opacity:.9;
}
.ep-featured h2{color:#fff;margin-bottom:12px}
.ep-badge{
  display:inline-block;background:var(--gold);color:var(--iron);
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;padding:5px 13px;margin-bottom:14px;
}

.epfilters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:42px}
.epfilters button{
  background:transparent;border:1px solid var(--hairline-2);color:var(--stone-dim);
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.14em;
  font-size:11.5px;padding:11px 20px;cursor:pointer;transition:all .18s;
}
.epfilters button:hover{border-color:var(--clay);color:var(--clay)}
.epfilters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--iron);font-weight:600}

.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.epcard{
  background:var(--charcoal);border:1px solid var(--hairline-2);padding:30px 26px;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease);
}
.epcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.epcard .epmeta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;color:var(--stone-mute);margin-bottom:14px;
}
.epcard .epmeta .n{color:var(--gold)}
.epcard h3{color:#fff;font-size:24px;margin-bottom:10px}
.epcard p{font-size:14px;color:var(--stone-dim);flex:1;margin-bottom:18px}
.epcard .eptag{
  align-self:flex-start;font-family:var(--subhead);text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--clay);
  border:1px solid var(--hairline-2);padding:4px 11px;margin-bottom:16px;
}
.epcard .eplink{
  font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;color:var(--gold);text-decoration:none;
}
.epcard .eplink:hover{color:var(--clay)}
.ep-empty{text-align:center;color:var(--stone-mute);padding:50px 0;grid-column:1/-1}

/* --------------------------------------------------------------------------
   16. MERCH
   -------------------------------------------------------------------------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.mcard{background:var(--charcoal);border:1px solid var(--hairline-2);transition:border-color .25s,transform .25s var(--ease);display:flex;flex-direction:column}
.mcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.mshot{
  aspect-ratio:1/1;background:var(--iron-3);display:flex;align-items:center;
  justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);
}
.mshot svg{width:52%;height:52%;opacity:.5}
.mshot img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.mshot .placeholder-tag{
  position:absolute;bottom:12px;left:12px;font-family:var(--subhead);
  text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;color:var(--stone-mute);
  border:1px solid var(--hairline-2);padding:3px 9px;
}
.mbody{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.mbody h3{color:#fff;font-size:22px;margin-bottom:6px}
.mbody .mline{font-size:13.5px;color:var(--stone-dim);flex:1;margin-bottom:16px}
.mbody .mprice{font-family:var(--display);font-size:26px;color:var(--gold);line-height:1;margin-bottom:16px}

.embed-slot{
  border:1px dashed var(--hairline-2);background:var(--iron-2);
  padding:clamp(32px,5vw,64px);text-align:center;
}
.embed-slot h3{color:var(--clay);margin-bottom:14px}
.embed-slot code{
  display:block;background:var(--iron);border:1px solid var(--hairline);
  padding:16px;margin:20px auto 0;max-width:620px;text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--clay);overflow-x:auto;white-space:pre;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}
details.faq-item{border-bottom:1px solid var(--hairline)}
details.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  gap:18px;padding:22px 2px;font-family:var(--subhead);font-size:15.5px;
  letter-spacing:.04em;color:var(--stone);text-transform:none;
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary:hover{color:var(--clay)}
details.faq-item summary .plus{color:var(--gold);font-size:24px;transition:transform .25s var(--ease);flex-shrink:0;line-height:1}
details.faq-item[open] summary .plus{transform:rotate(45deg)}
details.faq-item[open] summary{color:var(--clay)}
.faq-body{padding:0 2px 26px;font-size:15px;color:var(--stone-dim);max-width:70ch}
.faq-body p + p{margin-top:.9em}

/* --------------------------------------------------------------------------
   18. PULL QUOTE / CTA BANDS
   -------------------------------------------------------------------------- */
.pullquote{text-align:center;max-width:820px;margin:0 auto}
.pullquote .scripture{font-size:clamp(22px,3vw,34px);display:block;line-height:1.45}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{margin-bottom:6px}
.cta-band p{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;font-size:13px}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
footer.site{background:var(--iron);color:var(--stone);padding:var(--sec-sm) 0 36px;border-top:1px solid var(--hairline)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.foot-brand .brandmark{margin-bottom:18px}
.foot-brand p{font-size:13.5px;color:var(--stone-mute);max-width:34ch}
.foot-col h4{font-family:var(--subhead);font-size:11.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px;text-transform:uppercase}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:13.5px;color:var(--stone-dim);text-decoration:none;transition:color .2s}
.foot-col a:hover{color:var(--clay)}

.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:38px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:44px}
.pillar{text-align:center}
.pillar b{display:block;font-family:var(--subhead);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--gold);margin-bottom:7px}
.pillar span{font-size:12px;color:var(--stone-mute);line-height:1.5;display:block}

.foot-verse{text-align:center;max-width:660px;margin:0 auto 46px}
.foot-verse .scripture{font-size:clamp(19px,2.2vw,24px);display:block}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);padding-top:28px;flex-wrap:wrap;gap:14px}
.foot-bottom p{font-size:12px;color:var(--stone-mute)}
.foot-bottom .tagline{font-family:var(--subhead);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--clay)}

/* --------------------------------------------------------------------------
   20. REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
/* Visible by default. Only hidden once <html class="js"> is set, so a
   script failure can never leave the page blank. */
[data-reveal]{opacity:1;transform:none}
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-reveal][data-delay="4"]{transition-delay:.36s}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .subnav{top:69px}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .promise{border-left:none;border-top:3px solid var(--gold);padding-left:0;padding-top:26px}
  .grid-2,.split-6040,.capture .wrap{grid-template-columns:1fr;gap:38px}
  .pgrid,.grid-3{grid-template-columns:1fr}
  .pillars{grid-template-columns:repeat(2,1fr);gap:26px}
  .ep-featured{grid-template-columns:1fr;gap:18px}
  .ep-featured .epnum{font-size:76px}
}
@media(max-width:600px){
  :root{--gut:20px}
  .qgrid,.grid-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .stat{min-width:50%;border-bottom:1px solid var(--hairline)}
  .scale button{font-size:14px;padding:12px 0}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .assess-nav .btn{width:100%}
  .cta-band .wrap{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   22. MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}

@media print{
  nav.site,.subnav,.mobile-menu,.progressbar,.burger,footer.site,.capture,.btn{display:none!important}
  body{background:#fff!important;color:#000!important;font-size:12pt}
  section{padding:18pt 0;page-break-inside:avoid}
  h1,h2,h3{color:#000!important}
  .gold-metal{color:#8a6428!important;background:none!important;-webkit-text-fill-color:#8a6428}
  .scripture{color:#5a4520!important}
  .assess-shell{border:1px solid #000}
  .rbar .track{border:1px solid #000;background:#fff}
  .rbar .fill{background:#8a6428!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .verdict{border-left:3px solid #8a6428;background:#f4f4f2}
  .verdict p,.first-rep p{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}


/* ── Brand suite (official logo files) ─────────────────────────────────── */
.hero-mark{
  position:absolute;right:clamp(-140px,-6vw,-60px);bottom:-70px;
  width:clamp(320px,42vw,560px);opacity:.055;pointer-events:none;z-index:1;
}
.foot-submark{display:block;margin:0 auto 18px;border-radius:50%}
.ep-art-wrap{position:relative;width:clamp(120px,16vw,190px)}
.ep-art{width:100%;height:auto;display:block;border-radius:50%;border:2px solid var(--gold)}
.epnum.epnum-sm{
  position:absolute;right:-8px;bottom:-12px;font-size:clamp(40px,5vw,56px);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
@media(max-width:860px){
  .ep-art-wrap{margin:0 auto}
  .hero-mark{width:300px;right:-90px;bottom:-50px}
}

/* ══════════════════════════════════════════════════════════════════════════
   23. PAGE-TO-PAGE TRANSITIONS
   ══════════════════════════════════════════════════════════════════════════
   The site navigates by swapping only <main>. The nav and footer are never
   torn down, so there's no white flash and no rebuild between tabs.

   Two layers:
   1. Same-document transitions, used by the router — the normal path.
   2. @view-transition cross-document, the fallback for when the router
      isn't running (old browsers, or files opened straight off disk).
   ────────────────────────────────────────────────────────────────────────── */

/* Fallback: real navigations still crossfade where the browser supports it */
@view-transition{navigation:auto}

/* Pin the furniture so it holds still while the content changes */
nav.site{view-transition-name:site-nav}
footer.site{view-transition-name:site-foot}
.progressbar{view-transition-name:site-progress}

/* The crossfade itself — quick enough to feel like a tab, not a slide */
::view-transition-old(root){animation:mohh-out .16s var(--ease) both}
::view-transition-new(root){animation:mohh-in .26s var(--ease) both}
@keyframes mohh-out{from{opacity:1}to{opacity:0}}
@keyframes mohh-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* The furniture doesn't move at all */
::view-transition-group(site-nav),
::view-transition-group(site-foot),
::view-transition-group(site-progress){animation:none}
::view-transition-old(site-nav),::view-transition-new(site-nav),
::view-transition-old(site-foot),::view-transition-new(site-foot),
::view-transition-old(site-progress),::view-transition-new(site-progress){
  animation:none;mix-blend-mode:normal;opacity:1
}

/* Content already on screen when a page opens appears immediately —
   only things you scroll down to still animate in */
.reveal-instant{transition:none!important}

/* Loading hint on the nav while the next page is fetched. Usually invisible,
   because links are prefetched the moment you hover them. */
nav.site.loading::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--clay),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:mohh-scan .9s linear infinite;
}
@keyframes mohh-scan{from{background-position:-40% 0}to{background-position:140% 0}}

/* Screen-reader-only announcement region for route changes */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  nav.site.loading::after{animation:none}
}