/* ==========================================================
   Bethel Dental Clinic: light + dark themes, mobile/tablet tuned
   Theme is set on <html data-theme="light|dark"> (see head script).
   ========================================================== */
:root{
  color-scheme:light;
  --bg:#fff;
  --bg-alt:#F3FAFA;
  --surface:#fff;
  --text:#1B2B3A;
  --muted:#566575;
  --heading:#0B2E4F;
  --line:#DCE8EC;
  --brand:#0B7F8A;          /* buttons: white text = 4.75:1 */
  --brand-hover:#096872;
  --link:#0B7F8A;
  --eyebrow:#0A6E78;
  --accent:#0E9AA7;         /* decorative only */
  --gold:#F6C453;
  --hero-a:#F3FAFA;
  --hero-b:#E6F5F6;
  --nav-bg:rgba(255,255,255,.94);
  --navy-a:#0B2E4F;
  --navy-b:#123F68;
  --footer:#071F36;
  --on-navy:#cfe3ee;
  --shadow:0 10px 30px rgba(11,46,79,.10);
  --img-filter:none;
  --hover-bg:#DDF2F4;
  --hover-border:#0E9AA7;
  --hover-title:#06565F;
  --hover-muted:#4A5968;
  --hover-shadow:0 16px 36px rgba(11,127,138,.22);
  --radius:16px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1826;
  --bg-alt:#0E2033;
  --surface:#122A40;
  --text:#E3ECF3;
  --muted:#A8BBCA;
  --heading:#FFFFFF;
  --line:#24425A;
  --brand:#0B7F8A;
  --brand-hover:#0E97A5;
  --link:#5FD3DE;
  --eyebrow:#6FD8E2;
  --accent:#33C4D1;
  --hero-a:#0A1826;
  --hero-b:#0F2A40;
  --nav-bg:rgba(10,24,38,.92);
  --navy-a:#0F3559;
  --navy-b:#15466F;
  --footer:#050F1A;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --img-filter:brightness(.92) contrast(1.02);
  --hover-bg:#1A4A6B;
  --hover-border:#5FD3DE;
  --hover-title:#8CE3EC;
  --hover-muted:#BFD0DD;
  --hover-shadow:0 16px 36px rgba(0,0,0,.5);
}
/* No-JS fallback: follow the OS setting when data-theme isn't set */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --bg:#0A1826;--bg-alt:#0E2033;--surface:#122A40;--text:#E3ECF3;--muted:#A8BBCA;--heading:#FFFFFF;--line:#24425A;
    --brand:#0B7F8A;--brand-hover:#0E97A5;--link:#5FD3DE;--eyebrow:#6FD8E2;--accent:#33C4D1;
    --hero-a:#0A1826;--hero-b:#0F2A40;--nav-bg:rgba(10,24,38,.92);--navy-a:#0F3559;--navy-b:#15466F;--footer:#050F1A;
    --shadow:0 10px 30px rgba(0,0,0,.35);--img-filter:brightness(.92) contrast(1.02);
    --hover-bg:#1A4A6B;--hover-border:#5FD3DE;--hover-title:#8CE3EC;--hover-muted:#BFD0DD;--hover-shadow:0 16px 36px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;font-size:clamp(16px,1.2vw + 11px,17px);-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}
img{max-width:100%;display:block;filter:var(--img-filter)}
img[src$=".svg"]{filter:none}
a{color:var(--link)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;color:var(--heading);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6.2vw,3.6rem)}
h1 em{font-style:normal;color:var(--link)}
h2{font-size:clamp(1.65rem,4.4vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.3rem)}
p{margin:0 0 1em}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.narrow{max-width:860px}
.center{text-align:center}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:.8em}
.eyebrow--light{color:#8fe3ea}
.lead{font-size:clamp(1.02rem,2vw,1.15rem);color:var(--muted)}
.lead--light{color:var(--on-navy)}
.opt{font-weight:400;color:var(--muted)}

/* Buttons (min 48px touch target) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7em 1.5em;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.2;text-align:center;transition:.2s}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(11,127,138,.28)}
.btn--primary:hover{background:var(--brand-hover);transform:translateY(-2px)}
.btn--ghost{border-color:var(--brand);color:var(--link);background:transparent}
:root[data-theme="dark"] .btn--ghost{border-color:var(--link)}
.btn--ghost:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.btn--light{background:#fff;color:#0B2E4F}
.btn--light:hover{background:#E6F5F6}
.btn--lg{min-height:54px;padding:.8em 1.8em;font-size:1.05rem}
.btn--block{width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Top bar & nav */
.topbar{background:var(--navy-a);color:#dbeaf3;font-size:.85rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.5em 0}
.topbar a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:20px;padding:.6em 0}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--accent);font-family:var(--serif);font-size:1.4rem;line-height:1}
.logo span{color:var(--heading)}
.logo small{display:block;font-family:var(--font);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.logo img{flex:none;width:38px;height:38px}
.logo--light span{color:#fff}.logo--light small{color:#9fc0d3}
.menu{display:flex;gap:20px;margin-left:auto}
.menu a{text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;padding:.4em 0}
.menu a:hover{color:var(--link)}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;flex:none}
.theme-toggle:hover{background:var(--bg-alt)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer;flex:none}
.burger span{display:block;width:24px;height:2px;background:var(--heading);margin:5px auto}

/* Hero */
.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(32px,6vw,56px) 0 clamp(48px,7vw,64px)}
.ticks{list-style:none;padding:0;margin:0 0 1.5em}
.ticks li{padding-left:1.9em;position:relative;margin-bottom:.55em;font-weight:500}
.ticks li::before{content:"✓";position:absolute;left:0;top:.15em;width:1.35em;height:1.35em;border-radius:50%;background:var(--brand);color:#fff;font-size:.8rem;display:grid;place-items:center}
.ticks--light li{color:#fff}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.hero__media{position:relative}
.hero__media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.offer{position:absolute;left:-24px;bottom:-22px;background:var(--surface);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;max-width:240px;border-left:5px solid var(--gold)}
.offer__tag{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--eyebrow)}
.offer strong{font-family:var(--serif);font-size:2rem;color:var(--heading);font-weight:400;line-height:1.1}
.offer span:not(.offer__tag){font-size:.9rem;color:var(--muted)}
.offer a{font-weight:700;font-size:.9rem;text-decoration:none;margin-top:4px}

/* Trust */
.trust{background:var(--navy-a);color:#fff}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0;text-align:center}
.trust strong{display:block;font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:400}
.trust span{font-size:.85rem;color:#c3d9e8}

/* Sections */
.section{padding:clamp(48px,8vw,84px) 0}
.section--tint{background:var(--bg-alt)}
.section--navy{background:linear-gradient(135deg,var(--navy-a),var(--navy-b));color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.head{max-width:760px;margin:0 auto clamp(28px,5vw,44px)}
.grid3,.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px)}
.cards3{margin-top:36px;text-align:left}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,28px);box-shadow:var(--shadow)}
.card__ico{font-size:2rem;margin-bottom:8px}

.svc{display:block;background:var(--surface);border-radius:var(--radius);padding:clamp(20px,3vw,28px);text-decoration:none;color:var(--text);border:1px solid var(--line);border-top:4px solid var(--accent);transition:.2s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc p{color:var(--muted)}
.svc span{font-weight:700;color:var(--link)}
.note{margin-top:32px;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.split--rev .split__media{order:2}
.split__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.features{list-style:none;padding:0;margin:0 0 1.6em}
.features li{padding:.7em 0 .7em 1.6em;border-bottom:1px solid var(--line);position:relative}
.features li::before{content:"";position:absolute;left:0;top:1.25em;width:10px;height:10px;border-radius:50%;background:var(--accent)}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);padding:0;margin:0 0 40px}
.steps li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:clamp(20px,3vw,28px)}
.steps span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:#0B2E4F;font-weight:800;margin-bottom:14px}
.steps p{color:var(--on-navy);margin:0}

/* Pricing */
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);text-align:center;position:relative;display:flex;flex-direction:column}
.plan--pop{border:2px solid var(--brand);box-shadow:var(--shadow);transform:translateY(-8px)}
:root[data-theme="dark"] .plan--pop{border-color:var(--link)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#0B2E4F;font-size:.75rem;font-weight:800;padding:.3em 1em;border-radius:999px;white-space:nowrap}
.price{font-family:var(--serif);font-size:2.4rem;color:var(--heading);margin:0}
.price--sm{font-size:1.6rem;margin:.4em 0 0}
.sub{color:var(--muted);font-size:.95rem}
.plan ul{list-style:none;padding:0;margin:8px 0 24px;text-align:left;flex:1}
.plan li{padding:.4em 0 .4em 1.5em;position:relative;font-size:.95rem}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.ptable{width:100%;border-collapse:collapse;margin:8px 0 22px;text-align:left;flex:1;font-size:.95rem}
.ptable td{padding:.65em 0;border-bottom:1px solid var(--line)}
.ptable td:last-child{text-align:right;font-weight:700;color:var(--heading);white-space:nowrap;padding-left:12px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.gallery img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,28px);box-shadow:var(--shadow)}
.quote p{font-size:1.02rem}
.quote cite{font-style:normal;font-size:.9rem;font-weight:700;color:var(--heading)}

/* FAQ */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:700;padding:18px 32px 18px 0;list-style:none;position:relative;color:var(--heading);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:6px}

/* Booking */
.book__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.callus{color:var(--on-navy)}.callus a{color:#fff;font-weight:700}
.form{background:var(--surface);color:var(--text);border-radius:24px;padding:clamp(20px,4vw,32px);box-shadow:0 20px 50px rgba(0,0,0,.25);border:1px solid var(--line)}
.form h3{margin-bottom:16px;color:var(--heading)}
.form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:14px}
.form input:not([type=checkbox]),.form select{width:100%;min-height:48px;margin-top:6px;padding:.7em 1em;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--text);background:var(--bg)}
.form input:focus,.form select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.form .check{display:flex;gap:12px;font-weight:400;font-size:.82rem;color:var(--muted);align-items:flex-start}
.form .check input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--brand)}
.form__ok{background:color-mix(in srgb,var(--brand) 16%,var(--surface));color:var(--heading);padding:12px;border-radius:10px;margin:14px 0 0;font-weight:600}
.form__err{color:#c0342b;margin:14px 0 0;font-weight:600}
:root[data-theme="dark"] .form__err{color:#ff8a80}

/* Footer */
.footer{background:var(--footer);color:#a9c3d4;padding:40px 0 72px;font-size:.9rem}
.footer__in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;align-items:start}
.footer h4{font-family:var(--font);font-weight:700;color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.footer a,.social a{color:#cfe3ee}
.footer__legal{border-top:1px solid rgba(255,255,255,.12);margin-top:20px;padding-top:14px;font-size:.78rem}

.mobilebar{display:none}

/* ---------- Tablet & below ---------- */
@media (max-width:1024px){
  .menu{gap:14px}
  .footer__in{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:900px){
  html{scroll-padding-top:72px}
  .hero__in,.split,.book__in{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__media img,.hero__media img{aspect-ratio:4/3}
  .offer{left:12px;bottom:-18px}
  .hero__btns .btn{flex:1 1 220px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .cards3,.steps{grid-template-columns:1fr}
  .grid3.pricing{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  #promise .grid3{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plan--pop{transform:none}
  .trust__in{grid-template-columns:repeat(2,1fr)}
  /* nav */
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--surface);padding:8px 20px 16px;border-bottom:1px solid var(--line);gap:0;box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu a{padding:14px 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .menu a:last-child{border-bottom:0}
  .burger{display:block}
  .nav__cta{display:none}
  .theme-toggle{margin-left:auto}
  .topbar span{display:none}.topbar__in{justify-content:center}
  /* sticky action bar in the thumb zone */
  .mobilebar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;position:fixed;bottom:0;left:0;right:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.14);z-index:60}
  .mobilebar .btn{padding:.6em .5em}
  .footer{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .wrap{width:min(1160px,100% - 32px)}
  .grid3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img:first-child{grid-column:1 / -1}
  .hero__btns .btn{flex:1 1 100%}
  .offer{max-width:210px;padding:12px 16px}
  .offer strong{font-size:1.7rem}
  .trust__in{gap:14px 10px;padding:18px 0}
  .footer__in{grid-template-columns:1fr;gap:20px}
  .form{border-radius:18px}
  .faq details{padding:0 16px}
}
@media (max-width:380px){
  .logo{font-size:1.25rem}
  .mobilebar .btn{font-size:.9rem}
}
@media (hover:none){
  .btn--primary:hover,.svc:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ==========================================================
   Motion + card hover effects (light & dark via tokens)
   ========================================================== */
:root{--ease:cubic-bezier(.22,.8,.3,1)}

/* --- Page-load entrance (hero) --- */
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
@keyframes imgIn{from{opacity:0;scale:1.07}to{opacity:1;scale:1}}
@keyframes pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes fadeDown{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}
.hero__copy>*{animation:rise .8s var(--ease) both}
.hero__copy>:nth-child(1){animation-delay:.05s}
.hero__copy>:nth-child(2){animation-delay:.15s}
.hero__copy>:nth-child(3){animation-delay:.25s}
.hero__copy>:nth-child(4){animation-delay:.35s}
.hero__copy>:nth-child(5){animation-delay:.45s}
.hero__media img{animation:imgIn 1.1s var(--ease) .1s both}
.offer{animation:pop .6s var(--ease) .9s both,float 6s ease-in-out 1.6s infinite}
h1 em{position:relative;display:inline-block}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.08em;border-radius:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:draw .8s var(--ease) 1s forwards}
.faq details[open] p{animation:fadeDown .35s var(--ease)}

/* --- Scroll reveal (classes added by script.js) --- */
.reveal{opacity:0;translate:0 26px;
  transition:opacity .7s var(--ease) var(--d,0s),translate .7s var(--ease) var(--d,0s),
             transform .28s var(--ease),background-color .28s,border-color .28s,box-shadow .28s,color .28s}
.reveal.in{opacity:1;translate:none}

/* --- Cards: smooth base transitions --- */
.card,.svc,.plan,.quote,.faq details,.steps li{transition:transform .28s var(--ease),background-color .28s,border-color .28s,box-shadow .28s,color .28s}
.card__ico,.svc span{display:inline-block;transition:transform .28s var(--ease),color .28s}
.gallery img,.split__media img{transition:transform .4s var(--ease),box-shadow .3s}
.faq details[open]{border-color:var(--hover-border)}

/* --- Card hover: lift + brand-tinted background + accent border --- */
@media (hover:hover){
  .card:hover,.svc:hover,.plan:hover,.quote:hover,.faq details:hover{
    transform:translateY(-6px);background:var(--hover-bg);border-color:var(--hover-border);box-shadow:var(--hover-shadow)}
  .plan--pop:hover{transform:translateY(-14px)}
  .card:hover h3,.svc:hover h3,.plan:hover h3,.quote:hover cite,.faq details:hover summary{color:var(--hover-title)}
  .card:hover p,.svc:hover p,.quote:hover p,.faq details:hover p,.plan:hover .sub{color:var(--hover-muted)}
  .svc:hover span{color:var(--hover-title);transform:translateX(6px)}
  .card:hover .card__ico{transform:scale(1.2) rotate(-8deg)}
  .steps li:hover{transform:translateY(-6px);background:rgba(255,255,255,.17);border-color:var(--gold);box-shadow:0 16px 36px rgba(0,0,0,.35)}
  .steps li:hover span{transform:scale(1.1)}
  .gallery img:hover,.split__media img:hover{transform:scale(1.03);box-shadow:var(--hover-shadow)}
  .logo:hover img{transform:rotate(-8deg) scale(1.08)}
  .menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  .menu a:hover::after{transform:scaleX(1)}
}
.logo img{transition:transform .3s var(--ease)}
.menu a{position:relative}
.steps span{transition:transform .28s var(--ease)}

/* Touch + keyboard feedback (no hover on phones) */
.card:active,.svc:active,.plan:active,.quote:active{background:var(--hover-bg);border-color:var(--hover-border)}
.svc:focus-visible{background:var(--hover-bg);border-color:var(--hover-border)}
.faq details:focus-within{border-color:var(--hover-border)}

/* Primary button shine sweep */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease);pointer-events:none}
@media (hover:hover){.btn--primary:hover::after{transform:translateX(130%)}}

@media (max-width:900px){.menu a::after{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;translate:none!important}
  h1 em::after{transform:scaleX(1)}
}

/* ==========================================================
   Text animation (words rise from a mask, labels ease open,
   list items slide in, prices count up). Added by script.js.
   ========================================================== */
@keyframes track{from{opacity:0;letter-spacing:.34em}to{opacity:1;letter-spacing:.12em}}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .18em;margin:-.1em 0 -.18em}
.wi{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease) calc(var(--i,0)*.055s)}
.split-in .wi{transform:none}
/* hero headline is split by words, so skip the whole-block rise */
.hero__copy>h1{animation:none}
/* hero eyebrow: typewriter type-in with a blinking cursor */
.hero__copy>.eyebrow{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:.08em solid var(--brand);animation:typewriter 3.4s steps(36,end) .2s both, blink .7s steps(1) 3.6s infinite}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@media (prefers-reduced-motion:reduce){.hero__copy>.eyebrow{animation:none;border-right:none;overflow:visible;white-space:normal}}
/* eyebrow labels ease open */
.hero__copy>.eyebrow{animation:track 1s var(--ease) .05s both}
.reveal.in .eyebrow{animation:track 1s var(--ease) both}
/* list items and copy slide in one after another once the block is revealed */
.reveal.in .features li,.reveal.in .ticks li,.reveal.in .plan li,.reveal.in .lead,.reveal.in .callus{animation:rise .7s var(--ease) both}
.reveal.in .features li:nth-child(1),.reveal.in .plan li:nth-child(1){animation-delay:.25s}
.reveal.in .features li:nth-child(2),.reveal.in .plan li:nth-child(2){animation-delay:.33s}
.reveal.in .features li:nth-child(3),.reveal.in .plan li:nth-child(3){animation-delay:.41s}
.reveal.in .features li:nth-child(4),.reveal.in .plan li:nth-child(4){animation-delay:.49s}
.reveal.in .features li:nth-child(5){animation-delay:.57s}
.reveal.in .lead{animation-delay:.15s}
.reveal.in .ticks li:nth-child(1){animation-delay:.3s}
.reveal.in .ticks li:nth-child(2){animation-delay:.4s}
.reveal.in .ticks li:nth-child(3){animation-delay:.5s}
@media (prefers-reduced-motion:reduce){.wi{transform:none!important}}

/* ---- Compact booking form ---- */
.book__in{grid-template-columns:1fr minmax(0,420px);justify-content:space-between}
.form{padding:clamp(16px,2.6vw,22px);border-radius:18px}
.form h3{font-size:1.2rem;margin-bottom:8px}
.form label{font-size:.85rem;margin-bottom:8px}
.form input:not([type=checkbox]),.form select{min-height:42px;margin-top:3px;padding:.45em .8em;border-radius:8px}
.form .check{font-size:.74rem;line-height:1.45;gap:10px;margin-bottom:10px}
.form .check input{width:18px;height:18px}
.form .btn{min-height:46px;font-size:.98rem}
.form__ok,.form__err{font-size:.9rem;margin-top:10px}
@media (max-width:900px){.book__in{grid-template-columns:1fr}.form{max-width:520px;width:100%;margin-inline:auto}}

/* ---- Legal pages (privacy.html, terms.html) ---- */
.legal{padding-top:clamp(32px,6vw,64px);padding-bottom:clamp(40px,8vw,80px)}
.legal h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:.2em}
.legal h2{font-size:1.4rem;margin:1.8em 0 .5em}
.legal .meta{color:var(--muted);font-size:.9rem}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.5em}

.footer .logo{margin-bottom:8px}

/* ---- Bullet point hover animation ---- */
.features li{border-radius:8px;transition:padding-left .3s var(--ease),background-size .45s var(--ease),border-color .3s,color .3s;
  background-image:linear-gradient(90deg,var(--hover-bg),transparent);background-repeat:no-repeat;background-size:0% 100%}
.features li::before{transition:transform .3s var(--ease),background-color .3s,box-shadow .3s}
.features li strong{transition:color .3s}
.ticks li{transition:transform .3s var(--ease)}
.ticks li::before{transition:transform .3s var(--ease),background-color .3s,box-shadow .3s}
.plan li{transition:transform .25s var(--ease)}
.plan li::before{transition:transform .25s var(--ease)}
@media (hover:hover){
  .features li:hover{padding-left:2.2em;background-size:100% 100%;border-bottom-color:var(--hover-border)}
  .features li:hover::before{transform:scale(1.6);background:var(--gold);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 32%,transparent)}
  .features li:hover strong{color:var(--hover-title)}
  .ticks li:hover{transform:translateX(6px)}
  .ticks li:hover::before{transform:scale(1.18) rotate(-10deg);background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
  .plan li:hover{transform:translateX(4px)}
  .plan li:hover::before{transform:scale(1.35)}
}
/* touch feedback */
.features li:active{padding-left:2.2em;background-size:100% 100%}
.features li:active::before{transform:scale(1.6);background:var(--gold)}