@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================
   DR. FARAAH'S COSMETIC & LASER CLINIC — GLOBAL STYLESHEET
   GOLD + WHITE ONLY (from logo)
   ============================================================ */
:root{
  --gold-light:#EFD98A;
  --gold:#C9A227;
  --gold-deep:#B08A1C;
  --gold-dark:#8A6D13;
  --gold-tint:rgba(201,162,39,.10);
  --gold-border:rgba(201,162,39,.30);
  --gold-grad:linear-gradient(135deg,#E7C85B 0%,#C9A227 48%,#B08A1C 100%);
  --gold-grad-deep:linear-gradient(140deg,#6E5713 0%,#8A6D13 55%,#A5821A 100%);

  --cream:#FFFFFF;
  --white:#FFFFFF;
  --grey:#FDF9ED;               /* champagne-white card wash */
  --grey-border:rgba(201,162,39,.22);

  --ink:#5A470C;                /* deep bronze-gold headings */
  --text:#675317;               /* body text (golden family) */
  --muted:#85702B;              /* small captions */

  --radius:18px;
  --shadow:0 18px 40px rgba(176,138,28,.14);
  --shadow-lg:0 26px 60px rgba(176,138,28,.22);
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  font-family:'Poppins',sans-serif;
  font-weight:400;
  color:var(--text);
  background:var(--white);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:600;line-height:1.25}
button{font-family:'Poppins',sans-serif;cursor:pointer}
::selection{background:var(--gold-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.section-container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}

/* ---------- NAVBAR ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:12px clamp(20px,4vw,60px);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:padding .35s ease,box-shadow .35s ease,background .35s ease;
}
.nav.scrolled{
  padding:8px clamp(20px,4vw,60px);
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 30px rgba(176,138,28,.12);
  border-bottom-color:var(--gold-border);
}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:78px;width:auto;transition:height .35s ease}
.nav.scrolled .logo-img{height:66px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-link{
  font-size:.82rem;font-weight:500;color:var(--text);
  letter-spacing:.2px;position:relative;padding:6px 0;white-space:nowrap;
  transition:color .25s ease;
}
.nav-link:hover{color:var(--gold-dark)}
.nav-link.active{color:var(--ink);font-weight:600}
.nav-link.active::after{
  content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;
  background:var(--gold);border-radius:2px;
}
.nav-cta{
  background:var(--gold-grad);color:#fff;
  padding:11px 26px;border-radius:999px;
  font-size:.84rem;font-weight:600;letter-spacing:.3px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(176,138,28,.30);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.nav-cta:hover{background:var(--gold-grad-deep);color:var(--gold-light);transform:translateY(-1px)}

/* Hamburger */
.mobile-menu-btn{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:10px;cursor:pointer;
}
.mobile-menu-btn span{
  width:26px;height:2.2px;background:var(--ink);border-radius:3px;
  transition:all .3s ease;
}

/* ---------- MOBILE MENU ---------- */
.mobile-menu{
  position:fixed;inset:0;background:var(--white);z-index:2000;
  display:flex;flex-direction:column;padding:24px 30px 34px;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.mobile-menu.open{transform:none}
.mobile-menu-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;
  border-bottom:1px solid var(--grey-border);padding-bottom:18px;
}
.mobile-logo{height:72px;width:auto}
.mobile-close{
  font-size:2.6rem;line-height:1;background:none;border:none;color:var(--ink);
  font-weight:300;cursor:pointer;padding:0 6px;
}
.mobile-menu-links{display:flex;flex-direction:column;flex:1}
.mobile-menu-links a{
  font-size:1.12rem;font-weight:500;color:var(--text);
  padding:14px 0;border-bottom:1px solid var(--grey-border);
  transition:color .2s ease,padding-left .25s ease;
}
.mobile-menu-links a:hover,.mobile-menu-links a.active{color:var(--gold-dark);padding-left:8px}
.mobile-cta{
  display:block;text-align:center;background:var(--gold-grad);color:#fff;
  padding:16px;border-radius:999px;font-weight:600;font-size:.95rem;margin-top:30px;
  box-shadow:0 10px 24px rgba(176,138,28,.30);
  transition:background .3s,color .3s;
}
.mobile-cta:hover{background:var(--gold-grad-deep);color:var(--gold-light)}

/* ---------- BUTTONS ---------- */
.btn-primary,.btn-secondary,.btn-light{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:16px 34px;border-radius:999px;
  font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.3px;
  transition:all .3s ease;white-space:nowrap;
}
.btn-primary{background:var(--gold-grad);color:#fff;border:none;box-shadow:0 10px 26px rgba(176,138,28,.32)}
.btn-primary:hover{background:var(--gold-grad-deep);color:var(--gold-light);transform:translateY(-2px);box-shadow:0 16px 34px rgba(176,138,28,.38)}
.btn-secondary{background:#fff;color:var(--ink);border:1.6px solid var(--gold-deep)}
.btn-secondary:hover{background:var(--gold-grad-deep);border-color:var(--gold-deep);color:var(--gold-light);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--gold-dark);border:none;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.btn-light:hover{background:var(--gold-tint);color:var(--ink);transform:translateY(-2px)}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:150px 0 90px;
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(201,162,39,.08), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(201,162,39,.06), transparent 60%),
    var(--white);
}
.hero-content{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding:0 clamp(20px,5vw,60px);
}
.hero-content.hero-centered{display:block;text-align:center;max-width:880px;margin:0 auto;padding:0 20px}
.hero-badge{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.badge-line{width:42px;height:2px;background:var(--gold);border-radius:2px;flex-shrink:0}
.badge-text{
  font-size:.73rem;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold-dark);font-weight:600;
}
.hero-centered .hero-badge,.hero-centered .hero-buttons,
.hero-centered .hero-social{justify-content:center}
.hero-title{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(52px,5.8vw,92px);line-height:1.02;
  color:var(--ink);margin-bottom:22px;max-width:100%;
}
.hero-title .title-line{display:block}
.hero-title .title-accent{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-subtitle{
  font-size:clamp(.98rem,1.2vw,1.08rem);color:var(--text);
  font-weight:300;line-height:1.9;max-width:580px;margin-bottom:30px;
}
.hero-subtitle strong{color:var(--ink);font-weight:500}
.hero-subtitle-zero{margin-bottom:0}
.hero-buttons{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.hero-social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-link{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--gold-border);background:#fff;color:var(--gold-dark);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;
}
.social-link:hover{background:var(--gold-grad);border-color:var(--gold);color:#fff;transform:translateY(-3px)}

/* Compact hero for inner pages */
.compact-hero{padding:168px 0 84px}

/* ---------- SECTION TITLES / UTILITIES ---------- */
.section-title{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(2.2rem,3.8vw,3.2rem);color:var(--ink);
  text-align:center;margin-bottom:50px;line-height:1.12;
}
.section-title.title-compact{margin-bottom:36px}

/* ---------- FAQ ---------- */
.faq-section{padding:100px 0;background:var(--white)}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:#fff;border:1px solid var(--gold-border);border-radius:16px;
  overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease;
}
.faq-item.open{border-color:var(--gold);box-shadow:0 14px 34px rgba(176,138,28,.12)}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 24px;background:none;border:none;cursor:pointer;
  font-family:'Caveat',cursive;font-size:26px;font-weight:600;line-height:1.2;
  text-align:left;color:var(--ink);
}
.faq-question .faq-icon{
  flex-shrink:0;color:var(--gold-dark);transition:transform .35s ease;
}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.faq-answer p{
  padding:0 24px 22px;font-size:.9rem;color:var(--text);
  font-weight:300;line-height:1.85;
}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--gold-grad-deep);
  color:rgba(255,255,255,.85);padding:48px 20px 42px;text-align:center;
}
.footer-links{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.footer-links a{font-size:.86rem;color:#fff;transition:color .25s ease}
.footer-links a:hover{color:var(--gold-light)}
.footer-divider{opacity:.5;font-size:.8rem;color:#fff}
.footer-copy{font-size:.8rem;font-weight:300;margin-bottom:6px;color:rgba(255,255,255,.82)}
.footer-credit{font-size:.78rem;font-weight:300;color:rgba(255,255,255,.75)}
.footer-credit a{color:var(--gold-light);font-weight:400;transition:color .25s}
.footer-credit a:hover{color:#fff}

/* ---------- ANIMATIONS ---------- */
.animate-fade-in{animation:fadeIn .9s ease both}
.animate-slide-up{animation:fadeIn 1s ease both}
.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.24s}
.delay-3{animation-delay:.36s}
.delay-4{animation-delay:.48s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- TOASTS ---------- */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{
  display:flex;align-items:flex-start;gap:12px;
  background:#fff;border:1px solid var(--gold-border);border-radius:14px;
  padding:14px 16px;min-width:300px;max-width:380px;
  box-shadow:0 18px 46px rgba(90,71,12,.18);
  transform:translateX(120%);opacity:0;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.toast.show{transform:none;opacity:1}
.toast-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-icon.error{background:var(--gold-tint);color:#A0100A}
.toast-icon.success{background:var(--gold-tint);color:var(--gold-dark)}
.toast-title{font-size:.87rem;font-weight:600;color:var(--ink);line-height:1.4}
.toast-message{font-size:.78rem;color:var(--text);font-weight:300;line-height:1.55;margin-top:2px}
.toast-close{background:none;border:none;font-size:1.25rem;color:var(--muted);cursor:pointer;line-height:1;margin-left:auto;padding:0 2px}

/* ---------- FORMS / CUSTOM SELECT ---------- */
.form-group{position:relative;margin-bottom:20px}
.form-group label{
  display:block;font-size:.74rem;color:var(--ink);margin-bottom:6px;
  font-weight:600;letter-spacing:.6px;text-transform:uppercase;
}
.form-group input,.form-group textarea{
  width:100%;padding:14px 16px;border:1px solid var(--gold-border);border-radius:12px;
  font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:300;color:var(--ink);
  background:#fff;outline:none;transition:border-color .3s ease;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--gold)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group.error input,.form-group.error textarea{border-color:#C0392B}
.form-error{display:none;font-size:.75rem;color:#C0392B;margin-top:6px;font-weight:400}
.form-group.error .form-error{display:block}

.custom-select{position:relative;width:100%}
.select-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:#fff;border:1px solid var(--gold-border);border-radius:12px;
  font-family:'Poppins',sans-serif;font-size:.9rem;color:var(--ink);cursor:pointer;
  text-align:left;transition:border-color .3s ease;
}
.select-trigger.placeholder .select-value{color:var(--muted);font-weight:300}
.select-trigger:hover,.select-trigger.active{border-color:var(--gold)}
.select-trigger svg{flex-shrink:0;color:var(--gold-dark);transition:transform .3s ease}
.select-trigger.active svg{transform:rotate(180deg)}
.select-options{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--gold-border);border-radius:12px;
  box-shadow:0 20px 44px rgba(90,71,12,.16);overflow:hidden;
  max-height:250px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.select-options.open{opacity:1;visibility:visible;transform:none}
.select-option{
  padding:13px 16px;font-size:.88rem;color:var(--text);font-weight:300;
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.select-option:hover{background:var(--gold-tint);color:var(--ink)}
.select-option.selected{background:var(--gold-tint);color:var(--gold-dark);font-weight:500}
.form-group.error .select-trigger{border-color:#C0392B}

/* ---------- MODALS ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:3000;padding:20px;
  background:rgba(90,71,12,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-close-btn{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  background:var(--gold-tint);border:none;color:var(--ink);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.modal-close-btn:hover{background:var(--gold);color:#fff}

/* ---------- FLOATING BACK ARROW ---------- */
.back-fab{
  position:fixed;left:22px;bottom:22px;z-index:1500;
  width:48px;height:48px;border-radius:50%;
  background:var(--gold-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(176,138,28,.38);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.back-fab:hover{background:var(--gold-grad-deep);color:var(--gold-light);transform:translateY(-3px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .mobile-menu-btn{display:flex}
  .hero-content{grid-template-columns:1fr;gap:40px}
  .hero{padding:130px 0 70px}
  .compact-hero{padding:140px 0 60px}
  .hero-badge,.hero-buttons,.hero-social{justify-content:center}
  .hero-subtitle{margin-left:auto;margin-right:auto}
  .hero-centered .hero-subtitle{margin:0 auto 30px}
}
@media(max-width:640px){
  .nav{padding:10px 16px}
  .logo-img{height:62px}
  .nav.scrolled{padding:8px 16px}
  .hero{padding:118px 0 56px}
  .btn-primary,.btn-secondary,.btn-light{width:100%;justify-content:center;padding:15px 20px}
  .hero-buttons{flex-direction:column;gap:12px}
  .toast-container{left:16px;right:16px}
  .toast{min-width:0;max-width:none}
}

/* ============================================================
   UI COMPONENTS — CUSTOM DROPDOWN + MODAL  (gold + white)
   ============================================================ */

/* ---------- Custom dropdown ---------- */
.dd{position:relative;width:100%}
.dd-native{display:none !important}      /* real <select> kept hidden for the value */
.dd-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:#fff;border:1px solid var(--grey-border);border-radius:12px;
  font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:300;color:var(--ink);
  text-align:left;cursor:pointer;transition:border .3s ease,box-shadow .3s ease;
}
.dd-toggle:hover{border-color:var(--gold-border)}
.dd.open .dd-toggle,.dd-toggle:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.dd-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-caret{flex-shrink:0;color:var(--gold-dark);display:flex;transition:transform .25s ease}
.dd.open .dd-caret{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:calc(100% + 8px);left:0;width:100%;z-index:60;
  background:#fff;border:1px solid var(--gold-border);border-radius:14px;
  box-shadow:0 22px 50px rgba(176,138,28,.20);
  padding:8px;margin:0;list-style:none;max-height:290px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  -webkit-overflow-scrolling:touch;
}
.dd-menu.dd-menu-up{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-option{
  padding:11px 14px;border-radius:9px;font-size:.87rem;font-weight:300;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .2s ease,color .2s ease;
}
.dd-option:hover,.dd-option.active{background:var(--gold-tint);color:var(--ink)}
.dd-option[aria-selected="true"]{color:var(--ink);font-weight:500;background:var(--grey)}
.dd-tick{color:var(--gold-dark);opacity:0;flex-shrink:0;display:flex}
.dd-option[aria-selected="true"] .dd-tick{opacity:1}
.dd-menu::-webkit-scrollbar{width:6px}
.dd-menu::-webkit-scrollbar-thumb{background:var(--gold-border);border-radius:99px}
.dd-menu::-webkit-scrollbar-track{background:transparent}

/* ---------- Modal ---------- */
.ui-modal-backdrop{
  position:fixed;inset:0;z-index:2000;background:rgba(90,71,12,.40);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.ui-modal-backdrop.open{opacity:1;visibility:visible}
.ui-modal{
  width:100%;max-width:430px;background:#fff;border:1px solid var(--gold-border);
  border-radius:22px;box-shadow:0 30px 70px rgba(90,71,12,.26);
  padding:38px 34px 30px;text-align:center;position:relative;
  max-height:calc(100vh - 40px);overflow-y:auto;
  transform:translateY(14px) scale(.97);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.ui-modal-backdrop.open .ui-modal{transform:translateY(0) scale(1)}
.ui-modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold-border);background:#fff;color:var(--gold-dark);
  font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
}
.ui-modal-close:hover{background:var(--grey);border-color:var(--gold)}
.ui-modal-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-tint);border:1px solid var(--gold-border);
  color:var(--ui-alert,var(--gold-dark));
}
.ui-modal h3{font-family:'Caveat',cursive;font-size:2rem;font-weight:700;color:var(--ink);line-height:1.15;margin-bottom:10px}
.ui-modal p{font-size:.88rem;color:var(--text);font-weight:300;line-height:1.8}
.ui-modal ul{text-align:left;margin:14px 0 0;padding:0;list-style:none}
.ui-modal ul li{position:relative;font-size:.85rem;color:var(--text);font-weight:300;line-height:1.65;padding:7px 0 7px 24px}
.ui-modal ul li::before{content:'';position:absolute;left:4px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--ui-alert,var(--gold-dark))}
.ui-modal.success ul li::before{background:var(--gold)}
.ui-modal-actions{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ui-modal-actions .btn-primary{min-width:150px;justify-content:center}

/* invalid field state */
.form-group input.is-invalid,
.form-group textarea.is-invalid,
.form-group select.is-invalid,
.form-group .dd.is-invalid .dd-toggle{
  border-color:var(--ui-alert,var(--gold-dark));
  box-shadow:0 0 0 3px var(--gold-tint);
}

@media(max-width:640px){
  .ui-modal{padding:32px 22px 24px;border-radius:18px}
  .ui-modal h3{font-size:1.75rem}
  .dd-menu{max-height:230px}
}

/* ============================================================
   PAGE TRANSITIONS + ENTRANCE ANIMATION  (every page)
   Entrance is pure CSS (no flash); js/script.js adds the
   fade-out curtain when leaving a page.
   ============================================================ */

html{background:#fff}

/* ---------- 1. page fades in on load ---------- */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .45s ease backwards}

/* ---------- 2. sections rise in, one after another ---------- */
@keyframes revealUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

body > section,
body > main > section{
  animation:revealUp .8s cubic-bezier(.16,1,.3,1) backwards;
}
body > section:nth-of-type(2),body > main > section:nth-of-type(2){animation-delay:.08s}
body > section:nth-of-type(3),body > main > section:nth-of-type(3){animation-delay:.16s}
body > section:nth-of-type(4),body > main > section:nth-of-type(4){animation-delay:.24s}
body > section:nth-of-type(5),body > main > section:nth-of-type(5){animation-delay:.32s}
body > section:nth-of-type(6),body > main > section:nth-of-type(6){animation-delay:.40s}
body > section:nth-of-type(n+7),body > main > section:nth-of-type(n+7){animation-delay:.46s}

/* ---------- 3. fade-out curtain used when navigating ---------- */
.page-curtain{
  position:fixed;inset:0;z-index:3000;background:#fff;
  pointer-events:none;opacity:0;transition:opacity .30s ease;
}
.page-curtain.on{opacity:1}

/* ---------- 4. honour reduced-motion / animations blocked ---------- */
@media (prefers-reduced-motion:reduce){
  body{animation:none !important}
  body > section,body > main > section{animation:none !important;opacity:1 !important;transform:none !important}
  .page-curtain{display:none !important}
}

/* ===== KILL ALL ENTRANCE MOTION ===== */
.animate-fade-in,.animate-slide-up,
.animate-fade-in *,.animate-slide-up *{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* ============================================================
   CONSISTENT HERO CASCADE — identical on every page
   (index uses .hero-left, other pages use .section-container)
   ============================================================ */

@keyframes revealUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* hero content blocks cascade in, in the same order everywhere */
body > section:first-of-type .section-container > *,
body > section:first-of-type .hero-left > *{
  animation:revealUp .8s cubic-bezier(.16,1,.3,1) backwards;
}

body > section:first-of-type .section-container > *:nth-child(1),
body > section:first-of-type .hero-left > *:nth-child(1){animation-delay:.05s}

body > section:first-of-type .section-container > *:nth-child(2),
body > section:first-of-type .hero-left > *:nth-child(2){animation-delay:.14s}

body > section:first-of-type .section-container > *:nth-child(3),
body > section:first-of-type .hero-left > *:nth-child(3){animation-delay:.23s}

body > section:first-of-type .section-container > *:nth-child(4),
body > section:first-of-type .hero-left > *:nth-child(4){animation-delay:.32s}

body > section:first-of-type .section-container > *:nth-child(5),
body > section:first-of-type .hero-left > *:nth-child(5){animation-delay:.41s}

/* homepage hero image block, slightly later */
body > section:first-of-type .hero-right{
  animation:revealUp .9s cubic-bezier(.16,1,.3,1) .30s backwards;
}

@media (prefers-reduced-motion:reduce){
  body > section:first-of-type .section-container > *,
  body > section:first-of-type .hero-left > *,
  body > section:first-of-type .hero-right{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}

/* ============================================================
   MOBILE FIXES — kill tap highlight + proper full-screen menu
   ============================================================ */

/* ---------- 1. no blue tap highlight anywhere ---------- */
*,
*::before,
*::after{
  -webkit-tap-highlight-color: transparent;
}

/* no accidental text-selection flash on tap (forms stay selectable) */
button, a, label,
.faq-question, .mobile-menu-links a,
.svc-card, .service-tile, .visit-card, .time-chip, .cal-day,
.cta-band, .p-ico, .btn-primary, .btn-secondary, .nav-cta, .mobile-cta{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea{ -webkit-user-select: text; user-select: text; }

/* softer colour if anything ever does get selected */
::selection{ background: rgba(201,162,39,.22); color: var(--ink); }


/* ---------- 2. mobile menu = full-screen overlay, page locked ---------- */

/* lock the page behind the menu */
body:has(.mobile-menu.open),
body.menu-open{
  overflow: hidden;
}

.mobile-menu{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 100vh;
  height: 100dvh;                     /* fixes the cut-off CTA */
  overflow: hidden;
  z-index: 2000;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu.open{
  display: flex;
  flex-direction: column;
}
.mobile-menu-header{ flex: 0 0 auto; }

/* links are the only scrollable part */
.mobile-menu-links{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;       /* stops scroll leaking to the page */
  -webkit-overflow-scrolling: touch;
}

/* CTA stays pinned to the bottom */
.mobile-cta{ flex: 0 0 auto; }

/* ============================================================
   HIDE SCROLLBARS EVERYWHERE (desktop + mobile) — scroll still works
   ============================================================ */
html, body, *{
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* legacy Edge / IE */
  scrollbar-color: transparent transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{ background: transparent; }

/* ============================================================
   MOBILE MENU — EVERYTHING FITS ONE SCREEN, NO SCROLLING
   ============================================================ */
@media (max-width: 768px){          /* ← match your hamburger breakpoint */

  .mobile-menu.open{
    display: flex;
    flex-direction: column;
    height: 100dvh;                 /* follows the browser UI */
    max-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* --- logo row: shares height with the viewport --- */
  .mobile-menu-header{
    flex: 0 0 clamp(74px, 13dvh, 104px);
    height: clamp(74px, 13dvh, 104px);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .mobile-logo{ max-height: calc(100% - 10px); width: auto; }

  /* --- 9 links split the leftover space equally --- */
  .mobile-menu-links{
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;               /* no scroll — must fit */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .mobile-menu-links a{
    flex: 1 1 0;                    /* equal share, ignores text length */
    min-height: 34px;
    max-height: clamp(40px, 7.4dvh, 60px);
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- CTA pinned, always visible --- */
  .mobile-cta{
    flex: 0 0 clamp(54px, 8.5dvh, 72px);
    height: clamp(54px, 8.5dvh, 72px);
    margin: 8px 24px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* --- very short phones (older SE / landscape) --- */
@media (max-width: 768px) and (max-height: 620px){
  .mobile-menu-header{ flex-basis: 62px; height: 62px; padding: 4px 20px; }
  .mobile-menu-links a{ min-height: 30px; max-height: 40px; font-size: .9rem; padding: 0 20px; }
  .mobile-cta{ flex-basis: 48px; height: 48px; margin: 6px 20px calc(6px + env(safe-area-inset-bottom)); font-size: .85rem; }
}