/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#0A0A0A;
  --ink-2:#121110;
  --ink-3:#1a1816;
  --gold:#C9A227;
  --gold-lite:#E3C567;
  --cream:#EDE6D8;
  --cream-dim:#a9a296;
  --ember:#FF6B1A;

  --display:'Jost',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --script:'Parisienne',cursive;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --maxw:1240px;
  --band-h:clamp(300px,46vw,620px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.45vw + .9rem,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
}
/* height:auto is load-bearing — the width/height attributes are presentational hints,
   so setting only width in CSS leaves the height hint and stretches the image */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;letter-spacing:.01em}
.script{font-family:var(--script);font-weight:400;color:var(--gold-lite);letter-spacing:.01em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#000;padding:.75rem 1.25rem;font-weight:600;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px;border-radius:2px}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* eyebrow / section heading pattern */
.eyebrow{
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .9rem;font-weight:500;
}
.sec-title{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--cream)}
.sec-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.rule{
  width:132px;height:1px;margin:1.4rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem var(--gutter);
  /* Only compositor-friendly properties here. backdrop-filter is expensive to
     animate, and padding would reflow — both would fire exactly while scrolling. */
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(10,10,10,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(201,162,39,.24);
}
.hdr__logo{display:flex;align-items:center;text-decoration:none}
/* The header used to shrink by animating padding, and the logo by animating height.
   Both are LAYOUT properties, so every frame reflowed the page while the user was
   scrolling. Same look, done with a transform, which is compositor-only. */
.hdr__logo img{
  height:clamp(36px,4.4vw,52px);width:auto;
  transform-origin:left center;transition:transform .35s ease;
}
.hdr.stuck .hdr__logo img{transform:scale(.84)}
.hdr__nav{margin-left:auto;display:flex;gap:2rem;align-items:center}
.hdr__nav a{
  font-family:var(--display);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--cream);opacity:.86;transition:color .2s,opacity .2s;
}
.hdr__nav a:hover{color:var(--gold-lite);opacity:1}
@media(max-width:860px){.hdr__nav{display:none}}

.lang{
  margin-left:1.5rem;flex:0 0 auto;
  font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-decoration:none;color:var(--gold-lite);
  border:1px solid rgba(201,162,39,.5);border-radius:999px;
  padding:.5rem .85rem;line-height:1;transition:background .2s,color .2s;
  min-height:40px;display:inline-flex;align-items:center;
  white-space:nowrap;
}
.lang:hover{background:rgba(201,162,39,.14);color:var(--cream)}
/* margin-left:auto is what pushes the pill + CTA to the right edge once the nav is
   hidden. Do NOT override it on narrow screens — that left-clustered the whole header
   and left a dead gap on the right. Shrink via padding/font instead. */
@media(max-width:860px){.lang{margin-left:auto}}
@media(max-width:400px){.lang{padding:.45rem .6rem;font-size:.7rem}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  font-size:.83rem;padding:.95rem 1.9rem;border-radius:999px;text-decoration:none;
  border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn--call{
  background:var(--ember);color:#160800;
  box-shadow:0 8px 30px -10px rgba(255,107,26,.85);
  position:relative;overflow:hidden;
  animation:btnGlow 3.4s ease-in-out infinite;   /* owns box-shadow from here on */
}
/* slow highlight sweeping across the primary action */
.btn--call::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:btnShine 5s ease-in-out infinite;
}
.btn--call:hover{transform:translateY(-2px);animation-duration:1.6s}
@keyframes btnGlow{
  0%,100%{box-shadow:0 8px 30px -10px rgba(255,107,26,.8)}
  50%{box-shadow:0 12px 44px -8px rgba(255,107,26,1)}
}
@keyframes btnShine{
  0%,68%{left:-60%}
  100%{left:130%}
}
.btn--ghost{border-color:rgba(201,162,39,.55);color:var(--gold-lite);background:transparent}
.btn--ghost:hover{background:rgba(201,162,39,.1);transform:translateY(-2px)}
/* The header CTA must never wrap. At 320px — an iPhone SE, or any iPhone with
   Display Zoom turned on — "ORDER ONLINE" broke onto two lines and pushed the
   header to 89px tall, which is what made the top look broken on iOS. */
.hdr .btn{padding:.7rem 1.4rem;white-space:nowrap;flex:0 0 auto}
.hdr__logo{flex:0 0 auto}
@media(max-width:640px){
  .hdr{gap:.6rem}
  .hdr .btn{padding:.6rem 1rem;font-size:.71rem;letter-spacing:.1em}
}
@media(max-width:400px){
  .hdr{gap:.45rem;padding-inline:.9rem}
  .hdr .btn{padding:.55rem .8rem;font-size:.66rem;letter-spacing:.06em}
}
/* below ~370px even that is tight, so the CTA drops to a single word */
.btn .lbl-short{display:none}
@media(max-width:370px){
  .hdr .btn .lbl-full{display:none}
  .hdr .btn .lbl-short{display:inline}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:clamp(560px,88vh,940px);display:grid;place-items:center;isolation:isolate}
/* vh on iOS means the address-bar-hidden height, so 88vh overshoots the screen.
   svh is the address-bar-VISIBLE height: it fits, and unlike dvh it does NOT change
   while the bar collapses on scroll — dvh made the hero visibly resize mid-scroll. */
@supports (height:100svh){.hero{min-height:clamp(560px,88svh,940px)}}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    /* pool of dark directly behind the badge so the gold reads cleanly off the fire */
    radial-gradient(54% 46% at 50% 45%,rgba(6,6,6,.92) 0%,rgba(8,8,8,.78) 45%,transparent 80%),
    radial-gradient(125% 90% at 50% 40%,transparent 18%,rgba(10,10,10,.6) 66%,var(--ink) 100%),
    linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.34) 24%,rgba(10,10,10,.72) 62%,var(--ink) 100%);
}
.hero__inner{text-align:center;padding:8rem var(--gutter) 5rem;position:relative}

/* <picture> is inline by default, which would break the auto-margin centring */
.hero__inner picture,.ft picture{display:block}
.card__img picture{display:block;height:100%}

.hero__logo{
  width:min(330px,62vw);margin:0 auto 1.9rem;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.hero__tag{
  font-family:var(--display);font-size:clamp(.74rem,1.5vw,.92rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin:0 0 2.2rem;
}
.hero__tag span{color:var(--cream-dim);margin-inline:.55rem}
/* On a phone the tagline must stay on ONE line — "SPIRIT" was dropping to a second
   row. Size it off the viewport so it always fits instead of wrapping. */
@media(max-width:700px){
  .hero__tag{white-space:nowrap;font-size:min(2.55vw,.8rem);letter-spacing:.17em}
  .hero__tag span{margin-inline:.3rem}
}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__phone{
  display:inline-block;margin-top:.9rem;padding:.72rem 1.2rem;font-family:var(--display);
  letter-spacing:.2em;font-size:.86rem;color:var(--cream-dim);text-decoration:none;
}
.hero__phone:hover{color:var(--gold-lite)}

/* ---------------------------------------------------------------- hero fire & smoke
   Transform/opacity only, so it stays on the compositor. Sits above the scrim but
   below the content. Entirely disabled under prefers-reduced-motion. */
.hero__fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__fx::before,.hero__fx::after{content:'';position:absolute}
.hero__fx::before{                                   /* drifting smoke */
  left:-20%;top:-30%;width:140%;height:160%;
  /* No filter:blur() here. Blurring an element this large every frame is the most
     expensive thing on the page on a phone; the radial gradients are already soft
     enough that the blur bought almost nothing. */
  background:
    radial-gradient(45% 35% at 30% 62%,rgba(255,190,120,.11),transparent 72%),
    radial-gradient(38% 28% at 72% 42%,rgba(255,150,60,.09),transparent 72%);
  animation:smokeDrift 34s ease-in-out infinite alternate;
}
.hero__fx::after{                                    /* firelight from below */
  left:50%;bottom:-12%;width:120%;height:46%;transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,120,30,.20),transparent 70%);
  animation:fireFlicker 5.5s ease-in-out infinite;
}
/* no will-change: 12 embers would mean 12 permanently promoted layers, and a
   transform animation gets promoted while it runs anyway */
.ember{
  position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#ffd9a3 0%,#ff7a18 60%,transparent 72%);
  opacity:0;
  animation:emberRise linear infinite;
}
.ember:nth-child(1){left:6%;--dx:26px;animation-duration:13s;animation-delay:-6.5s}
.ember:nth-child(2){left:14%;--dx:-18px;animation-duration:16s;animation-delay:-11.0s}
.ember:nth-child(3){left:23%;--dx:34px;animation-duration:11s;animation-delay:-3.0s;width:2px;height:2px}
.ember:nth-child(4){left:31%;--dx:-28px;animation-duration:18s;animation-delay:-14.5s}
.ember:nth-child(5){left:39%;--dx:16px;animation-duration:14s;animation-delay:-9.0s;width:4px;height:4px}
.ember:nth-child(6){left:47%;--dx:-34px;animation-duration:12s;animation-delay:-5.0s}
.ember:nth-child(7){left:54%;--dx:22px;animation-duration:17s;animation-delay:-13.0s;width:2px;height:2px}
.ember:nth-child(8){left:62%;--dx:-20px;animation-duration:15s;animation-delay:-2.0s}
.ember:nth-child(9){left:70%;--dx:30px;animation-duration:12.5s;animation-delay:-8.0s}
.ember:nth-child(10){left:77%;--dx:-24px;animation-duration:19s;animation-delay:-16.5s;width:4px;height:4px}
.ember:nth-child(11){left:85%;--dx:18px;animation-duration:13.5s;animation-delay:-4.0s}
.ember:nth-child(12){left:92%;--dx:-30px;animation-duration:16.5s;animation-delay:-10.5s;width:2px;height:2px}
@keyframes emberRise{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  12%{opacity:.85}
  70%{opacity:.6}
  100%{transform:translate3d(var(--dx,20px),-88vh,0) scale(1.15);opacity:0}
}
@keyframes smokeDrift{
  0%{transform:translate3d(-3%,2%,0) scale(1)}
  100%{transform:translate3d(4%,-4%,0) scale(1.12)}
}
@keyframes fireFlicker{
  0%,100%{opacity:.55}
  28%{opacity:.9}
  52%{opacity:.42}
  76%{opacity:.78}
}

.scroll-cue{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  width:1px;height:56px;background:linear-gradient(180deg,transparent,var(--gold));
  opacity:.65;
}
.scroll-cue::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translate(-50%,50%) rotate(45deg);
  width:6px;height:6px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
@media(max-width:640px){.scroll-cue{display:none}}

/* ---------------------------------------------------------------- promises */
.promises{
  border-block:1px solid rgba(201,162,39,.2);
  background:var(--ink-2);
}
.promises ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.promises li{
  padding:clamp(1.6rem,3vw,2.4rem) 1rem;text-align:center;
  font-family:var(--display);font-size:clamp(.72rem,1.35vw,.86rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  border-left:1px solid rgba(201,162,39,.16);
}
.promises li:first-child{border-left:0}
.promises li b{display:block;color:var(--gold);font-size:1.35em;font-weight:500;margin-bottom:.5rem;letter-spacing:0}
@media(max-width:760px){
  .promises ul{grid-template-columns:repeat(2,1fr)}
  .promises li:nth-child(3){border-left:0}
  .promises li:nth-child(n+3){border-top:1px solid rgba(201,162,39,.16)}
}

/* ---------------------------------------------------------------- signature bands */
.band{position:relative;height:var(--band-h);overflow:hidden;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.band.in img{transform:scale(1)}
.band::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.8) 28%,rgba(8,8,8,.46) 56%,rgba(10,10,10,.1) 82%,transparent 100%);
}
.band--right::after{background:linear-gradient(270deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.8) 28%,rgba(8,8,8,.46) 56%,rgba(10,10,10,.1) 82%,transparent 100%)}
.band__inner{
  position:relative;height:100%;display:flex;align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.band--right .band__inner{justify-content:flex-end;text-align:right}
.band__copy{max-width:30rem;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.band__name{font-size:clamp(1.9rem,4.4vw,3.2rem);color:var(--cream)}
.band__note{font-size:clamp(1.5rem,3vw,2.1rem);margin:.1rem 0 .7rem;display:block}
.band__price{
  font-family:var(--display);font-size:clamp(1.25rem,2.3vw,1.6rem);
  color:var(--gold);letter-spacing:.08em;font-weight:500;margin:0;
}
.band__alt{
  font-family:var(--display);font-size:clamp(.78rem,1.3vw,.9rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  margin:.45rem 0 0;
}
.band__alt b{color:var(--gold-lite);font-weight:500}
@media(max-width:700px){
  .band::after{background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,.82) 100%)}
  .band--right::after{background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,.82) 100%)}
  .band__inner,.band--right .band__inner{align-items:flex-end;justify-content:flex-start;text-align:left;padding-bottom:2rem}
}

/* ---------------------------------------------------------------- menu arches */
.menu{padding:clamp(4.5rem,9vw,8rem) 0;background:
  radial-gradient(90% 60% at 50% 0%,rgba(201,162,39,.07),transparent 70%),var(--ink)}
.arches{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(4,1fr);
  align-items:start;
}
@media(max-width:1040px){.arches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.arches{grid-template-columns:1fr}}

/* dome radius is a length, not a percentage, so every arch domes identically
   however tall its list happens to be */
.arch{
  position:relative;background:var(--ink-2);
  border:1px solid rgba(201,162,39,.5);
  border-radius:50% 50% 8px 8px / clamp(86px,8.5vw,124px) clamp(86px,8.5vw,124px) 8px 8px;
  padding:clamp(3.6rem,6.5vw,5rem) clamp(1.3rem,2.4vw,1.9rem) clamp(2rem,3.5vw,2.6rem);
}
.arch::before{
  content:'';position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(201,162,39,.26);
  border-radius:50% 50% 5px 5px / clamp(78px,8vw,116px) clamp(78px,8vw,116px) 5px 5px;
}
.arch h3{
  text-align:center;font-size:.94rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.9rem;font-weight:500;white-space:nowrap;
}
.arch ul{list-style:none;margin:0;padding:0}
.arch li{padding:.72rem 0;border-top:1px solid rgba(201,162,39,.14)}
.arch li:first-child{border-top:0}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem}
.item__name{font-family:var(--display);font-weight:500;font-size:1rem;color:var(--cream)}
.item__price{font-family:var(--display);font-weight:500;color:var(--gold);white-space:nowrap;font-size:.98rem}
.item__note{display:block;font-size:1.18rem;line-height:1.15;margin-top:.12rem}
.item__size{
  display:block;font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-dim);margin-top:.3rem;
}

/* ---------------------------------------------------------------- gallery */
.gallery{padding:clamp(4rem,8vw,7rem) 0 clamp(4.5rem,9vw,8rem);background:var(--ink)}
.cards{display:grid;gap:clamp(1.1rem,2.2vw,1.9rem);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{
  position:relative;overflow:hidden;border-radius:6px;
  border:1px solid rgba(201,162,39,.2);background:var(--ink-2);
}
.card__img{aspect-ratio:4/3;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:1.15rem 1.25rem 1.35rem}
.card__name{font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--cream)}
.card__note{font-size:1.15rem;display:block;line-height:1.2}
.card__price{font-family:var(--display);color:var(--gold);font-weight:500;margin-top:.45rem;display:block}

/* ---------------------------------------------------------------- faq
   <details> gives an accessible accordion with no JavaScript at all. */
.faq{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--ink)}
.faq__list{max-width:46rem;margin-inline:auto}
.faq details{
  border-top:1px solid rgba(201,162,39,.2);
}
.faq details:last-child{border-bottom:1px solid rgba(201,162,39,.2)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem .5rem 1.15rem 0;
  font-family:var(--display);font-weight:500;font-size:1.02rem;color:var(--cream);
  display:flex;align-items:center;gap:1rem;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-lite)}
.faq summary::after{
  content:'';margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 1.2rem;color:var(--cream-dim);max-width:60ch}
.faq details p a{color:var(--gold-lite)}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* live open/closed chip in the Visit block */
.openchip{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:99px;border:1px solid transparent;
}
.openchip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.openchip.is-open{color:#7ddba3;border-color:rgba(125,219,163,.45);background:rgba(125,219,163,.1)}
.openchip.is-shut{color:#f0b45e;border-color:rgba(240,180,94,.45);background:rgba(240,180,94,.1)}

/* ---------------------------------------------------------------- catering */
.catering{
  background:var(--ink-2);
  border-block:1px solid rgba(201,162,39,.22);
  padding:clamp(3.2rem,6vw,5rem) 0;
  text-align:center;
}
.catering h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.9rem}
.catering p{max-width:44ch;margin:0 auto 1.8rem;color:var(--cream-dim)}
.catering .script{font-size:clamp(1.6rem,3vw,2.2rem);display:block;margin-bottom:.2rem}

/* ---------------------------------------------------------------- visit */
.visit{padding:clamp(4rem,8vw,7rem) 0;background:var(--ink-2);border-top:1px solid rgba(201,162,39,.2)}
.visit__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.visit__block h3{
  font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.9rem;font-weight:500;
}
.visit__block p{margin:0 0 .35rem;color:var(--cream)}
/* inline-block + padding keeps these comfortably above a 44px tap target */
.visit__block a{
  color:var(--cream);text-decoration:none;display:inline-block;padding:.6rem 0;
  border-bottom:1px solid rgba(201,162,39,.4);transition:color .2s;
}
.visit__block a:hover{color:var(--gold-lite)}
.visit__block a.btn{padding:.95rem 1.9rem;border-bottom:0}
.visit__big{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em}
.tbd{
  display:inline-block;margin-top:.5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#000;background:var(--gold);padding:.2rem .55rem;border-radius:3px;font-family:var(--display);font-weight:600;
}

/* ---------------------------------------------------------------- footer */
.ft{padding:2.6rem 0 6.5rem;background:var(--ink);border-top:1px solid rgba(201,162,39,.16);text-align:center}
.ft img{width:150px;margin:0 auto 1.2rem;opacity:.9}
.ft p{margin:.25rem 0;font-size:.82rem;color:var(--cream-dim);letter-spacing:.06em}
@media(min-width:861px){.ft{padding-bottom:2.6rem}}

/* ---------------------------------------------------------------- mobile call dock */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(201,162,39,.28);
  display:none;
}
.dock__in{display:flex;gap:.55rem;align-items:center}
.dock .btn{width:auto}
.dock .btn--call{flex:1 1 auto}
.dock .btn--ghost{flex:0 0 auto;padding-inline:1.15rem}
@media(max-width:860px){.dock{display:block}}

/* ---------------------------------------------------------------- reveal */
/* only hide for reveal when JS is actually running, so content never depends on it */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .band img{transform:none;transition:none}
  .card__img img{transition:none}
  /* no drifting smoke, no flicker, no embers, no pulsing buttons */
  .hero__fx{display:none}
  .hero__fx::before,.hero__fx::after,.ember{animation:none}
  .btn--call{animation:none}
  .btn--call::after{display:none}
  *{scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}