/* ============================================================
   Jaleel Medical Center — Branch 01 · Dental
   Design system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:        #f4f4f2;
  --bg-2:      #ffffff;
  --surface:   #ebebe8;
  --surface-2: #e4e4e0;
  --ink:       #141414;
  --ink-2:     #3a3a38;
  --muted:     #8c8c86;
  --line:      #dcdcd7;
  --accent:    #08a5b3;
  --accent-ink:#055597;
  --brand-blue:#055597;
  --brand-blue-d:#04416f;
  --brand-cyan:#08a5b3;
  --ok:        #1fb76b;
  --no:        #d6533c;

  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 14px;

  --maxw: 1240px;
  --pad: 40px;
  --nav-h: 78px;

  --f-sans: 'Google Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.2;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
a{ color:inherit; text-decoration:none; }
.green{ color:var(--accent); }
img{ max-width:100%; }
::selection{ background:rgba(8,165,179,.2); color:var(--ink); }
.nav,.hero,.sec-head,.mission,.feat,.svc-big,.svc-perks,.po-card,.doc-card,.ba-card,.book h2,.pay-strip,.marquee,.footer{
  -webkit-user-select:none;
  user-select:none;
}
input,textarea,.field{
  -webkit-user-select:text;
  user-select:text;
}

/* ---------- icons ---------- */
.ico{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; }
.ico svg{ width:100%; height:100%; display:block; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  animation:navDrop .7s cubic-bezier(.2,.8,.2,1) both;
}
.nav-inner{
  display:flex; align-items:center; gap:20px;
  padding:16px var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; white-space:nowrap; }
.brand-logo{
  height:34px; width:50px; flex:none; object-fit:contain; display:block;
  transform-origin:center;
  animation:logoBreathe 4.8s ease-in-out infinite;
}
.brand:hover .brand-logo{ animation:logoPop .72s cubic-bezier(.2,.8,.25,1) both; }
.brand-text{ display:flex; flex-direction:column; line-height:.96; }
.brand-name{ font-size:25px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.brand-sub{ font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-cyan); }

.nav-pills{ display:flex; gap:6px; margin:0 auto; }
.pill{
  border:1px solid transparent; background:transparent; border-radius:999px;
  padding:9px 16px; font-size:15px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:transform .18s, color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.pill:hover{ color:var(--ink); border-color:var(--line); transform:translateY(-1px); }
.pill.active{ background:var(--bg-2); border-color:var(--line); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.03); }

.nav-cta{ display:flex; align-items:center; gap:10px; }

/* hours widget */
.hours-widget{ position:relative; }
.hours-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
  padding:9px 14px; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:.18s;
}
.hours-btn:hover{ border-color:#bdbdb6; }
.live-dot{ width:9px; height:9px; border-radius:999px; background:var(--muted); }
.live-dot.on{ background:var(--ok); box-shadow:0 0 0 3px rgba(31,183,107,.18); }
.live-dot.off{ background:var(--no); box-shadow:0 0 0 3px rgba(214,83,60,.16); }
.hours-btn .chev{ font-size:10px; color:var(--muted); transition:.2s; }
.hours-widget.show .chev{ transform:rotate(180deg); }
.hours-pop{
  position:absolute; top:calc(100% + 10px); right:0; width:286px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.16); padding:16px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s; z-index:60;
}
.hours-widget.show .hours-pop{ opacity:1; visibility:visible; transform:none; }
.hp-title{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; margin-bottom:10px; }
.hp-title .ico{ color:var(--brand-blue); }
.hp-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:7px 10px; border-radius:9px; color:var(--ink-2); }
.hp-row.today{ background:color-mix(in srgb,var(--brand-cyan) 13%, #fff); color:var(--ink); font-weight:600; }
.hp-note{ font-size:12px; color:var(--muted); margin-top:8px; padding-left:10px; }

.icon-btn{
  width:42px; height:42px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); transition:.18s; background:var(--bg-2);
}
.icon-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn-dark{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--brand-blue); color:#fff; border:none; border-radius:999px;
  padding:12px 20px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:transform .18s, background .18s, box-shadow .18s;
}
.btn-dark:hover{ transform:translateY(-2px); background:var(--brand-blue-d); box-shadow:0 10px 24px rgba(5,85,151,.24); }

/* ============================================================
   HERO  (fills viewport)
   ============================================================ */
.hero{ position:relative; overflow:hidden; min-height:calc(100svh - var(--nav-h)); display:flex; isolation:isolate; }
.hero-wrap{ display:flex; flex-direction:column; justify-content:space-between; width:100%; padding-top:26px; padding-bottom:36px; }
.hero-grid{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; }
.hero-meta{ position:relative; z-index:4; margin-bottom:18px; padding-left:12px; display:flex; align-items:center; }
.hero-meta .date{ color:var(--muted); font-size:15px; letter-spacing:.01em; line-height:1; animation:fadeDown .75s .08s both; }
.hero h1{
  font-weight:600; font-size:clamp(60px, 12.5vw, 188px);
  line-height:.92; letter-spacing:-.03em; position:relative; z-index:3; pointer-events:none;
  animation:heroTitle .92s cubic-bezier(.2,.8,.2,1) .12s both;
}
.hero h1 .l2{ display:block; }
.hero h1 .green{ display:inline-block; animation:accentGlow 5.8s ease-in-out infinite; }

.hero-img{
  position:absolute; z-index:2; right:0; top:50%; transform:translateY(-50%);
  height:min(80%, 760px); width:auto; max-width:56%;
  object-fit:contain; object-position:right center;
  mix-blend-mode:luminosity; pointer-events:none;
}

.hero-bottom{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end;
  margin-top:34px;
}
.hero-copy{ max-width:460px; }
.hero-copy p{ font-size:20px; color:var(--ink-2); line-height:1.5; animation:fadeUp .76s .32s both; }
.hero-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.cta-primary{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--brand-blue); color:#fff; border-radius:999px;
  padding:15px 26px; font-size:16px; font-weight:600;
  transition:transform .18s, background .18s, box-shadow .18s;
  animation:fadeUp .76s .42s both;
}
.cta-primary:hover{ background:var(--brand-blue-d); transform:translateY(-2px); box-shadow:0 12px 28px rgba(5,85,151,.26); }
.cta-primary .ico{ width:19px; height:19px; }
.cta-ghost{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--bg-2); color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:15px 24px; font-size:16px; font-weight:600;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  animation:fadeUp .76s .5s both;
}
.cta-ghost:hover{ border-color:#bdbdb6; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.cta-ghost .ico{ color:var(--brand-blue); }

.hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
.hr-rating{
  display:flex; align-items:center; gap:8px; font-size:16px;
  background:transparent; border:1px solid transparent; border-radius:999px;
  padding:9px 14px; box-shadow:none;
  animation:fadeUp .76s .44s both;
}
.hr-rating .stars{ color:var(--accent); letter-spacing:1px; font-size:15px; }
.hr-rating b{ font-weight:600; color:var(--ink); }
.hr-rating .muted{ color:var(--muted); }
.hero-right .stat{
  display:flex; align-items:center; gap:14px; justify-content:flex-start;
  background:transparent; border:1px solid transparent; border-radius:28px;
  padding:12px 16px; box-shadow:none;
  animation:fadeUp .76s .54s both;
}
.hero-right .stat .num{ width:86px; flex:none; font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1; text-align:left; }
.hero-right .stat .txt{ font-size:14px; color:var(--ink-2); line-height:1.3; text-align:left; max-width:165px; margin-right:-43px; }

.hero-pay{ margin-top:4px; }
.hero-pay .pay-label{ color:var(--ink-2); }
.hero-pay .pay-logo{ height:24px; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ padding:80px 0; }
.sec-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.sec-title{
  max-width:100%;
  font-size:clamp(44px, 6.4vw, 84px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.95;
  text-wrap:balance;
}
.sec-sub{ font-size:17px; color:var(--muted); max-width:420px; align-self:flex-end; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.about-left{ display:flex; flex-direction:column; gap:18px; }
.mission{
  background:var(--surface); border-radius:var(--r-lg); padding:42px; display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.mission:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.08); background:color-mix(in srgb, var(--surface) 82%, #fff); }
.mission .label{ color:var(--muted); font-size:17px; margin-bottom:22px; }
.mission .quote{ font-size:clamp(34px,4vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1.04; }
.mission .by{ margin-top:auto; padding-top:26px; text-align:right; font-size:14px; color:var(--ink-2); }
.feat-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feat{
  background:var(--surface); border-radius:var(--r-lg); padding:30px; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.feat:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(0,0,0,.08); background:color-mix(in srgb, var(--surface) 84%, #fff); }
.feat .arr{ align-self:flex-end; font-size:30px; color:var(--brand-blue); }
.feat:hover .arr{ animation:arrowKick .48s ease both; }
.feat .name{ font-size:26px; font-weight:600; line-height:1.12; }

.about-media{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:560px; background:#222;
  transition:transform .32s ease, box-shadow .32s ease;
}
.about-media:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.13); }
.about-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:200px; background:linear-gradient(transparent, rgba(0,0,0,.55)); z-index:1; }
.media-cap{
  position:absolute; top:18px; left:18px; z-index:3;
  background:rgba(0,0,0,.5); color:#fff; font-size:12.5px; padding:7px 13px;
  border-radius:999px; backdrop-filter:blur(4px);
}
.gallery{ position:absolute; left:0; right:0; bottom:22px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; }
.gallery .glabel{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:#fff; }
.gallery .thumbs{ display:flex; gap:12px; }
.gthumb{
  width:72px; height:72px; border-radius:16px; overflow:hidden; padding:0;
  border:2px solid rgba(255,255,255,.6); background:none; cursor:pointer;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.gthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gthumb:hover{ border-color:#fff; transform:translateY(-2px) scale(1.03); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.gthumb.active{ border-color:var(--accent); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-perks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-self:flex-end; }
.svc-perks span{
  font-size:13px; font-weight:500; color:var(--brand-blue);
  border:1px solid color-mix(in srgb, var(--brand-cyan) 45%, var(--line));
  background:color-mix(in srgb, var(--brand-cyan) 8%, #fff);
  border-radius:999px; padding:7px 14px;
}
.svc-top{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.svc-big{
  position:relative; background:var(--surface); border-radius:var(--r-lg); padding:40px; min-height:300px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.svc-big:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(0,0,0,.09); background:color-mix(in srgb, var(--surface) 84%, #fff); }
.svc-big h3{ position:relative; z-index:2; font-size:36px; font-weight:600; letter-spacing:-.01em; }
.svc-big ul{ position:relative; z-index:2; list-style:none; margin-top:34px; display:flex; flex-direction:column; gap:10px; max-width:54%; }
.svc-big li{ position:relative; padding-left:20px; font-size:17px; color:var(--ink-2); }
.svc-big li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:999px; background:var(--brand-blue); }
.svc-big .price{ position:relative; z-index:2; max-width:54%; margin-top:18px; font-size:15px; color:var(--muted); font-family:var(--f-mono); line-height:1.45; }
.svc-photo{
  position:absolute; z-index:1; top:50%; right:34px; width:44%; max-height:76%; object-fit:contain; object-position:center right; opacity:.7; pointer-events:none;
  transform:translateY(-50%);
  animation:softFloat 7s ease-in-out infinite;
  transition:transform .3s ease, opacity .3s ease;
}
.svc-big:hover .svc-photo{ animation-play-state:paused; transform:translateY(calc(-50% - 6px)) rotate(1.5deg); opacity:1; }
.svc-photo--tooth{ width:38%; right:38px; opacity:.78; animation-delay:-2.4s; }

/* full price-offer grid */
.po-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.po-card{
  background:var(--surface); border-radius:var(--r-lg); padding:28px 28px 22px; display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.po-card:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(0,0,0,.08); background:color-mix(in srgb, var(--surface) 82%, #fff); }
.po-card--wide{ grid-column:span 3; }
.po-head{ font-size:21px; font-weight:600; color:var(--ink); padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.po-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.po-row:last-child{ border-bottom:none; }
.po-name{ font-size:15px; color:var(--ink-2); line-height:1.35; }
.po-price{ font-size:18px; font-weight:600; color:var(--brand-blue); white-space:nowrap; flex:none; }
.po-price s{ font-size:13px; font-weight:400; color:var(--muted); margin-right:4px; }
.po-price small{ font-size:12px; font-weight:500; color:var(--accent); }
.po-note{ font-size:12px; color:var(--muted); margin-top:10px; }

/* ============================================================
   DENTISTS  (promotional cards)
   ============================================================ */
.doc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.doc-card{
  position:relative; background:var(--surface); border-radius:var(--r-lg);
  overflow:hidden; height:450px; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.doc-card:hover{ transform:translateY(-6px); box-shadow:0 18px 42px rgba(0,0,0,.1); background:color-mix(in srgb, var(--surface) 82%, #fff); }
.doc-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 22px 0; position:relative; z-index:4; }
.doc-role{ display:flex; flex-direction:column; line-height:1.12; }
.doc-role span{ font-size:13px; color:var(--muted); }
.doc-role strong{ font-size:21px; font-weight:700; color:var(--brand-blue); }
.doc-logo{ height:22px; width:auto; opacity:.92; }
.doc-meta{
  position:relative; z-index:4; margin:12px 22px 0;
  display:flex; flex-direction:column; gap:6px;
}
.doc-meta span{
  width:max-content; max-width:100%;
  color:var(--ink-2); font-size:12px; line-height:1.15;
  background:rgba(255,255,255,.52); border:1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius:999px; padding:6px 10px;
}
.doc-stage{ position:relative; flex:1; margin-top:8px; }
.doc-stage::before{
  content:""; position:absolute; left:14px; right:14px; bottom:14px; height:62%;
  border-radius:22px; background:linear-gradient(160deg, var(--brand-cyan), var(--brand-blue) 78%);
  transition:transform .3s ease, filter .3s ease;
}
.doc-card:hover .doc-stage::before{ transform:scale(1.03); filter:saturate(1.08); }
.doc-photo{
  position:absolute; left:50%; transform:translateX(-50%); bottom:14px;
  width:min(88%,310px); height:auto; max-height:96%;
  object-fit:contain; object-position:bottom;
  z-index:2; filter:drop-shadow(0 12px 20px rgba(0,0,0,.22));
  transition:transform .32s ease, filter .32s ease;
}
.doc-card:hover .doc-photo{ transform:translateX(-50%) translateY(-8px) scale(1.025); filter:drop-shadow(0 18px 24px rgba(0,0,0,.25)); }
.doc-photo--sumiha{ width:min(82%, 310px); }
.doc-photo--lg{
  width:auto;
  height:min(106%, 310px);
  max-width:none;
  max-height:none;
  bottom:14px;
}
.doc-name{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  padding:30px 18px 16px; border-radius:0 0 22px 22px;
  background:linear-gradient(transparent, rgba(4,54,90,.92) 52%); color:#fff;
}
.dn{ font-size:16px; font-weight:600; line-height:1.2; }
.dq{ font-size:13px; color:rgba(255,255,255,.82); margin-top:3px; }

/* ============================================================
   BEFORE & AFTER  (drag reveal sliders)
   ============================================================ */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ba-card{
  margin:0; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; padding:14px;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.ba-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(0,0,0,.1); background:color-mix(in srgb, var(--surface) 84%, #fff); }
.ba-slider{ position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:14px; cursor:col-resize; user-select:none; touch-action:pan-y; background:#111; }
.ba-layer{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.ba-img-back{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-reveal{ position:absolute; inset:0; width:50%; overflow:hidden; pointer-events:none; z-index:1; }
.ba-reveal img{ position:absolute; left:0; top:0; height:100%; max-width:none; object-fit:cover; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:44px; display:flex; flex-direction:column; align-items:center; z-index:3; pointer-events:none;
  animation:handlePulse 2.6s ease-in-out infinite;
}
.ba-line{ flex:1; width:2px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.4); }
.ba-btn{
  width:36px; height:36px; border-radius:999px; background:#fff; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--brand-blue); box-shadow:0 2px 14px rgba(0,0,0,.28); letter-spacing:-2px;
  transition:transform .2s ease;
}
.ba-slider:hover .ba-btn{ transform:scale(1.08); }
.ba-tag{ position:absolute; top:9px; z-index:2; font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 10px; border-radius:999px; color:#fff; backdrop-filter:blur(3px); pointer-events:none; }
.ba-tag--l{ left:9px; background:rgba(20,20,20,.62); }
.ba-tag--r{ right:9px; background:var(--brand-blue); }
.ba-card figcaption{ padding:15px 6px 5px; font-size:18px; font-weight:600; }

/* ============================================================
   BOOK + LOCATION
   ============================================================ */
.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.book h2{ font-size:clamp(48px,6.5vw,84px); font-weight:700; letter-spacing:-.03em; line-height:.95; }
.book h2 .dot{ color:var(--accent); }
.book-form{ margin-top:38px; display:flex; flex-direction:column; gap:14px; max-width:460px; }
.field{
  border:1px solid var(--line); background:var(--bg-2); border-radius:999px; padding:18px 24px; font-size:17px; font-family:inherit; color:var(--ink); width:100%;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.field::placeholder{ color:var(--muted); }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(8,165,179,.12); transform:translateY(-1px); }
.field-row{ display:flex; gap:14px; }
.field-row .field{ display:flex; align-items:center; gap:10px; color:var(--muted); cursor:pointer; }
.field-row .ico{ width:18px; height:18px; color:var(--brand-blue); }
.book-actions{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.btn-dark.wa .ico{ width:18px; height:18px; }
.btn-ghost-line{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:12px 22px; font-size:15px; font-weight:600; color:var(--ink); transition:transform .18s, border-color .18s, box-shadow .18s; }
.btn-ghost-line:hover{ border-color:#bdbdb6; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.btn-ghost-line .ico{ width:17px; height:17px; color:var(--brand-blue); }

.pay-strip{ display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.pay-strip .pay-label{ font-size:14px; color:var(--muted); }
.pay-logo{ height:30px; width:auto; display:block; border-radius:7px; }

.loc-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:620px; background:var(--surface);
  transition:transform .32s ease, box-shadow .32s ease;
}
.loc-card:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(0,0,0,.12); }
.map-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc-info{
  position:absolute; left:20px; right:20px; bottom:20px; z-index:2;
  background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border-radius:var(--r-md);
  padding:18px 22px; display:flex; align-items:center; gap:16px; box-shadow:0 12px 32px rgba(0,0,0,.14);
  transition:transform .28s ease;
}
.loc-card:hover .loc-info{ transform:translateY(-3px); }
.loc-info .ico-pin{ width:26px; height:26px; color:var(--brand-blue); }
.loc-label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--accent-ink); }
.loc-addr{ font-size:16px; font-weight:500; margin-top:4px; line-height:1.35; }
.loc-dir{ margin-left:auto; align-self:center; font-size:14px; font-weight:600; color:var(--brand-blue); white-space:nowrap; }

/* marquee */
.marquee{ margin-top:50px; background:var(--brand-blue); color:#fff; border-radius:var(--r-lg); overflow:hidden; white-space:nowrap; padding:30px 0; }
.marquee .track{ display:inline-flex; gap:40px; align-items:center; animation:scroll 22s linear infinite; }
.marquee span{ font-size:clamp(34px,4.5vw,58px); font-weight:600; }
.marquee .star{ color:var(--brand-cyan); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.reveal-in{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .72s ease var(--reveal-delay,0ms),
    transform .72s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms);
}
.reveal-in.is-visible{ opacity:1; transform:none; }

@keyframes navDrop{
  from{ opacity:0; transform:translateY(-14px); }
  to{ opacity:1; transform:none; }
}
@keyframes logoBreathe{
  0%,100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(8,165,179,0)); }
  50%{ transform:translateY(-1px) scale(1.035); filter:drop-shadow(0 4px 8px rgba(8,165,179,.2)); }
}
@keyframes logoPop{
  0%{ transform:scale(1) rotate(0deg); }
  45%{ transform:scale(1.12) rotate(-4deg); }
  100%{ transform:scale(1.04) rotate(0deg); }
}
@keyframes fadeDown{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes heroTitle{
  from{ opacity:0; transform:translateY(28px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes accentGlow{
  0%,100%{ text-shadow:0 0 0 rgba(8,165,179,0); }
  50%{ text-shadow:0 10px 34px rgba(8,165,179,.22); }
}
@keyframes softFloat{
  0%,100%{ transform:translateY(-50%) rotate(0deg); }
  50%{ transform:translateY(calc(-50% - 7px)) rotate(-1.4deg); }
}
@keyframes arrowKick{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(5px,-5px); }
  100%{ transform:translate(0,0); }
}
@keyframes handlePulse{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ filter:drop-shadow(0 0 12px rgba(255,255,255,.5)); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg-2); border-radius:var(--r-lg) var(--r-lg) 0 0; padding-top:64px; overflow:hidden; }
.foot-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.foot-brand .brand{ font-size:20px; margin-bottom:16px; }
.foot-brand p{ color:var(--ink-2); font-size:16px; line-height:1.55; max-width:430px; }
.foot-pay{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.foot-pay .pay-logo{ height:28px; }
.foot-pay .pay-logo--tp{ height:24px; }
.foot-col .h{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--muted); margin-bottom:12px; }
.foot-line{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink-2); padding:6px 0; transition:color .15s, transform .15s, gap .2s; }
a.foot-line:hover{ color:var(--ink); }
.foot-line .ico{ width:17px; height:17px; color:var(--brand-blue); }
.foot-line--addr{ align-items:flex-start; }
.foot-line--addr .ico{ margin-top:2px; }
.foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px 0; border-top:1px solid var(--line); }
.foot-branch{ font-size:14px; color:var(--ink-2); }
.foot-copy{ font-size:13px; color:var(--muted); }
.foot-copy a{ color:var(--brand-blue); font-weight:600; }
.foot-copy a:hover{ color:var(--brand-cyan); }
.wordmark{
  font-size:clamp(24px, 7.5vw, 88px); font-weight:700; letter-spacing:-.035em;
  line-height:.9; padding:14px 0 4px; margin-bottom:-22px; color:#b6b6af;
  white-space:nowrap; overflow:hidden; text-align:center;
  transition:color .4s, transform .4s; cursor:default;
  transform:translateY(24%);
}
.wordmark:hover{ color:#a8a8a0; transform:translateY(24%); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  :root{ --pad:26px; }
  .nav-pills{ display:none; }
  .brand-name{ font-size:24px; }
  .brand-sub{ font-size:9px; letter-spacing:.13em; }
  .hero{ min-height:calc(100svh - var(--nav-h)); padding:46px 0 34px; }
  .hero h1{ font-size:clamp(48px,15vw,92px); }
  .hero-img{ height:auto; width:62%; max-width:none; top:46%; right:-6%; opacity:.5; }
  .hero-bottom{ grid-template-columns:1fr; gap:26px; }
  .hero-right{ align-items:flex-start; text-align:left; max-width:330px; }
  .hero-right .stat{ justify-content:flex-start; }
  .about-grid,.svc-top,.book-grid,.foot-top{ grid-template-columns:1fr; }
  .po-grid{ grid-template-columns:1fr 1fr; }
  .po-card--wide{ grid-column:span 2; }
  .doc-grid{ grid-template-columns:1fr 1fr; }
  .doc-photo--lg{ width:auto; height:min(104%, 386px); max-height:none; }
  .ba-grid{ grid-template-columns:1fr; }
  .feat-cards{ grid-template-columns:1fr 1fr; }
  .about-media{ min-height:440px; }
}
@media (max-width:820px){
  section{ padding:68px 0; }
  .sec-head{ margin-bottom:26px; }
  .sec-title{ font-size:clamp(40px, 8.8vw, 64px); letter-spacing:-.025em; }
  .doc-grid{
    grid-template-columns:1fr;
    max-width:430px;
    margin:0 auto;
  }
  .doc-card{ height:440px; }
  .doc-photo{ width:min(86%, 300px); max-height:92%; }
  .doc-photo--lg{
    width:auto;
    height:min(94%, 354px);
    bottom:14px;
  }
}
@media (max-width:560px){
  :root{ --pad:24px; }
  .nav-inner{ gap:12px; padding:14px var(--pad); justify-content:space-between; }
  .brand{ min-width:0; flex:1; gap:8px; }
  .brand-logo{ width:52px; height:36px; }
  .brand-name{ font-size:27px; }
  .brand-sub{ font-size:8.25px; letter-spacing:.12em; margin-top:1px; }
  .nav .wa{ flex:none; margin-left:auto; padding:10px 13px; font-size:13px; gap:7px; }
  .nav .wa .ico{ width:16px; height:16px; }
  .sec-head{ padding-left:2px; }
  .hero{ min-height:calc(100svh - 64px); padding:54px 0 42px; }
  .hero h1{ font-size:clamp(58px, 17vw, 104px); }
  .hero-wrap{ padding-top:0; padding-bottom:0; }
  .hero-right{ width:100%; }
  .hero-right .stat{ width:100%; min-width:0; padding:12px 14px; }
   .book-actions{ flex-direction:row; flex-wrap:nowrap; }
   .book-actions .btn-dark, .book-actions .btn-ghost-line{ width:50%; flex:none; justify-content:center; min-width:0; }
  .hero-right .stat .num{ width:78px; font-size:42px; }
  .hr-rating{ padding:8px 12px; font-size:15px; }
  .feat-cards{ grid-template-columns:1fr 1fr; gap:12px; }
  .feat{ min-height:150px; padding:20px; }
  .feat .name{ font-size:20px; }
  .po-grid,.doc-grid{ grid-template-columns:1fr; }
  .po-card--wide{ grid-column:span 1; }
  .nav-cta .hours-btn span:not(.live-dot):not(.chev){ display:inline; }
  .svc-big ul,.svc-big .price{ max-width:72%; }
  .svc-photo{ width:46%; right:2px; max-height:72%; opacity:.5; }
  .svc-photo--tooth{ width:42%; right:4px; opacity:.56; }
  .loc-info{ flex-wrap:wrap; }
  .loc-dir{ margin-left:0; }
}

/* footer hover animations */
.foot-brand .brand-logo{ transition:transform .3s; }
.foot-brand:hover .brand-logo{ transform:scale(1.08) rotate(-3deg); }
.foot-pay .pay-logo{ transition:transform .25s, opacity .25s; opacity:.88; }
.foot-pay .pay-logo:hover{ transform:scale(1.1); opacity:1; }
a.foot-line{ transition:color .18s, gap .2s; }
a.foot-line:hover{ color:var(--brand-blue); gap:14px; }
.foot-col .h{ transition:color .18s; }
.foot-col:hover .h{ color:var(--brand-blue); }

@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-in{ opacity:1; transform:none; }
}