/* همایش رایگان ترک سیگار شادمان — شیوه‌نامهٔ صفحه
   پالت برند ۱۴۰۲: آبی ۵۰٪ · سبز ۳۰٪ · طلایی ۲۰٪ · قلم وزیرمتن · گردی ۶ و ۱۰ پیکسل */

@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-wght.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --blue:#3C73A8; --blue-ink:#2A5A8A; --blue-deep:#1F4468; --blue-soft:#E3EDF7; --blue-band:#E9F0F8;
  --green:#74B959; --green-ink:#4E8F37; --green-soft:#EDF7E8;
  --gold:#E6B217; --gold-ink:#9A7408; --gold-soft:#FDF6E0;
  --ink:#4F4F4E; --ink-2:#3F3F3E; --muted:#636362; --line:#E0E0E0; --ground:#F5F5F5; --card:#FFFFFF; --page:#FFFFFF;
  --r-ctl:6px; --r-card:10px; --shadow:0 2px 10px rgba(31,68,104,.08);
  --wrap:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#7FA9D6; --blue-ink:#A9C7E8; --blue-deep:#0F2236; --blue-soft:#1B3047; --blue-band:#14263A;
    --green:#8CCB72; --green-ink:#A6D891; --green-soft:#1C2E17;
    --gold:#F0C445; --gold-ink:#F0C445; --gold-soft:#2E2610;
    --ink:#D6D9DC; --ink-2:#F0F2F4; --muted:#9AA3AB; --line:#2C3640; --ground:#0F171F; --card:#16212C; --page:#111A23;
    --shadow:0 2px 10px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --blue:#7FA9D6; --blue-ink:#A9C7E8; --blue-deep:#0F2236; --blue-soft:#1B3047; --blue-band:#14263A;
  --green:#8CCB72; --green-ink:#A6D891; --green-soft:#1C2E17;
  --gold:#F0C445; --gold-ink:#F0C445; --gold-soft:#2E2610;
  --ink:#D6D9DC; --ink-2:#F0F2F4; --muted:#9AA3AB; --line:#2C3640; --ground:#0F171F; --card:#16212C; --page:#111A23;
  --shadow:0 2px 10px rgba(0,0,0,.35); color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--page); color:var(--ink); font-family:"Vazirmatn",Tahoma,sans-serif; font-size:16px; line-height:1.9;
  direction:rtl; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01"; overflow-x:hidden}
img,video{max-width:100%; display:block}
picture{display:contents}
a{color:var(--blue)}
h1,h2,h3{color:var(--ink-2); line-height:1.45; margin:0; text-wrap:balance}
p{margin:0 0 .9em}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:16px}}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; inset-inline-start:12px; top:-60px; background:var(--blue); color:#fff; padding:8px 14px; border-radius:var(--r-ctl); z-index:99}
.skip:focus{top:10px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:var(--r-ctl);
  font:inherit; font-weight:700; font-size:16px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(60,115,168,.28)}
.btn-primary:hover{background:var(--blue-ink); transform:translateY(-1px)}
:root[data-theme="dark"] .btn-primary{color:#0F171F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#0F171F}}
.btn-line{background:transparent; color:var(--blue); border-color:var(--blue)}
.btn-line:hover{background:var(--blue-soft)}
.btn-lg{min-height:56px; font-size:17.5px; padding:0 28px}
.btn-sm{min-height:40px; font-size:14.5px; padding:0 16px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

/* header */
header.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--page) 92%,transparent); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .2s}
header.top.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.07)}
.top .wrap{display:flex; align-items:center; gap:28px; height:72px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:38px; width:auto}
.logo-d{display:none!important}
:root[data-theme="dark"] .logo-l{display:none!important} :root[data-theme="dark"] .logo-d{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-l{display:none!important} :root:not([data-theme="light"]) .logo-d{display:block!important}}
.nav{display:flex; gap:24px; font-size:15px; font-weight:500}
.nav a{color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--blue); border-color:var(--blue)}
.top .cta{margin-inline-start:auto; display:flex; gap:10px; align-items:center}
@media (max-width:960px){.nav{display:none}}
@media (max-width:480px){.top .wrap{height:62px; gap:10px} .brand img{height:26px} .top .cta{gap:6px} .top .cta .btn{min-height:38px; padding:0 10px; font-size:13px}}

/* generic section */
.sec{padding:72px 0}
.sec.alt{background:var(--ground)}
.kicker{display:inline-block; font-size:14px; font-weight:700; color:var(--blue); margin-bottom:8px; letter-spacing:0}
.h2{font-size:clamp(25px,3.4vw,34px); font-weight:800; color:var(--ink-2); margin-bottom:14px}
.lede{font-size:17px; max-width:62ch; color:var(--ink)}
.head{margin-bottom:34px}
.head.center{text-align:center} .head.center .lede{margin-inline:auto}
@media (max-width:640px){.sec{padding:52px 0}}

/* 1 · intro video */
.intro{padding:48px 0 56px; background:linear-gradient(180deg,var(--blue-band),var(--page))}
.intro .grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:44px; align-items:center}
.vid{position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:0 18px 40px rgba(31,68,104,.18); background:#000; aspect-ratio:640/362}
.vid video{width:100%; height:100%; object-fit:cover}
.vid-cap{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:6px; border-radius:20px; padding:3px 12px; font-size:13px; font-weight:700; line-height:1.8; white-space:nowrap}
.chip.blue{background:var(--blue-soft); color:var(--blue)} .chip.green{background:var(--green-soft); color:var(--green-ink)} .chip.gold{background:var(--gold-soft); color:var(--gold-ink)}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.live .dot{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
@media (max-width:860px){.intro .grid{grid-template-columns:1fr; gap:26px}}

/* 2 · hero */
.hero{position:relative; isolation:isolate; color:#fff; padding:84px 0 0; overflow:hidden; background:var(--blue-deep)}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; transform:scale(1.04)}
.hero-bg img.on{opacity:1; animation:kb 14s ease-out forwards}
@keyframes kb{to{transform:scale(1.12)}}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(270deg,rgba(18,40,62,.92) 0%,rgba(18,40,62,.78) 48%,rgba(18,40,62,.35) 100%)}
.hero-fx{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.hero .grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:44px; align-items:center}
.hero h1{color:#fff; font-size:clamp(30px,4.6vw,50px); font-weight:900; line-height:1.35; margin:14px 0 16px}
.h1-kick{display:block; font-size:clamp(17px,2vw,22px); font-weight:800; color:#FFD866; margin-bottom:8px; line-height:1.5}
.hero .sub{font-size:18px; color:rgba(255,255,255,.9); max-width:56ch}
.ticks{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:8px}
.ticks li{display:flex; gap:10px; align-items:flex-start}
.ticks li::before{content:""; flex:none; width:20px; height:20px; margin-top:5px; border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hero .chip.gold{background:rgba(230,178,23,.18); color:#FFD866; border:1px solid rgba(230,178,23,.45)}

/* reserve card (replaces the old booking form) */
.reserve{background:var(--card); color:var(--ink); border-radius:var(--r-card); padding:28px 26px 24px; box-shadow:0 22px 50px rgba(0,0,0,.28); border-top:5px solid var(--gold)}
.reserve h2{font-size:23px; font-weight:800; margin-bottom:6px}
.reserve .muted{color:var(--muted); font-size:14.5px}
.when{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; margin:18px 0 20px; padding:14px 16px; border-radius:var(--r-card); background:var(--blue-soft)}
.when .ic{grid-row:span 2; width:48px; height:48px; border-radius:10px; background:var(--blue); display:grid; place-items:center}
:root[data-theme="dark"] .when .ic svg{stroke:#0F171F} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .when .ic svg{stroke:#0F171F}}
.when b{font-size:17px; color:var(--ink-2)}
.when span{font-size:14px; color:var(--blue-ink); font-weight:600}
.reserve .btn{width:100%}
.reserve .free{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:14px; font-size:13.5px; color:var(--muted)}
.reserve .free span::before{content:"✓"; color:var(--green-ink); font-weight:800; margin-inline-end:5px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:56px; border-top:1px solid rgba(255,255,255,.18)}
.stats div{padding:20px 10px 22px; text-align:center; border-inline-start:1px solid rgba(255,255,255,.12)}
.stats div:first-child{border-inline-start:0}
.stats b{display:block; font-size:22px; font-weight:900; color:#FFD866}
.stats span{font-size:13.5px; color:rgba(255,255,255,.82)}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr} .hero{padding-top:52px}}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)} .stats div:nth-child(3){border-inline-start:0} .stats div{border-top:1px solid rgba(255,255,255,.12)}}

/* 3 · ticker */
.ticker{background:var(--blue); color:#fff; overflow:hidden; white-space:nowrap; font-weight:700; font-size:15px}
:root[data-theme="dark"] .ticker{color:#0F171F} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ticker{color:#0F171F}}
.ticker .track{display:inline-flex; gap:0; padding:13px 0; animation:tick 46s linear infinite}
.ticker span{padding:0 22px; position:relative}
.ticker span::after{content:""; position:absolute; inset-inline-end:-4px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--gold); transform:translateY(-50%)}
@keyframes tick{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none; flex-wrap:wrap; white-space:normal; justify-content:center}}

/* 4 · experience */
.exp{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:start}
.exp-side figure{margin:0}
.photo{border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow); background:var(--line)}
.photo img{width:100%; height:100%; object-fit:cover}
figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
.stat-card{margin-top:18px; background:var(--card); border:1px solid var(--line); border-inline-start:5px solid var(--gold); border-radius:var(--r-card); padding:18px 20px}
.stat-card b{display:block; font-size:30px; font-weight:900; color:var(--gold-ink); line-height:1.3}
.stat-card small{display:block; color:var(--muted); font-size:12.5px; margin-top:6px}
@media (max-width:860px){.exp{grid-template-columns:1fr}}

/* 5 · rules */
.rules{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.rule{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 20px; box-shadow:var(--shadow)}
.rule .n{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; font-weight:900; margin-bottom:12px}
.rule:nth-child(4n+1) .n{background:var(--blue-soft); color:var(--blue)}
.rule:nth-child(4n+2) .n{background:var(--green-soft); color:var(--green-ink)}
.rule:nth-child(4n+3) .n{background:var(--gold-soft); color:var(--gold-ink)}
.rule:nth-child(4n+4) .n{background:var(--blue-soft); color:var(--blue)}
.rule h3{font-size:18px; font-weight:800; margin-bottom:6px}
.rule p{font-size:15px; margin:0}
@media (max-width:980px){.rules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rules{grid-template-columns:1fr}}

/* photo band */
.band{position:relative; isolation:isolate; overflow:hidden; color:#fff; text-align:center; padding:96px 0}
.band img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; z-index:-2; will-change:transform}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(18,40,62,.86),rgba(18,40,62,.55))}
.band .kicker{color:#FFD866}
.band h2{color:#fff; font-size:clamp(26px,3.8vw,40px); font-weight:900; margin-bottom:22px}
.band .cap{display:block; margin-top:18px; font-size:13px; color:rgba(255,255,255,.75)}

/* 7 · relapse */
.fails{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.fail{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 20px; position:relative}
.fail .n{position:absolute; top:-14px; inset-inline-start:20px; width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800}
.fail h3{font-size:18px; font-weight:800; margin:8px 0 6px}
.fail p{font-size:15px; margin:0}
@media (max-width:860px){.fails{grid-template-columns:1fr; gap:26px}}

/* testimonials: large vertical cards with headline */
.tvs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; max-width:780px; margin-inline:auto}
.tv{margin:0; display:flex; flex-direction:column; gap:14px; min-width:0}
.tv-frame{border-radius:14px; overflow:hidden; background:#000; box-shadow:0 14px 34px rgba(31,68,104,.16); max-width:100%}
.tv video{width:100%; max-width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; display:block}
.tv figcaption{margin:0; display:grid; gap:6px; padding-inline:4px}
.tv-who{font-size:13px; font-weight:700; color:var(--blue)}
.tv-q{font-size:16px; font-weight:800; color:var(--ink-2); line-height:1.55; margin:0}
.tv-d{font-size:13.5px; color:var(--ink); line-height:1.8; margin:0}
@media (max-width:900px){
  .tvs{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(190px,56%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; gap:16px; -webkit-overflow-scrolling:touch}
  .tv{scroll-snap-align:start}
  .tv-q{font-size:15px}
}

/* how to join */
.how{margin:14px 0 20px; padding:0; list-style:none; counter-reset:h; display:grid; gap:12px}
.how li{counter-increment:h; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; font-size:15.5px}
.how li > div{padding-top:3px}
.how li::before{content:counter(h,persian); width:34px; height:34px; border-radius:50%; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; display:grid; place-items:center}
.how b{color:var(--ink-2)}

/* 8 · history */
.hist{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start}
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; inset-inline-start:9px; top:8px; bottom:8px; width:2px; background:var(--line)}
.tl li{position:relative; padding-inline-start:38px; padding-bottom:22px}
.tl li::before{content:""; position:absolute; inset-inline-start:0; top:7px; width:20px; height:20px; border-radius:50%; background:var(--card); border:4px solid var(--blue)}
.tl li:nth-child(3n+2)::before{border-color:var(--green)} .tl li:nth-child(3n)::before{border-color:var(--gold)}
.tl time,.tl .y{display:block; font-size:13.5px; font-weight:800; color:var(--blue)}
.tl b{display:block; font-size:17px; color:var(--ink-2)}
.tl p{font-size:15px; margin:2px 0 0}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gallery figure{margin:0}
.gallery .wide{grid-column:1 / -1}
.gallery .photo{aspect-ratio:16/10}
.gallery .wide .photo{aspect-ratio:1785/480}
.press{margin-top:30px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:20px 22px}
.press h3{font-size:17px; font-weight:800; margin-bottom:10px}
.press ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.press li{display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; font-size:15px; border-bottom:1px dashed var(--line); padding-bottom:8px}
.press li:last-child{border-bottom:0; padding-bottom:0}
.press li span{color:var(--muted); font-size:14px}
.src{font-size:13px; color:var(--muted); margin-top:14px}
@media (max-width:900px){.hist{grid-template-columns:1fr}}

/* 9 · agenda */
.agenda{display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
.agenda-pic{margin:0; order:-1}
.agenda-pic .photo{aspect-ratio:3/1; max-width:100%}
.agenda-pic .photo img{object-position:50% 70%}
.agenda .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.agenda .steps{grid-template-columns:1fr} .agenda-pic .photo{aspect-ratio:16/7}}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.steps li{display:grid; grid-template-columns:86px 1fr; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px}
.steps .t{font-weight:800; color:var(--blue); font-size:14.5px; background:var(--blue-soft); border-radius:var(--r-ctl); display:grid; place-items:center; height:40px}
.steps h3{font-size:17px; font-weight:800; margin-bottom:2px}
.steps p{margin:0; font-size:15px}
@media (max-width:480px){.steps li{grid-template-columns:1fr; gap:8px} .steps .t{justify-self:start; padding:0 12px}}

/* 10 · format & dates */
.fmt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
.box{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow)}
.box h3{font-size:20px; font-weight:800; margin:6px 0 10px}
.facts{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:14px 0 18px; font-size:15.5px}
.facts dt{color:var(--muted)} .facts dd{margin:0; font-weight:700; color:var(--ink-2)}
.dates{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px}
.dates li{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:var(--r-ctl); padding:10px 14px}
.dates li:first-child{border-color:var(--blue); background:var(--blue-soft)}
.dates b{color:var(--ink-2)} .dates span{font-size:14px; color:var(--muted)}
@media (max-width:860px){.fmt{grid-template-columns:1fr}}

/* 11 · love */
.love .grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:center}
.why{list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:10px}
.why li{display:flex; gap:12px; align-items:flex-start; font-size:16px}
.why li::before{content:"♥"; color:var(--green); font-size:15px; margin-top:2px}
.love .photo{aspect-ratio:4/3; max-width:100%}
.love .photo img{object-position:30% 60%}
@media (max-width:860px){.love .grid{grid-template-columns:1fr}}

/* 12 · close + countdown */
.close{text-align:center; background:var(--blue-band)}
.cd{display:flex; justify-content:center; gap:14px; margin:26px 0 28px; direction:rtl}
.cd div{min-width:96px; background:var(--card); border-radius:var(--r-card); padding:14px 10px; box-shadow:var(--shadow); border-bottom:4px solid var(--gold)}
.cd b{display:block; font-size:34px; font-weight:900; color:var(--blue); line-height:1.25}
.cd span{font-size:13.5px; color:var(--muted)}
@media (max-width:420px){.cd{gap:8px} .cd div{min-width:0; flex:1} .cd b{font-size:26px}}

/* footer */
footer{background:#1C2B39; color:rgba(255,255,255,.78); padding:46px 0 96px; font-size:14.5px}
footer .grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px}
footer img{height:40px; width:auto; margin-bottom:12px}
footer a{color:#fff}
footer nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.foot-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.foot-contact{background:#E6B217; color:#1C2B39}
.foot-about{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.foot-contact:hover,.foot-about:hover{transform:translateY(-1px)}
footer .fine{border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:18px; font-size:13px; color:rgba(255,255,255,.6)}
@media (max-width:760px){footer .grid{grid-template-columns:1fr}}

/* sticky mobile bar */
.sticky{position:fixed; inset-inline:0; bottom:0; z-index:45; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%); transition:transform .3s ease}
.sticky.show{transform:none}
.sticky p{margin:0; font-size:14px; font-weight:700; color:var(--ink-2); line-height:1.5}
.sticky p span{display:block; font-weight:500; color:var(--muted); font-size:12.5px}
@media (min-width:900px){.sticky{display:none}}

/* reserve dialog */
dialog.res{border:0; padding:0; border-radius:14px; width:min(480px,calc(100vw - 32px)); background:var(--card); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.res::backdrop{background:rgba(15,30,45,.6); backdrop-filter:blur(3px)}
.res .in{padding:28px 26px 24px; text-align:center}
.res .ok{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--green-soft); display:grid; place-items:center}
.res h2{font-size:22px; font-weight:800; margin-bottom:6px}
.res .when{text-align:start}
.res .acts{display:grid; gap:10px; margin-top:6px}
.res .note{font-size:13.5px; color:var(--muted); margin:14px 0 0}
.res .x{position:absolute; top:10px; inset-inline-start:10px; width:38px; height:38px; border-radius:50%; border:0; background:var(--ground); color:var(--ink); font-size:20px; cursor:pointer}

/* lightbox */
.zoomable{cursor:zoom-in; transition:transform .25s ease}
.zoomable:hover{transform:scale(1.02)}
.zoomable:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
dialog.lb{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; overflow:hidden}
dialog.lb::backdrop{background:rgba(8,16,24,.9)}
.lb figure{margin:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:56px 64px 24px}
.lb img{max-width:100%; max-height:calc(100vh - 120px); width:auto; height:auto; object-fit:contain; border-radius:var(--r-card); box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb figcaption{color:rgba(255,255,255,.88); font-size:15px; text-align:center; margin:0}
.lb-x,.lb-nav{position:fixed; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center}
.lb-x{top:14px; inset-inline-start:14px; width:44px; height:44px; font-size:26px}
.lb-nav{top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:30px}
.lb-prev{inset-inline-start:12px} .lb-next{inset-inline-end:12px}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}
@media (max-width:640px){.lb figure{padding:60px 12px 20px} .lb-nav{top:auto; bottom:14px; transform:none}}

/* scroll reveal (only applied by script below the first screen) */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none}}