/* ==========================================================================
   Marmon Family Dog Training - styles.css
   Locked direction: Steel & Earth (dark). Slate #4A6D8C + earth #9E7F5B.
   Manrope (head) / Arimo (body), self-hosted. Everything themable via CSS vars
   so theme-lab.js can re-skin the whole site live.
   ========================================================================== */

/* ---------- self-hosted fonts (§6b: no CDN, no faux-bold) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-800.woff2') format('woff2')}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/arimo-400.woff2') format('woff2')}
@font-face{font-family:'Arimo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/arimo-500.woff2') format('woff2')}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/arimo-700.woff2') format('woff2')}
/* Wave 8 · 8.2 - one script face (Caveat), self-hosted, used 1x for Aaron's signature on About */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat-600.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --bg:#0E1113; --surface:#171B1F; --surface-2:#1F252B;
  --ink:#F4F6F7; --ink-soft:#A7B0B8;
  --accent:#C22D2A; --accent-rgb:194,45,42; --accent-hi:#F0604F; --accent-lo:#9E211F; --accent-on:#FFFFFF;
  --accent2:#9E7F5B; --accent2-rgb:158,127,91;
  --gold:#F6B01E; --gold-rgb:246,176,30; --steel:#4A6D8C;
  --line:rgba(244,246,247,.12); --line-2:rgba(244,246,247,.20);
  --radius:6px;
  --font-head:'Manrope'; --font-body:'Arimo';
  --font-head-stack:var(--font-head),'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body-stack:var(--font-body),'Helvetica Neue',Helvetica,Arial,sans-serif;
  --section-y:clamp(64px,9vw,112px);
  --maxw:1180px; --nav-h:76px;
  --paw:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cellipse cx=%2212%22 cy=%2216.5%22 rx=%225%22 ry=%224%22/%3E%3Cellipse cx=%225.5%22 cy=%2210.5%22 rx=%222.3%22 ry=%222.8%22/%3E%3Cellipse cx=%229.6%22 cy=%227%22 rx=%222.3%22 ry=%222.9%22/%3E%3Cellipse cx=%2214.4%22 cy=%227%22 rx=%222.3%22 ry=%222.9%22/%3E%3Cellipse cx=%2218.5%22 cy=%2210.5%22 rx=%222.3%22 ry=%222.8%22/%3E%3C/svg%3E');
}
/* Theme Lab light toggle */
:root[data-theme="light"]{
  --bg:#F4F0E9; --surface:#FFFFFF; --surface-2:#F2EEE6;
  --ink:#1C1B18; --ink-soft:#5C574E;
  --line:rgba(28,27,24,.14); --line-2:rgba(28,27,24,.22);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body-stack);font-size:clamp(16px,1vw + .9rem,17px);line-height:1.65;
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head-stack);font-weight:800;line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-weight:800}h3{font-weight:700;letter-spacing:-.01em}
p{margin:0}
::selection{background:rgba(var(--accent-rgb),.9);color:#fff}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:4px;border-radius:4px} /* Wave 3 · 3.4 - universal focus ring, 4px offset */

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:var(--section-y)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head-stack);font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-hi)}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--accent2);border-radius:2px}
.h1{font-size:clamp(2.5rem,5.2vw + 1rem,4.4rem)}
.h1 .accent{color:var(--accent-hi)} /* Wave 2 (2.2 equiv): color-accent word on every hero H1 - grotesque-direction stand-in for italic-serif accent */
.h2{font-size:clamp(1.9rem,3vw + .7rem,2.7rem)}
.lede{font-size:clamp(1.05rem,1vw + .9rem,1.22rem);line-height:1.6;color:var(--ink-soft)}
.sec-head{max-width:62ch;margin-bottom:clamp(24px,3.6vw,40px)}
.sec-head h2{margin:12px 0}
.sec-head .lede{max-width:60ch}
/* centered section head: the lede block itself must also center (operator: "body text is not centered") */
.sec-head--c{text-align:center;margin-inline:auto}
.sec-head--c .lede{margin-inline:auto}
.sec-head--c .eyebrow{justify-content:center}
.center{text-align:center;margin-inline:auto}

/* ---------- buttons ---------- */
.btn{--pad:15px 26px;display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--font-head-stack);font-weight:700;font-size:15px;letter-spacing:.005em;
  padding:var(--pad);border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  touch-action:manipulation;background:var(--accent);color:var(--accent-on);
  box-shadow:0 10px 26px -14px rgba(var(--accent-rgb),.9)}
/* Wave 3 · 3.7 - flat-fill CTA: shadow deepens + sharpens on hover (no gradient per locked direction) */
@media (hover:hover){.btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(var(--accent-rgb),.98)}}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
@media (hover:hover){.btn--ghost:hover{border-color:var(--accent-hi);color:var(--accent-hi);transform:translateY(-2px);box-shadow:none}}
.btn--lg{--pad:17px 32px;font-size:16px}
.btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.btn--block{width:100%}

/* paw markers */
.paw{position:relative;padding-left:30px}
.paw::before{content:"";position:absolute;left:0;top:.2em;width:19px;height:19px;background:var(--accent);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}

/* ==========================================================================
   HEADER / NAV  (P-003 transparent -> solid; multi-service dropdown; mobile drawer)
   ========================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
  padding-top:env(safe-area-inset-top)}
.site-header.is-solid,.site-header.is-open{background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 var(--line),0 12px 30px -24px #000}
.nav{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto;aspect-ratio:1279/234}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-block;white-space:nowrap;padding:9px 11px;color:var(--ink);text-decoration:none;font-weight:500;font-size:14.5px;
  border-radius:6px;opacity:.9;transition:color .15s,opacity .15s,background .15s;text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media (hover:hover){.nav-links a:hover{opacity:1;color:var(--accent-hi)}}
/* The Method: the signature link, set off in red with an underline */
.nav-links a.nav-method{color:var(--accent-hi);opacity:1;font-weight:800;
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.5)} /* pops over the transparent hero */
@media (hover:hover){.nav-links a.nav-method:hover{color:#fff;text-decoration-color:#fff}}
.drawer a.nav-method{color:var(--accent-hi);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.has-dropdown{position:relative}
.has-dropdown>a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6}
.has-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px} /* hover bridge */
.submenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 60px -24px #000;padding:10px;opacity:0;visibility:hidden;transition:.18s ease;list-style:none;margin:0}
.has-dropdown:hover .submenu,.has-dropdown:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:8px;text-shadow:none}
@media (hover:hover){.submenu a:hover{background:var(--surface-2)}}
.submenu .sm-t{font-family:var(--font-head-stack);font-weight:700;font-size:14.5px;color:var(--ink);display:block}
.submenu .sm-d{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:2px}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head-stack);font-weight:700;
  font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-phone svg{width:17px;height:17px;fill:var(--accent-hi)}
@media (hover:hover){.nav-phone:hover{color:var(--accent-hi)}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.nav-toggle svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2}

@media (max-width:1000px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-flex}
}

/* mobile drawer - top-level fixed scroller (§7a) */
.drawer{position:fixed;inset:var(--drawer-top,72px) 0 0 0;z-index:70;background:var(--bg);
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .28s ease,transform .28s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
  padding:22px clamp(20px,6vw,32px) calc(40px + env(safe-area-inset-bottom))}
.drawer.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.drawer a{display:block;padding:15px 4px;font-family:var(--font-head-stack);font-weight:700;font-size:1.35rem;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer .dr-sub a{font-size:1.05rem;font-weight:600;color:var(--ink-soft);padding-left:16px}
.drawer .btn{margin-top:22px;display:flex;justify-content:center;text-align:center}
.drawer .dr-phone{margin-top:16px;font-size:1.1rem}

/* ==========================================================================
   HERO V3 - "the trainer IS the brand" (NR anatomy in Steel & Earth)
   Aaron masked-cutout left, slate rim-light aura + one earth ember behind him,
   atmospheric steel-navy ground, copy right. Wave 9 premium overhaul.
   ========================================================================== */
.hero3{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  background:
    radial-gradient(90% 72% at 16% -10%, rgba(5,8,12,.96) 0%, rgba(5,8,12,.55) 34%, rgba(5,8,12,0) 64%),
    radial-gradient(130% 105% at 24% 46%, #24435c 0%, #1a3349 30%, #13212f 60%, #0e161d 84%, #0A0F13 100%),
    linear-gradient(180deg, #101a22 0%, #0e161d 66%, #0A0F13 100%);
  background-color:#0e161d}
/* aura retired: the hero is now a full-bleed photograph (Aaron + Maddie at the Arch) */
.hero3__aura{display:none}
@keyframes hero3Breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
/* the <picture> art-direction wrapper must not generate a box: with a real box, the
   blend/stacking pipeline washes the photo out (verified in Blink). contents = invisible to paint. */
.hero3 picture{display:contents}
/* full-bleed cover: Aaron + Maddie at the left, the Arch + Old Courthouse centered;
   reaches the very top so the transparent nav hovers OVER it */
.hero3__photo{position:absolute;left:0;top:0;z-index:2;height:100%;width:100%;
  object-fit:cover;object-position:28% 44%;transform-origin:38% 58%;
  animation:heroFade 1.3s cubic-bezier(.2,.7,.2,1) both, heroKenBurns 7s cubic-bezier(.16,.62,.28,1) 0s 1 both}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
/* Ken Burns push-in on entry that decelerates into a FIXED static hold (plays once, no loop) */
@keyframes heroKenBurns{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes heroKenBurnsM{from{transform:scale(1)}to{transform:scale(1.05)}}
/* cinematic staggered content reveal: fade + rise + deblur, gated on .js and fired
   by app.js (adds .is-revealed to .hero3 the moment the logo intro lands in the nav).
   No-JS keeps content statically visible. */
.js .hero3 .hero3__kw,.js .hero3 .hero3__punch,.js .hero3 .hero3__who,.js .hero3 .hero3__badgewrap{
  opacity:0;transform:translateY(26px);filter:blur(9px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1),filter .85s cubic-bezier(.22,.61,.36,1)}
.js .hero3 .hero3__bar{opacity:0;transform:translateX(-50%) translateY(26px);filter:blur(9px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1),filter .9s cubic-bezier(.22,.61,.36,1)}
.js .hero3.is-revealed .hero3__kw,.js .hero3.is-revealed .hero3__punch,.js .hero3.is-revealed .hero3__who,.js .hero3.is-revealed .hero3__badgewrap{opacity:1;transform:none;filter:blur(0)}
.js .hero3.is-revealed .hero3__bar{opacity:1;transform:translateX(-50%);filter:blur(0)}
.js .hero3.is-revealed .hero3__kw{transition-delay:.04s}
.js .hero3.is-revealed .hero3__punch{transition-delay:.18s}
.js .hero3.is-revealed .hero3__who{transition-delay:.32s}
.js .hero3.is-revealed .hero3__badgewrap{transition-delay:.44s}
.js .hero3.is-revealed .hero3__bar{transition-delay:.6s}
/* right-weighted scrim: Aaron stays clear on the left, the text side (right) darkens for
   legibility; top + bottom feather for the transparent nav and the docked CTA bar */
.hero3__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,15,19,0) 0%, rgba(10,15,19,0) 33%, rgba(10,15,19,.42) 60%, rgba(10,15,19,.66) 100%),
    linear-gradient(0deg, rgba(10,15,19,.8) 0%, rgba(10,15,19,.42) 9%, rgba(10,15,19,0) 26%),
    linear-gradient(180deg, rgba(10,15,19,.24) 0%, rgba(10,15,19,0) 15%)}
.hero3__copy{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,40px) clamp(130px,20vh,190px)}
/* left-aligned column docked right: kills the hard flush-right wall (operator note);
   the text's natural rag falls on the right where there is nothing to align against */
.hero3__col{margin-left:auto;width:min(620px,52%);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero3__h1{font-family:var(--font-head-stack);font-weight:800;color:#fff;margin:0;
  text-shadow:0 6px 50px rgba(10,15,19,.6),0 2px 14px rgba(10,15,19,.5)}
.hero3__lead{display:block;font-size:clamp(1.4rem,2.2vw + .4rem,2.2rem);line-height:1.1;font-weight:700;letter-spacing:-.01em;margin-bottom:.14em}
/* the geo keyword line lives INSIDE the h1 (keeps its SEO weight) but is styled as the eyebrow */
.hero3__kw{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head-stack);font-weight:700;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);
  margin-bottom:18px;text-shadow:0 1px 10px rgba(10,15,19,.6)}
.hero3__kw::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--accent2);flex:0 0 auto}
.hero3__punch{display:block;text-transform:uppercase;font-size:clamp(2.6rem,4.5vw + .6rem,4.7rem);line-height:.98;letter-spacing:-.02em;
  /* stacked per-glyph shadow: tight dark contact edge -> progressively larger soft ambient = letters lift off the photo */
  text-shadow:
    0 1px 1px rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.5),
    0 5px 12px rgba(10,15,19,.5),
    0 12px 34px rgba(10,15,19,.55),
    0 22px 64px rgba(10,15,19,.5)}
.hero3__punch .accent{color:var(--accent-hi)}
/* NR-tight desktop: the supporting paragraph hides; mobile (no side-by-side photo) shows it */
.hero3__who{display:none;margin:clamp(16px,2.4vh,24px) 0 0;max-width:46ch;color:rgba(255,255,255,.92);
  font-size:clamp(1.02rem,.9vw + .9rem,1.18rem);line-height:1.55;text-shadow:0 1px 14px rgba(10,15,19,.6)}
.hero3__who b{font-family:var(--font-head-stack);color:#fff}
/* service badges: crest iconography, one line on desktop */
.hero3__badges{display:flex;flex-wrap:nowrap;gap:8px;margin-top:clamp(18px,2.6vh,26px)}
.hero3__badges span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(10,15,19,.5);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  font-family:var(--font-head-stack);font-weight:700;font-size:12px;letter-spacing:.02em;color:#fff}
.hero3__badges svg{width:14px;height:14px;fill:var(--accent-hi);flex:0 0 auto}
/* the disabled-veteran pill: deep red but a touch translucent (glass, not solid) so it stands out without going flat (operator) */
.hero3__badges .vet{background:rgba(158,33,31,.8);border-color:var(--accent);color:#fff;font-weight:800}
.hero3__badges .vet svg{fill:#fff}
.hero3__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:clamp(20px,3vh,30px)}
/* v2 hero playground (?herov2): Aaron bright and vibrant on the LEFT (image itself is
   graded up there); the Arch side wears the scrim because the text lives there (operator) */
.hero3--v2 .hero3__photo{width:100%;object-position:left center;-webkit-mask-image:none;mask-image:none}
.hero3--v2 .hero3__aura{display:none}
.hero3--v2 .hero3__veil{background:
  linear-gradient(90deg, rgba(10,15,19,0) 0%, rgba(10,15,19,0) 36%, rgba(10,15,19,.44) 58%, rgba(10,15,19,.66) 100%),
  linear-gradient(0deg,#0A0F13 0%,rgba(10,15,19,.45) 10%,rgba(10,15,19,0) 26%),
  linear-gradient(180deg,rgba(10,15,19,.28) 0%,rgba(10,15,19,0) 14%)}
/* NR-style CTA bar docked at the hero's bottom: amplified glass, red signal edge, award + proof */
.hero3__bar{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:clamp(18px,4vh,42px);
  width:min(calc(var(--maxw) - 2 * clamp(20px,5vw,40px)), calc(100% - 32px));
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:17px 20px;border-radius:18px;
  background:rgba(12,17,22,.78);backdrop-filter:blur(18px);border:1px solid rgba(var(--accent-rgb),.38);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 40px -8px rgba(var(--accent-rgb),.35),0 30px 70px -28px rgba(0,0,0,.85)}
.hero3__bar::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9) 18%,rgba(var(--accent-rgb),.9) 82%,transparent)}
.hero3__bar .hero3__review{margin:0 0 0 auto;background:none;border:0;padding:0;backdrop-filter:none}
/* badge stack: pills + the award line right-aligned to the pills' right edge (operator) */
.hero3__badgewrap{display:inline-flex;flex-direction:column;margin-top:clamp(28px,4vh,44px)}
.hero3__badgewrap .hero3__badges{margin-top:0}
.hero3__awardline{align-self:flex-end;display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;
  font-family:var(--font-head-stack);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 1px 10px rgba(10,15,19,.6)}
.hero3__awardline svg{width:16px;height:16px;fill:var(--gold);flex:0 0 auto}
.hero3__review{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,2.4vh,24px);
  padding:9px 16px;border-radius:999px;background:rgba(10,15,19,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);font-size:16.5px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(10,15,19,.7)}
.hero3__review .stars{color:var(--gold);letter-spacing:2px;font-size:18px;line-height:1}
.hero3__review b{font-family:var(--font-head-stack);font-weight:800}
.hero3__review .rlabel{font-weight:500;color:rgba(255,255,255,.86)}
@media (prefers-reduced-motion:reduce){.hero3__aura,.hero3__photo{animation:none}.js .hero3 .hero3__kw,.js .hero3 .hero3__punch,.js .hero3 .hero3__who,.js .hero3 .hero3__badgewrap{opacity:1;transform:none;filter:none;transition:none}.js .hero3 .hero3__bar{opacity:1;filter:none;transition:none;transform:translateX(-50%)}}
/* Below desktop (tablet + mobile): IMAGE-PRIMARY hero. The photo fills the whole
   hero full-bleed; the copy, CTA card, and play pill overlay the bottom over a
   MINIMAL scrim so the image stays the star. Portrait <source> feeds this whole
   range, so Aaron is never side-cropped by the landscape crop the tablet used to do. */
@media (max-width:1023px){
  /* min-height is viewport + ~0.75in: content bottom-anchors that much LOWER (more image up top),
     and the "See Aaron in action" pill lands just below the fold, reachable with a small scroll. */
  .hero3{position:relative;min-height:calc(100vh + 72px);min-height:calc(100svh + 72px);
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    padding:0 clamp(20px,5vw,30px) clamp(22px,4.2vh,40px);overflow:hidden}
  .hero3__aura{display:none}
  /* the full-bleed photo IS the hero */
  .hero3__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;
    object-fit:cover;object-position:center 24%;transform-origin:center 34%;
    -webkit-mask-image:none;mask-image:none;animation:heroFade 1.2s ease both}
  /* image-primary scrim: top stays clear, a touch more backing under the copy so the text reads */
  .hero3__veil{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg, transparent 37%, rgba(8,11,14,.26) 58%, rgba(8,11,14,.74) 100%)}
  /* bottom-anchored (margin-top:auto absorbs the free space above), centered column */
  .hero3__copy{position:relative;z-index:3;width:100%;max-width:600px;margin:auto 0 0;padding:0}
  .hero3__col{width:100%;max-width:none;margin:0;align-items:flex-start;text-align:left}
  /* layered shadow (tight edge + soft halo) so the type pops off the photo, not just a blur */
  .hero3__kw{margin-bottom:9px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 20px rgba(0,0,0,.8)}
  .hero3__h1{max-width:none}
  .hero3__punch{white-space:normal;font-size:clamp(2rem,4.4vw + 1rem,3.1rem);
    text-shadow:0 2px 6px rgba(0,0,0,.72),0 8px 34px rgba(0,0,0,.72)}
  .hero3__badgewrap{display:flex;margin-top:clamp(12px,1.8vh,16px)}
  .hero3__badges{flex-wrap:wrap;gap:7px}
  .hero3__awardline{align-self:flex-start;margin-top:11px;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.8)}
  /* desktop's in-copy play button is hidden below desktop; the one under the CTA card shows instead */
  .hero3__copy .hero3__play{display:none}
  /* CTA card floats over the image bottom (glass) */
  .hero3__bar{position:relative;left:auto;bottom:auto;transform:none;width:100%;max-width:600px;align-self:center;
    margin:clamp(15px,2.4vh,20px) 0 0;flex-direction:column;align-items:stretch;text-align:center;gap:13px;
    background:rgba(18,23,28,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:16px 15px 14px}
  .hero3__bar::before{display:none}
  .hero3__bar .btn{width:100%}
  .hero3__bar .hero3__review{margin:2px auto 0;flex-wrap:wrap;justify-content:center;row-gap:2px;color:#fff}
  /* play pill: BELOW the CTA card, centered, with air underneath (the .hero3 padding-bottom) */
  .hero3 .hero3__play--below{display:inline-flex;align-self:center;position:relative;z-index:4;
    margin:clamp(16px,2.6vh,22px) auto 0;gap:11px;padding:8px 18px 8px 8px;border-radius:999px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22)}
  .hero3 .hero3__play--below .hero3__play-btn{width:38px;height:38px;background:var(--accent);border-color:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.7)}
  .hero3 .hero3__play--below .hero3__play-lbl{text-transform:none;letter-spacing:.005em;font-size:14.5px;text-shadow:none}
  /* reveal: the bar is in flow here (no translateX centering) */
  .js .hero3 .hero3__bar{transform:translateY(22px)}
  .js .hero3.is-revealed .hero3__bar{transform:none}
}
/* mobile-specific (portrait image, full-width column) */
@media (max-width:759px){
  /* a touch more push than tablet: viewport + ~1in so the content sits lower still (operator) */
  .hero3{min-height:calc(100vh + 96px);min-height:calc(100svh + 96px);padding-bottom:clamp(20px,3.4vh,30px)}
  .hero3__photo{object-position:center 20%}
  .hero3__punch{font-size:clamp(2rem,8.4vw,2.8rem)}
  .hero3__copy,.hero3__bar{max-width:none}
}

/* authority band ("meet the trainer") */
.authority{display:grid;gap:clamp(28px,5vw,60px);align-items:center;grid-template-columns:1fr}
/* Meet Aaron: one body-text style, centered credential pills + a standout CTA */
#meet .authority p:not(.meet-cta){color:var(--ink-soft);font-size:1.05rem;line-height:1.62;margin:0 0 15px}
#meet .factbar{justify-content:center;margin-top:26px}
#meet .meet-cta{margin-top:26px;text-align:center}
@media (min-width:900px){.authority{grid-template-columns:.9fr 1.1fr}}
.authority__photo{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(244,246,247,.06) inset,0 34px 70px -40px #000}
.authority__photo img{width:100%;height:100%;object-fit:cover;display:block}
.authority__badge{position:absolute;left:16px;bottom:16px;background:rgba(10,15,19,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(244,246,247,.14);border-radius:10px;padding:10px 16px;
  font-family:var(--font-head-stack);font-weight:700;font-size:13.5px;color:#fff}
.authority__badge span{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* avatar-led review wall */
/* row-based grid (not column-masonry) so the image/thumbnail cards fill the top rows */
.wall{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:680px){.wall{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.wall{grid-template-columns:repeat(3,1fr)}}
.wall .review{margin:0}
.review__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review__ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px rgba(var(--accent-rgb),.55)}
.review__id b{display:block;font-family:var(--font-head-stack);font-size:14.5px;color:var(--ink)}
.review__id span{font-size:12.5px;color:var(--ink-soft)}
.review--pull{border-left:4px solid var(--accent2)}
/* work page: Proof lead = section intro + a featured testimonial filling the right */
.proof-lead{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.proof-lead{grid-template-columns:1.02fr .98fr}}
.proof-lead .sec-head{margin-bottom:0}
.proof-quote{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,32px);position:relative;overflow:hidden}
.proof-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo))}
.proof-quote blockquote{margin:14px 0 0;font-family:var(--font-head-stack);font-weight:600;font-size:clamp(1.08rem,1vw + .82rem,1.3rem);line-height:1.42;color:var(--ink)}
/* work page: named-dogs = staggered image-review cards (dog photo beside each quote) */
.stories{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr;margin:clamp(28px,3.6vw,44px) auto 0;max-width:1020px}
@media (min-width:760px){.stories{grid-template-columns:1fr 1fr}}
.story{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.4vw,26px);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
@media (hover:hover){.story:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 20px 42px -26px rgba(0,0,0,.8)}}
/* radial (circular) dog thumbnail, ringed like the review avatars */
.story__media{width:clamp(72px,9vw,88px);height:clamp(72px,9vw,88px);border-radius:50%;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px rgba(var(--accent-rgb),.55)}
.story__media img{width:100%;height:100%;object-fit:cover;display:block}
.story__body{display:flex;flex-direction:column}
.story__k{font-family:var(--font-head-stack);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi)}
.story blockquote{margin:8px 0 0;color:var(--ink);line-height:1.5;font-size:.98rem}
.story__who{margin-top:14px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.story__who b{color:var(--ink)}
.review--pull p{font-family:var(--font-head-stack);font-weight:600;font-size:1.12rem;line-height:1.45}

/* ==========================================================================
   MEET AARON (centered feature) + WHY (its own centered section) - Wave 10
   ========================================================================== */
.meet__wrap{max-width:500px;margin-inline:auto;text-align:center}
.meet__photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(244,246,247,.06) inset,0 40px 80px -46px #000}
.meet__photo img{width:100%;height:auto;display:block}
.meet__badge{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;
  background:rgba(10,15,19,.84);backdrop-filter:blur(8px);border:1px solid rgba(244,246,247,.16);
  border-radius:999px;padding:10px 20px;font-family:var(--font-head-stack);font-weight:700;font-size:14px;color:#fff}
.meet__badge span{color:var(--gold);font-weight:600;margin-left:8px;padding-left:10px;border-left:1px solid rgba(255,255,255,.24)}
.why-grid{display:grid;gap:16px;grid-template-columns:1fr;max-width:840px;margin:clamp(28px,4vw,44px) auto 0}
@media (min-width:720px){.why-grid{grid-template-columns:1fr 1fr}}
.why-card{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;position:relative;overflow:hidden}
.why-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.why-card b{display:block;font-family:var(--font-head-stack);font-size:1.06rem;color:var(--ink);margin-bottom:6px}
.why-card p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.why-pull{max-width:760px;margin:clamp(28px,4vw,44px) auto 0;text-align:center}
.why-pull blockquote{margin:0;font-family:var(--font-head-stack);font-weight:700;font-size:clamp(1.2rem,1.4vw + .95rem,1.7rem);
  line-height:1.4;color:var(--ink)}
.why-pull .cite{margin-top:14px;color:var(--ink-soft);font-size:.95rem}
.why-pull .cite b{color:var(--ink)}

/* The Marmon Method - the UVP, set off in a hued panel (like the closer) so it reads as "pay attention here" */
.method-scene{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(30px,5vw,64px) clamp(20px,4vw,54px);overflow:hidden}
.method-scene::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 130% at 50% -12%,rgba(var(--accent-rgb),.2),transparent 58%)}
.method-scene>*{position:relative;z-index:1}
/* stepper: numbered rows on mobile, a horizontal 5-across flow on desktop */
.method{list-style:none;margin:clamp(26px,3.4vw,42px) 0 0;padding:0;max-width:none;text-align:left;display:grid;grid-template-columns:1fr}
.method__step{position:relative;display:grid;grid-template-columns:38px 1fr;gap:15px;padding-bottom:clamp(18px,2.4vw,26px)}
.method__step:last-child{padding-bottom:0}
.method__n{font-family:var(--font-head-stack);font-weight:800;font-size:15px;color:var(--accent-on);
  background:var(--accent);width:38px;height:38px;border-radius:11px;display:grid;place-items:center;position:relative;z-index:1}
.method__step:not(:last-child)::before{content:"";position:absolute;left:18px;top:42px;bottom:2px;width:2px;background:var(--line);border-radius:2px}
.method__body h3{font-family:var(--font-head-stack);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;margin:0 0 4px;color:var(--ink)}
.method__body p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.5}
@media (min-width:900px){
  .method{grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.7vw,26px);position:relative}
  .method__step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0;padding-bottom:0}
  .method__step:not(:last-child)::before{display:none}
  .method__n{margin-bottom:16px}
  .method__body h3{font-size:1.02rem;margin-bottom:5px}
  .method__body p{font-size:.92rem}
  /* connector line runs behind the badges across the row */
  .method::before{content:"";position:absolute;top:18px;left:10%;right:10%;height:3px;background:var(--line);z-index:0;border-radius:3px}
}
/* --- animated timeline (fires when the method-scene reveals): each number pops as an
   accent line fills through it, like a loading bar 1 -> 2 -> 3 -> 4 -> 5 --- */
.js .method__n{opacity:0;transform:translateY(9px) scale(.82);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.85,.25,1)}
.js .method__body{opacity:0;transform:translateY(9px);transition:opacity .55s ease,transform .55s ease}
.method-scene.in .method__n,.method-scene.in .method__body{opacity:1;transform:none}
.js .method__step:nth-child(1) .method__n,.js .method__step:nth-child(1) .method__body{transition-delay:.05s}
.js .method__step:nth-child(2) .method__n,.js .method__step:nth-child(2) .method__body{transition-delay:.4s}
.js .method__step:nth-child(3) .method__n,.js .method__step:nth-child(3) .method__body{transition-delay:.75s}
.js .method__step:nth-child(4) .method__n,.js .method__step:nth-child(4) .method__body{transition-delay:1.1s}
.js .method__step:nth-child(5) .method__n,.js .method__step:nth-child(5) .method__body{transition-delay:1.45s}
@media (min-width:900px){
  .method::after{content:"";position:absolute;top:18px;left:10%;right:10%;height:3px;border-radius:3px;z-index:0;
    background:linear-gradient(90deg,var(--accent-hi),var(--accent));transform:scaleX(0);transform-origin:left center}
  .js .method-scene.in .method::after{transform:scaleX(1);transition:transform 1.6s cubic-bezier(.35,0,.25,1)}
}
@media (max-width:899px){
  .method__step:not(:last-child)::before{width:3px}
  .method__step:not(:last-child)::after{content:"";position:absolute;left:18px;top:42px;bottom:2px;width:3px;border-radius:3px;z-index:0;
    background:linear-gradient(180deg,var(--accent-hi),var(--accent));transform:scaleY(0);transform-origin:top}
  .js .method-scene.in .method__step:nth-child(1)::after{transform:scaleY(1);transition:transform .4s ease .3s}
  .js .method-scene.in .method__step:nth-child(2)::after{transform:scaleY(1);transition:transform .4s ease .65s}
  .js .method-scene.in .method__step:nth-child(3)::after{transform:scaleY(1);transition:transform .4s ease 1s}
  .js .method-scene.in .method__step:nth-child(4)::after{transform:scaleY(1);transition:transform .4s ease 1.35s}
}
@media (prefers-reduced-motion:reduce){
  .js .method__n,.js .method__body{opacity:1 !important;transform:none !important}
  .method::after,.method__step::after{display:none !important}
}
.method__closer{max-width:640px;margin:clamp(24px,3vw,34px) auto 0;text-align:center;text-wrap:balance;
  font-family:var(--font-head-stack);font-weight:700;line-height:1.34;color:var(--ink);
  font-size:clamp(1.1rem,1vw + .85rem,1.36rem)}
/* editorial italic accent (real serif italics, so font-synthesis:none doesn't flatten it) in the brand red */
.method__closer em,.i-accent{font-style:italic;font-weight:700;color:var(--accent-hi);letter-spacing:0;
  font-size:1.06em;
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif}

/* /method/ page: the five principles as horizontal cards */
.prin-cards{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;gap:clamp(13px,1.5vw,18px);grid-template-columns:1fr}
@media (min-width:600px){.prin-cards{grid-template-columns:1fr 1fr}}
/* 3 + 2 inverted pyramid: three across the top, two centered below (operator: no skinny 5-across) */
@media (min-width:960px){
  .prin-cards{grid-template-columns:repeat(6,1fr)}
  .prin-card{grid-column:span 2}
  .prin-card:nth-child(4){grid-column:2 / span 2}
  .prin-card:nth-child(5){grid-column:4 / span 2}
}
.prin-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,1.8vw,24px);display:flex;flex-direction:column;overflow:hidden}
.prin-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-hi),var(--accent-lo))}
.prin-card__n{font-family:var(--font-head-stack);font-weight:800;font-size:1.9rem;line-height:1;color:var(--accent-hi);opacity:.92;margin-bottom:12px}
.prin-card h3{font-family:var(--font-head-stack);font-weight:800;font-size:clamp(1.05rem,.5vw + .95rem,1.16rem);letter-spacing:-.01em;line-height:1.16;color:var(--ink);margin:0 0 10px}
.prin-card > p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.prin-card__eg{margin-top:auto;padding-top:14px;margin-top:16px;border-top:1px solid var(--line);font-size:.86rem;line-height:1.45;color:var(--ink-soft)}
.prin-card__eg b{display:block;font-family:var(--font-head-stack);font-weight:700;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:3px}
/* the third-way "Marmon Method" card: solid red, white text */
/* the third-way card: richer multi-stop red gradient + a dark carbon spine (not red-on-red) */
.why-card--hot{border-color:var(--accent);
  background:linear-gradient(150deg,var(--accent-hi) -10%,var(--accent) 42%,var(--accent-lo) 108%);
  box-shadow:0 24px 50px -22px rgba(var(--accent-rgb),.8),inset 0 1px 0 rgba(255,255,255,.14)}
.why-card--hot::before{width:5px;background:linear-gradient(180deg,#2a2f34,#0e1113)}
.why-card--hot b{color:#fff}
.why-card--hot p{color:rgba(255,255,255,.94)}
/* nine-phase callout + red-outline CTA */
.ninephase{position:relative;max-width:900px;margin:0 auto;background:var(--surface);border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:24px;padding:clamp(30px,5vw,56px);text-align:center;overflow:hidden}
.ninephase::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 100% at 50% 0%,rgba(var(--accent-rgb),.17),transparent 62%)}
.ninephase > *{position:relative;z-index:1}
.ninephase .lede{margin-left:auto;margin-right:auto;max-width:660px}
.pillar-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 26px}
.pillar-tags span{font-family:var(--font-head-stack);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-hi);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;padding:7px 15px}
/* white-outlined on the red-glow nine-phase panel so it actually stands out; hover fills accent (loved state) */
.btn--redline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);font-weight:800;box-shadow:none}
@media (hover:hover){.btn--redline:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}}

/* board-and-train: the nine-phase program (two pillars, scannable roadmap).
   Each pillar is a contained SURFACE panel so it reads as a distinct breakout
   block within the section (the section header is centered as the anchor above). */
.pillar{position:relative;margin-top:clamp(26px,3.4vw,46px);
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(24px,3.4vw,44px)}
.pillar--first{margin-top:clamp(30px,4vw,52px)}
.pillar__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pillar__head h3{font-family:var(--font-head-stack);font-weight:800;font-size:clamp(1.35rem,1.1vw + 1rem,1.7rem);letter-spacing:-.02em;margin:0;color:var(--ink)}
.pillar__tag{font-family:var(--font-head-stack);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;padding:5px 12px;white-space:nowrap}
.pillar__intro{color:var(--ink-soft);max-width:74ch;margin:11px 0 0;font-size:1.02rem;line-height:1.6}
.phases{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;gap:clamp(13px,1.6vw,18px);grid-template-columns:1fr}
@media (min-width:640px){.phases{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2vw,23px);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.phase::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo));opacity:.85;transition:opacity .2s ease,width .2s ease}
/* hover: the card lifts, brightens, and the red spine widens = clear interaction */
@media (hover:hover){
  .phase:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.5);background:var(--surface-2);
    box-shadow:0 20px 42px -26px rgba(0,0,0,.8),0 0 0 1px rgba(var(--accent-rgb),.22)}
  .phase:hover::before{opacity:1;width:4px}
  .phase:hover h4{color:var(--accent-hi)}
}
.phase h4{transition:color .2s ease}
.phase__n{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head-stack);font-weight:800;font-size:.82rem;letter-spacing:.1em;color:var(--accent-hi);margin-bottom:9px}
.phase__n::after{content:"";width:20px;height:1px;background:var(--accent-line)}
.phase h4{font-family:var(--font-head-stack);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.phase > p{color:var(--ink-soft);font-size:.96rem;line-height:1.55;margin:0 0 15px}
.phase__meta{margin-top:auto;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:13px}
.phase__meta p{margin:0;font-size:.87rem;line-height:1.42;color:var(--ink-soft)}
.phase__meta b{display:block;font-family:var(--font-head-stack);font-weight:700;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.62;margin-bottom:2px}
.phases__end{max-width:74ch;margin:clamp(28px,3.8vw,46px) auto 0;text-align:center;color:var(--ink-soft);font-size:1.06rem;line-height:1.6}
.phases__end b{color:var(--ink);font-weight:600}

/* ==========================================================================
   DISTRACTION-PROOFING LADDER (animated data-viz) - Wave 10
   Visualizes the real-world-proofing argument for skimmers.
   ========================================================================== */
/* section wears the Arch service-dog photo behind a heavy scrim (operator ask) */
.ladder-scene{position:relative;overflow:hidden;isolation:isolate}
.ladder-scene__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.ladder-scene__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,15,19,.78) 0%,rgba(10,15,19,.58) 42%,rgba(10,15,19,.76) 100%),
  radial-gradient(80% 60% at 50% 42%,rgba(10,15,19,0) 0%,rgba(10,15,19,.26) 100%)}
.ladder__frame{max-width:920px;margin:clamp(30px,4vw,48px) auto 0}
.ladder__chart{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.6vw,18px);
  align-items:end;height:clamp(220px,32vw,300px);padding:0 4px}
.ladder__col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
/* bar + caption both flex-shrink:0 so tall bars can't get clamped to the same height (the level-4 = level-5 bug) */
.ladder__bar{position:relative;flex:0 0 auto;height:var(--h);min-height:34px;border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent) 55%,var(--accent-lo));
  box-shadow:0 12px 30px -14px rgba(var(--accent-rgb),.8);
  transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ladder__col:nth-child(1) .ladder__bar{transition-delay:.05s}
.ladder__col:nth-child(2) .ladder__bar{transition-delay:.18s}
.ladder__col:nth-child(3) .ladder__bar{transition-delay:.31s}
.ladder__col:nth-child(4) .ladder__bar{transition-delay:.44s}
.ladder__col:nth-child(5) .ladder__bar{transition-delay:.57s}
.reveal.in .ladder__bar{transform:scaleY(1)}
.ladder__lvl{position:absolute;top:8px;left:0;right:0;font-family:var(--font-head-stack);font-weight:800;
  font-size:12px;color:#fff;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ladder__meta{margin-top:12px;flex:0 0 auto}
.ladder__meta b{display:block;font-family:var(--font-head-stack);font-size:.92rem;color:var(--ink);line-height:1.15}
.ladder__meta span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.ladder__axis{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:920px;margin:16px auto 0;color:var(--ink-soft);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ladder__axis span{display:inline-flex;align-items:center;gap:8px}
.ladder__axis .arrow{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--accent2-rgb),.5),var(--accent))}
.ladder__cap{max-width:680px;margin:clamp(22px,3vw,32px) auto 0;text-align:center;
  font-family:var(--font-head-stack);font-weight:600;font-size:clamp(1.05rem,1vw + .9rem,1.3rem);line-height:1.45;color:var(--ink)}
.ladder__cap .accent{color:var(--accent-hi)}
/* mobile ladder: label column LEFT, bar track RIGHT (how people read bar charts);
   bar width is a % of the TRACK so it can never run off-screen */
@media (max-width:560px){
  .ladder__chart{display:flex;flex-direction:column;align-items:stretch;gap:13px;height:auto;padding:0}
  .ladder__col{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:14px;height:auto;text-align:left}
  .ladder__meta{margin:0;order:0}
  .ladder__bar{order:1;height:42px;min-height:0;width:var(--h);min-width:42px;border-radius:8px;
    transform:scaleX(0);transform-origin:left}
  .reveal.in .ladder__bar{transform:scaleX(1)}
  .ladder__lvl{position:absolute;inset:0;display:grid;place-items:center;top:auto;padding:0;font-size:13px;line-height:42px}
  .ladder__axis{display:none}
}
@media (prefers-reduced-motion:reduce){.ladder__bar{transition:none;transform:none!important}}

/* ==========================================================================
   WATCH AARON WORK - cinematic still + facade play (links to real FB/IG) - Wave 11
   ========================================================================== */
.vidband__frame{position:relative;max-width:960px;margin:clamp(28px,4vw,44px) auto 0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 40px 90px -50px #000,0 0 0 1px rgba(244,246,247,.05) inset;
  aspect-ratio:16/9;display:block;isolation:isolate;text-decoration:none}
.vidband__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;z-index:1;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.vidband__frame:hover img{transform:scale(1.03)}}
.vidband__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 50%,rgba(10,15,19,.15),rgba(10,15,19,.55) 75%,rgba(10,15,19,.78) 100%),
  linear-gradient(0deg,rgba(10,15,19,.85) 0%,rgba(10,15,19,0) 34%)}
.vidband__play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(72px,9vw,104px);height:clamp(72px,9vw,104px);border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 18px 44px -12px rgba(var(--accent-rgb),.9)}
.vidband__play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  animation:vbPulse 2.4s ease-out infinite}
@keyframes vbPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.vidband__play svg{width:38%;height:38%;fill:#fff;margin-left:2%}
@media (hover:hover){.vidband__frame:hover .vidband__play{transform:translate(-50%,-50%) scale(1.08)}}
.vidband__tag{position:absolute;z-index:3;left:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);
  display:inline-flex;align-items:center;gap:9px;background:rgba(10,15,19,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 16px;
  font-family:var(--font-head-stack);font-weight:700;font-size:13.5px;color:#fff}
.vidband__tag .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.28)}
.vidband__watch{position:absolute;z-index:3;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);
  font-family:var(--font-head-stack);font-weight:700;font-size:13px;color:#fff;opacity:.9;letter-spacing:.02em}
.vidband__foot{max-width:720px;margin:22px auto 0;text-align:center;color:var(--ink-soft);font-size:1rem;line-height:1.6}
.vidband__foot a{color:var(--accent-hi);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.4)}
@media (hover:hover){.vidband__foot a:hover{border-bottom-color:var(--accent-hi)}}
@media (prefers-reduced-motion:reduce){.vidband__play::before{animation:none}.vidband__frame img{transition:none}}
.vidband__frame{cursor:pointer}
.vidband__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.vidband__title{position:absolute;z-index:3;left:clamp(14px,2vw,22px);top:clamp(14px,2vw,22px);
  font-family:var(--font-head-stack);font-weight:700;font-size:clamp(1rem,1.2vw,1.2rem);color:#fff;
  text-shadow:0 2px 12px rgba(10,15,19,.8);max-width:60%}
/* two supporting session cards under the featured frame */
.vidrow{display:grid;grid-template-columns:1fr;gap:16px;max-width:960px;margin:16px auto 0}
@media (min-width:640px){.vidrow{grid-template-columns:1fr 1fr}}
.vidcard{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;
  cursor:pointer;isolation:isolate;display:block;background:#000}
.vidcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.vidcard:hover img{transform:scale(1.04)}}
.vidcard::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(10,15,19,.85) 0%,rgba(10,15,19,.1) 45%)}
.vidcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.vidcard__label{position:absolute;z-index:3;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-head-stack);font-weight:700;font-size:13.5px;color:#fff}
.vidcard__label svg{width:26px;height:26px;flex:0 0 auto;fill:#fff;background:var(--accent);border-radius:50%;padding:6px}
@media (prefers-reduced-motion:reduce){.vidcard img{transition:none}}

/* homepage: the video-catalog + recall-challenge feature (Aaron's headline UVP) */
.catalog-feature{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.2vw,44px);max-width:1000px;margin:clamp(28px,4vw,46px) auto 0;align-items:center;justify-items:center}
@media (min-width:820px){.catalog-feature{grid-template-columns:360px 1fr;justify-items:stretch}}
.catalog-feature--top{align-items:start}
.recall-vs--below{max-width:860px;margin:clamp(26px,3.6vw,44px) auto 0}
.catalog-reel-solo{max-width:380px;margin:clamp(28px,4vw,44px) auto 0}
.catalog-reel-solo .catalog-reel__cap{max-width:none}
/* catalog hero as a split: copy left, reel right (uses horizontal space, not a tall stack) */
.catalog-hero{display:grid;gap:clamp(28px,4.5vw,52px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.catalog-hero{grid-template-columns:1.06fr .94fr}}
.catalog-hero__reel{justify-self:center;width:min(100%,400px)}
@media (min-width:900px){.catalog-hero__reel{justify-self:end}}
.catalog-hero__reel .catalog-reel__cap{margin-top:16px}
.vidband__frame--reel{aspect-ratio:4/5;max-width:380px;width:100%;margin:0}
.vidband__frame--reel img{object-position:50% 30%}
.catalog-reel__cap{margin:clamp(18px,2.4vw,26px) auto 0;max-width:620px;text-align:center;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.recall-vs{position:relative;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:16px;padding:clamp(20px,2.4vw,28px)}
.recall-vs .eyebrow{margin-bottom:11px}
.recall-vs h3{font-family:var(--font-head-stack);font-weight:800;font-size:clamp(1.28rem,1.2vw + 1rem,1.62rem);letter-spacing:-.02em;color:var(--ink);margin:0 0 11px;text-wrap:balance;line-height:1.12}
.recall-vs p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.recall-vs p + p{margin-top:11px}
.recall-vs__sig{margin-top:14px !important;font-family:var(--font-head-stack);font-weight:700;font-size:.86rem;color:var(--ink)}
.recall-vs__sig::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent-hi);vertical-align:middle;margin-right:9px}
.catalog-why{list-style:none;margin:clamp(18px,2.4vw,24px) 0 0;padding:0;display:grid;gap:14px}
/* the three proof points as a centered row under the reel + challenge (operator layout) */
.catalog-why--row{max-width:1020px;margin:clamp(26px,3.4vw,42px) auto 0;gap:clamp(16px,2vw,24px)}
@media (min-width:820px){.catalog-why--row{grid-template-columns:repeat(3,1fr);align-items:start}}
.catalog-why li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.catalog-why svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px;fill:var(--accent-hi)}
.catalog-why b{display:block;font-family:var(--font-head-stack);font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px}
.catalog-why span{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.catalog-sessions{max-width:960px;margin:clamp(30px,4vw,46px) auto 0}
.catalog-sessions__label{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;
  font-family:var(--font-head-stack);font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:clamp(16px,2vw,22px)}
.catalog-sessions__label::before,.catalog-sessions__label::after{content:"";height:1px;flex:1;max-width:80px;background:var(--line-2)}
.vidrow--three{grid-template-columns:1fr}
@media (min-width:560px){.vidrow--three{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.vidrow--three{grid-template-columns:repeat(3,1fr)}}
.clipwall{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,15px);max-width:1000px;margin:clamp(16px,2vw,24px) auto 0}
@media (min-width:520px){.clipwall{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.clipwall{grid-template-columns:repeat(4,1fr)}}
.clip{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  aspect-ratio:404/720;background:#000;cursor:pointer;font:inherit;text-align:left}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.clip:hover img{transform:scale(1.05)}}
.clip::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(10,15,19,.9) 0%,rgba(10,15,19,.04) 44%)}
.clip__play{position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(var(--accent-rgb),.92);display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(0,0,0,.7);transition:transform .3s}
@media (hover:hover){.clip:hover .clip__play{transform:translate(-50%,-50%) scale(1.1)}}
.clip__play svg{width:42%;height:42%;fill:#fff;margin-left:2%}
.clip__cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 11px 11px}
.clip__cap b{display:block;font-family:var(--font-head-stack);font-weight:800;font-size:.88rem;color:#fff;line-height:1.12}
.clip__cap i{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.82);margin-top:2px}
.clip:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.clip img{transition:none}}

/* ==========================================================================
   LOGO INTRO - once per session: brand loads center-stage, flies to the nav (Wave 12)
   ========================================================================== */
.intro{position:fixed;inset:0;z-index:12000;background:#0A0F13;display:none;align-items:center;justify-content:center}
.js .intro{display:flex}
/* staged lockup: shield + MARMON FAMILY land first; DOG TRAINING + its rules build
   from the middle out, then the whole stack flies to the nav slot */
.intro__stack{position:relative;width:clamp(220px,30vw,340px);aspect-ratio:3837/702;
  will-change:transform;filter:drop-shadow(0 10px 40px rgba(0,0,0,.5))}
.intro__stack img{position:absolute;inset:0;width:100%;height:100%}
.intro__base{animation:introBase .5s ease both}
.intro__word{opacity:0;animation:introWord .45s ease .5s both}
.intro__linel{transform:scaleX(0);transform-origin:right center;animation:introLine .5s cubic-bezier(.2,.7,.2,1) .55s both}
.intro__liner{transform:scaleX(0);transform-origin:left center;animation:introLine .5s cubic-bezier(.2,.7,.2,1) .55s both}
@keyframes introBase{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes introWord{from{opacity:0}to{opacity:1}}
@keyframes introLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.intro.is-flying{background:transparent;pointer-events:none;transition:background .45s ease .15s}
.intro.is-flying .intro__stack{transition:transform .7s cubic-bezier(.65,0,.35,1)}
.intro.is-done{display:none}
@media (prefers-reduced-motion:reduce){.js .intro{display:none}}
/* the nav slot stays empty until the flying mark lands in it; the reveal is INSTANT
   (JS sets opacity:1 while the flown mark still covers the slot) so there is no swap flash */
.js .intro:not(.is-done) ~ #header .brand img{opacity:0}
@media (prefers-reduced-motion:reduce){.js .intro:not(.is-done) ~ #header .brand img{opacity:1}}

/* ==========================================================================
   HERO  (P-011 full-bleed, P-001 cinematic entrance, P-002 legibility)
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 24px);padding-bottom:clamp(48px,8vh,96px);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  transform:scale(1.06);animation:heroZoom 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,13,.72) 0%,rgba(8,10,13,.32) 34%,rgba(8,10,13,.62) 72%,rgba(8,10,13,.92) 100%),
             linear-gradient(90deg,rgba(8,10,13,.7) 0%,rgba(8,10,13,.15) 62%,rgba(8,10,13,0) 100%)}
.hero>.wrap,.subhero>.wrap{min-width:0}
.hero__inner{max-width:760px;min-width:0;animation:riseIn .9s .15s cubic-bezier(.2,.7,.2,1) both}
.hero .h1{margin:16px 0 0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5);position:relative;isolation:isolate}
.hero .h1 .accent{color:var(--accent-hi)}
/* Wave 3 · 3.3 - subtle slate radial halo behind the hero/subhero H1 (tasteful on dark) */
.hero .h1::before,.subhero .h1::before{content:"";position:absolute;z-index:-1;inset:-34% -12% -30% -8%;
  background:radial-gradient(56% 66% at 30% 48%,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),0) 72%);
  pointer-events:none}
@media (prefers-reduced-motion:no-preference){.hero .h1::before{opacity:0;animation:haloIn 1.1s .5s ease both}}
@keyframes haloIn{to{opacity:1}}
.hero__sub{margin:20px 0 0;max-width:60ch;color:rgba(255,255,255,.92);font-size:clamp(1.08rem,1vw + .95rem,1.28rem);
  line-height:1.55;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.hero .eyebrow{color:#fff}.hero .eyebrow::before{background:var(--accent-hi)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__micro{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:rgba(255,255,255,.9);font-size:14px;font-weight:600}
.hero__micro .stars{color:var(--gold);letter-spacing:2px}
@keyframes heroZoom{to{transform:scale(1)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:none}
  .hero__inner{animation:none}
}

/* ---------- proof / stat bar (Wave 2 · 2.3 - Manrope display numerals + earth accent bar per stat) ---------- */
.proofbar{background:var(--surface);border-block:1px solid var(--line)}
.proofbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;padding-block:clamp(30px,4vw,40px)}
.proofbar .pb{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-inline:clamp(10px,2vw,22px)}
.proofbar .pb::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--accent2)}
.proofbar .pb b{font-family:var(--font-head-stack);font-size:clamp(1.55rem,1.4vw + 1.05rem,2.05rem);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);line-height:1;display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums} /* Wave 8 · 8.3 - stable width while the count-up ticks */
.proofbar .pb>span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.proofbar .pb .stars{color:var(--gold);letter-spacing:1px;font-size:.9em;line-height:1}
@media (max-width:720px){
  .proofbar .wrap{grid-template-columns:repeat(2,1fr);gap:26px 12px}
}

/* ==========================================================================
   SERVICES  (P-012 hover reveal, paw accents, accent-stripe signature)
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:900px){.cards{grid-template-columns:repeat(4,1fr)}}
/* 3-card variant: a centered 3-up grid (no empty 4th column that reads as left-aligned) */
.cards--3{grid-template-columns:1fr;max-width:1040px;margin-inline:auto}
@media (min-width:760px){.cards--3{grid-template-columns:repeat(3,1fr)}}
/* 2-card variant: a centered pair */
.cards--2{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
@media (min-width:640px){.cards--2{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:26px 24px;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
/* Wave 3 · 3.2 (dark-direction adaptation) - the single wayfinding stripe reveals with a two-tone earth→slate gradient on hover; no second ornament added (restraint) */
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  transform:scaleY(.0);transform-origin:top;transition:transform .25s ease}
@media (hover:hover){.card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 26px 50px -30px #000}.card:hover::before{transform:scaleY(1)}}
.card .kicker{font-family:var(--font-head-stack);font-weight:800;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-hi)}
.card h3{font-size:1.28rem;margin:12px 0 8px}
.card p{color:var(--ink-soft);font-size:.98rem;line-height:1.55;flex:1}
.card .more{margin-top:16px;font-family:var(--font-head-stack);font-weight:700;font-size:14px;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.card .more svg{width:15px;height:15px;fill:var(--accent-hi);transition:transform .2s}
@media (hover:hover){.card:hover .more svg{transform:translateX(4px)}}
/* Wave 8 · 8.4 - the card's only link is .more; give it the 44px tap floor on touch (desktop keeps the tight cursor target) */
@media (max-width:720px){.card .more{min-height:46px;align-items:center}}

.pawrow{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.pawrow .paw{font-family:var(--font-head-stack);font-weight:600;font-size:.98rem;color:var(--ink)}

/* ==========================================================================
   WHY / MECHANISM + pull-quote (P-004)
   ========================================================================== */
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}}
.split__media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;
  /* Wave 4 · 4.6 - framed-image soft outer drop-glow (dark-appropriate; ring + bottom-fade on ::after below) */
  box-shadow:0 30px 60px -34px rgba(0,0,0,.92)}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* Wave 4 · 4.6 inner light ring + 4.7 subtle bottom-fade that grounds the framed split photo into the dark surface */
.split__media::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(14,17,19,0) 60%,rgba(14,17,19,.34) 100%)}
@media (hover:hover){.split__media:hover img{transform:scale(1.045)}} /* Wave 3 · 3.1 - inner-image zoom on the split media */
/* services #how: the composite has baked cutout edges; zoom in to crop them out of frame */
#how .split__media img{transform:scale(1.16)}
@media (hover:hover){#how .split__media:hover img{transform:scale(1.2)}}
.split ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.split ul li{position:relative;padding-left:34px;color:var(--ink-soft)}
.split ul li b{color:var(--ink);font-weight:700;font-family:var(--font-head-stack)}
.split ul li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;background:var(--accent);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}

.pullquote{border-left:4px solid var(--accent);padding:6px 0 6px 26px;margin-top:30px}
.pullquote--center{border-left:0;padding:0;max-width:740px;margin:clamp(14px,3vw,30px) auto clamp(34px,4.5vw,50px);text-align:center}
.pullquote--center::before{content:"";display:block;width:42px;height:3px;border-radius:2px;background:var(--accent);margin:0 auto clamp(18px,2.4vw,26px)}
.pullquote--center .cite{justify-content:center}
.pullquote p{font-family:var(--font-head-stack);font-weight:600;font-size:clamp(1.2rem,1.4vw + .8rem,1.5rem);
  line-height:1.34;color:var(--ink);letter-spacing:-.01em}
.pullquote .cite{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.pullquote .cite b{color:var(--ink)}

/* ==========================================================================
   PROCESS timeline
   ========================================================================== */
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.step .n{font-family:var(--font-head-stack);font-weight:800;font-size:14px;color:var(--accent-on);
  background:var(--accent);width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.step h3{font-size:1.12rem;margin:16px 0 8px}
.step p{color:var(--ink-soft);font-size:.95rem;line-height:1.5}

/* Wave 5 · 5.4 - behavior-modification problem/answer capsules (distinct from board-and-train's numbered .steps) */
.capsules{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.capsules{grid-template-columns:repeat(3,1fr)}}
.capsule{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px;border-top:3px solid var(--accent2)}
.capsule .cap-tag{display:inline-block;font-family:var(--font-head-stack);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:14px}
.capsule p{color:var(--ink-soft);font-size:.95rem;line-height:1.55;margin:0}
.capsule .cap-see{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.capsule p b{color:var(--ink);font-family:var(--font-head-stack);font-weight:700}

/* Wave 5 · 5.4 - private-training program-fit comparison (distinct from .steps and .capsules) */
.compare{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.compare{grid-template-columns:1fr 1fr}}
.compare__col{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;overflow:hidden}
.compare__col--here{border-color:rgba(var(--accent-rgb),.55)}
.compare__col--here::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent2),var(--accent))}
.compare__k{font-family:var(--font-head-stack);font-weight:800;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-hi)}
.compare__col h3{font-size:1.24rem;margin:10px 0 6px}
/* the "other path" title links to board & train, underlined so it reads as a path */
.compare__col h3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover:hover){.compare__col h3 a:hover{color:var(--accent-hi)}}
.compare__best{color:var(--ink-soft);font-size:.96rem;line-height:1.5;margin:0 0 18px}
.compare__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.compare__list li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.compare__list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;background:var(--accent);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}
.compare__foot{margin-top:22px;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.compare__foot a{color:var(--accent-hi);text-decoration:none;font-weight:700;border-bottom:1px solid rgba(var(--accent-rgb),.4)}
@media (hover:hover){.compare__foot a:hover{color:var(--ink)}}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){.reviews{grid-template-columns:repeat(3,1fr)}}
.reviews:has(> .review:only-child){grid-template-columns:minmax(0,640px);justify-content:center}
/* Wave 8 · 8.8 - a trailing pair of reviews (2 total, or a 3n+2 tail) centers instead of left-orphaning against an empty track (§7b-2). 50% = half a card width, 9px = half the 18px gap. */
@media (min-width:760px){
  .reviews:has(> .review:nth-child(3n+2):last-child) > .review:nth-last-child(-n+2){transform:translateX(calc(50% + 9px))}
}
.review{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column}
.review .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.review p{margin:14px 0 0;color:var(--ink);line-height:1.6;flex:1}
.review .who{margin-top:18px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.review .who b{color:var(--ink)}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
/* Where-we-train: heading left, state-grouped city pills right */
.area-grid{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.area-grid{grid-template-columns:.9fr 1.1fr}.area-grid .sec-head{margin-bottom:0}}
.area-state+.area-state{margin-top:26px}
.area-state h3{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:10px;margin-bottom:4px}
.area-state h3::after{content:"";flex:1;height:1px;background:var(--line)}
.area span{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head-stack);font-weight:600;font-size:14px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 18px}
.area{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.area-state .area{margin-top:12px}
/* Wave 8 · 8.4 - 44px tap floor on the area chips (inline-flex + min-height) */
.area a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head-stack);font-weight:600;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px;text-decoration:none;transition:.16s}
@media (hover:hover){.area a:hover{border-color:var(--accent-hi);color:var(--accent-hi)}}

/* ==========================================================================
   FAQ  (§7b centered column, left-aligned content; accordion)
   ========================================================================== */
.faqwrap{max-width:800px;margin-inline:auto}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 54px 22px 0;position:relative;
  font-family:var(--font-head-stack);font-weight:700;font-size:1.12rem;color:var(--ink);transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
/* Wave 2 (2.4): CSS-drawn +/- morph in the slate accent, inside a soft accent ring */
.faq summary::after{content:"";position:absolute;right:0;top:calc(50% - 15px);width:30px;height:30px;border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),.5);
  background:linear-gradient(var(--accent-hi),var(--accent-hi)) center/13px 2px no-repeat,
             linear-gradient(var(--accent-hi),var(--accent-hi)) center/2px 13px no-repeat;
  transition:background-size .25s ease,border-color .2s ease,background-color .2s ease}
.faq details[open] summary::after{
  background:linear-gradient(var(--accent-hi),var(--accent-hi)) center/13px 2px no-repeat,
             linear-gradient(var(--accent-hi),var(--accent-hi)) center/2px 0 no-repeat;
  border-color:var(--accent-hi);background-color:rgba(var(--accent-rgb),.14)}
@media (hover:hover){.faq summary:hover{color:var(--accent-hi)}.faq summary:hover::after{border-color:var(--accent-hi)}}
.faq .ans{padding:0 0 24px;color:var(--ink-soft);line-height:1.65;max-width:70ch}

/* ==========================================================================
   CLOSER
   ========================================================================== */
.closer{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:clamp(40px,6vw,72px);text-align:center;overflow:hidden}
.closer::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 50% -20%,rgba(var(--accent-rgb),.22),transparent 60%);z-index:0}
.closer>*{position:relative;z-index:1}
.closer h2{max-width:20ch;margin-inline:auto}
.closer .lede{max-width:56ch;margin:16px auto 0}
.closer .hero__cta{justify-content:center}
/* Wave 7 · 7.4 - real rating proof (5.0/41 Google) within reach of every closer CTA */
.closer__micro{margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;color:var(--ink-soft);font-size:14px;font-weight:600}
.closer__micro .stars{color:var(--gold);letter-spacing:2px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px) 34px;margin-top:var(--section-y)}
.foot-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.5fr) auto}}
.foot-brand img{height:54px;width:auto;aspect-ratio:1279/234;margin-bottom:16px}
.foot-brand p{color:var(--ink-soft);font-size:.95rem;max-width:46ch}
/* the three link columns cluster as one group on the right (operator: Company nearer Services) */
/* mobile: two columns so the three link sections don't stack into one tall tower */
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}
@media (min-width:460px){.foot-cols{grid-template-columns:repeat(3,minmax(0,max-content));gap:clamp(30px,3.6vw,58px)}}
.foot-col h3{font-family:var(--font-head-stack);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#83A9CB;margin-bottom:14px} /* Wave 2 (2.5): accent-color section titles on the dark footer */
.foot-col a{display:block;color:var(--ink);text-decoration:none;padding:6px 0;font-size:.96rem;opacity:.88;white-space:nowrap}
@media (hover:hover){.foot-col a:hover{color:var(--accent-hi)}}
/* Wave 8 · 8.4 - 44px tap floor on footer links where fingers, not cursors, do the tapping */
@media (max-width:720px){.foot-col a{display:flex;align-items:center;min-height:44px;padding:4px 0}}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;align-items:center;
  margin-top:clamp(30px,4vw,44px);padding-top:24px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12.5px}
.foot-bar__end{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-bar__end a{color:var(--ink-soft);text-decoration:none}
@media (hover:hover){.foot-bar__end a:hover{color:var(--accent-hi)}}
.foot-bar .built a{color:#83A9CB;font-weight:700;text-decoration:underline}

/* ==========================================================================
   MOBILE STICKY CALL BAR (§7a - hidden on load, reveal on scroll, safe-area)
   ========================================================================== */
.callbar,.mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:10px;
  padding:12px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:var(--surface-2);box-shadow:0 48px 0 0 var(--surface-2),0 -1px 0 var(--line),0 -14px 30px -20px #000;
  transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px)));transition:transform .3s ease}
.callbar.is-visible{transform:translateY(0)}
.callbar .btn{flex:1}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}
@media (max-width:720px){.callbar{display:flex}
  /* reserve space so the sticky call bar never covers the footer's last line ("Built by ...") */
  .site-footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}
.site-header.is-open ~ .callbar{transform:translateY(120%)}

/* ==========================================================================
   SCROLL REVEAL (P-008)
   ========================================================================== */
/* visible by default (no-JS safe); only hide when JS is present, reveal on scroll */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* misc */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   INTERIOR PAGES - secondary hero, breadcrumbs, prose, service layout,
   contact, gallery, about bio. All inherit the homepage tokens/patterns.
   ========================================================================== */

/* secondary hero (shorter than homepage; P-010 parallax drift, P-002 scrim) */
/* Wave 14 premium pass: taller, brighter, with the homepage's breathing rim-light.
   The copy keeps a left legibility gradient; the image itself is allowed to be seen. */
.subhero{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:72vh;min-height:72dvh;padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(44px,7vh,84px)}
.subhero--short{min-height:62vh;min-height:62dvh}
/* taller hero when the subject sits low in a wide photo (capture the dog, not just crop it) */
.subhero--tall{min-height:90vh;min-height:90svh}
/* about hero is about Aaron's face — keep the top-left clear, dark only where the copy sits */
.subhero--about .subhero__scrim{
  background:linear-gradient(180deg,rgba(8,10,13,.1) 0%,rgba(8,10,13,0) 32%,rgba(10,15,19,.5) 66%,rgba(10,15,19,.74) 100%),
             linear-gradient(90deg,rgba(8,10,13,.26) 0%,rgba(8,10,13,0) 48%)}
.subhero__media{position:absolute;inset:-8% 0 0 0;z-index:-2}
.subhero__media img{width:100%;height:112%;object-fit:cover;will-change:transform}
/* lightened a step (operator): top + mid feather much lighter, bottom/left backing
   kept just enough to hold the white H1/eyebrow (the .h1::before blur helps too) */
.subhero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,13,.32) 0%,rgba(8,10,13,.07) 46%,rgba(10,15,19,.66) 100%),
             linear-gradient(90deg,rgba(8,10,13,.5) 0%,rgba(8,10,13,.2) 44%,rgba(8,10,13,0) 72%)}
/* slate rim-light + one earth ember, breathing (same family as the home hero aura) */
.subhero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(48% 56% at 74% 30%, rgba(94,134,166,.2) 0%, rgba(94,134,166,.06) 46%, transparent 74%),
    radial-gradient(30% 26% at 22% 82%, rgba(158,127,91,.16) 0%, rgba(158,127,91,.05) 52%, transparent 78%);
  animation:hero3Breathe 10s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.subhero::after{animation:none}}
/* /method/ split subhero: copy left, contained photo right (operator: no full-bleed) */
.subhero--split{display:block;min-height:0;background:var(--bg);
  padding-top:calc(var(--nav-h) + clamp(30px,4.5vw,58px));padding-bottom:clamp(48px,6vw,80px)}
.subhero--split>.wrap{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,52px);align-items:center}
@media (min-width:900px){.subhero--split>.wrap{grid-template-columns:1.06fr .94fr}}
.subhero__photo{position:relative;justify-self:center;width:min(100%,420px)}
@media (min-width:900px){.subhero__photo{justify-self:end;width:min(100%,500px)}}
.subhero__photo::before{content:"";position:absolute;inset:-9%;z-index:0;border-radius:32px;
  background:radial-gradient(60% 60% at 50% 45%,rgba(var(--accent-rgb),.2),transparent 70%);filter:blur(6px)}
.subhero__photo img,.subhero__photo video{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:20px;
  border:1px solid var(--line-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
/* method hero: keep the wordmark H1 on one line */
.subhero--oneline .h1{white-space:normal;text-wrap:balance;font-size:clamp(2.15rem,3.4vw + 1rem,3.4rem)}
.subhero .h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.55),0 1px 8px rgba(0,0,0,.5);font-size:clamp(2.3rem,4.2vw + 1rem,3.9rem);margin:14px 0 0;max-width:18ch;position:relative;isolation:isolate}
.subhero__sub{margin-top:16px;max-width:56ch;color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1vw + .9rem,1.2rem);line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.subhero .eyebrow{color:#fff}.subhero .eyebrow::before{background:var(--accent-hi)}
.subhero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* private-training: split hero on a reddish-dark EMBER wash so the copy pops,
   with the photo contained in a card on the right (operator: kill the stretched full-bleed) */
.subhero--ember{position:relative;overflow:hidden}
.subhero--ember::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(72% 110% at 15% 42%, rgba(var(--accent-rgb),.32), transparent 58%),
    radial-gradient(60% 80% at 92% 82%, rgba(var(--accent-rgb),.13), transparent 60%),
    linear-gradient(145deg,#1d100f 0%, var(--bg) 60%)}
.subhero--ember>.wrap{position:relative;z-index:1}
.subhero--ember .subhero__photo::before{background:radial-gradient(60% 60% at 50% 45%,rgba(var(--accent-rgb),.34),transparent 70%)}
/* method hero: the brand pinnacle — crest emblem medallion on a rich ember gradient (no photo/video) */
.subhero--brand{position:relative;overflow:hidden}
.subhero--brand::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 82% at 84% 38%, rgba(var(--accent-rgb),.36), transparent 60%),
    radial-gradient(72% 104% at 10% 64%, rgba(var(--accent-rgb),.15), transparent 62%),
    linear-gradient(150deg,#230f0e 0%, var(--bg) 56%, #130f0f 100%)}
.subhero--brand>.wrap{position:relative;z-index:1}
.subhero__emblem{position:relative;justify-self:center;width:min(72%,340px);aspect-ratio:1;isolation:isolate}
@media (min-width:900px){.subhero__emblem{justify-self:end;width:min(100%,420px)}}
.subhero__emblem::before{content:"";position:absolute;inset:-16%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.14) 52%, transparent 72%);
  filter:blur(6px);animation:emblemPulse 6s ease-in-out infinite}
.subhero__emblem img{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 11px rgba(var(--accent-rgb),.12), 0 30px 70px -22px rgba(0,0,0,.85), 0 0 74px -6px rgba(var(--accent-rgb),.5)}
@keyframes emblemPulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.subhero__emblem::before{animation:none}}
/* method hero: the emblem lives between the H1 and the body copy in source (so phones
   can float the body copy AROUND the crest via shape-outside). On desktop, display:contents
   promotes the copy's children into the wrap grid so the approved 2-col layout is unchanged
   (copy stacks left, crest centered right); row-gap:0 preserves the copy's own margins. */
@media (min-width:900px){
  .subhero--brand > .wrap{column-gap:clamp(30px,4vw,52px);row-gap:0;align-items:center}
  .subhero--brand .subhero__copy{display:contents}
  .subhero--brand .eyebrow{grid-column:1;grid-row:1}
  .subhero--brand .h1{grid-column:1;grid-row:2}
  .subhero--brand .subhero__sub{grid-column:1;grid-row:3}
  .subhero--brand .subhero__cta{grid-column:1;grid-row:4}
  .subhero--brand .subhero__emblem{grid-column:2;grid-row:1 / 5;align-self:center;justify-self:end;width:min(100%,420px)}
}
/* method hero TABLET (561-899): eyebrow + H1 full-width on top, then the crest sits
   top-right beside a narrower body column; CTA anchored low. `display:contents`
   promotes the copy's children into the wrap grid so each can be placed precisely. */
@media (min-width:561px) and (max-width:899px){
  .subhero--brand{min-height:78svh;min-height:78dvh}
  .subhero--brand > .wrap{display:grid;grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto 1fr;column-gap:24px;align-content:start;min-height:56svh}
  .subhero--brand .subhero__copy{display:contents}
  .subhero--brand .eyebrow{grid-column:1 / -1;grid-row:1}
  .subhero--brand .h1{grid-column:1 / -1;grid-row:2;max-width:none}
  .subhero--brand .subhero__sub{grid-column:1;grid-row:3;max-width:none;align-self:start}
  .subhero--brand .subhero__emblem{grid-column:2;grid-row:3;align-self:start;
    width:clamp(150px,30vw,210px);margin:0}
  .subhero--brand .subhero__cta{grid-column:1 / -1;grid-row:4;align-self:end;margin-top:clamp(26px,5vh,52px)}
}
/* method hero PHONES (<=560): eyebrow + H1 full-width on top, then the crest floats
   right (bigger) tucked under the H1, and the body copy SCOOPS around the circle via
   shape-outside so the right edge mirrors the crest. An intentional composition. */
@media (max-width:560px){
  .subhero--brand{min-height:82svh;min-height:82dvh}
  .subhero--brand > .wrap{display:block}
  .subhero--brand .subhero__copy{display:block}
  .subhero--brand .h1{max-width:none}
  .subhero--brand .subhero__emblem{float:right;position:relative;
    width:clamp(158px,48vw,214px);margin:6px 0 2px 20px;
    shape-outside:circle(50%);shape-margin:15px}
  .subhero--brand .subhero__sub{max-width:none;margin-top:0}
  .subhero--brand .subhero__cta{clear:both;margin-top:clamp(24px,5vh,52px)}
}
/* keep the closing clause together so a single word never orphans on the last line
   (used in the method subhead; the whole phrase drops to a new line as a unit) */
.nowrap{white-space:nowrap}
/* solid-nav pages with no hero photo (contact) */
.page-plain{padding-top:var(--nav-h)}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:rgba(255,255,255,.85);
  font-family:var(--font-head-stack);font-weight:600}
.crumbs.dark{color:var(--ink-soft)}
.crumbs a{color:inherit;text-decoration:none;opacity:.85}
@media (hover:hover){.crumbs a:hover{color:var(--accent-hi);opacity:1}}
.crumbs span{opacity:.5}

/* prose / rich body copy on interior pages */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.6rem,2.4vw + .6rem,2.1rem);margin:0 0 14px}
.prose h3{font-size:1.3rem;margin:34px 0 10px}
.prose p{color:var(--ink-soft);line-height:1.7;margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
:is(.prose,.qa) ul.checks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
:is(.prose,.qa) ul.checks li{position:relative;padding-left:32px;color:var(--ink-soft);line-height:1.55}
:is(.prose,.qa) ul.checks li b{color:var(--ink);font-family:var(--font-head-stack)}
:is(.prose,.qa) ul.checks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--accent);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))} /* Wave 4 · 4.8 - subtle depth on the paw-check markers (service cards use text kickers, no icon circles) */
.source-note{font-size:13px;color:var(--ink-soft);border-top:1px solid var(--line);margin-top:26px;padding-top:14px}
.source-note a{color:var(--accent-hi)}

/* service detail two-column with sticky CTA aside */
.svc-layout{display:grid;gap:clamp(30px,5vw,56px);grid-template-columns:1fr}
@media (min-width:940px){.svc-layout{grid-template-columns:minmax(0,1fr) 340px}}
.aside-cta{position:sticky;top:calc(var(--nav-h) + 20px);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:26px 24px;align-self:start}
.aside-cta h3{font-size:1.25rem;margin:0 0 10px}
.aside-cta p{color:var(--ink-soft);font-size:.95rem;line-height:1.55;margin:0 0 18px}
.aside-cta .btn{width:100%;margin-bottom:10px}
.aside-cta .callnum{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head-stack);
  font-weight:700;color:var(--ink);text-decoration:none;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.aside-cta .callnum svg{width:16px;height:16px;fill:var(--accent-hi)}
.aside-cta .mini{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
.aside-cta .mini b{color:var(--ink)}

/* P-009 pinned-layer depth band */
.pinned{position:relative;overflow:hidden;border-radius:20px;isolation:isolate;padding:clamp(48px,7vw,88px) clamp(28px,5vw,64px)}
.pinned__bg{position:absolute;inset:0;z-index:-2;background-attachment:fixed;background-size:cover;background-position:center}
.pinned__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,10,13,.82),rgba(8,10,13,.72))}
.pinned h2,.pinned p{color:#fff}.pinned .lede{color:rgba(255,255,255,.9)}
@media (max-width:820px){.pinned__bg{background-attachment:scroll}}

/* CONTACT - action-first (utility page), form second on mobile */
.contact-grid{display:grid;gap:clamp(28px,5vw,48px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1.05fr .95fr}}
/* the H1 + actions share the left column so the form rides up in line with the H1 (operator) */
.contact-left .sec-head .h1{font-size:clamp(1.9rem,2.4vw + 1rem,2.9rem)}
.contact-actions .action{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-actions .action:first-child{padding-top:0}
.contact-actions .ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(var(--accent-rgb),.14);
  display:grid;place-items:center;
  /* Wave 4 · 4.8 - icon-circle depth: accent inset ring + soft drop shadow */
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3),0 8px 18px -10px rgba(0,0,0,.7)}
.contact-actions .ico svg{width:22px;height:22px;fill:var(--accent-hi)}
.contact-actions .action b{font-family:var(--font-head-stack);font-size:1.05rem;color:var(--ink);display:block}
.contact-actions .action a{color:var(--accent-hi);text-decoration:none;font-family:var(--font-head-stack);font-weight:700}
.contact-actions .action p{color:var(--ink-soft);font-size:.92rem;margin:2px 0 0}
/* Wave 7 · 7.1 - flat slate top accent bar (locked flat direction, NOT gradient) + expectation-setter */
.form{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,34px)}
.form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.form h2{font-size:1.5rem;margin:0 0 6px}
.form .fnote{color:var(--ink-soft);font-size:.92rem;margin:0 0 20px}
.form__expect{list-style:none;margin:0 0 22px;padding:16px 18px;display:grid;gap:9px;
  background:rgba(var(--accent-rgb),.06);border:1px solid var(--line);border-radius:var(--radius)}
.form__expect li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.form__expect li b{color:var(--ink);font-family:var(--font-head-stack);font-weight:700}
.form__expect li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;background:var(--accent-hi);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}
.form.sent .form__expect{display:none}
.field-row{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:560px){.field-row.two{grid-template-columns:1fr 1fr}}
.form label{display:block;font-family:var(--font-head-stack);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:7px} /* Wave 8 · 8.6 - 14px floor on the conversion-surface form label (was 13.5) */
.form input,.form textarea,.form select{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--radius);padding:13px 14px;font-family:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.form textarea{min-height:130px;resize:vertical}
/* Wave 3 · 3.8 - outline:none is PAIRED with a visible slate focus ring (never bare) */
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.24)}
.form .btn{margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__ok{display:none;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.5);
  border-radius:var(--radius);padding:16px;color:var(--ink);font-family:var(--font-head-stack);font-weight:600}
.form.sent .form__ok{display:block}.form.sent .form__fields{display:none}

/* ABOUT bio */
.bio{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.bio{grid-template-columns:.85fr 1.15fr}}
.bio__photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;position:relative;
  /* Wave 4 · 4.6 - framed-image soft outer drop-glow (dark-appropriate) */
  box-shadow:0 26px 54px -34px rgba(0,0,0,.9)}
.bio__photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} /* Wave 4 · 4.6 - inner light ring */
.bio__photo img{width:100%;height:100%;object-fit:cover}
.bio__ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);color:var(--ink-soft);
  text-align:center;padding:24px;font-size:.9rem}
.factbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.factbar>span{font-family:var(--font-head-stack);font-weight:600;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.factbar>span span{background:none;border:0;padding:0} /* no pill-in-pill (stars sit flat inside the chip) */
.factbar .stars{color:var(--gold);letter-spacing:1px}
/* Wave 8 · 8.2 - handwritten sign-off under Aaron's bio (single tasteful use; slate, dark-appropriate) */
.signature{margin-top:26px}
.bio__side{display:flex;flex-direction:column}
.bio__side .signature{margin-top:22px}
/* About: How/Why split into two balanced side-by-side cards */
.qa-grid{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:1fr;max-width:1060px;margin:0 auto}
@media (min-width:820px){.qa-grid{grid-template-columns:1fr 1fr}}
.qa{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,36px)}
.qa h3{font-family:var(--font-head-stack);font-weight:800;font-size:clamp(1.28rem,1.2vw + 1rem,1.6rem);letter-spacing:-.02em;line-height:1.14;margin:0 0 12px;color:var(--ink)}
.qa > p{color:var(--ink-soft);line-height:1.62;margin:0 0 18px}
.signature .sig-name{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(2.2rem,4vw,2.9rem);
  line-height:1;color:var(--accent-hi);display:inline-block}
.signature .sig-role{display:block;margin-top:4px;font-family:var(--font-head-stack);font-weight:600;
  font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}

/* WORK gallery (polaroid/card grid; :has centering for partial rows §7b-2) */
/* flip cards (work gallery): front = real photo + label; back = the story (Wave 15) */
.flipgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.flipgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.flipgrid{grid-template-columns:repeat(3,1fr)}}
.flip{position:relative;aspect-ratio:4/3;perspective:1200px;cursor:pointer}
.flip__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.flip:hover .flip__inner{transform:rotateY(180deg)}}
.flip:focus-visible .flip__inner,.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
/* NOTE: no overflow:hidden on the backface-hidden face — that combo breaks
   backface-visibility in WebKit and bleeds the front label through mirrored.
   Clip the corners on the img / gradient / back instead. */
.flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;border:1px solid var(--line)}
.flip__front img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px}
.flip__front::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(0deg,rgba(10,15,19,.82) 0%,rgba(10,15,19,.05) 46%)}
.flip__front b{position:absolute;z-index:1;left:16px;right:44px;bottom:13px;font-family:var(--font-head-stack);font-weight:700;font-size:15.5px;color:#fff}
.flip__hint{position:absolute;z-index:1;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;
  background:rgba(var(--accent-rgb),.9);display:grid;place-items:center}
.flip__hint svg{width:14px;height:14px;fill:#fff}
.flip__back{transform:rotateY(180deg);background:var(--surface);padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.flip__back h3{font-size:1.08rem;margin:0}
.flip__back p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.flip__back a{color:var(--accent-hi);font-weight:600;font-size:.92rem;text-decoration:none}
@media (prefers-reduced-motion:reduce){.flip__inner{transition:none}}

.gallery{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.gallery{grid-template-columns:repeat(3,1fr)}}
/* Wave 8 · 8.8 - a lone trailing gallery card centers instead of left-orphaning against empty tracks (§7b-2, :has partial-row centering) */
@media (min-width:940px){
  .gallery:has(> .shot:nth-child(3n+1):last-child) > .shot:last-child{grid-column:1 / -1;justify-self:center;width:min(100%,calc((100% - 36px)/3))}
}
@media (min-width:640px) and (max-width:939.98px){
  .gallery:has(> .shot:nth-child(2n+1):last-child) > .shot:last-child{grid-column:1 / -1;justify-self:center;width:min(100%,calc((100% - 18px)/2))}
}
.shot{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  /* Wave 4 · 4.6 - framed gallery card: soft outer drop-glow at rest */
  box-shadow:0 18px 40px -32px rgba(0,0,0,.9);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.shot__img{position:relative;aspect-ratio:4/3;overflow:hidden}
/* Wave 4 · 4.6 - inner light ring sits above the framed image */
.shot__img::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.shot__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
@media (hover:hover){
  .shot:hover .shot__img img{transform:scale(1.04)}
  /* Wave 4 · 4.9 - gallery card hover lift + deeper glow + caption fade-in */
  .shot:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 30px 56px -30px #000}
  .shot:hover .shot__cap span{opacity:1}
}
.shot__cap{padding:16px 18px}
.shot__cap b{font-family:var(--font-head-stack);color:var(--ink);display:block;font-size:1.02rem}
.shot__cap span{color:var(--ink-soft);font-size:.9rem;opacity:.72;transition:opacity .25s ease}

/* section intro alignment helper */
.mt-0{margin-top:0}

/* ---------- print ---------- */
@media print {
  .site-header,.callbar,.drawer,.tl-launch,.tl-panel,.hero__cta,.subhero__cta{display:none !important}
  body{background:#fff;color:#000}
  .hero,.subhero{min-height:auto;padding-top:20px}
  .hero__scrim,.subhero__scrim,.hero__media,.subhero__media{display:none}
  .hero .h1,.subhero .h1,.hero__sub,.subhero__sub{color:#000;text-shadow:none}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1 !important;transform:none !important}
  .section,.subhero{page-break-inside:avoid}
}

/* packages & pricing (Wave 15, from the client's own catalog) */
.prices{display:grid;gap:18px;grid-template-columns:1fr;max-width:1060px;margin:0 auto}
@media (min-width:880px){.prices{grid-template-columns:repeat(3,1fr)}}
.price{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column}
.price--hot{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 18px 50px -28px rgba(var(--accent-rgb),.55)}
.price__tag{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;border-radius:999px;padding:4px 12px;
  font-family:var(--font-head-stack);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.price h3{font-size:1.15rem;margin:0 0 4px}
.price__amt{font-family:var(--font-head-stack);font-weight:800;font-size:clamp(1.7rem,2vw + 1rem,2.2rem);letter-spacing:-.02em;color:var(--ink)}
.price__amt span{display:block;font-size:.5em;font-weight:600;color:var(--ink-soft);letter-spacing:0;margin-top:3px}
.price__amt .per{display:inline-block;font-size:.42em;font-weight:700;color:var(--ink-soft);letter-spacing:0;margin:0 0 0 1px;vertical-align:baseline}
.price ul{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:9px}
.price li{position:relative;padding-left:24px;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.price li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;
  background:rgba(var(--accent-rgb),.18);box-shadow:inset 0 0 0 1.5px var(--accent-hi);transition:background .28s ease,box-shadow .28s ease}
/* hover: the circular bullets fill red one at a time, top to bottom */
@media (hover:hover){
  .price:hover li::before{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .price:hover li:nth-child(1)::before{transition-delay:.02s}
  .price:hover li:nth-child(2)::before{transition-delay:.11s}
  .price:hover li:nth-child(3)::before{transition-delay:.2s}
  .price:hover li:nth-child(4)::before{transition-delay:.29s}
  .price:hover li:nth-child(5)::before{transition-delay:.38s}
}
.price .btn{margin-top:auto}
.price__note{max-width:720px;margin:22px auto 0;text-align:center;color:var(--ink-soft);font-size:.92rem}
.price__note b{color:var(--gold)}

/* ── hero "See Aaron in action" play button (flows in the copy column, centered under the H1) + video lightbox ── */
.hero3__play{align-self:center;margin:clamp(18px,2.6vh,28px) 0 0;
  display:inline-flex;align-items:center;gap:13px;background:none;border:0;padding:0;cursor:pointer;color:#fff}
/* the second play button (below the CTA card) only renders on tablet/mobile; desktop uses the in-copy one */
.hero3__play--below{display:none}
/* red play button so it reads as the clickable moment (operator: use red on the button, not the label) */
.hero3__play-btn{width:clamp(48px,4.6vw,58px);height:clamp(48px,4.6vw,58px);border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--accent);border:1.5px solid rgba(255,255,255,.4);
  box-shadow:0 12px 36px -10px rgba(var(--accent-rgb),.6),0 0 0 6px rgba(var(--accent-rgb),.14);
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
@media (hover:hover){.hero3__play:hover .hero3__play-btn{background:var(--accent-hi);transform:scale(1.06)}}
.hero3__play-btn svg{width:42%;height:42%;fill:#fff;margin-left:2%}
.hero3__play-lbl{font-family:var(--font-head-stack);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(13px,.7vw + .5rem,15.5px);line-height:1.12;white-space:nowrap;text-shadow:0 2px 14px rgba(10,15,19,.85)}
.hero3__play:hover .hero3__play-btn,.hero3__play:focus-visible .hero3__play-btn{transform:scale(1.07);background:rgba(var(--accent-rgb),.9);border-color:#fff}
.hero3__play:focus-visible{outline:none}
.hero3__play:focus-visible .hero3__play-btn{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.5),0 12px 36px -10px rgba(10,15,19,.75)}
.js .hero3 .hero3__play{opacity:0;transition:opacity .8s ease .42s}
.js .hero3.is-revealed .hero3__play{opacity:1}
@media (prefers-reduced-motion:reduce){.hero3__play-btn{transition:none}.js .hero3 .hero3__play{opacity:1;transition:none}}
.vmodal{position:fixed;inset:0;z-index:13000;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.vmodal.is-open{display:flex}
.vmodal__bg{position:absolute;inset:0;background:rgba(6,9,12,.86);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.vmodal__box{position:relative;z-index:1;width:min(1040px,94vw);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 40px 130px -24px #000}
.vmodal__frame{position:absolute;inset:0}
.vmodal__frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal__frame video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vmodal__x{position:absolute;top:-46px;right:0;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(10,15,19,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.vmodal__x:hover{background:rgba(var(--accent-rgb),.85)}
@media (max-width:640px){.vmodal__x{top:-42px;width:34px;height:34px;font-size:20px}}
/* portrait reel gets a portrait modal box sized to the video (720x938) */
.vmodal--portrait .vmodal__box{width:auto;max-width:94vw;height:min(86vh,900px);aspect-ratio:720 / 938}

/* ==========================================================================
   MOBILE CTA CONSISTENCY (LocalCraft BUILD-STANDARDS §7b-5)
   Placed at end-of-file so it wins over the scattered base .subhero__cta /
   .hero__cta / .hero3__cta definitions (equal specificity, later source wins).
   When a primary CTA button GROUP stacks on phones, every button matches the
   WIDEST button's natural (content) width, never full-bleed. A single-column
   `max-content` grid sizes the column to the widest item and the shorter button
   stretches to that same width, so buttons stay only as wide as the longest
   label needs and the stack is uniform instead of ragged. Existing per-group
   justify-content (e.g. `.closer .hero__cta{justify-content:center}`) still
   positions the column. Standalone secondary links ("See all reviews") are not
   in these groups, so they keep their own width.
   ========================================================================== */
@media (max-width:560px){
  .subhero__cta,.hero__cta,.hero3__cta{display:grid;grid-template-columns:max-content;gap:12px}
}