/* ============================================================
   Axon K9 — light theme: warm white, charcoal, gold accents
   ============================================================ */

:root{
  /* surfaces - warm near-black, never flat #000 */
  --bg:#0d0b07;
  --bg-soft:#12100a;
  --bg-warm:#181309;
  --panel:#16130c;
  --panel-2:#1c1810;
  --footer:#080704;

  /* ink */
  --ink:#ffffff;
  --text:#d9d3c6;
  --muted:#a79f8e;
  --muted-2:#8a8272;
  --on-dark:#ede9e0;

  /* gold - bright enough to carry on black */
  /* height of the sticky bar, so the hero can clear it */
  --head-h:78px;
  --gold:#d9b56a;
  --gold-deep:#e8cd8a;
  --gold-accent:#c6a154;
  --gold-soft:#f0dcae;
  --gold-grad:linear-gradient(135deg,#8f7132 0%,#c6a154 28%,#f0dca6 50%,#c6a154 72%,#8f7132 100%);
  --gold-grad-text:linear-gradient(135deg,#c6a154 0%,#e8cd8a 40%,#f6e6bd 60%,#c6a154 100%);

  /* lines */
  --line:rgba(198,161,84,.30);
  --line-soft:rgba(255,255,255,.10);

  --radius:14px;
  --radius-lg:20px;
  --wrap:1200px;
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 22px 60px rgba(0,0,0,.6);
  --shadow-gold:0 12px 30px rgba(198,161,84,.22);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 .5em;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem)}
h3{font-size:clamp(1.22rem,2vw,1.55rem)}
p{margin:0 0 1.15em}
ul{margin:0 0 1.15em;padding-left:1.1em}
li{margin-bottom:.5em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.muted{color:var(--muted)}
.center{text-align:center}
section{padding:clamp(42px,5vw,72px) 0;position:relative}
.alt{background:var(--bg-soft)}
.warm{background:var(--bg-warm)}
/* stitch: a hairline where two section tones meet, so the joins read as
   deliberate seams instead of a soft band */
.alt + section:not(.alt),section:not(.alt) + .alt,
.band-dark + section,section + .band-dark,
.cta-band{border-top:1px solid var(--line-soft)}
.band-dark + section,section + .band-dark{border-top-color:var(--line)}

section>.wrap{position:relative;z-index:1}

/* ---- gold text ---- */
.gold{
  background:var(--gold-grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;display:block;
}
.rule{width:56px;height:3px;background:var(--gold-grad);margin:0 0 20px;border:0;border-radius:2px}
.center .rule{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;border-radius:999px;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
  text-align:center;line-height:1.2;
}
.btn-gold{background:var(--gold-grad);color:#241c08;box-shadow:var(--shadow-gold);font-weight:700}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(168,132,44,.34);color:#241c08}
.btn-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)}
.btn-dark:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--gold);background:transparent}
.btn-ghost:hover{border-color:var(--gold-accent);background:rgba(198,161,84,.14);transform:translateY(-2px);color:var(--gold-deep)}
.btn-lg{padding:18px 38px;font-size:1rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.center .btn-row{justify-content:center}

/* ============ HEADER ============ */
header.site{
  position:sticky;top:0;z-index:70;background:rgba(13,11,7,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 18px rgba(0,0,0,.5);
}
/* Over the homepage hero the bar starts transparent and fades to solid on
   scroll. No backdrop-filter is added here: it makes the header a containing
   block for fixed children, which is what broke the mobile menu before. */
.js header.site.over-hero{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.js.at-top header.site.over-hero{
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* while the menu is open the bar must stay readable */
.js.at-top header.site.over-hero:has(nav.main.open){background:var(--bg);border-bottom-color:var(--line)}

header.site .wrap{max-width:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px clamp(20px,3.2vw,48px)}
.head-right{display:flex;align-items:center;gap:12px;flex:none}
.head-call{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;
  color:var(--gold);padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(198,161,84,.08);
}
.head-call:hover{background:rgba(198,161,84,.18);color:var(--gold-deep)}
.head-call svg{color:var(--gold-accent);flex:none}
.nav-phone{display:none}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:56px;height:56px;border-radius:0;object-fit:contain;border:0;background:none;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.brand-sub{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:3px;font-weight:600}

.brand-line{
  font-family:var(--serif);font-size:clamp(.74rem,.95vw,.9rem);font-style:italic;
  color:var(--gold);letter-spacing:.01em;line-height:1.25;
  padding-left:12px;margin-left:2px;border-left:1px solid var(--line);
  max-width:21ch;min-width:0;                /* two lines, not four */
}
.brand{min-width:0}
/* the header row must be allowed to shrink, or the brand line forces overflow */
header.site .wrap{min-width:0}
@media(min-width:901px){nav.main{min-width:0;flex-wrap:wrap;justify-content:flex-end}}
.cred{
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.92em;color:var(--gold);
}
.foot .cred{color:var(--gold-soft)}

.founder-role{
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:-4px 0 14px;
}

nav.main{display:flex;align-items:center;gap:2px}
nav.main a{
  color:var(--text);font-size:.88rem;font-weight:500;padding:9px 12px;border-radius:8px;
  transition:color .18s,background .18s;white-space:nowrap;
}
nav.main a:hover{color:var(--gold);background:rgba(198,161,84,.10)}
nav.main a.active{color:var(--gold);font-weight:600}
/* the nav link rule outranks .btn-gold, so restate the button colours here */
nav.main a.btn-gold{color:#241c08;font-weight:700}
nav.main a.btn-gold:hover{color:#241c08;background:var(--gold-grad)}
.nav-cta{margin-left:8px}

.has-drop{position:relative}
.has-drop>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;min-width:296px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transition:.2s;
}
/* Desktop only: on touch, a tap latches :hover and this rule was re-applying
   translateX(-50%), shoving the mobile submenu off the left of the screen. */
@media(min-width:901px){
  .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}
.drop a{display:block;padding:10px 13px;font-size:.87rem;border-radius:8px;color:var(--text)}
.drop a small{display:none}
.drop a:hover{background:rgba(198,161,84,.12);color:var(--gold)}

.burger{display:none;background:rgba(198,161,84,.08);border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;color:var(--gold)}
.burger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(20,18,13,.5);z-index:1;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;border:0;padding:0;
}
.nav-backdrop.on{opacity:1;visibility:visible}

.nav-head{display:none}

/* ============ HERO ============ */
/* The hero carries a photo behind a scrim. The header sits over it and is
   transparent until the page scrolls, so the picture reads full bleed. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:calc(var(--head-h) * -1);
  padding:calc(var(--head-h) + clamp(46px,7vw,104px)) 0 clamp(52px,7vw,104px);
  background:#0d0b07;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%;z-index:-2;pointer-events:none;background:#0d0b07;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,7,4,.50) 0%,rgba(8,7,4,.30) 22%,rgba(8,7,4,.62) 62%,rgba(13,11,7,.97) 100%),
    linear-gradient(90deg,rgba(8,7,4,.90) 0%,rgba(8,7,4,.72) 45%,rgba(8,7,4,.30) 100%);
}
.hero-inner{max-width:760px}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin:0 0 clamp(26px,3.4vw,38px);max-width:460px}
.hero-cta .btn{width:100%;justify-content:center}
.hero-title{
  margin:0 0 clamp(22px,2.6vw,30px);
  text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
/* the gold span is gradient-clipped text, so a shadow would bleed through it */
.hero-title .gold{text-shadow:none}
.hero-checks{list-style:none;margin:0 0 clamp(24px,3vw,32px);padding:0;display:grid;gap:14px}
.hero-checks li{display:flex;align-items:center;gap:12px;font-size:1.02rem;font-weight:500;color:#ece5d6}
.hero-checks svg{color:var(--gold);flex:none}
.hero-intro{
  color:var(--gold-soft);font-size:clamp(1.04rem,1.4vw,1.16rem);line-height:1.6;
  max-width:60ch;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.5);
}
@media(max-width:900px){
  /* full-width copy on phones needs a heavier veil than the desktop split */
  .hero::after{
    background:
      linear-gradient(180deg,rgba(8,7,4,.55) 0%,rgba(8,7,4,.60) 18%,rgba(8,7,4,.86) 52%,rgba(13,11,7,.98) 100%);
  }
  .hero-bg{object-position:50% 45%}
  .hero-cta{max-width:none}
}

.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.hero h1{margin-bottom:20px}
.hero-lead{font-size:clamp(1.04rem,1.45vw,1.18rem);color:var(--muted);max-width:56ch;margin-bottom:10px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(198,161,84,.07);
  font-size:.78rem;font-weight:600;color:var(--gold-deep);
}
.badge svg{color:var(--gold-accent);flex:none}

.hero-visual{position:relative}
.hero-logo{
  border-radius:var(--radius-lg);overflow:hidden;border:0;
  box-shadow:none;background:none;display:flex;justify-content:center;
}
.hero-logo img{max-width:min(100%,300px);height:auto}
.hero-logo img{width:100%}
.hero-card{
  position:absolute;left:-16px;bottom:-24px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:17px 22px;
  box-shadow:var(--shadow-lg);max-width:246px;
}
.hero-card strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--gold)}
.hero-card span{font-size:.78rem;color:var(--muted);line-height:1.4;display:block;margin-top:3px}

/* ============ STRIP ============ */
.strip{background:#100d08;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;color:var(--on-dark)}
.strip .wrap{display:flex;justify-content:center;align-items:center;gap:clamp(18px,4vw,56px);flex-wrap:wrap;text-align:center}
.strip-item{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#c8c1b3}
.strip-item svg{color:var(--gold-accent);flex:none}
.strip-item b{color:#fff;font-weight:600}
.strip-item a{color:#fff}
.strip-item a:hover{color:var(--gold-soft)}

/* ============ DARK BRAND BAND ============
   Black-and-gold sections breaking up the white, so the page carries the
   logo's palette without becoming a dark site. */
.band-dark{
  background:
    radial-gradient(760px 360px at 82% 8%,rgba(198,161,84,.20),transparent 62%),
    linear-gradient(165deg,#1e1810 0%,#262010 55%,#1a1509 100%);
  color:#ded7c9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .eyebrow{color:var(--gold-soft)}
.band-dark .muted,.band-dark p{color:#b6ae9f}
.band-dark .rule{background:var(--gold-grad)}
.band-dark .gold{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.band-dark .card{
  background:rgba(255,255,255,.045);border-color:rgba(198,161,84,.26);
  box-shadow:none;backdrop-filter:none;
}
.band-dark .card:hover{
  background:rgba(255,255,255,.07);border-color:rgba(198,161,84,.5);
  box-shadow:0 18px 46px rgba(0,0,0,.4);
}
.band-dark .card h3{color:#fff}
.band-dark .card .muted,.band-dark .card p{color:#b6ae9f}
.band-dark .card-ico{
  background:rgba(198,161,84,.15);border-color:rgba(198,161,84,.4);color:var(--gold-soft);
}
.band-dark .ticks li{color:#cdc6b8}
.band-dark .ticks li svg{color:var(--gold-accent)}
.band-dark .step{background:rgba(255,255,255,.05);border-color:rgba(198,161,84,.24);box-shadow:none}
.band-dark .step h3{color:#fff}
.band-dark .step p{color:#b6ae9f}
.band-dark .step-n{background:rgba(198,161,84,.16);border-color:rgba(198,161,84,.4);color:var(--gold-soft)}
.band-dark .btn-ghost{border-color:rgba(198,161,84,.45);color:var(--gold-soft);background:transparent}
.band-dark .btn-ghost:hover{background:rgba(198,161,84,.14);color:#fff;border-color:var(--gold-accent)}
.band-dark .chip{background:rgba(255,255,255,.05);border-color:rgba(198,161,84,.26);color:#cdc6b8}
.band-dark .chip:hover{background:rgba(198,161,84,.16);color:#fff;border-color:var(--gold-accent)}
.band-dark .linkbox{background:rgba(255,255,255,.04);border-color:rgba(198,161,84,.3)}
.band-dark .shot{background:rgba(255,255,255,.05);border-color:rgba(198,161,84,.24)}
.band-dark .shot figcaption{color:#cdc6b8;border-top-color:rgba(198,161,84,.2)}
.band-dark .split-media img{border-color:rgba(198,161,84,.3)}
.band-dark .frame::after{opacity:.7}

/* ============ CARDS / GRIDS ============ */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:30px 27px;
  transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold-grad);opacity:0;transition:opacity .25s}
.card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow-lg)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card-ico{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(198,161,84,.12);border:1px solid var(--line);color:var(--gold);
}

/* program card */
.prog{display:flex;flex-direction:column}
.prog .price{font-family:var(--serif);font-size:1.85rem;color:var(--gold);line-height:1.1;margin:0 0 4px}
.prog .price small{font-family:var(--sans);font-size:.78rem;color:var(--muted);letter-spacing:.03em}
.prog .meta{font-size:.79rem;color:var(--muted-2);margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--line-soft)}
.prog .best{font-size:.86rem;color:var(--muted);flex:1}
.prog .best b{color:var(--gold-deep);font-weight:700;display:block;margin-bottom:4px;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}
.prog .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;color:var(--gold)}
.tag-free{position:absolute;top:18px;right:18px;background:var(--gold-grad);color:#241c08;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,68px);align-items:center}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--radius-lg);border:1px solid var(--line-soft);box-shadow:var(--shadow-lg);width:100%}
.frame{position:relative}
.frame::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--gold-accent);border-radius:var(--radius-lg);z-index:-1;opacity:.5}

/* ============ PHOTO GALLERY ============ */
/* Masonry columns, not a fixed-ratio grid: the photos run from 0.56 (a tall
   portrait) to 1.16, so any forced aspect-ratio with object-fit:cover crops
   more than half off the portrait. Natural heights show every image whole. */
/* Training clips. The video elements carry preload="none", so a visitor
   downloads a poster image and nothing else until they press play. */
.clips{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px;margin:0 0 8px;
}
.clip{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--panel);
  box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .25s,box-shadow .25s;
}
.clip:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.clip video{
  width:100%;height:auto;display:block;aspect-ratio:9/16;
  object-fit:cover;background:#000;
}
.clip figcaption{
  padding:15px 18px;font-size:.88rem;color:var(--text);font-weight:500;
  border-top:1px solid var(--line-soft);
}

.gallery{column-count:3;column-gap:22px}
.shot{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 22px;display:inline-block;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);
  background:var(--panel);box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .25s,box-shadow .25s;
}
.shot:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.shot img{
  width:100%;height:auto;display:block;background:var(--bg-warm);
}
.shot figcaption{
  padding:15px 18px;font-size:.88rem;color:var(--text);font-weight:500;
  border-top:1px solid var(--line-soft);
}

.inline-shot{
  margin:24px 0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel);
}
.inline-shot img{width:100%;max-height:440px;object-fit:cover;object-position:center}
.inline-shot figcaption{padding:14px 18px;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line-soft)}

/* ============ LIST ============ */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:.95rem;color:var(--text)}
.ticks li svg{color:var(--gold);flex:none;margin-top:5px}

/* ============ STEPS ============ */
.steps{display:grid;gap:18px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:19px;align-items:start;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:23px 25px;
  box-shadow:0 2px 10px rgba(0,0,0,.32);
}
.step-n{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(198,161,84,.14);border:1px solid var(--line);
  font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--gold-deep);
}
.step h3{font-size:1.13rem;margin-bottom:5px}
.step p{margin:0;font-size:.92rem;color:var(--muted)}

/* ============ VIDEO ============ */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.video-card{margin:0;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 10px rgba(30,26,16,.05)}
.video-embed{position:relative;width:100%;aspect-ratio:9/16;background:#15130e}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-meta{padding:19px 21px}
.video-meta h3{font-size:1.08rem;margin-bottom:4px}
.video-meta p{font-size:.86rem;color:var(--muted);margin:0}

.fb-feed{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;display:flex;flex-direction:column;align-items:center;gap:18px;box-shadow:var(--shadow);
}
.fb-embed{width:100%;max-width:500px;min-height:640px;border:0;overflow:hidden;border-radius:var(--radius)}
.fb-note{font-size:.85rem;color:var(--muted);text-align:center;max-width:60ch}

/* ============ PANEL / NOTE ============ */
.panel{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(26px,3.6vw,44px);box-shadow:var(--shadow);
}
.note{
  border-left:3px solid var(--gold-accent);background:rgba(198,161,84,.08);
  padding:19px 23px;border-radius:0 var(--radius) var(--radius) 0;font-size:.93rem;color:var(--muted);
}
.note strong{color:var(--gold-deep)}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:21px 44px 21px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink);font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{color:var(--gold-deep)}
.faq .a{padding:0 44px 22px 0;color:var(--muted);font-size:.95rem}
.faq .a p:last-child{margin:0}

/* ============ PROGRAMS ACCORDION ============
   Closed, the list reads as a price list. Opening a row shows who the program
   is for and the way through to its own page. */
.prog-list{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--panel);
}
.prog-item + .prog-item{border-top:1px solid var(--line)}
.prog-list summary{
  cursor:pointer;list-style:none;display:flex;gap:13px;align-items:flex-start;
  padding:17px 48px 17px 20px;position:relative;transition:background .2s;
}
.prog-list summary::-webkit-details-marker{display:none}
.prog-list summary:hover{background:rgba(198,161,84,.07)}
.prog-list summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.prog-item[open] summary{background:rgba(198,161,84,.05)}
.prog-tick{flex:none;margin-top:5px;color:var(--muted-2);display:flex}
.prog-lines{display:flex;flex-direction:column;gap:1px;min-width:0}
.prog-name{font-size:1.02rem;font-weight:600;color:var(--ink)}
.prog-price{font-family:var(--serif);font-size:1.42rem;line-height:1.25;color:var(--gold)}
.prog-price small{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--text)}
.prog-format{font-size:.79rem;font-weight:500;color:var(--muted)}
/* chevron, same language as the FAQ list */
.prog-list summary::after{
  content:"";position:absolute;right:20px;top:30px;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-50%) rotate(45deg);transition:transform .25s;
}
.prog-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.prog-body{padding:0 24px 22px 53px}
.prog-best{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:2px 0 9px;
}
.prog-body p{color:var(--text);margin:0 0 15px;max-width:58ch;font-size:.97rem}
.prog-body .go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:600;color:var(--gold);
}
.prog-body .go:hover{color:var(--gold-deep)}
@media(max-width:620px){
  .prog-list summary{padding:15px 40px 15px 15px;gap:10px}
  .prog-body{padding:0 18px 20px 15px}
  .prog-price{font-size:1.3rem}
}

/* Closing brand block under the services list: the mark, the one paragraph
   that explains how every program starts, and the way to book it. */
.brand-close{
  max-width:640px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,28px);
}
.brand-close-mark{width:min(224px,58vw);height:auto}
.brand-close p{
  margin:0;max-width:52ch;
  font-size:clamp(1.02rem,1.45vw,1.15rem);line-height:1.65;
}

/* ============ GOOGLE REVIEWS ============
   Client dogs crossfade behind the rating. Six images share one 36s cycle,
   each offset by six seconds from the last, so it is pure CSS with no timer
   to keep alive. The scrim is what makes the copy legible over any of them. */
.rev-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(52px,7vw,96px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#0d0b07;text-align:center;
}
.rev-montage{position:absolute;inset:0;z-index:-2}
.rev-montage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:rev-fade 36s linear infinite;
}
@keyframes rev-fade{
  0%{opacity:0} 2%{opacity:1} 11%{opacity:1} 13.5%{opacity:0} 100%{opacity:0}
}
.rev-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,4,.90) 0%,rgba(8,7,4,.80) 45%,rgba(8,7,4,.92) 100%);
}
.rev-inner{max-width:660px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.rev-inner h2{margin:0}
/* five outlined stars with a filled copy clipped to the real score, so 4.9
   reads as 4.9 and never as a full five */
.rev-stars{position:relative;display:inline-block;line-height:0;margin-top:2px}
.rev-stars-off{display:block;color:rgba(240,220,174,.28)}
.rev-stars-on{
  position:absolute;inset:0;overflow:hidden;white-space:nowrap;
  color:var(--gold);display:block;
}
.rev-count{margin:0;color:var(--muted);font-size:.95rem}
.rev-band .btn{margin-top:12px}
/* one card at a time on a phone, swipeable, no carousel script */
/* the reviews row drifts sideways on its own and can be swiped or scrolled */
.rev-scroll{
  width:100%;margin:12px 0 6px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
}
.rev-scroll::-webkit-scrollbar{display:none}
.rev-scroll:focus-visible{outline:2px solid var(--gold-accent);outline-offset:4px;border-radius:var(--radius-lg)}
/* on wider screens the row breaks out past the centred column */
@media(min-width:900px){.rev-scroll{width:auto;align-self:stretch;margin-inline:calc(-1 * clamp(0px, (100vw - 708px) / 2, 260px))}}
.rev-track{display:flex;gap:16px;width:max-content;padding:4px 0 10px;align-items:stretch}
.rev-dupe{display:flex;gap:16px}
.rev-card{
  flex:0 0 300px;margin:0;text-align:left;display:flex;flex-direction:column;
  background:rgba(20,17,11,.82);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px 22px;
  backdrop-filter:blur(3px);
}
@media(min-width:720px){.rev-card{flex-basis:340px}}
.rev-card-stars{display:flex;gap:2px;color:var(--gold);margin-bottom:12px}
.rev-card-stars svg{width:15px;height:15px}
.rev-card blockquote{
  margin:0 0 14px;color:var(--text);font-size:.94rem;line-height:1.62;flex:1;
  /* the longest review would otherwise set the height of every card */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;
}
.rev-card figcaption{
  font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);
}
.rev-card figcaption span{color:var(--muted-2);font-weight:500;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){
  .rev-montage img{animation:none}
  .rev-montage img:first-child{opacity:1}
}

/* Single feature photo. Contained rather than full bleed: the source is a tall
   portrait, and running it edge to edge would crop the dog to a strip on any
   wide screen. */
.feature-shot{
  margin:0 auto;max-width:520px;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--panel);
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
.feature-shot img{width:100%;height:auto;display:block}
/* a 9:16 phone frame would stand 890px tall at the normal width, which fills
   a laptop screen on its own, so the tall variant is held narrower */
.feature-shot.tall{max-width:430px}

/* How It Works lost its photo column, so the steps would otherwise run the
   full width of the page and the lines would get too long to read. */
.steps-wide{max-width:760px;margin-inline:auto}

/* The Axon K9 name section lost its side photo, so the copy is held to a
   readable measure instead of running the full page width. */
.name-story{max-width:720px;margin-inline:auto}
.btn-stack{
  display:flex;flex-direction:column;gap:12px;
  max-width:420px;margin:30px auto 0;
}
.btn-stack .btn{width:100%;justify-content:center}

/* ============ CAMERA ROLL + VIEWER ============ */
.roll-hint{margin:0 auto 22px;max-width:60ch}
.roll{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
@media(min-width:620px){.roll{grid-template-columns:repeat(4,1fr);gap:4px}}
@media(min-width:1000px){.roll{grid-template-columns:repeat(6,1fr);gap:5px}}
.roll-item{
  position:relative;display:block;padding:0;border:0;margin:0;cursor:pointer;
  aspect-ratio:1/1;overflow:hidden;background:var(--panel);border-radius:3px;
}
.roll-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.roll-item:hover img{transform:scale(1.04)}
.roll-item:focus-visible{outline:3px solid var(--gold);outline-offset:2px;z-index:1}
.roll-play{
  position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
}
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(6,5,3,.96);
  display:grid;grid-template-rows:1fr auto;
}
.lb[hidden]{display:none}
.lb-stage{display:grid;place-items:center;padding:56px 12px 8px;min-height:0;overflow:hidden}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;user-select:none;-webkit-user-drag:none}
.lb-bar{display:flex;justify-content:center;gap:14px;align-items:center;padding:12px 18px calc(14px + env(safe-area-inset-bottom));color:#ded7c9;font-size:.9rem}
.lb-count{color:var(--gold);font-variant-numeric:tabular-nums;flex:none}
.lb-close,.lb-nav{
  position:absolute;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.08);
  display:grid;place-items:center;border-radius:50%;z-index:1;
}
.lb-close{top:10px;right:12px;width:44px;height:44px;font-size:30px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-close:hover,.lb-nav:hover{background:rgba(217,181,106,.25)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--gold)}
@media(max-width:620px){.lb-nav{width:40px;height:40px;background:rgba(0,0,0,.35)}.lb-stage{padding:52px 0 6px}}
body.lb-open .sticky-cta{opacity:0;pointer-events:none}

/* ============ CTA BAND ============ */
.cta-band{
  background:
    radial-gradient(760px 340px at 50% 0%,rgba(198,161,84,.24),transparent 66%),
    linear-gradient(180deg,#181309,#100d08);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;
}
.cta-band h2{max-width:24ch;margin-left:auto;margin-right:auto}
.cta-band p{max-width:58ch;margin-left:auto;margin-right:auto;color:var(--muted)}

/* ============ BOOKING ============ */
.booking{background:linear-gradient(165deg,#181309,#0d0b07);border-top:1px solid var(--line);color:var(--on-dark);position:relative;overflow:hidden}
.booking h2,.booking h3{color:#fff}
.booking .eyebrow{color:var(--gold-soft)}
.booking .muted{color:#b3ab9c}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,60px);align-items:start}
.book-card{background:rgba(255,255,255,.05);border:1px solid rgba(198,161,84,.3);border-radius:var(--radius-lg);padding:30px}
.book-card .nap-row{border-bottom-color:rgba(255,255,255,.1)}
.book-card .nap-row b{color:var(--gold-soft)}
.book-card .nap-row span,.book-card .nap-row a{color:#e6e1d6}
.book-card .nap-row a:hover{color:#fff}
.book-card .nap-row svg{color:var(--gold-accent)}
.book-steps{list-style:none;padding:0;margin:0 0 26px}
.book-steps li{display:flex;gap:14px;align-items:flex-start;margin-bottom:15px;color:#cdc6b8;font-size:.94rem}
.book-steps .n{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold-grad);color:#241c08;font-weight:800;font-size:.82rem;
}

/* ============ FORM ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
input,select,textarea{
  background:#0a0906;border:1px solid var(--line-soft);border-radius:10px;
  padding:13px 15px;color:var(--text);font-family:var(--sans);font-size:.95rem;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:#7d7666}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-accent);box-shadow:0 0 0 3px rgba(198,161,84,.18)}
textarea{min-height:130px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a6c1f 50%),linear-gradient(135deg,#8a6c1f 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.form-note{font-size:.8rem;color:var(--muted-2);margin-top:14px}
/* intake form: section headings, checkbox grids, consent box */
.fsec{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--text);
  margin:34px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.intake .fsec:first-of-type{margin-top:4px}
.fhint{font-size:.82rem;color:var(--muted-2);margin:0 0 10px;line-height:1.55}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.check-list{display:grid;gap:10px}
.check{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:#0a0906;border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;
  font-size:.93rem;line-height:1.45;color:var(--text);
  text-transform:none;letter-spacing:0;font-weight:400;
  transition:border-color .2s,background .2s;
}
.check:hover{border-color:var(--gold-accent)}
.check input[type=checkbox]{width:17px;height:17px;flex:none;margin:2px 0 0;padding:0;accent-color:var(--gold-accent);color-scheme:dark}
.check input:focus-visible{outline:2px solid var(--gold-accent);outline-offset:2px}
.check span{flex:1}
.check em{display:block;font-style:normal;font-size:.8rem;color:var(--muted-2);margin-top:3px;line-height:1.45}
.check:has(input:checked){border-color:var(--gold-accent);background:rgba(198,161,84,.08)}
.consent{background:#0a0906;border:1px solid var(--line-soft);border-radius:12px;padding:18px 18px 16px;display:grid;gap:14px}
.consent p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.6}


/* ============ CONTACT / NAP ============ */
.nap{display:grid;gap:2px}
.nap-row{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.nap-row:last-child{border-bottom:0}
.nap-row svg{color:var(--gold);flex:none;margin-top:4px}
.nap-row b{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:3px;font-weight:700}
.nap-row span,.nap-row a{font-size:.97rem;color:var(--text)}
.map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:380px;box-shadow:var(--shadow)}
.map iframe{width:100%;height:100%;border:0}

/* ============ CHIPS ============ */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.04);font-size:.85rem;color:var(--text);transition:.2s;
}
.chip:hover{border-color:var(--gold-accent);color:var(--gold-deep);background:rgba(198,161,84,.14)}

/* Inline link lists: quiet body text, not a bold gold chip grid */
.inline-links{
  font-size:.92rem;color:var(--muted);line-height:1.9;max-width:none;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);
}
.inline-links span{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
.inline-links a{color:var(--muted);font-weight:400;text-decoration:none;border-bottom:1px solid var(--line-soft)}
.inline-links a:hover{color:var(--gold);border-bottom-color:var(--gold-accent)}

/* ============ INTERLINK BOX ============ */
.linkbox{
  background:rgba(198,161,84,.055);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px 24px;margin:26px 0;
}
.linkbox h3{font-size:1.1rem;margin-bottom:15px}
.linkbox .chip{background:rgba(255,255,255,.045)}

/* ============ BREADCRUMB ============ */
.crumbs{font-size:.8rem;color:var(--muted-2);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 8px;opacity:.5}

/* ============ PAGE HEAD ============ */
.phead{
  padding:clamp(30px,3.6vw,52px) 0 clamp(24px,3vw,40px);
  background:
    radial-gradient(820px 380px at 50% -10%,rgba(198,161,84,.20),transparent 64%),
    linear-gradient(180deg,#12100a,#0d0b07);
  border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden;
}
.phead h1{margin-bottom:16px}
.phead p{color:var(--muted);max-width:62ch;font-size:clamp(1rem,1.35vw,1.1rem)}
.phead.center p{margin-left:auto;margin-right:auto}

/* ============ SIDEBAR ============ */
.with-side{display:grid;grid-template-columns:1fr 336px;gap:clamp(28px,3.6vw,52px);align-items:start}
.side{position:sticky;top:92px;display:grid;gap:19px}
.side-box{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:25px;box-shadow:0 2px 12px rgba(0,0,0,.34)}
.side-box h3{font-size:1.12rem;margin-bottom:13px}
.side-list{list-style:none;padding:0;margin:0}
.side-list li{margin:0;border-bottom:1px solid var(--line-soft)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:block;padding:11px 0;font-size:.89rem;color:var(--text)}
.side-list a:hover{color:var(--gold)}
.side-list a.on{color:var(--gold);font-weight:600}
.side-cta{background:linear-gradient(150deg,rgba(198,161,84,.16),rgba(198,161,84,.05));border-color:var(--line)}
.side-cta .btn{width:100%;margin-top:6px}

/* ============ FOOTER ============ */
footer.site{background:var(--footer);color:#a49c8c;border-top:1px solid var(--line);padding:clamp(38px,4.4vw,58px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3vw,40px);padding-bottom:34px}
.foot-grid-even{grid-template-columns:repeat(4,1fr);padding-bottom:26px}
.foot-brand img{width:78px;height:78px;border-radius:0;border:0;object-fit:contain;margin-bottom:17px;background:none}
.foot-brand p{font-size:.87rem;color:#a8a094;max-width:34ch}
.foot h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-family:var(--sans);font-weight:700;margin-bottom:16px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot a{font-size:.87rem;color:#a8a094}
.foot a:hover{color:#fff}
.foot .muted{color:#8a8378}
.foot-contact{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);
  padding:28px 0 34px;border-top:1px solid rgba(255,255,255,.09);align-items:start;
}
.foot-nap h4{margin-bottom:14px}
.foot-nap .nap-row{border-bottom-color:rgba(255,255,255,.09);padding:13px 0}
.foot-nap .nap-row b{color:var(--gold-soft)}
.foot-nap .nap-row span,.foot-nap .nap-row a{color:#cdc6b8;font-size:.92rem}
.foot-nap .nap-row a:hover{color:#fff}
.foot-nap .nap-row svg{color:var(--gold-accent)}
.foot-nap .btn-ghost{background:transparent;color:var(--gold-soft);border-color:rgba(198,161,84,.4)}
.foot-nap .btn-ghost:hover{background:rgba(198,161,84,.14);color:#fff}
.foot-map{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(198,161,84,.3);
  height:100%;min-height:360px;
}
.foot-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.79rem;color:#8a8378}
.foot-bottom a{color:#8a8378}
.foot-bottom a:hover{color:var(--gold-soft)}
.socials{display:flex;gap:10px;margin-top:17px}
.socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(198,161,84,.35);color:var(--gold-soft);transition:.2s;
}
.socials a:hover{background:rgba(198,161,84,.16);color:#fff;transform:translateY(-2px)}


/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .gallery{column-count:2}
}
@media(max-width:1040px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .with-side{grid-template-columns:1fr}
  .side{position:static}
  .foot-grid,.foot-grid-even{grid-template-columns:1fr 1fr}
  .book-grid,.foot-contact{grid-template-columns:1fr}
}
@media(max-width:900px){
  .burger{display:block}
  /* the header phone pill overlapped the burger and swallowed every tap,
     which is why the menu appeared dead on phones. The floating call button
     and the in-menu phone link cover this need on small screens. */
  .head-call{display:none}
  .head-right{gap:0}
  .nav-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 0 14px;margin-bottom:8px;border-bottom:1px solid var(--line-soft);
  }
  /* backdrop-filter makes header.site a containing block for fixed-position
     descendants, which traps the nav panel inside the 75px header box and
     renders the menu almost empty. Drop it on mobile so the panel fixes to
     the viewport instead. */
  header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  /* Closed with display:none and opened with inset:0 on a fixed box. No
     transform, no off-screen parking, no viewport arithmetic to get wrong:
     an open panel stretches to all four edges in every browser. The earlier
     translate-based drawer left the panel partly off-screen on real phones. */
  nav.main{display:none}
  nav.main.open{
    display:flex;position:fixed;inset:0 0 0 25%;width:auto;height:auto;
    flex-wrap:nowrap;   /* column + wrap spilled items into an off-screen 2nd column */
    border-left:1px solid var(--line);box-shadow:-18px 0 44px rgba(0,0,0,.55);
    background:var(--bg);flex-direction:column;align-items:stretch;gap:0;
    padding:18px 22px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:2;                     /* above .nav-backdrop, same stacking context */
    animation:navIn .18s ease-out;
  }
  @keyframes navIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav-phone{
    display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
    padding:14px;border-radius:999px;border:1px solid var(--line);
    background:rgba(198,161,84,.12);color:var(--gold-deep);font-weight:700;font-size:.95rem;
  }
  .nav-head span{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--gold-soft)}
  .nav-close{
    background:rgba(198,161,84,.08);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;
    display:grid;place-items:center;cursor:pointer;color:var(--gold);font-size:1.1rem;line-height:1;
  }
  nav.main.open{transform:translateX(0)}
  nav.main a{padding:13px 14px;font-size:.95rem;border-bottom:1px solid var(--line-soft);border-radius:0;white-space:normal;overflow-wrap:anywhere}
  .has-drop{position:static;display:block}
  .has-drop>a{display:block}
  .drop{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    background:rgba(255,255,255,.04);border:0;padding:4px 0 8px 12px;min-width:0;
    display:none;border-radius:0;
  }
  .has-drop.open .drop{display:block}
  .has-drop>a::after{float:right;margin-top:8px;transition:transform .2s}
  .has-drop.open>a::after{transform:rotate(-135deg) translateY(2px)}
  .drop a{border-bottom:1px solid var(--line-soft);font-size:.88rem;white-space:normal;overflow-wrap:anywhere;padding-right:6px}
  .nav-cta{margin:14px 0 0}
  .hero-grid,.split,.g2,.g3{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .hero-visual{max-width:430px;margin:0 auto}
  .hero-card{position:static;margin:18px auto 0;max-width:none}
  .frame::after{display:none}
  .gallery{column-count:2}
}
@media(max-width:620px){
  body{font-size:16px}
  .g4{grid-template-columns:1fr}
  .foot-grid,.foot-grid-even{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  section{padding:52px 0}
  .step{grid-template-columns:1fr;gap:13px}
      .gallery{column-count:1;column-gap:18px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- reveal: only hidden once JS confirms it can run ---- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ---- print ---- */
@media print{
  header.site,footer.site,.cta-band{display:none}
  body{background:#fff;color:#000}
}


/* Fixed consult button. Stays put on every page and at every scroll position,
   steps aside for the mobile menu, and collapses to an icon-free pill on
   narrow screens so it never covers the content it sits on. */
.sticky-cta{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:999px;
  background:var(--gold-grad);color:#241c08;font-weight:700;font-size:.95rem;
  letter-spacing:.01em;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(240,220,166,.35) inset;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sticky-cta:hover{transform:translateY(-2px);color:#241c08;box-shadow:0 18px 42px rgba(168,132,44,.42)}
.sticky-cta:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
header.site:has(nav.main.open) ~ .sticky-cta{opacity:0;pointer-events:none}
@media(max-width:620px){
  .sticky-cta{padding:13px 20px;font-size:.88rem;right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .sticky-cta,.js header.site.over-hero{transition:none}
  .sticky-cta:hover{transform:none}
}

/* leave room under the last block so the fixed button never parks on top of
   the footer contact details */
footer.site{padding-bottom:calc(clamp(14px,2vw,26px) + 78px)}