/* Journey to the Crown — the whole site's stylesheet.
   Shared by the homepage and the two dedicated action pages (book-a-call,
   save-my-seat) so there is exactly ONE place a style lives. Was inline in
   index.html until the action pages needed it too. */
/* ============ Journey to the Crown — palette ============
   BRAND: turquoise · black · white (Kristen's three colours, nothing else).
   --ink    #0b0c0c  black base (whole page)
   --ink-2  #131616  elevated card
   --ink-3  #1c2020  hairline / deep border tone
   --bone   #f4f7f7  white text + the one light section
   --stone  #a8b2b2  muted body on black (AA on #0b0c0c)
   --crown  #40e0d0  the ONE accent — turquoise, actions & numerals only
   --teal   #2a9d94  deeper turquoise, for accents on the white section
======================================================== */
:root{
  --ink:#0b0c0c;
  --ink-2:#131616;
  --ink-3:#1c2020;
  --bone:#f4f7f7;
  --stone:#a8b2b2;
  --crown:#40e0d0;
  --teal:#2a9d94;
  --hair:rgba(244,247,247,.10);
  --r:16px;
  --shadow:0 28px 70px rgba(0,0,0,.45);
  --wrap:1140px;
  --pad:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.32,.72,0,1);
  --display:'Archivo',ui-sans-serif,'Segoe UI',sans-serif;
  --body:'Manrope',ui-sans-serif,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.015em;font-weight:800;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
section{padding-block:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--crown);color:var(--ink);padding:12px 20px;z-index:300;font-weight:700}
.skip:focus{left:12px;top:12px}

/* accent is rationed: numerals, kicker ticks, links, buttons */
.kicker{
  font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--stone);display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--crown);flex:none}

.h2{font-size:clamp(38px,5vw,60px);margin:18px 0 22px}
.lead{color:var(--stone);max-width:56ch}

/* ============ buttons — ONE style, reused everywhere ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:14px 28px;border-radius:var(--r);
  background:var(--crown);color:var(--ink);
  font-family:var(--body);font-weight:700;font-size:16px;text-decoration:none;
  border:0;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.btn:active{transform:scale(.98)}
.btn .tip{
  width:30px;height:30px;border-radius:50%;background:rgba(11,12,12,.12);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-weight:800;transition:transform .5s var(--ease);
}
.btn:hover .tip{transform:translate(3px,-2px)}
.quiet{
  color:var(--bone);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(244,247,247,.35);padding-bottom:3px;
  transition:border-color .3s var(--ease);
}
.quiet:hover{border-color:var(--crown)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--crown);outline-offset:3px;border-radius:4px;
}

/* ============ sticky glass header ============ */
header{
  position: sticky; top: 0; z-index: 100;
  background:rgba(11,12,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.bar{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{
  font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);line-height:1.1;flex:none;
  display:flex;align-items:center;gap:12px;
}
/* her real JC crown mark — white artwork, so it sits on the black bar as-is */
.wordmark img{width:46px;height:46px;object-fit:contain;flex:none}
.wordmark span{display:block}
.wordmark small{
  display:block;font-family:var(--body);font-weight:600;font-size:10px;
  letter-spacing:.3em;color:var(--stone);
}
nav.primary{display:flex;align-items:center;gap:30px}
nav.primary a.navlink{
  color:var(--stone);text-decoration:none;font-weight:600;font-size:15px;
  transition:color .3s var(--ease);
}
nav.primary a.navlink:hover{color:var(--bone)}
.tel-quiet{
  color:var(--stone);text-decoration:none;font-weight:600;font-size:15px;
  transition:color .3s var(--ease);
  background:none;border:0;cursor:pointer;font-family:var(--body);
}
.tel-quiet:hover{color:var(--crown)}
.head-cta{display:flex;align-items:center;gap:22px}
.head-cta .btn{min-height:44px;padding:10px 20px;font-size:15px}
.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;position:relative;flex:none;
}
.burger span{
  position:absolute;left:10px;width:24px;height:2px;background:var(--bone);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.mobile-menu{
  display:none;border-top:1px solid var(--hair);
  background:rgba(11,12,12,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:18px clamp(20px,4vw,40px);text-decoration:none;
  color:var(--bone);font-family:var(--display);font-weight:700;font-size:20px;
  border-bottom:1px solid var(--hair);
}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.mm-tel{font-family:var(--body);font-size:16px;color:var(--stone)}

/* ============ hero — copy left, contained portrait right ============
   Kristen asked for the opening photo smaller and held to the right rather
   than full-bleed behind the headline, so the image is now a framed portrait
   in its own column and the depth comes from a light wash instead of a scrim. */
.hero{position:relative;isolation:isolate;padding:clamp(126px,15vh,178px) 0 clamp(60px,8vh,100px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(115% 78% at 76% 10%,rgba(64,224,208,.10) 0%,transparent 62%),
    radial-gradient(85% 65% at 6% 0%,rgba(255,255,255,.05) 0%,transparent 58%);
}
.hero .wrap{width:100%}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);
  gap:clamp(34px,5vw,74px);align-items:center;
}
.hero-copy{max-width:660px}
.hero-copy .kicker{color:var(--bone)}
.hero h1{
  font-size:clamp(44px,5.4vw,76px);font-weight:900;margin:24px 0 26px;
  letter-spacing:-.025em;
}
.hero .mech{
  font-size:clamp(17px,1.5vw,19px);color:var(--bone);max-width:50ch;margin-bottom:36px;
}
.hero .mech strong{color:var(--crown);font-weight:700}
.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hero-figure{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--shadow);
  aspect-ratio:4/5;background:var(--ink-2);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:58% 20%;display:block}
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,12,12,.40) 0%,transparent 46%);
}

/* ============ problem — offset stack of quiet cards ============ */
.problem{padding-bottom:calc(var(--pad) + 60px)}
.p-cards{margin-top:56px;display:grid;gap:18px}
.p-card{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 32px;max-width:640px;box-shadow:var(--shadow);
  font-size:clamp(17px,1.5vw,19px);font-weight:500;
}
.p-card em{font-style:normal;color:var(--stone)}
/* three statements now, so the stagger is a short descent rather than the
   diamond the five-card version needed */
.p-cards .p-card:nth-child(2){margin-left:clamp(0px,6vw,90px)}
.p-cards .p-card:nth-child(3){margin-left:clamp(0px,12vw,180px)}
.p-turn{margin-top:56px;max-width:640px;font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--bone)}
.p-turn a{color:var(--crown);text-decoration:none;border-bottom:1px solid rgba(64,224,208,.4)}

/* ============ the method — the centrepiece ============ */
.method{background:var(--ink);border-top:1px solid var(--hair)}
.steps{margin-top:70px;position:relative;display:grid;gap:clamp(48px,7vw,84px)}
.steps::before{
  content:"";position:absolute;left:clamp(29px,4vw,44px);top:10px;bottom:10px;
  width:1px;background:var(--hair);
}
.step{
  position:relative;display:grid;
  grid-template-columns:clamp(60px,8vw,90px) 1fr;gap:clamp(20px,4vw,48px);
}
.step-num{
  font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,64px);
  color:var(--crown);line-height:1;background:var(--ink);
  align-self:start;position:relative;z-index:1;padding-block:6px;
}
.step-body{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow);
}
.step:nth-child(2) .step-body{margin-right:clamp(0px,5vw,70px)}
.step:nth-child(3) .step-body{margin-right:clamp(0px,10vw,140px)}
.step h3{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.step .step-change{color:var(--bone);font-weight:600;margin-bottom:18px}
.step ul{list-style:none;display:grid;gap:10px}
.step li{color:var(--stone);padding-left:22px;position:relative}
.step li::before{content:"—";position:absolute;left:0;color:var(--crown)}

/* ============ ways to connect — the two doors ============ */
.ways-grid{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,28px);align-items:stretch}
.way{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
/* option two carries the turquoise edge — the only difference between them */
.way.accent{border-color:rgba(64,224,208,.38)}
.way-tag{
  font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--crown);display:block;margin-bottom:16px;
}
.way h3{font-size:clamp(28px,3vw,38px);margin-bottom:12px}
.way-line{color:var(--bone);font-weight:600;font-size:clamp(17px,1.6vw,19px);margin-bottom:22px}
.way-flow{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:24px;
  font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
}
.way-flow span{
  border:1px solid rgba(64,224,208,.4);border-radius:999px;padding:7px 14px;color:var(--crown);
}
.way-flow i{font-style:normal;color:var(--stone)}
.way ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--hair);margin-bottom:30px}
.way li{padding:16px 2px;border-bottom:1px solid var(--hair);color:var(--stone);font-size:16px}
.way li b{
  display:block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--bone);margin-bottom:3px;
}
.way .btn{margin-top:auto;align-self:flex-start}
/* sets the expectation before the click: a seat is applied for, not bought */
.way-gate{margin-top:16px;color:var(--stone);font-size:14.5px;max-width:44ch}
.ways-foot{margin-top:40px;color:var(--stone);font-size:16px;max-width:60ch}
.ways-foot button{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--crown);
  border-bottom:1px solid rgba(64,224,208,.4);
}

/* ============ gallery band — layered, breaks the section seam ============ */
.band{padding-top:0;padding-bottom:var(--pad)}
.band-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,24px);
  align-items:start;margin-top:-60px;
}
.band-grid figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--hair)}
/* Kristen's portrait moved out of this band and up into the hero, so it's a pair
   now, not a trio. Both remaining photos are natively 4:3 — at this width they
   get their own aspect instead of being cropped into the old 4:5 slots. */
.band-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.band-grid figure:nth-child(1){grid-column:1/7;margin-top:60px}
.band-grid figure:nth-child(2){grid-column:7/13;margin-top:-40px}
.band-cap{margin-top:40px;color:var(--stone);font-size:15px;max-width:52ch}
.band-cap a{color:var(--bone)}

/* ============ 90 days — promise, not claims ============ */
.ninety .grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px)}
.n-card{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow);
}
.n-card .n-num{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.18em;color:var(--crown);display:block;margin-bottom:16px}
.n-card h3{font-size:21px;margin-bottom:10px}
.n-card p{color:var(--stone);font-size:16px}
.ninety .fine{margin-top:34px;color:var(--stone);font-size:15px;max-width:60ch}

/* ============ about — THE one light section ============ */
.about{background:var(--bone);color:var(--ink)}
.about .kicker{color:#4a5555}
.about .kicker::before{background:var(--ink)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.about-photo{
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  margin-top:calc(var(--pad) * -1 - 40px); /* portrait breaks up into the dark section above */
  border:1px solid rgba(11,12,12,.08);
}
.about-photo img{aspect-ratio:4/5;object-fit:cover;width:100%}
.about h2{font-size:clamp(38px,5vw,60px);margin:18px 0 22px}
.about p{color:#39494a;margin-bottom:18px;max-width:58ch}
.about p.sig{font-family:var(--display);font-weight:700;color:var(--ink);font-size:19px;margin-top:26px}
.about .quiet{color:var(--ink);border-bottom-color:rgba(11,12,12,.35)}

/* ============ who it's for / isn't ============ */
.who .cols{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);align-items:start}
.who-card{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,3.5vw,40px);box-shadow:var(--shadow);
}
.who-card.not{background:transparent;box-shadow:none;margin-top:clamp(0px,4vw,56px)}
.who-card h3{font-size:24px;margin-bottom:22px}
.who-card ul{list-style:none;display:grid;gap:14px}
.who-card li{padding-left:26px;position:relative;color:var(--stone)}
.who-card.for li::before{content:"→";position:absolute;left:0;color:var(--crown);font-weight:700}
.who-card.not li::before{content:"✕";position:absolute;left:0;color:var(--stone)}

/* ============ pull quote ============ */
.pull{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pull blockquote{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;
  max-width:20ch;
}
.pull blockquote span{color:var(--crown)}
.pull cite{display:block;margin-top:28px;font-style:normal;color:var(--stone);font-size:15px;font-family:var(--body)}

/* ============ FAQ ============ */
.faq-list{margin-top:56px;max-width:780px;border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;color:var(--bone);
  font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,22px);
  text-align:left;padding:26px 56px 26px 4px;position:relative;line-height:1.3;
}
.faq-q::after{
  content:"+";position:absolute;right:8px;top:50%;
  font-family:var(--body);font-weight:400;font-size:28px;color:var(--crown);
  transform:translateY(-50%);transition:transform .45s var(--ease);
}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{color:var(--stone);padding:0 4px 28px;max-width:62ch}
.faq-a p a{color:var(--crown);text-decoration:none;border-bottom:1px solid rgba(64,224,208,.4)}

/* ============ apply ============ */
.apply{border-top:1px solid var(--hair)}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.apply h2{font-size:clamp(38px,5vw,60px)}
.apply .lead{margin-bottom:36px}
.apply-side .btn{width:100%;margin-bottom:22px}
.apply-meta{color:var(--stone);font-size:15px;display:grid;gap:10px}
.apply-meta a{color:var(--bone)}
.apply-form{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow);
  margin-top:clamp(0px,3vw,44px);
}
.apply-form h3{font-size:22px;margin-bottom:24px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:8px;letter-spacing:.02em}
.field input,.field textarea,.field select{
  width:100%;background:var(--ink);border:1px solid var(--ink-3);border-radius:calc(var(--r) - 6px);
  color:var(--bone);font-family:var(--body);font-size:16px;padding:14px 16px;min-height:48px;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--crown);outline:none}
/* only shown when a send actually fails — never pretend a message went through */
.form-err{display:none;margin-top:14px;color:#ff9d9d;font-size:15px}
.form-err.on{display:block}
.form-err a{color:var(--crown)}
.link-accent{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--crown);
  border-bottom:1px solid rgba(64,224,208,.4);
}
.form-done{display:none;padding:20px 0}
.form-done h3{font-size:26px;margin-bottom:14px}
.form-done p{color:var(--stone)}
.form-done a{color:var(--crown)}

/* ============ seat application ============
   A seat in a local group isn't first-come-first-served — the room only works
   if everyone in it is actually ready to be seen and held to something. So
   "Save my seat" lands here, on written answers, not on a checkout. Deliberately
   the same field/typography system as the apply form: same concept, same UI. */
.seat{border-top:1px solid var(--hair);background:var(--ink)}
.seat-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,76px);align-items:start}
.seat h2{font-size:clamp(38px,5vw,58px);margin:18px 0 22px}
.seat .lead{margin-bottom:32px}
.seat-note{
  background:var(--ink-2);border:1px solid var(--hair);border-left:2px solid var(--crown);
  border-radius:calc(var(--r) - 6px);padding:22px 26px;color:var(--stone);font-size:15.5px;
  display:grid;gap:12px;
}
.seat-note b{color:var(--bone);font-weight:600}
.seat-form{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow);
}
.seat-form h3{font-size:22px;margin-bottom:8px}
.seat-form .seat-sub{color:var(--stone);font-size:15px;margin-bottom:28px}
.seat-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.seat-step{
  margin:34px 0 20px;padding-top:26px;border-top:1px solid var(--hair);
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;
}
.seat-step span{color:var(--crown);font-size:13px;letter-spacing:.18em;display:block;margin-bottom:8px;font-family:var(--body)}
/* the four real questions get room to write in — short boxes invite short answers */
.field.deep textarea{min-height:132px}
/* inline by default so a short "Optional" doesn't add a line and knock the
   two-up rows out of alignment; the long question sub-lines get their own row */
.field .hint{color:var(--stone);font-size:13.5px;font-weight:400;letter-spacing:0}
.field.deep .hint{display:block;margin-top:6px}
@media (max-width:560px){.seat-row{grid-template-columns:1fr}}

/* ============ dedicated action pages (/book-a-call/, /save-my-seat/) ============
   These two pages are nothing but the header, one form section and the footer, so
   the section's own heading becomes the page h1 and it needs the top air the
   homepage got from its hero. */
.crumb{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,44px) clamp(20px,4vw,40px) 0}
.crumb a{
  color:var(--stone);text-decoration:none;font-size:14.5px;font-weight:600;
  letter-spacing:.02em;transition:color .3s var(--ease);
}
.crumb a:hover{color:var(--crown)}
.crumb span{margin-right:6px}
.crumb + .apply,.crumb + .seat{border-top:0;padding-top:clamp(28px,4vw,48px)}
.apply h1,.seat h1{
  font-size:clamp(38px,5vw,58px);font-weight:900;letter-spacing:-.022em;
  line-height:1.05;margin:18px 0 22px;
}

/* ============ closing ============ */
.closing{background:#080909;border-top:1px solid var(--hair);text-align:left}
.closing .wrap{display:grid;gap:36px;justify-items:start}
.closing p{
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(38px,6vw,72px);line-height:1.04;max-width:18ch;
}
.closing p span{color:var(--crown)}

/* ============ chat — replaces the phone number ============
   Not a live-agent widget: it's a message box that lands in Kristen's inbox
   the moment it's sent. The copy says exactly that, so nobody sits waiting
   for a reply that isn't coming in ten seconds. */
.chat-fab{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:200;
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:12px 22px 12px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--crown);color:var(--ink);font-family:var(--body);font-weight:700;font-size:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .3s var(--ease);
}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 22px 54px rgba(0,0,0,.65)}
.chat-fab svg{width:22px;height:22px;flex:none}
.chat-fab[hidden]{display:none}
.chat-panel{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:201;
  width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100svh - 32px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(64,224,208,.28);border-radius:var(--r);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.chat-panel.open{display:flex}
.chat-head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--hair);background:var(--ink);
}
.chat-head img{width:36px;height:36px;object-fit:contain;flex:none}
.chat-head b{display:block;font-family:var(--display);font-size:16px;letter-spacing:.02em}
.chat-head span{display:block;color:var(--stone);font-size:12.5px}
.chat-close{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--stone);
  font-size:24px;line-height:1;width:36px;height:36px;flex:none;
}
.chat-close:hover{color:var(--bone)}
.chat-body{padding:18px;overflow-y:auto}
.chat-bubble{
  background:var(--ink);border:1px solid var(--hair);border-radius:14px 14px 14px 4px;
  padding:14px 16px;font-size:15px;color:var(--bone);margin-bottom:18px;
}
.chat-bubble + .chat-bubble{margin-top:-8px}
.chat-panel .field{margin-bottom:14px}
.chat-panel .field label{font-size:13px}
.chat-panel .field input,.chat-panel .field textarea{font-size:15px;padding:12px 14px}
.chat-panel .field textarea{min-height:96px}
.chat-panel .btn{width:100%;min-height:50px}
.chat-fine{margin-top:14px;color:var(--stone);font-size:13px;text-align:center}
.chat-fine a{color:var(--crown)}
.chat-sent{display:none;padding:6px 0}
.chat-sent h4{font-family:var(--display);font-size:20px;margin-bottom:10px}
.chat-sent p{color:var(--stone);font-size:15px}
@media (max-width:600px){
  .chat-fab{padding:12px 18px;font-size:15px}
}

/* ============ footer ============ */
footer{border-top:1px solid var(--hair);padding-block:clamp(56px,7vw,90px)}
.foot-grid{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:clamp(32px,5vw,64px)}
.foot-grid h4{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:20px}
.foot-grid ul{list-style:none;display:grid;gap:12px}
.foot-grid a{color:var(--bone);text-decoration:none;font-size:15px}
.foot-grid a:hover{color:var(--crown)}
.foot-chat{background:none;border:0;padding:0;cursor:pointer;color:var(--bone);font-family:var(--body);font-size:15px}
.foot-chat:hover{color:var(--crown)}
.foot-brand .wordmark{font-size:19px}
.foot-brand p{color:var(--stone);font-size:15px;margin-top:16px;max-width:36ch}
.news-form{display:flex;gap:10px;margin-top:18px;max-width:420px}
.news-form input{
  flex:1;min-width:0;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:calc(var(--r) - 6px);color:var(--bone);font-family:var(--body);
  font-size:15px;padding:12px 14px;min-height:48px;
}
.news-form input:focus{border-color:var(--crown);outline:none}
.news-form .btn{min-height:48px;padding:10px 20px;font-size:15px}
.news-done{display:none;color:var(--crown);font-weight:600;margin-top:18px;font-size:15px}
.foot-base{
  max-width:var(--wrap);margin:64px auto 0;padding-inline:clamp(20px,4vw,40px);
  border-top:1px solid var(--hair);padding-top:28px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--stone);font-size:13.5px;
}

/* ============ reveal on scroll ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.btn .tip,.burger span,.faq-a{transition:none}
}

/* ============ responsive ============ */
@media (max-width:960px){
  /* portrait shrinks with the column but stays on the right until it can't */
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(230px,320px);gap:clamp(24px,4vw,44px)}
  .apply-grid,.about-grid,.seat-grid{grid-template-columns:1fr}
  .seat-form{margin-top:0}
  .about-photo{margin-top:calc(var(--pad) * -1 - 20px);max-width:440px}
  .apply-form{margin-top:0}
  .ninety .grid{grid-template-columns:1fr}
  .band-grid figure:nth-child(1){grid-column:1/7;margin-top:40px}
  .band-grid figure:nth-child(2){grid-column:7/13;margin-top:-30px}
}
@media (max-width:768px){
  nav.primary{display:none}
  .burger{display:block}
  .head-cta .tel-quiet{display:none}
  /* the mark + full wordmark + CTA won't fit a phone bar — shrink both */
  .bar{gap:12px}
  .wordmark{font-size:13px;gap:9px;line-height:1.2}
  .wordmark img{width:32px;height:32px}
  /* let the name wrap to two lines instead of pushing the CTA off-screen */
  .wordmark span{max-width:120px}
  .wordmark small{font-size:9px;letter-spacing:.22em}
  .head-cta{gap:10px}
  .head-cta .btn{padding:10px 14px;font-size:14px}
  /* one phone column: headline first, photo under it, capped so it never
     eats the whole first screen */
  .hero{padding-top:118px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-figure{max-width:330px;order:2}
  .steps::before{display:none}
  .step{grid-template-columns:1fr;gap:10px}
  .step:nth-child(2) .step-body,.step:nth-child(3) .step-body{margin-right:0}
  .p-cards .p-card{margin-left:0 !important;max-width:none}
  .who .cols{grid-template-columns:1fr}
  .who-card.not{margin-top:0}
  .ways-grid{grid-template-columns:1fr}
  .band-grid{margin-top:-30px;gap:14px}
  .band-grid figure:nth-child(1){grid-column:1/13;margin-top:0}
  .band-grid figure:nth-child(2){grid-column:1/13;margin-top:0}
  .band-grid img{aspect-ratio:16/11}
  .foot-grid{grid-template-columns:1fr}
  .news-form{flex-direction:column}
  .news-form .btn{width:100%}
}