/* =========================================================
   AYAMI SKIN CLINIC — Landing Page
   Palette sampled from the brand logo (#704933) + website
   Fonts mirror the reference site (lp.meditarina.in):
   Primary (headings):  Span -> Newsreader (serif)
   Secondary (body):    Google Sans -> DM Sans (sans)
   ========================================================= */

:root{
  /* Brand colours (from logo + ayamiskin.com) */
  --brown:        #704933;   /* primary — logo, headings, buttons */
  --brown-dark:   #593826;   /* hover / depth */
  --brown-soft:   #8a644f;   /* muted brown */
  --cream:        #ffefd7;   /* secondary warm background */
  --cream-soft:   #fbf5ec;   /* lightest section tint */
  --cream-line:   #ecdfca;   /* hairline borders on cream */
  --gold:         #fec42d;   /* accent */
  --gold-soft:    #ffeed4;
  --white:        #ffffff;
  --ink:          #2a211c;   /* headings on light */
  --body:         #5a4f47;   /* body text */
  --body-soft:    #897d73;

  /* Fonts */
  --font-primary:  'Span', 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-secondary:'Google Sans', 'Google Sans Text', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -24px rgba(89,56,38,.35);
  --shadow-sm: 0 8px 24px -14px rgba(89,56,38,.4);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 14px); -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-secondary);
  color: var(--body);
  background: var(--white);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }

h1,h2,h3,h4{ font-family: var(--font-primary); color: var(--ink); font-weight:400; line-height:1.18; letter-spacing:.2px; }
h1{ font-size: clamp(2rem, 5vw, 3.25rem); }
h2{ font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3{ font-size: clamp(1.15rem, 2vw, 1.4rem); }

.wrap{ width: min(100% - 40px, var(--maxw)); margin-inline:auto; }

.skip-link{ position:fixed; left:-999px; top:0; z-index:1000; background:var(--brown); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  --b: var(--brown);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--font-secondary); font-weight:600; font-size:1rem; letter-spacing:.2px;
  padding: 14px 26px; border-radius: 999px; cursor:pointer; border:2px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn-primary{ background: var(--brown); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--brown-dark); transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(89,56,38,.6); }
.btn-ghost{ background: transparent; color: var(--brown); border-color: var(--brown); }
.btn-ghost:hover{ background: var(--brown); color:#fff; transform: translateY(-3px); }
.btn-link{ padding: 10px 0; color: var(--brown); font-weight:600; position:relative; }
.btn-link::after{ content:"→"; transition: transform .3s var(--ease); display:inline-block; }
.btn-link:hover::after{ transform: translateX(6px); }
.btn-block{ width:100%; }

/* ---------- Eyebrow + headings ---------- */
.eyebrow{
  font-family: var(--font-secondary); font-weight:600; letter-spacing:2.2px; text-transform:uppercase;
  font-size:.74rem; color: var(--brown-soft); display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
}
.dot-sep{ width:5px; height:5px; border-radius:50%; background: var(--gold); display:inline-block; }
.accent-text{ color: var(--brown); font-style: italic; }
.section-head{ max-width: 760px; margin: 0 auto 2.6rem; text-align:center; }
.section-head h2{ margin-bottom: .8rem; }
.section-intro{ color: var(--body); font-size: 1.05rem; }
.section-cta{ text-align:center; margin-top: 2.6rem; }

/* ---------- Section rhythm ---------- */
.section{ padding: clamp(3.5rem, 7vw, 6rem) 0; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:200; height: var(--header-h);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-line);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled{ background: rgba(255,255,255,.95); box-shadow: 0 8px 26px -20px rgba(89,56,38,.5); }
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; }
.brand-logo{ height: 46px; width:auto; }  /* same size header + footer */
.main-nav{ display:flex; gap: 1.8rem; margin-left:auto; }
.main-nav a{ font-weight:500; font-size:.95rem; color: var(--ink); position:relative; padding: 4px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--gold); transition: width .3s var(--ease); }
.main-nav a:hover::after{ width:100%; }
.btn-header{ padding: 11px 22px; font-size:.95rem; }

/* =========================================================
   HERO  (full-bleed image + scrim, reference layout)
   ========================================================= */
.hero{ position:relative; min-height: 100vh; min-height: 100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-top: var(--header-h); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-placeholder{ width:100%; height:100%; border:none; border-radius:0; background: linear-gradient(135deg, #8a644f 0%, #5a3a28 55%, #3d2819 100%); }
.hero-placeholder::before{ background-color:#fff; opacity:.4; }
.hero-placeholder[data-label]::after{ color: rgba(255,255,255,.65); bottom:24px; }
/* uniform black overlay across the photo, slightly deeper on the left/bottom for text legibility */
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.32) 100%),
    linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
}
.hero-inner{ position:relative; z-index:2; flex:1 1 auto; display:flex; align-items:center; padding: 2.5rem 0 1.5rem; }
.hero-copy{ max-width: 640px; color:#fff; }
.eyebrow-light{ color: var(--gold); }
.hero-copy h1{ color:#fff; font-size: clamp(1.7rem, 3.6vw, 2.55rem); margin:.4rem 0 1.1rem; text-shadow: 0 2px 26px rgba(0,0,0,.28); }
.accent-text-light{ color: var(--gold); font-style:italic; }
.hero-copy .lead{ color: rgba(255,255,255,.92); max-width: 600px; }
.lead{ font-size: clamp(1.02rem,1.5vw,1.18rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top: 1.7rem; }

/* trust strip as its own band below the hero */
.trust-band{ background: #2a180d; }
.trust-band .trust-bar{ background: transparent; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.trust-band .trust-bar li{ padding: 1.7rem 1.6rem; }
.trust-band .trust-bar li:first-child{ padding-left:0; }
.trust-band .trust-bar li:last-child{ padding-right:0; }
.trust-bar{ display:grid; grid-template-columns: repeat(3,1fr);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:16px;
  overflow:hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.65); }
.trust-bar li{ padding: 1.15rem 1.4rem; display:flex; align-items:center; gap:.9rem; border-right:1px solid rgba(255,255,255,.12); }
.trust-bar li:last-child{ border-right:none; }
.tb-ico{ flex:none; width:40px; height:40px; border-radius:50%; background: rgba(254,196,45,.16); color: var(--gold); display:grid; place-items:center; }
.tb-ico svg{ width:21px; height:21px; }
.tb-text{ display:flex; flex-direction:column; gap:.12rem; }
.trust-bar strong{ color:#fff; font-weight:600; font-size:1.02rem; font-family: var(--font-secondary); }
.trust-bar .tb-text span{ color: rgba(255,255,255,.78); font-size:.88rem; line-height:1.4; }

/* arrow on the primary hero CTA */
.btn-arrow::after{ content:"→"; margin-left:.15rem; transition: transform .3s var(--ease); display:inline-block; }
.btn-arrow:hover::after{ transform: translateX(5px); }

/* trust list + inline CTA groups reused in other sections */
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 0; }
.trust-strip{ display:grid; gap:.7rem; }
.trust-strip li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.96rem; color: var(--ink); }
.trust-ico{ flex:none; width:22px; height:22px; border-radius:50%; background: var(--brown); color:#fff; font-size:.8rem; display:grid; place-items:center; margin-top:1px; }
.trust-strip strong{ font-weight:600; }

/* button variants for dark surfaces */
.btn-light-ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.btn-light-ghost:hover{ background:#fff; color: var(--brown); border-color:#fff; transform: translateY(-3px); }
.btn-gold{ background: var(--gold); color: var(--brown-dark); box-shadow: var(--shadow-sm); }
.btn-gold:hover{ background:#f6b70f; transform: translateY(-3px); }

/* ---------- Image placeholders ---------- */
.img-placeholder{
  position:relative; width:100%; border-radius: var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(112,73,51,.05) 0 14px, rgba(112,73,51,.02) 14px 28px),
    linear-gradient(135deg, var(--gold-soft), var(--cream));
  border: 1.5px dashed var(--cream-line);
  display:grid; place-items:center;
}
.img-placeholder::before{
  content:""; width:46px; height:46px; margin-bottom:46px;
  background: var(--brown); opacity:.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h3l1.5-2h7L17 5h3a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2zm8 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h3l1.5-2h7L17 5h3a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2zm8 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.img-placeholder[data-label]::after{
  content: attr(data-label); position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family: var(--font-secondary); font-size:.82rem; font-weight:500; letter-spacing:.3px; color: var(--brown-soft); padding:0 14px;
}
.ratio-portrait{ aspect-ratio: 4/5; }
.ratio-wide{ aspect-ratio: 16/10; }
.ratio-map{ aspect-ratio: 4/3; }

/* =========================================================
   PROBLEM
   ========================================================= */
.problem{ background: var(--white); }
.cards-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.card{
  background: var(--cream-soft); border:1px solid var(--cream-line); border-radius: var(--radius);
  padding: 2rem 1.7rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); }
.card-ico{ width:54px; height:54px; border-radius:14px; background: var(--brown); color:#fff; display:grid; place-items:center; font-size:1.5rem; margin-bottom:1.1rem; }
.card h3{ margin-bottom:.6rem; }
.bridge{
  margin-top: 2.6rem; background: var(--brown); color: #f7ecde; border-radius: var(--radius);
  padding: clamp(1.8rem,4vw,2.6rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.3rem;
  background-image: linear-gradient(135deg, var(--brown), var(--brown-dark));
}
.bridge p{ color: #f7ecde; font-size: clamp(1.05rem,2vw,1.28rem); max-width: 720px; font-family: var(--font-primary); line-height:1.5; }

/* =========================================================
   TREATMENTS
   ========================================================= */
.treatments{ background: linear-gradient(180deg, var(--cream-soft), var(--white)); }
.cards-treat{ display:flex; flex-wrap:wrap; justify-content:center; gap: 1.5rem; }
.cards-treat .treat-card{ flex: 0 0 calc((100% - 3rem) / 3); }
.treat-card{
  background:#fff; border:1px solid var(--cream-line); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.treat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.treat-card .img-placeholder{ border-radius:0; border:none; border-bottom:1px solid var(--cream-line); }
.treat-body{ padding: 1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.treat-body h3{ color: var(--brown); }
.treat-body p{ font-size:.95rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem; }
.chips li{ background: var(--cream); color: var(--brown); font-size:.76rem; font-weight:500; padding: 5px 11px; border-radius:999px; border:1px solid var(--cream-line); }
.treat-body .btn-link{ margin-top:auto; }
.disclaimer{ text-align:center; margin-top:2rem; font-size:.9rem; color: var(--body-soft); font-style:italic; }

/* =========================================================
   DOCTOR
   ========================================================= */
.doctor{ background: var(--white); }
.doctor-grid{ display:grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.doctor-media{ position:relative; }
.doctor-media .img-placeholder{ box-shadow: var(--shadow); }
.doctor-media::after{ content:""; position:absolute; inset:16px -16px -16px 16px; border:2px solid var(--gold); border-radius: var(--radius); z-index:-1; }
.doctor-copy{ max-width: 540px; }
.doctor-copy h2{ margin:.4rem 0 1.1rem; }
.doctor-copy p{ margin-bottom:1rem; }
.credential{ background: var(--cream-soft); border-left:3px solid var(--gold); padding:.9rem 1.1rem; border-radius:8px; font-size:.9rem; color: var(--body-soft); font-style:italic; margin-bottom:1.6rem; }

/* =========================================================
   WHY
   ========================================================= */
.why{ background: linear-gradient(180deg, var(--white), var(--cream-soft)); }
.cards-why{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.why-card{ background:#fff; border:1px solid var(--cream-line); border-radius: var(--radius); padding: 1.9rem 1.6rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.why-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.why-ico{ width:50px; height:50px; border-radius:50%; background: var(--gold-soft); color: var(--brown); display:grid; place-items:center; font-size:1.4rem; margin-bottom:1rem; }
.why-card h3{ color: var(--brown); margin-bottom:.5rem; font-size:1.18rem; }
.why-card p{ font-size:.95rem; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.steps{ background: linear-gradient(180deg, var(--white), var(--cream-soft)); }
.steps-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem; position:relative; list-style:none; }
/* connecting dashed timeline behind the number row */
.steps-row::before{ content:""; position:absolute; top:35px; left:12%; right:12%; height:2px; z-index:0;
  background-image: linear-gradient(90deg, var(--brown-soft) 55%, transparent 55%); background-size:16px 2px; background-repeat:repeat-x; opacity:.55; }
.step{ position:relative; z-index:1; text-align:center; padding:0 .3rem; background:transparent; border:none; }
.step-num{ width:70px; height:70px; margin:0 auto 1.3rem; border-radius:50%; background:#fff; border:2px solid var(--brown);
  color: var(--brown); font-family: var(--font-primary); font-size:1.6rem; display:grid; place-items:center;
  box-shadow: 0 10px 24px -12px rgba(89,56,38,.55); transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.step:hover .step-num{ background: var(--brown); color:#fff; transform: translateY(-5px); }
.step h3{ font-size:1.12rem; margin-bottom:.5rem; color: var(--brown); }
.step p{ font-size:.93rem; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ background: linear-gradient(180deg, var(--cream-soft), var(--white)); }
.rating-note{ font-size:.9rem; color: var(--body-soft); margin-top:.6rem; }
.rating-stars,.quote-stars{ color: var(--gold); letter-spacing:2px; }
.quote{ background:#fff; border:1px solid var(--cream-line); border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease); }
.quote:hover{ transform: translateY(-5px); }
.quote-stars{ font-size:1rem; margin-bottom:.9rem; }
.quote blockquote{ font-family: var(--font-primary); font-size:1.08rem; line-height:1.55; color: var(--ink); margin-bottom:1.2rem; }
.quote figcaption{ display:flex; flex-direction:column; }
.quote figcaption strong{ color: var(--brown); font-weight:600; }
.quote figcaption span{ font-size:.85rem; color: var(--body-soft); }

/* =========================================================
   LOCATION
   ========================================================= */
.location{ background: var(--white); }
.area-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; max-width: 820px; margin: 0 auto 2.4rem; }
.area-chips li{ font-size:.82rem; padding:7px 15px; }
.location-grid{ display:grid; grid-template-columns: .95fr 1.15fr; gap: clamp(1.6rem,3vw,2.4rem); align-items:stretch; }
.contact-card{ background: linear-gradient(140deg, var(--brown), var(--brown-dark)); color:#f7ecde; border-radius: var(--radius); padding: clamp(1.8rem,3vw,2.4rem); display:flex; flex-direction:column; box-shadow: var(--shadow); }
.contact-card h3{ color:#fff; font-size:1.5rem; margin-bottom:1.4rem; }
.contact-list{ display:grid; gap:1.1rem; margin-bottom:1.8rem; }
.contact-list li{ display:grid; grid-template-columns: 72px 1fr; gap:.7rem; align-items:start; }
.contact-list .cl{ font-size:.72rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color: var(--gold); padding-top:3px; }
.contact-list a, .contact-list li > span:not(.cl){ color:#f3e7d8; font-size:.98rem; line-height:1.5; }
.contact-list a:hover{ color:#fff; text-decoration:underline; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:auto; }
.location-media{ display:flex; }
.location-media .img-placeholder{ height:100%; min-height:360px; }
.location-map{ width:100%; flex:1; min-height:400px; border:0; border-radius: var(--radius); display:block; box-shadow: var(--shadow-sm); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background: linear-gradient(180deg, var(--white), var(--cream-soft)); }
.faq-wrap{ max-width: 820px; }
.faq-list{ display:grid; gap:.9rem; }
.faq-item{ background:#fff; border:1px solid var(--cream-line); border-radius: var(--radius-sm); overflow:hidden; transition: box-shadow .3s var(--ease); }
.faq-item[open]{ box-shadow: var(--shadow-sm); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.4rem; font-weight:600; color: var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color: var(--brown); transition: transform .3s var(--ease); line-height:1; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-a{ padding: 0 1.4rem 1.2rem; }
.faq-a p{ font-size:.96rem; }

/* =========================================================
   BOOKING
   ========================================================= */
.booking{ background: linear-gradient(135deg, var(--brown), var(--brown-dark)); color:#f7ecde; }
.booking-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; }
.booking-copy h2{ color:#fff; margin:.4rem 0 .9rem; }
.booking-copy .eyebrow{ color: var(--gold); }
.booking-copy > p{ color:#f0e0cf; font-size:1.05rem; }
.booking-trust{ margin-top:1.6rem; }
.booking-trust li{ color:#f7ecde; }
.booking-trust .trust-ico{ background: var(--gold); color: var(--brown-dark); }
.booking-form{ background:#fff; border-radius: var(--radius); padding: clamp(1.6rem,3vw,2.2rem); box-shadow: var(--shadow); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.86rem; font-weight:600; color: var(--ink); margin-bottom:.4rem; }
.field input,.field select{
  width:100%; padding: 13px 15px; border:1.5px solid var(--cream-line); border-radius:10px;
  font-family: var(--font-secondary); font-size:1rem; color: var(--ink); background: var(--cream-soft);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus{ outline:none; border-color: var(--brown); box-shadow: 0 0 0 3px rgba(112,73,51,.14); background:#fff; }
.field input::placeholder{ color: var(--body-soft); }
.form-note{ text-align:center; font-size:.86rem; color: var(--body-soft); margin-top:.9rem; }
.form-success{ text-align:center; margin-top:1rem; background: var(--gold-soft); color: var(--brown); padding:.8rem 1rem; border-radius:10px; font-weight:500; }

/* =========================================================
   FOOTER  (structure mirrors reference)
   ========================================================= */
.site-footer{ background: var(--cream); color: var(--body); border-top:1px solid var(--cream-line); }
.footer-top{ display:grid; grid-template-columns: 1.8fr 1fr; gap: 2.5rem; padding: clamp(2.6rem,5vw,3.6rem) 0 2.2rem; }
.footer-col{ justify-self: end; min-width: 240px; padding-left: 1.5rem; }
.footer-lockup{ display:inline-block; margin-bottom:1rem; }
.footer-lockup .brand-logo{ height:46px; }      /* same size as header */
.footer-tagline{ font-family: var(--font-secondary); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; font-size:.72rem; color: var(--brown-soft); margin-bottom:.8rem; }
.footer-blurb{ max-width: 420px; font-size:.95rem; }
.footer-col h4{ font-family: var(--font-secondary); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; font-size:.78rem; color: var(--brown); margin-bottom:1rem; }
.footer-col a{ display:block; margin-bottom:.7rem; color: var(--body); transition: color .25s var(--ease); font-size:.95rem; }
.footer-col a:hover{ color: var(--brown); }
.footer-phone{ font-family: var(--font-primary); font-size:1.4rem; color: var(--brown) !important; }
.footer-address address{ font-style:normal; line-height:1.6; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding:1.4rem 0; border-top:1px solid var(--cream-line); font-size:.85rem; color: var(--body-soft); }
.credit-link{ color: var(--brown); font-weight:600; }

/* =========================================================
   FLOATING CALL + WHATSAPP
   ========================================================= */
.float-btn{
  position:fixed; bottom: 26px; z-index:150; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff; box-shadow: 0 10px 26px -8px rgba(0,0,0,.4);
  transition: transform .3s var(--ease);
}
.float-call{ left: 22px; background: var(--brown); }
.float-wa{ right: 22px; background: #25D366; }
.float-btn:hover{ transform: scale(1.1) translateY(-2px); }
.float-btn .float-ico{ position:relative; z-index:2; display:grid; place-items:center; animation: wiggle 2.6s var(--ease) infinite; }
.float-pulse{ position:absolute; inset:0; border-radius:50%; z-index:1; }
.float-call .float-pulse{ box-shadow:0 0 0 0 rgba(112,73,51,.5); animation: pulse 2.2s infinite; }
.float-wa .float-pulse{ box-shadow:0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 16px rgba(0,0,0,0);} 100%{ box-shadow:0 0 0 0 rgba(0,0,0,0);} }
@keyframes wiggle{ 0%,88%,100%{ transform: rotate(0);} 91%{ transform: rotate(-12deg);} 94%{ transform: rotate(12deg);} 97%{ transform: rotate(-6deg);} }

/* =========================================================
   MOBILE STICKY BAR
   ========================================================= */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:180; display:none;
  grid-template-columns: repeat(3,1fr); background:#fff; border-top:1px solid var(--cream-line);
  box-shadow: 0 -8px 24px -16px rgba(89,56,38,.5); padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
}
.mbar-item{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.72rem; font-weight:600; padding:7px 4px; border-radius:12px; color: var(--brown); transition: background .2s var(--ease); }
.mbar-item:active{ background: var(--cream-soft); }
.mbar-book{ background: var(--brown); color:#fff; }
.mbar-wa{ color:#1aa851; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 960px){
  .doctor-grid,.location-grid,.booking-grid{ grid-template-columns:1fr; }
  .doctor-media{ width:100%; max-width:460px; margin-inline:auto; }
  .doctor-media::after{ inset:12px -12px -12px 12px; }
  .cards-3,.cards-why{ grid-template-columns: repeat(2,1fr); }
  .cards-treat .treat-card{ flex-basis: calc((100% - 1.5rem) / 2); }
  .location-media .img-placeholder{ min-height:300px; }
  .main-nav{ display:none; }

  /* steps become a vertical timeline */
  .steps-row{ grid-template-columns:1fr; gap:0; max-width:520px; margin-inline:auto; }
  .steps-row::before{ left:34px; right:auto; top:12px; bottom:12px; width:2px; height:auto;
    background-image: linear-gradient(180deg, var(--brown-soft) 55%, transparent 55%); background-size:2px 16px; background-repeat:repeat-y; }
  .step{ display:grid; grid-template-columns:70px 1fr; column-gap:1.2rem; row-gap:.25rem; text-align:left; padding:0 0 1.9rem; }
  .step-num{ grid-column:1; grid-row:1 / span 2; margin:0; }
  .step h3{ grid-column:2; align-self:center; margin:0; }
  .step p{ grid-column:2; }
  .step:last-child{ padding-bottom:0; }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media (max-width: 640px){
  :root{ --header-h: 64px; }
  .header-inner{ justify-content:center; }         /* logo centered on mobile */
  .brand-lockup{ margin-inline:auto; }
  .btn-header{ display:none; }                      /* header CTA hidden; sticky bar handles it */
  .brand-logo{ height:40px; }
  .footer-lockup .brand-logo{ height:40px; }        /* keep header + footer equal */

  .cards-3,.cards-why{ grid-template-columns:1fr; }
  .cards-treat .treat-card{ flex-basis: 100%; }

  /* hero (mobile) */
  .hero{ min-height: 100vh; min-height: 100svh; }
  .hero-copy{ max-width:100%; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
  .hero-scrim{ background: linear-gradient(to top, rgba(0,0,0,.72) 10%, rgba(0,0,0,.45) 70%); }
  .trust-bar{ grid-template-columns:1fr; }
  .trust-bar li{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
  .trust-bar li:last-child{ border-bottom:none; }
  .trust-band .trust-bar li{ padding:1.15rem 0; }

  /* location + contact card (mobile) */
  .contact-list li{ grid-template-columns:64px 1fr; }
  .location-media .img-placeholder{ min-height:240px; }
  .location-map{ min-height:280px; }

  /* footer (mobile) */
  .footer-top{ grid-template-columns:1fr; gap:1.8rem; text-align:center; }
  .footer-col{ justify-self:center; min-width:0; padding-left:0; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-col a{ margin-inline:auto; }
  .footer-address{ display:inline-block; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  .mobile-bar{ display:grid; }                      /* CTAs sticky at bottom */
  body{ padding-bottom: 74px; }                     /* clear the sticky bar */
  .float-btn{ bottom: 84px; width:52px; height:52px; } /* lift floats above sticky bar */
  .float-call{ left:14px; } .float-wa{ right:14px; }
  .section-head{ text-align:left; }
  .section{ padding: 3rem 0; }
}

@media (max-width: 380px){
  .mbar-item{ font-size:.66rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}