/* ============================================================================
   אלמוג עבודות נגרות — flagship. Native only: NO GSAP/Lenis/ogl/Three/WebGL.
   Visuals = Higgsfield. Hero video plays once then HOLDS (no loop).
   Showroom = interactive: pick a door → smooth close-up + short description.
   CSS transitions limited to FUNCTIONAL UI (nav, CTA reveal, hover, dialog, zoom).
   ========================================================================== */
:root{
  --ink:#17120d; --paper:#f4efe7; --brass:#c9a24b; --line:rgba(244,239,231,.16);
  --ui:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{ background:var(--ink); color:var(--paper); scroll-behavior:smooth; scroll-snap-type:y proximity; -webkit-text-size-adjust:100% }
body{ font-family:var(--ui); overflow-x:hidden }
img,video{ display:block } picture{ display:contents } a{ color:inherit; text-decoration:none }
[hidden]{ display:none !important }   /* author video{display:block} must NOT override the hidden attribute */

/* chapters fill the viewport; soft proximity snap (website feel, not a slideshow) */
.chapter{ position:relative; min-height:100svh; overflow:hidden; scroll-snap-align:start; display:flex; align-items:flex-end; justify-content:center }
.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.layer{ z-index:0; transition:opacity .6s ease }
.overlay{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:9vh; text-align:center }

/* fixed chrome */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:50; display:flex; align-items:center; gap:18px;
  padding:14px clamp(16px,4vw,40px); background:linear-gradient(to bottom,rgba(10,8,6,.62),rgba(10,8,6,0));
  pointer-events:none; opacity:1; transition:opacity .5s ease }
.nav[data-hidden="true"]{ opacity:0 }
.nav>*{ pointer-events:auto }
.brand{ display:block; line-height:0 }
.brand img{ display:block; height:38px; width:auto; border-radius:7px }
.menu{ display:flex; gap:clamp(10px,1.6vw,22px); margin-inline:auto; font-size:14px }
.menu a{ opacity:.82; padding:6px 2px; border-bottom:2px solid transparent; transition:opacity .2s,border-color .2s }
.menu a:hover{ opacity:1 } .menu a.active{ opacity:1; border-color:var(--brass) }
.phone{ font-family:var(--mono); font-weight:500; font-size:14px; white-space:nowrap; border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; background:rgba(10,8,6,.35); backdrop-filter:blur(6px); transition:.2s }
.phone:hover{ border-color:var(--brass); background:rgba(10,8,6,.55) }
.progress{ position:fixed; inset-block-start:0; inset-inline:0; height:2px; z-index:60 }
.progress i{ display:block; height:100%; width:100%; transform-origin:right center; transform:scaleX(0); background:var(--brass) }

/* buttons / CTAs */
.open-door,.reveal-cta,.btn{ font-family:var(--ui); font-weight:700; cursor:pointer; border-radius:999px;
  border:1px solid var(--line); background:rgba(10,8,6,.5); color:var(--paper); backdrop-filter:blur(6px);
  padding:14px 24px; font-size:clamp(15px,1.6vw,17px); transition:background .2s,border-color .2s,opacity .45s,transform .15s }
.open-door:hover,.reveal-cta:hover,.btn:hover{ border-color:var(--brass); background:rgba(10,8,6,.72) }
.reveal-cta[hidden]{ display:inline-block !important; opacity:0; pointer-events:none }   /* revealed by JS */
.reveal-cta.show{ opacity:1; pointer-events:auto }
.reveal-cta.solid,.btn.primary{ background:var(--brass); color:var(--ink); border-color:var(--brass) }
.reveal-cta.solid:hover,.btn.primary:hover{ background:#dab85f }
.btn span{ font-family:var(--mono) }
.contact{ align-items:center }
.contact .actions{ position:relative; z-index:5; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:36vh; padding:0 16px }

/* ===== showcase video — FULL-BLEED chapter, plays only on click ===== */
.showcase{ background:#0e0a07 }
.showcase video.bg{ cursor:pointer }
.play-btn{ position:absolute; inset:0; margin:auto; width:88px; height:88px; z-index:6; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.6); background:rgba(10,8,6,.42); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease }
.play-btn svg{ width:36px; height:36px; fill:#fff; margin-inline-start:5px }
.play-btn:hover{ transform:scale(1.08); background:rgba(201,162,75,.9) }
.showcase.playing .play-btn{ display:none }

/* ===== showroom dialog ===== */
dialog{ border:none; color:var(--paper); padding:0 }
dialog::backdrop{ background:rgba(8,6,4,.86); backdrop-filter:blur(4px) }
.showroom-dialog{ width:min(1320px,96vw); height:94svh; max-width:none; max-height:none; background:#1b1612; border:1px solid var(--line); border-radius:18px; overflow:hidden; position:relative }
.gclose{ position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:6; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(10,8,6,.55); color:var(--paper); font-size:22px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); transition:.2s }
.gclose:hover{ border-color:var(--brass); background:rgba(10,8,6,.8) }
.entry-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:4; background:#000 }

.showroom{ position:absolute; inset:0; display:flex; flex-direction:column; overflow-y:auto; transition:opacity .5s ease;
  background:linear-gradient(rgba(14,10,6,.5),rgba(14,10,6,.74)), url("assets/gallery-bg.webp") center center / cover no-repeat;
  scrollbar-width:thin; scrollbar-color:var(--brass) transparent }
.showroom::-webkit-scrollbar{ width:8px } .showroom::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:99px }

/* orbit angle-viewer (the visitor changes the showroom angle) */
.orbit{ position:relative; flex:0 0 auto; height:min(58vh,560px); background:#0e0a07; overflow:hidden; cursor:grab; user-select:none; touch-action:pan-y }
.orbit.grabbing{ cursor:grabbing }
.orbit-stage{ position:absolute; inset:0 }
.orbit-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease; pointer-events:none }
.orbit-frame.active{ opacity:1 }
.orbit-head{ position:absolute; inset-block-start:0; inset-inline:0; z-index:2; pointer-events:none; text-shadow:0 2px 14px rgba(0,0,0,.6);
  padding:clamp(14px,2.5vw,24px) clamp(20px,4vw,40px); background:linear-gradient(rgba(8,6,4,.62),transparent) }
.orbit-head h2{ font-size:clamp(18px,2.4vw,26px); font-weight:700 }
.orbit-head p{ opacity:.9; margin-top:3px; font-size:13px }
.orbit-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(10,8,6,.5); color:var(--paper); font-size:26px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); transition:.2s }
.orbit-nav:hover{ border-color:var(--brass); background:rgba(10,8,6,.78) }
.orbit-nav.prev{ left:12px } .orbit-nav.next{ right:12px }
.orbit-dots{ position:absolute; inset-block-end:12px; inset-inline:0; z-index:3; display:flex; gap:7px; justify-content:center; flex-wrap:wrap; padding:0 12px }
.orbit-dots button{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(244,239,231,.4); cursor:pointer; transition:.2s }
.orbit-dots button.on{ background:var(--brass); width:20px; border-radius:99px }

.sr-head{ padding:clamp(20px,4vw,40px) clamp(20px,4vw,40px) 2px; text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.6) }
.sr-head h2{ font-size:clamp(22px,3vw,32px); font-weight:700 }
.sr-head p{ opacity:.92; margin-top:6px; font-size:14px }
.door-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:clamp(10px,1.6vw,20px);
  padding:clamp(14px,3vw,28px) clamp(16px,3vw,40px) clamp(28px,5vw,52px) }

/* floating cut-out door cards — transparent, they hover over the corridor */
.sr-door{ position:relative; aspect-ratio:3/4; min-width:0; border:0; background:transparent; padding:10px 8px 0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; animation:floatIn .6s both }
.sr-door img{ width:auto; max-width:94%; height:86%; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.55)); animation:bob 6s ease-in-out infinite }
.sr-door:nth-child(2n) img{ animation-duration:7s; animation-delay:-1.3s }
.sr-door:nth-child(3n) img{ animation-duration:6.5s; animation-delay:-.7s }
.sr-door:hover{ translate:0 -8px }
.sr-door:hover img{ scale:1.05; filter:drop-shadow(0 28px 38px rgba(0,0,0,.6)) }
.sr-door:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; border-radius:12px }
.sr-door-label{ margin-top:10px; font-size:13.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap; max-width:100%; color:#fff;
  background:rgba(8,6,4,.8); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 14px;
  backdrop-filter:blur(8px); text-shadow:0 1px 6px rgba(0,0,0,.7) }
@keyframes floatIn{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -7px } }

/* close-up (smooth zoom into the chosen door) */
.closeup{ position:absolute; inset:0; z-index:5; display:flex; gap:clamp(18px,3vw,40px); align-items:center;
  padding:clamp(20px,4vw,56px); background:rgba(20,15,11,.97);
  opacity:0; pointer-events:none; transform:scale(.96); transition:opacity .4s ease,transform .4s ease }
.closeup.open{ opacity:1; pointer-events:auto; transform:scale(1) }
.cu-stage{ position:relative; flex:0 0 auto; width:min(46%,430px); display:flex; align-items:center; justify-content:center }
.cu-stage.spinnable{ cursor:grab; touch-action:pan-y; user-select:none }
.cu-stage.spinnable.grabbing{ cursor:grabbing }
.cu-img{ width:100%; height:auto; max-height:82svh; object-fit:contain; filter:drop-shadow(0 24px 44px rgba(0,0,0,.6)) }
.spin-badge{ position:absolute; inset-block-end:6px; inset-inline:0; margin-inline:auto; width:max-content; font-size:12px; font-weight:500;
  background:rgba(10,8,6,.62); border:1px solid var(--line); border-radius:999px; padding:5px 13px; backdrop-filter:blur(6px); pointer-events:none }
.cu-meta{ flex:1; max-width:480px; display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.cu-meta h3{ font-size:clamp(24px,3vw,34px); font-weight:700 }
.cu-meta p{ font-size:clamp(15px,1.7vw,18px); line-height:1.7; opacity:.9 }
.back{ position:absolute; inset-block-start:16px; inset-inline-end:18px; background:transparent; border:1px solid var(--line);
  color:var(--paper); border-radius:999px; padding:9px 16px; font-family:var(--ui); font-weight:500; cursor:pointer; transition:.2s }
.back:hover{ border-color:var(--brass) }

.skip{ position:fixed; inset-block-start:-60px; inset-inline-start:14px; z-index:80; background:var(--brass); color:var(--ink);
  font-weight:700; padding:10px 16px; border-radius:10px; transition:inset-block-start .2s } .skip:focus{ inset-block-start:14px }

/* whole collection chapter is a doorway into the showroom */
.collection{ cursor:pointer }

/* hero headline — real H1 over the art, quiet on purpose */
.hero-title{ max-width:min(92vw,640px); font-size:clamp(15px,1.8vw,19px); font-weight:500; line-height:1.55;
  color:var(--paper); opacity:.94; text-shadow:0 2px 14px rgba(0,0,0,.65) }

/* ===== text chapters (method / faq) — the story in real HTML ===== */
.kicker{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--brass); margin-bottom:14px }
.method,.faq{ align-items:center; background:
  radial-gradient(1100px 500px at 85% -10%, rgba(201,162,75,.07), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(201,162,75,.05), transparent 60%), var(--ink) }
.method-inner,.faq-inner{ position:relative; z-index:5; width:min(92vw,880px); margin:0 auto;
  padding:clamp(72px,12vh,120px) 0 clamp(56px,9vh,96px) }
.method-inner h2,.faq-inner h2{ font-size:clamp(28px,4.2vw,44px); font-weight:700; line-height:1.2 }
.lede{ margin-top:16px; max-width:640px; font-size:clamp(15.5px,1.8vw,18px); line-height:1.75; opacity:.88 }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,30px); margin-top:clamp(30px,5vh,52px) }
.steps li{ border:1px solid var(--line); border-radius:16px; padding:22px 20px 24px; background:rgba(244,239,231,.03) }
.step-num{ font-family:var(--mono); font-size:13px; color:var(--brass); letter-spacing:.1em }
.steps h3{ margin-top:10px; font-size:clamp(17px,1.9vw,20px); font-weight:700 }
.steps p{ margin-top:8px; font-size:14.5px; line-height:1.7; opacity:.82 }
.badges{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(24px,4vh,40px) }
.badges li{ font-size:13px; font-weight:500; border:1px solid var(--line); border-radius:999px; padding:7px 14px; opacity:.9 }

/* faq — native accordions, brass hairlines */
.faq-inner{ width:min(92vw,760px) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 2px; font-size:clamp(15.5px,1.8vw,17.5px); font-weight:700 }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{ content:"+"; font-family:var(--mono); font-size:20px; color:var(--brass); flex:0 0 auto; transition:transform .2s }
.qa[open] summary::after{ transform:rotate(45deg) }
.qa summary:hover{ color:#fff }
.qa p{ padding:0 2px 18px; font-size:15px; line-height:1.75; opacity:.85; max-width:640px }
.qa summary:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:6px }

/* ===== contact: buttons + lead form card ===== */
.contact-wrap{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:22px;
  width:min(94vw,560px); margin-top:24vh; margin-bottom:7vh; padding:0 8px }
.contact .actions{ margin-top:0; padding:0 }
.lead-card{ width:100%; background:rgba(14,10,6,.72); border:1px solid var(--line); border-radius:18px;
  backdrop-filter:blur(10px); padding:clamp(20px,3.4vw,30px) }
.lead-card h2{ font-size:clamp(17px,2vw,21px); font-weight:700; text-align:center }
.lead-card form{ margin-top:16px }
.hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0 }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fields label{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:500; opacity:.92 }
.fields input,.fields select{ font-family:var(--ui); font-size:15px; color:var(--paper);
  background:rgba(244,239,231,.06); border:1px solid var(--line); border-radius:10px; padding:11px 12px; transition:border-color .2s }
.fields input::placeholder{ color:rgba(244,239,231,.4) }
.fields input:focus,.fields select:focus{ outline:none; border-color:var(--brass) }
.fields select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:left 16px center,left 11px center; background-size:5px 5px,5px 5px; background-repeat:no-repeat }
.fields select option{ background:#1b1612; color:var(--paper) }
.lead-card .submit{ width:100%; margin-top:14px; border:0 }
.consent{ margin-top:10px; font-size:12px; line-height:1.6; opacity:.6; text-align:center }
.consent a{ text-decoration:underline }
.form-status{ margin-top:10px; min-height:1.2em; font-size:14px; font-weight:500; text-align:center }
.form-status.ok{ color:#8fd48f }
.form-status.err{ color:#e2a37f }

/* ===== footer ===== */
.site-footer{ position:relative; z-index:5; background:#0e0a07; border-top:1px solid var(--line);
  padding:clamp(40px,7vh,64px) clamp(20px,5vw,56px) 28px }
.f-grid{ display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:clamp(24px,4vw,48px); max-width:1180px; margin:0 auto }
.f-logo{ font-weight:700; font-size:17px } .f-logo span{ font-weight:400; opacity:.7; font-size:.85em }
.f-brand p{ margin-top:8px; font-size:13.5px; line-height:1.7; opacity:.75; max-width:340px }
.f-contact a:hover{ color:var(--brass) }
.f-nav,.f-cities{ display:flex; flex-direction:column; gap:8px; font-size:13.5px }
.f-nav a,.f-cities a{ opacity:.75; width:max-content; transition:opacity .2s,color .2s }
.f-nav a:hover,.f-cities a:hover{ opacity:1; color:var(--brass) }
.f-title{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--brass); margin-bottom:4px }
.f-cities{ display:grid; grid-template-columns:repeat(2,max-content); column-gap:28px; align-content:start }
.f-cities .f-title{ grid-column:1/-1 }
.f-legal{ max-width:1180px; margin:36px auto 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; opacity:.55; text-align:center }
.f-legal a{ text-decoration:underline }

/* ===== sticky mobile bar (shown ≤760px; FAB is desktop-only) ===== */
.mbar{ display:none }

/* ===== inner pages (legal + per-city) — quiet prose over ink ===== */
.page{ min-height:100svh; display:flex; flex-direction:column }
.page-main{ flex:1; width:min(92vw,760px); margin:0 auto; padding:calc(70px + 6vh) 0 10vh }
.page-main h1{ font-size:clamp(26px,4vw,40px); font-weight:700; line-height:1.25 }
.page-main .lede{ margin-top:14px }
.page-main h2{ font-size:clamp(19px,2.4vw,24px); font-weight:700; margin-top:clamp(28px,5vh,44px) }
.page-main p,.page-main li{ font-size:15.5px; line-height:1.8; opacity:.88 }
.page-main p{ margin-top:12px }
.page-main ul{ margin-top:12px; padding-inline-start:22px }
.page-main li{ margin-top:6px }
.page-main a{ color:var(--brass); text-decoration:underline }
.page-main .note{ font-size:13px; opacity:.6; margin-top:clamp(24px,4vh,40px) }
.page-nav{ position:sticky; inset-block-start:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:14px clamp(16px,4vw,40px); background:rgba(14,10,6,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.page .crumbs{ font-size:13px; opacity:.65; margin-bottom:18px }
.page .crumbs a{ color:inherit; text-decoration:none } .page .crumbs a:hover{ color:var(--brass) }
.city-doors{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px }
.city-doors a{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:inherit; font-size:13px; font-weight:500 }
.city-doors img{ width:100%; height:180px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) }
.city-doors a:hover{ color:var(--brass) }
.page-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px }
@media (max-width:760px){ .city-doors{ grid-template-columns:repeat(2,1fr) } }

/* ===== guide pages — price/compare tables + hub cards ===== */
.twrap{ overflow-x:auto; margin-top:14px }
.gtable{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.6 }
.gtable th{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--brass); text-align:start; padding:10px 12px; border-bottom:1px solid var(--brass) }
.gtable td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; opacity:.88 }
.gtable td:first-child{ font-weight:700; opacity:1 }
.guide-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; padding:0 }
.page-main .gcard{ display:block; height:100%; border:1px solid var(--line); border-radius:16px; padding:20px;
  background:rgba(244,239,231,.03); color:var(--paper); text-decoration:none; transition:border-color .2s,background .2s }
.page-main .gcard:hover{ border-color:var(--brass); background:rgba(244,239,231,.06) }
.gcard strong{ display:block; font-size:16.5px; line-height:1.4 }
.gcard span{ display:block; margin-top:6px; font-size:13.5px; line-height:1.65; opacity:.78 }
@media (max-width:760px){ .guide-grid{ grid-template-columns:1fr } }

/* floating WhatsApp — always one tap away */
.wa-fab{ position:fixed; inset-block-end:22px; inset-inline-end:20px; z-index:45; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.45); transition:transform .15s ease, box-shadow .15s ease }
.wa-fab:hover{ transform:scale(1.07); box-shadow:0 10px 26px rgba(0,0,0,.55) }
.wa-fab svg{ width:32px; height:32px; fill:currentColor }
.wa-fab:focus-visible{ outline:3px solid var(--brass); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

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

@media (max-width:760px){
  .menu{ display:none } .brand span{ display:none } .nav{ justify-content:space-between }
  /* phone hero uses the native 9:16 entry video (hero-p.mp4) — fills with cover, no contain/blur */
  .showroom-dialog{ position:fixed; inset:0; width:auto; height:auto; border-radius:0; border:0 }
  .door-grid{ grid-template-columns:repeat(2,1fr) } .sr-door-label{ white-space:normal; font-size:12.5px; padding:5px 11px }
  .closeup{ flex-direction:column; justify-content:center; gap:18px } .cu-stage{ width:auto } .cu-img{ width:auto; max-height:46svh; max-width:88% } .cu-meta{ align-items:center; text-align:center }
  .contact-wrap{ margin-top:16vh; margin-bottom:calc(64px + 5vh) }
  .contact .actions{ width:100%; flex-direction:column; align-items:stretch } .btn{ text-align:center }
  .steps{ grid-template-columns:1fr }
  .fields{ grid-template-columns:1fr }
  .f-grid{ grid-template-columns:1fr }
  .site-footer{ padding-bottom:calc(28px + 64px + env(safe-area-inset-bottom)) }
  /* the sticky bar replaces the desktop FAB */
  .wa-fab{ display:none }
  .mbar{ position:fixed; inset-block-end:0; inset-inline:0; z-index:48; display:flex;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px;
    background:rgba(10,8,6,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line) }
  .mbar-btn{ flex:1; text-align:center; font-weight:700; font-size:15px; border-radius:999px; padding:12px 10px }
  .mbar-btn.call{ background:var(--brass); color:var(--ink) }
  .mbar-btn.wa{ background:#25d366; color:#fff }
}