/* ==========================================================================
   AJ Multispeciality Dental Clinic - Pediatric Dentistry Landing Page
   Theme: white + neutral shades. Green (sampled from the logo) is the
   single accent, reserved for icons, the primary CTA and small highlights.
   Type: Manrope (primary) / Google Sans (secondary, Poppins fallback)
   ========================================================================== */

:root{
  /* accent - the only chromatic colour on the page, sampled from the logo.
     --accent is the logo green itself (icons, kickers, dots, rules).
     --accent-600/700 are deeper shades used where white text sits on top,
     so the button label keeps a readable contrast ratio. */
  --accent:      #50A51F;   /* exact logo green */
  --accent-600:  #3A8017;   /* solid fills  - white text 4.9:1 */
  --accent-700:  #2F6A12;   /* fill hover   - white text 6.6:1 */
  --accent-100:  #D9EDC9;
  --accent-50:   #F1F8EA;

  /* red, for the "what goes wrong" markers - not a brand colour, used only
     where a point is explicitly negative so it never reads as an accent. */
  --danger:      #D93025;   /* glyph on the tint - 4.9:1 */
  --danger-100:  #F8D7D4;
  --danger-50:   #FDF0EF;

  /* neutrals */
  --ink:        #111214;
  --ink-2:      #3C4046;
  --muted:      #63686F;   /* 5.6:1 on white, 5.4:1 on --surface  (was 4.26:1) */
  --muted-2:    #6E737B;   /* 4.8:1 on white, 4.6:1 on --surface  (was 2.64:1) */
  --line:       #EAEBED;
  --line-2:     #F2F3F4;

  --bg:         #FFFFFF;
  --surface:    #FAFAFA;
  --surface-2:  #F6F7F8;

  /* type */
  --f1: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f2: "Google Sans", "Google Sans Text", "Product Sans", "Poppins", var(--f1);

  /* layout */
  --header-h: 82px;
  --logo-h: 50px;   /* one source of truth: header + footer logos.
                       The mark is near-square (743x645), so it needs more
                       height than the old wide wordmark to read clearly. */
  --shell: 1140px;
  --pad: 24px;

  /* vertical rhythm - generous by design */
  --sec-y: clamp(84px, 6vw + 44px, 156px);
  --head-gap: clamp(48px, 4.5vw, 84px);
  --grid-gap: clamp(20px, 2vw, 30px);

  /* boxes are near-square; pill buttons and circular icons keep their own shape */
  --r-sm: 2px;
  --r: 3px;
  --r-lg: 3px;
  --r-xl: 3px;

  --sh-1: 0 1px 2px rgba(17,18,20,.03), 0 6px 20px rgba(17,18,20,.04);
  --sh-2: 0 2px 6px rgba(17,18,20,.04), 0 18px 44px rgba(17,18,20,.07);
  --sh-3: 0 24px 64px rgba(17,18,20,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.45,0,.55,1);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* anchor targets stop below the sticky header instead of under it */
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  margin:0;
  font-family:var(--f1);
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; fill:currentColor; flex:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button,input,select{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  margin:0; color:var(--ink); font-family:var(--f1);
  font-weight:700; line-height:1.16; letter-spacing:-.022em;
}
h1{ font-size:clamp(2.05rem, 1.5rem + 2.3vw, 3.15rem); line-height:1.1; letter-spacing:-.032em; }
h2{ font-size:clamp(1.5rem, 1.2rem + 1.35vw, 2.15rem); letter-spacing:-.026em; }
h3{ font-size:clamp(1.04rem, 1rem + .22vw, 1.14rem); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:var(--sec-y) 0; }

/* clip-based hiding, so the link never contributes to document scroll width */
.skip-link{
  position:absolute; left:0; top:0; z-index:200;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--accent-600); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip-link:focus{ width:auto; height:auto; clip-path:none; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- shared bits ---------- */

.sec-head{ max-width:640px; margin:0 auto var(--head-gap); text-align:center; }
.sec-sub{
  margin-top:18px; font-family:var(--f2);
  font-size:clamp(.98rem,.95rem + .16vw,1.05rem); line-height:1.75; color:var(--muted);
}

.arw{ display:inline-block; transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f2); font-weight:600; font-size:.94rem; line-height:1;
  padding:14px 24px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ font-size:1.05em; }
.btn-lg{ padding:17px 30px; font-size:.99rem; }
.btn-sm{ padding:10px 18px; font-size:.86rem; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--accent-600); color:#fff; }
.btn-primary:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,128,23,.26); }

.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }


.btn-white{ background:var(--accent-600); color:#fff; }
.btn-white:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,128,23,.26); }

.btn-clear{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-clear:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* the frosted white bar is present from the first pixel, so it overlays the
   hero as well. .is-solid (toggled in script.js past the hero) only deepens
   it slightly once there is no photo behind it. */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-solid{ background:rgba(255,255,255,.94); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h); }
.brand img{ height:var(--logo-h); width:auto; object-fit:contain; }

.header-actions{ display:flex; align-items:center; gap:10px; }

/* icon-only call button in the header */
.btn-icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r);
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
  font-size:19px; flex:none;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-icon:hover{ color:var(--accent-600); border-color:var(--accent-600); transform:translateY(-2px); }



/* ==========================================================================
   HERO - full-bleed banner. The photo carries its subject on the right and
   an empty wall on the left, so the copy sits in that empty half and a
   left-to-right white scrim guarantees text contrast over it.
   NOTE: the +/- inside clamp() must be surrounded by whitespace, otherwise the
   whole declaration is invalid and the rule is silently dropped.
   ========================================================================== */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg);
       margin-top:calc(-1 * var(--header-h)); }

.hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:68% center;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  /* left-to-right scrim that keeps the hero copy legible over the photo */
  background:
    linear-gradient(96deg,
    #fff 0%,
    rgba(255,255,255,.97) 26%,
    rgba(255,255,255,.86) 42%,
    rgba(255,255,255,.42) 56%,
    rgba(255,255,255,.06) 70%,
    rgba(255,255,255,0) 80%);
}

.hero-inner{
  position:relative; z-index:2;
  min-height:calc(clamp(520px, 46vw, 660px) + var(--header-h));
  display:flex; align-items:center;
  /* the header floats over the hero, so clear it at the top */
  padding-block:calc(var(--header-h) + clamp(40px, 3vw + 16px, 64px)) clamp(56px, 4vw + 24px, 88px);
}
.hero-copy{ max-width:min(54%, 600px); }
/* both are pass-through wrappers above 720px, so the desktop hero is unchanged.
   They only become real boxes on phones, where the copy splits either side of
   the portrait photo. */
.hero-pic{ display:contents; }
.hero-text{ display:contents; }
.hero-copy .lede{
  margin-top:26px; font-family:var(--f2);
  font-size:clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.75; color:var(--muted); max-width:44ch;
}
.nb{ white-space:nowrap; }
.hl{ color:var(--accent); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.problem{ background:var(--surface); }
.prob-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(44px,5vw,92px); align-items:center; }
.prob-media{ position:relative; }
.prob-photo{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/4.2; background:var(--surface);
}
.prob-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.prob-badge{
  position:absolute; right:-14px; bottom:-26px; max-width:252px;
  /* translucent so the photo reads through; the blur keeps the text crisp */
  background:rgba(17,18,20,.82);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  color:#fff; border-radius:var(--r); padding:20px 22px; box-shadow:var(--sh-3);
}
.prob-badge strong{ display:block; font-size:.92rem; margin-bottom:6px; color:#fff; }
.prob-badge span{ font-family:var(--f2); font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.78); }
.prob-copy p{ margin-top:22px; font-family:var(--f2); font-size:1rem; line-height:1.8; color:var(--muted); max-width:50ch; }
.prob-list{ display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line); }
.prob-list li{
  display:flex; align-items:center; gap:14px; padding:15px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--f2); font-size:.94rem; color:var(--ink-2);
}
.prob-list .x{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--danger-50); border:1px solid var(--danger-100);
  color:var(--danger); font-size:18px; font-weight:600; line-height:1; flex:none;
}

/* ==========================================================================
   WHY - stacked success-story rows. A sticky label rail on the left, then one
   full-width row per reason: image, counter, title, description, chip.
   Each row reveals on scroll, so they arrive one at a time as you move down.
   ========================================================================== */
.why{ background:var(--bg); }
.why-grid{ display:grid; grid-template-columns:190px 1fr; gap:clamp(24px,3vw,56px); align-items:start; }

/* the label tracks the list, as on the reference */
.why-rail{ position:sticky; top:calc(var(--header-h) + 28px); }
.why-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f1); font-weight:700; font-size:clamp(1.35rem,1.1rem + .85vw,1.75rem); color:var(--ink); letter-spacing:-.026em;
}
.why-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none; }

.why-list{ display:grid; }
.why-item{
  display:grid; grid-template-columns:1.32fr .68fr; gap:clamp(24px,3vw,52px);
  align-items:start;
  padding-bottom:clamp(34px,3.4vw,52px);
  border-bottom:1px dotted var(--line-2);
}
.why-item + .why-item{ padding-top:clamp(34px,3.4vw,52px); }
.why-item:last-child{ border-bottom:0; padding-bottom:0; }

/* image sits pre-zoomed in a clipped 3:2 frame */
.why-media{
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:3/2; background:var(--surface);
}
.why-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.08);
}

.why-body{ padding-top:2px; }
.why-count{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  font-family:var(--f2); font-size:.72rem; color:var(--muted-2);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.why-num{ border:1px solid var(--line); border-radius:2px; padding:2px 7px; color:var(--muted); }

.why-title{
  font-size:clamp(1.24rem,1.05rem + .7vw,1.6rem); line-height:1.2; letter-spacing:-.026em;
  color:var(--ink); margin-bottom:12px;
}
.why-desc{
  font-family:var(--f2); font-size:.95rem; line-height:1.75; color:var(--muted); max-width:42ch;
}
.why-chip{
  display:inline-block; margin-top:22px;
  font-family:var(--f2); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700);
  background:var(--accent-50); border:1px solid var(--accent-100);
  border-radius:2px; padding:6px 11px;
}

/* ---- 7th row: full-width accent panel ---- */
.tcard-wide{
  display:flex; align-items:center; gap:clamp(24px,3vw,52px);
  margin-top:clamp(44px,4vw,68px);
  padding:clamp(28px,2.6vw,40px);
  background:var(--surface);
  border:1px solid var(--line); border-radius:3px;
}
.tw-text{ flex:1 1 auto; }
.tcard-label{
  display:inline-block; font-family:var(--f2); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-700);
}
.tcard-title{ margin-top:12px; font-size:clamp(1.16rem,1rem + .45vw,1.4rem); color:var(--ink); letter-spacing:-.024em; }
.tcard-copy{ margin-top:10px; max-width:62ch; font-family:var(--f2); font-size:.94rem; line-height:1.72; color:var(--muted); }
.tcard-wide .btn{ flex:none; }

/* ==========================================================================
   HOW IT WORKS - image left, statement + steps + full-width CTA right
   ========================================================================== */
.how{ background:var(--bg); }
.how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,5vw,88px); align-items:center; }

.how-photo{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1/1; background:var(--surface);
  display:grid; place-items:center; padding:clamp(22px,3vw,48px);
}
.how-photo img{ width:100%; height:100%; object-fit:contain; }

.how-copy h2{
  max-width:24ch;
  font-size:clamp(1.12rem, .95rem + .68vw, 1.5rem);
}

.how-steps{ position:relative; margin-top:clamp(30px,3vw,42px); }
/* hairline rail linking the numbered badges */
.how-steps::before{
  content:""; position:absolute; left:17px; top:18px; bottom:18px; width:1px;
  background:linear-gradient(180deg, var(--accent-100), var(--line));
}
.how-step{
  position:relative; display:flex; align-items:flex-start; gap:20px;
  padding:0 0 clamp(24px,2.4vw,32px);
}
.how-step:last-child{ padding-bottom:0; }
.hs-n{
  position:relative; z-index:1; flex:none;
  width:35px; height:35px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--accent-100); color:var(--accent-700);
  font-family:var(--f1); font-weight:700; font-size:.78rem; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.hs-body{ padding-top:5px; }
.hs-body h3{ margin-bottom:7px; font-size:clamp(1.06rem,1rem + .3vw,1.2rem); }
.hs-body p{ font-family:var(--f2); font-size:.95rem; line-height:1.72; color:var(--muted); }

.how-cta{ margin-top:clamp(30px,3vw,40px); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background:var(--bg); }

.faq-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,5vw,96px); align-items:start; }
.faq-aside{ position:sticky; top:calc(var(--header-h) + 32px); }
.faq-aside .sec-sub{ max-width:44ch; }

/* rows are open records on hairlines, not cards */
.faq-list{ display:block; border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc-q{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,1.6vw,28px); width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:clamp(20px,1.9vw,28px) 0;
  transition:color .25s var(--ease);
}
.acc-n{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.76rem; letter-spacing:.06em; color:var(--muted-2);
  /* fixed so the answer below can indent to the question column by an exact
     amount rather than an intrinsic width that drifts with the font */
  width:34px; flex:none;
}
.acc-t{
  font-family:var(--f1); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.02rem, .96rem + .42vw, 1.32rem); line-height:1.32; color:var(--ink);
}
.acc-q:hover .acc-t{ color:var(--accent-700); }

/* accent square toggle, squared off to match every other control */
.acc-i{
  position:relative; flex:none; width:34px; height:34px; border-radius:var(--r);
  background:var(--accent-100);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.acc-q:hover .acc-i{ background:var(--accent-600); }
.acc-q:hover .acc-i::before,.acc-q:hover .acc-i::after{ background:#fff; }
.acc-i::before,.acc-i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--accent-700);
  transform:translate(-50%,-50%); transition:opacity .3s var(--ease), background-color .3s var(--ease);
}
.acc-i::before{ width:12px; height:1.6px; }
.acc-i::after{ width:1.6px; height:12px; }
.acc.is-open .acc-i{ background:var(--accent-600); transform:rotate(90deg); }
.acc.is-open .acc-i::before,.acc.is-open .acc-i::after{ background:#fff; }
.acc.is-open .acc-i::after{ opacity:0; }

.acc-a{ height:0; overflow:hidden; transition:height .38s var(--ease); }
/* answer indents to the question column so the [0N] rail stays clean */
.acc-inner{ padding:0 62px clamp(22px,2vw,30px) calc(34px + clamp(14px,1.6vw,28px)); }
.acc-inner p{ font-family:var(--f2); font-size:.95rem; line-height:1.8; color:var(--muted); max-width:58ch; }

/* ==========================================================================
   BOOKING
   ========================================================================== */
.book{ background:var(--bg); }

/* Heading sits full width above the two columns, with a hairline rule under
   it, so the copy and the form start on the same baseline. */
.book-head{ padding-bottom:clamp(20px,1.8vw,28px); border-bottom:1px solid var(--ink); margin-bottom:clamp(34px,3vw,52px); }

.book-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(36px,4vw,80px); align-items:start; }
.book-lede{ font-family:var(--f2); font-size:clamp(1rem,.96rem + .2vw,1.12rem); line-height:1.6; color:var(--ink-2); max-width:26ch; }

/* slab button: dark body + separate accent square carrying the arrow.
   One element so the whole pair is a single hit target. */
.slab-btn{
  display:inline-flex; align-items:stretch; gap:6px; margin-top:clamp(24px,2.2vw,34px);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
}
.btn-slab{
  display:grid; place-items:center; background:var(--ink); color:#fff;
  border-radius:var(--r); padding:0 clamp(22px,2vw,30px); min-height:56px;
  font-family:var(--f2); font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  transition:background-color .3s var(--ease);
}
.btn-sq{
  display:grid; place-items:center; width:56px; min-height:56px; flex:none;
  background:var(--accent); color:var(--ink); border-radius:var(--r);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.btn-sq svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.slab-btn:hover .btn-slab{ background:#000; }
.slab-btn:hover .btn-sq{ background:var(--accent-600); color:#fff; transform:translateX(3px); }
.slab-btn:focus-visible{ outline:2px solid var(--accent-700); outline-offset:3px; border-radius:var(--r); }
.slab-btn-block{ display:flex; width:100%; margin-top:clamp(26px,2.4vw,36px); }
.slab-btn-block .btn-slab{ flex:1; }

/* underline-only fields, no card - the form reads as part of the page */
.field{ margin-bottom:clamp(22px,2vw,30px); }
.field label{ display:block; font-family:var(--f2); font-size:.95rem; color:var(--ink); margin-bottom:10px; }
.req{ color:var(--muted-2); }
.field input,.field select{
  width:100%; padding:0 0 12px; border:0; border-bottom:1px solid var(--ink);
  border-radius:0; background:transparent; color:var(--ink);
  font-family:var(--f2); font-size:1rem; line-height:1.5;
  transition:border-color .25s var(--ease);
}
.field input:focus,.field select:focus{
  outline:none; border-bottom-color:var(--accent-600); border-bottom-width:2px; padding-bottom:11px;
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23767B83'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0 top 2px; background-size:20px; padding-right:28px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.2vw,40px); }
.err{ font-family:var(--f2); font-size:.79rem; color:var(--accent-700); margin-top:7px; }
.field.has-err input,.field.has-err select{ border-bottom-color:var(--accent-700); border-bottom-width:2px; }
.form-note{ font-family:var(--f2); font-size:.79rem; line-height:1.65; color:var(--muted); text-align:center; margin-top:14px; }
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-err{
  font-family:var(--f2); font-size:.89rem; line-height:1.65; color:var(--danger); text-align:center; margin-top:18px;
  background:var(--danger-50); border:1px solid var(--danger-100); border-radius:var(--r); padding:14px 16px;
}
.form-err a{ color:inherit; font-weight:600; }
.slab-btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }
.form-ok{
  font-family:var(--f2); font-size:.89rem; line-height:1.65; color:var(--accent-700); text-align:center; margin-top:18px;
  background:var(--accent-50); border:1px solid var(--accent-100); border-radius:var(--r); padding:14px 16px;
}

/* ==========================================================================
   FINAL CTA - quiet, lots of air
   ========================================================================== */
.final-cta{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--surface); border-top:1px solid var(--line);
}

/* two soft accent orbs drifting across the band, opposite directions.
   Purely decorative: they sit behind the content and stop entirely for
   anyone who asks for reduced motion. */
.orb{
  position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  background:var(--accent-100); opacity:.55; filter:blur(42px);
  will-change:transform;
}
.orb-a{
  width:clamp(180px,22vw,320px); aspect-ratio:1; top:8%; left:-12%;
  animation:orb-right 26s var(--ease-soft) infinite alternate;
}
.orb-b{
  width:clamp(150px,18vw,260px); aspect-ratio:1; bottom:6%; right:-10%;
  background:var(--accent-50); opacity:.9;
  animation:orb-left 32s var(--ease-soft) infinite alternate;
}
@keyframes orb-right{ from{ transform:translateX(0); } to{ transform:translateX(96vw); } }
@keyframes orb-left{ from{ transform:translateX(0); } to{ transform:translateX(-92vw); } }
@media (prefers-reduced-motion: reduce){ .orb{ animation:none; } }

.final-inner{ text-align:center; padding:clamp(84px,7vw,148px) 0; }
.final-inner h2{ max-width:17ch; margin-inline:auto; }
.final-inner p{ margin:22px auto 0; font-family:var(--f2); font-size:clamp(.98rem,.95rem + .18vw,1.06rem); line-height:1.75; color:var(--muted); max-width:48ch; }
.final-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px; }

/* ==========================================================================
   FOOTER - white theme, brand left / get in touch right, credit bar below
   ========================================================================== */
.site-footer{
  background:var(--bg); border-top:1px solid var(--line);
  font-family:var(--f2); color:var(--muted);
}
.foot-grid{
  /* the contact column shrinks to its own content (auto) so it sits hard
     against the right edge instead of floating mid-section */
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(40px,6vw,110px);
  padding:clamp(56px,4.6vw,84px) var(--pad) clamp(40px,3.4vw,56px);
  align-items:start;
}

/* logo matches the header logo exactly (36px, no plate behind it) */
/* same token as the header logo, so the two always match at every breakpoint */
.foot-brand img{ height:var(--logo-h); width:auto; object-fit:contain; margin-bottom:22px; }
.foot-brand p{ font-size:.93rem; line-height:1.75; color:var(--muted); max-width:38ch; }

/* right-aligned so every line ends flush with the section's right edge */
.foot-contact{ text-align:right; }
.foot-contact h3{
  font-family:var(--f2); font-size:.72rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--accent-600);
  margin-bottom:20px;
}
.foot-phone{
  display:inline-block; font-family:var(--f1); font-weight:700;
  font-size:1.12rem; letter-spacing:-.01em; color:var(--ink);
  padding-block:7px; margin-bottom:7px;   /* 44px tap target */
  transition:color .25s var(--ease);
}
.foot-phone:hover{ color:var(--accent); }
.foot-contact p{ font-size:.93rem; line-height:1.75; color:var(--muted); }

.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px;
  padding:24px var(--pad) 30px;
  border-top:1px solid var(--line);
  font-size:.84rem; color:var(--muted-2);
}
.foot-base .pc{
  color:var(--accent-600); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot-base .pc:hover{ color:var(--accent-700); border-bottom-color:var(--accent-700); }
.foot-base .pc:focus-visible{ outline:2px solid var(--accent-700); outline-offset:3px; }

/* ==========================================================================
   FLOATING CALL + WHATSAPP  (sticky on every section)
   ========================================================================== */
/* one in each bottom corner: WhatsApp left, call right */
.fab{
  position:fixed; z-index:98; bottom:clamp(18px,2vw,28px);
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--accent-600); color:#fff; font-size:23px;
  box-shadow:0 8px 22px rgba(17,18,20,.20);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  /* the idle bob uses the standalone `translate` property so it composes with
     the hover `transform` instead of one cancelling the other */
  animation:fab-bob 3.6s ease-in-out infinite;
}
.fab-wa{ left:clamp(16px,1.6vw,26px); }
.fab-call{ right:clamp(16px,1.6vw,26px); animation-delay:.9s; }

/* slow halo radiating out of each button */
.fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent-600); pointer-events:none;
  animation:fab-ring 3s var(--ease-soft) infinite;
}
.fab-call::after{ animation-delay:1.5s; }

.fab:hover{ background:var(--accent-700); transform:scale(1.07); box-shadow:0 12px 28px rgba(17,18,20,.26); }

@keyframes fab-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@keyframes fab-ring{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.65); opacity:0; }
  100%{ transform:scale(1.65); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .fab{ animation:none; translate:0 0; }
  .fab::after{ animation:none; opacity:0; }
}

/* ==========================================================================
   MOBILE STICKY BAR
   ========================================================================== */
.mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:99;
  gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
/* min-width:0 lets the two buttons shrink below their min-content width,
   otherwise the bar forces a horizontal scrollbar on 320px screens */
.mobile-bar .btn{ flex:1 1 0; min-width:0; }

.why-item.reveal{ transform:translateY(30px); }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-1{ transition-delay:.08s; }
.reveal-2{ transition-delay:.16s; }
.reveal-3{ transition-delay:.24s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- <= 1100px ---- */
@media (max-width:1100px){
  /* below this the two booking columns are too narrow for the form and
     would break the locality line onto two rows */
  .book-grid{ grid-template-columns:1fr; gap:48px; }
}

/* ---- <= 960px : tablet ---- */
@media (max-width:960px){
  :root{ --pad:22px; }

  /* the label rail moves above the list, rows stay image-then-text */
  .why-grid{ grid-template-columns:1fr; gap:26px; }
  .why-rail{ position:static; }
  .why-item{ grid-template-columns:1.1fr .9fr; gap:26px; }

  .prob-grid,.faq-grid,.how-grid{ grid-template-columns:1fr; }

  .prob-grid{ gap:60px; }
  .prob-media{ max-width:500px; margin-inline:auto; width:100%; }
  .prob-badge{ right:0; bottom:-22px; }

  .faq-aside{ position:static; }
  /* narrow rows read better with the answer running full width */
  .acc-inner{ padding-left:0; padding-right:0; }

  .how-copy h2{ max-width:100%; }
  .how-media{ max-width:520px; margin-inline:auto; width:100%; }

}

/* ---- <= 940px : banner sits behind the copy ---- */
@media (max-width:940px){
  /* The source is 16:9, so in a portrait box object-fit:cover can only crop
     horizontally: the full frame height always maps to the hero height and
     the faces land around 25-40% of it. So the photo is exposed at the TOP,
     where those faces are, and the copy sits underneath on a solid field.
     Anchoring the copy to the bottom lets the exposed band size itself. */
  .hero-img{ object-position:66% center; }
  .hero-scrim{
    /* stop positions are set by measurement: the veil reaches .95 just above
       the h1 so the green "Overdue" clears 3:1 against the darkest pixels of
       the photo at every width, and no earlier, to keep the face uncovered */
    background:linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.20) 26%,
      rgba(255,255,255,.50) 36%,
      rgba(255,255,255,.95) 45%,
      rgba(255,255,255,.985) 51%,
      rgba(255,255,255,.99) 100%);
  }
  .hero-inner{
    min-height:min(92vh, 700px); align-items:flex-end;
    padding-block:calc(var(--header-h) + 16px) clamp(36px,6vw,52px);
  }
  .hero-copy{ max-width:100%; }
  .hero-copy .lede{ max-width:56ch; }
}

/* ---- <= 720px ---- */
@media (max-width:720px){
  /* every tappable control clears the 44px minimum on touch screens */
  .btn{ min-height:44px; }
  .brand{ display:inline-flex; align-items:center; min-height:44px; }
  .foot-base .pc{ display:inline-block; padding-block:12px; }

  /* the rail label is the only heading this section has, and once the rail
     unsticks and sits above the list it has the full width to work with, so
     it steps up to section-heading scale instead of staying a small kicker */
  .why-label{ font-size:clamp(1.75rem,1.5rem + 1.2vw,2rem); }
  .why-dot{ width:13px; height:13px; }

  /* rows stack: image on top, copy beneath */
  .why-item{ grid-template-columns:1fr; gap:20px; }
  .why-media{ aspect-ratio:16/10; }
  .why-desc{ max-width:56ch; }
  .tcard-wide{ flex-direction:column; align-items:flex-start; }
  .tcard-wide .btn{ width:100%; }
  .final-inner h2{ max-width:100%; }
  .final-actions .btn{ flex:1 1 100%; }
  .foot-grid{ grid-template-columns:1fr; row-gap:44px; }
  .foot-contact{ text-align:left; }
  .foot-base{ flex-direction:column; align-items:flex-start; }
}

/* ---- <= 720px : phone hero ----
   The copy is centred and set large here, which needs more room than the white
   top band of the portrait photo can give (measured: it would run to 49% of the
   frame, and the faces start at 47%). So the hero is a plain stack on phones -
   white space under the floating header, the copy on white, then the photo -
   and the photo is cropped square and anchored low, which drops the empty
   window above the subjects and keeps both faces centred at every width.
   The two hero buttons are dropped; the sticky bar already carries both. */
@media (max-width:720px){
  .hero{
    display:flex; flex-direction:column;
    background:var(--bg);
    margin-top:calc(-1 * var(--header-h));
  }

  /* the wrappers collapse so .hero-text and .hero-img are siblings in the stack */
  .hero-inner{ display:contents; }
  .hero-copy{ display:contents; }

  /* nothing sits over the photo any more */
  .hero-scrim{ display:none; }
  .hero-cta{ display:none; }

  .hero-text{
    display:block; order:1; text-align:center;
    padding:calc(var(--header-h) + 44px) var(--pad) 30px;
  }
  .hero-text h1{ font-size:clamp(2.05rem,1.6rem + 2.2vw,2.5rem); }
  .hero-copy .lede{
    margin:16px auto 0; font-size:.98rem; line-height:1.65; max-width:34ch;
  }

  /* The top row of the crop is ~245 grey, not #fff, so butting it straight
     against the white copy above leaves a hard seam. <picture> becomes a real
     box here purely to carry that fade: opaque white at the join, gone by 15%
     of the frame. The subjects' heads start at 16%, measured off the file, so
     nothing of them is washed out. */
  .hero-pic{
    display:block; order:2; position:relative; line-height:0;
  }
  .hero-pic::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,
      #fff                     0%,
      rgba(255,255,255,.92)    3%,
      rgba(255,255,255,.62)    7%,
      rgba(255,255,255,.28)   11%,
      rgba(255,255,255,0)     15%);
  }

  /* square crop, anchored low: 'center 85%' frames the dentist and child and
     cuts the tall white window above them */
  .hero-img{
    position:static; display:block; z-index:0;
    width:100%; height:auto;
    aspect-ratio:1/1; object-fit:cover; object-position:center 85%;
  }
}

/* Narrow phones: hold the centred headline to a sensible number of lines. */
@media (max-width:340px){
  .hero-text{ padding-top:calc(var(--header-h) + 34px); }
  .hero-text h1{ font-size:1.85rem; letter-spacing:-.03em; }
}

/* ---- <= 620px : phone ---- */
@media (max-width:620px){
  :root{ --pad:20px; --r-lg:3px; --r-xl:3px; --sec-y:72px; --logo-h:42px; --header-h:70px; }
  body{ font-size:16px; }


  .hero-cta{ gap:10px; }
  .hero-cta .btn{ flex:1 1 100%; }

  .how-photo{ aspect-ratio:4/3.2; }
  .prob-photo{ aspect-ratio:4/3.4; }

  .prob-badge{ position:static; max-width:none; margin-top:20px; }
  .field-row{ grid-template-columns:1fr; gap:0; }

  /* too narrow for one line: let it reflow as ordinary wrapping text
     instead of two ragged flex columns */

  .mcard{ width:min(78vw,270px); }

  /* shorter track on phones, so shorten the loop to keep the pace even */

  .mobile-bar{ display:flex; }
  /* the call icon and Book Check-up leave the header at exactly the width the
     sticky bottom bar takes over, so a CTA is always on screen; the logo is
     then alone in the bar and centres */
  .header-actions{ display:none; }
  .header-inner{ justify-content:center; }
  /* clear the sticky bottom bar so the two never overlap */
  .fab{ bottom:calc(78px + env(safe-area-inset-bottom) + 14px); }
  .fab{ width:48px; height:48px; font-size:21px; }
  body{ padding-bottom:80px; }
}

/* ---- <= 420px : narrow phone ---- */
@media (max-width:420px){
  /* long CTA labels are nowrap by default, which sets a min-content floor
     wider than a 320px screen; let them wrap instead of forcing page scroll */
  .btn{ white-space:normal; text-align:center; min-width:0; }
  .mobile-bar .btn{ white-space:nowrap; }
}

/* ---- <= 380px : small phone ---- */
@media (max-width:380px){
  :root{ --pad:17px; --logo-h:38px; }
  /* keep the wordmark at full width; trim the button instead, otherwise
     max-width:100% squeezes the logo and distorts its aspect ratio */
  .brand{ flex:none; }
  .header-actions .btn{ padding:11px 16px; font-size:.85rem; }
  .btn-lg{ padding:15px 22px; font-size:.93rem; }
  .mobile-bar .btn{ padding:12px; font-size:.87rem; }
}

/* ---- large desktop ---- */
@media (min-width:1440px){
  :root{ --shell:1200px; }
}

/* ---- motion preference ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}