/* remove Caveat from the import — we supply that face ourselves below */
@import url('https://fonts.googleapis.com/css2?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; }
}

/* ==========================================================================
   DISPLAY FACE — Apple Garamond Italic
   (replaces the old Caveat handwriting face site-wide)
   --------------------------------------------------------------------------
   Headings across the site are declared as font-family:'Caveat',cursive inside
   each page's own <style> block, which loads AFTER this file — so a normal
   override here would lose the cascade. Instead the "Caveat" family name is
   redefined below to serve Garamond Italic. Every existing rule, on every
   page, picks it up with no HTML changes.
   ========================================================================== */

/* normal + italic point at the same italic file, so a heading containing an
   <em> doesn't get double-slanted */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:local('Apple Garamond Italic'),
      local('Apple Garamond'),
      local('Garamond Italic'),
      local('Georgia Italic'),
      url('https://fonts.gstatic.com/s/ebgaramond/v33/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6g.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:local('Apple Garamond Italic'),
      local('Apple Garamond'),
      local('Garamond Italic'),
      local('Georgia Italic'),
      url('https://fonts.gstatic.com/s/ebgaramond/v33/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6g.woff2') format('woff2');
}
.drf-service-links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:.65rem}.drf-service-links a{white-space:nowrap}
@media (max-width:700px){.drf-service-links{gap:.5rem .9rem}.drf-service-links a{white-space:normal}}