/* Grace Dental — friendly, clean, bold-sans look. Brand colors from the logo. */
:root{
  --brand:#008cb3; --brand-deep:#006b8a; --ink:#1f3a46; --muted:#56707b;
  --sky:#8ae6ff; --sky-soft:#e6f9ff; --gray:#d3d4d3; --gray-soft:#f3f4f3; --blush:#fed8d3;
  --white:#fff; --line:#e3e7e8;
  --display:'Plus Jakarta Sans',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif;
  --r:22px; --ease:cubic-bezier(.16,1,.3,1); --shadow:0 18px 40px -18px rgba(31,58,70,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-font-smoothing:antialiased}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink);background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--brand-deep)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,58px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.narrow{max-width:860px}
.center{text-align:center}
.mt{margin-top:40px}
.eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.eyebrow.light{color:var(--sky)}
.lead{font-size:18px;color:var(--muted);margin-top:14px}
.hl{color:var(--brand);background:linear-gradient(transparent 62%,var(--sky) 62%,var(--sky) 92%,transparent 92%);padding:0 .08em}
.hl-light{color:var(--sky)}
.fine{font-size:14px;color:var(--muted);margin-top:16px}
.ic{width:20px;height:20px;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:50px;border:2px solid var(--brand);background:var(--brand);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,140,179,.6);background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn .ic{width:18px;height:18px}
.btn-sm{min-height:44px;padding:0 22px;font-size:15px}
.btn-ghost{background:transparent;color:var(--brand-deep);border-color:var(--brand)}
.btn-ghost:hover{background:var(--sky-soft);color:var(--brand-deep);border-color:var(--brand)}
.btn-light{background:#fff;color:var(--brand-deep);border-color:#fff}
.btn-light:hover{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .btns{justify-content:center}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* top bar + header */
.topbar{background:var(--ink);color:#fff;font-size:13px}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;min-height:40px;padding-block:6px}
.topbar .tag{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.tb-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:500}
.tb-phone .ic{width:15px;height:15px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.site-header.scrolled{box-shadow:0 8px 24px -14px rgba(31,58,70,.35)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:10px}
.brand img{height:96px;width:auto;transition:height .35s var(--ease)}
.scrolled .brand img{height:68px}
.nav{display:flex;align-items:center;gap:6px 22px;font-family:var(--display);font-weight:600;font-size:15px}
.nav a:not(.btn){color:var(--ink);text-decoration:none;position:relative;padding:6px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--brand-deep)}
.nav-cta{margin-left:6px}
.menu-btn{display:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--sky-soft);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1060px){
  .brand img{height:70px}.scrolled .brand img{height:58px}
  .menu-btn{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:0 20px 30px -20px rgba(31,58,70,.4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .25s var(--ease)}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a:not(.btn){padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav-cta{margin:14px 0 0}
}

/* sections */
.sec{padding-block:clamp(64px,8vw,100px)}
.sec-tint{background:var(--gray-soft)}
.sec-sky{background:linear-gradient(135deg,var(--sky-soft),#fff 70%)}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-inline:auto}
.sec-head.split{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.sec-head.split>div{max-width:720px}

/* hero */
.hero{background:var(--gray-soft);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:clamp(48px,7vw,90px)}
.hero-points{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;font-weight:500}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points .ic{color:var(--brand);width:18px;height:18px}
.hero-media{position:relative;padding:20px}
.hero-img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:46% 54% 50% 50%/48% 44% 56% 52%;box-shadow:var(--shadow)}
.blob{position:absolute;border-radius:50%;z-index:0}
.b1{width:62%;aspect-ratio:1;background:var(--sky);top:-4%;right:-6%;animation:float 9s ease-in-out infinite}
.b2{width:30%;aspect-ratio:1;background:var(--blush);bottom:0;left:-4%;animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{transform:translate(10px,-14px)}}
.float-card{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);font-size:13px;color:var(--muted);max-width:260px}
.float-card strong{display:block;color:var(--ink);font-family:var(--display);font-size:15px}
.float-card .ic{color:var(--brand);width:28px;height:28px}
.fc1{left:-10px;top:14%;animation:float 7s ease-in-out infinite}
.fc2{right:-6px;bottom:10%;flex-direction:column;align-items:flex-start;gap:4px;animation:float 8s ease-in-out infinite reverse}
.stars{display:inline-flex;gap:2px;color:var(--brand)}
.stars svg{width:16px;height:16px;fill:currentColor}

/* marquee */
.marquee{background:var(--brand);color:#fff;overflow:hidden;padding-block:16px}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mi{width:18px;height:18px;color:var(--sky)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* service cards — circle images */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:40px 28px}
.svc-grid.g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.svc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;text-decoration:none;color:var(--ink)}
.svc-img{width:190px;height:190px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 2px var(--sky),var(--shadow);margin-bottom:10px;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc:hover .svc-img{transform:translateY(-6px);box-shadow:0 0 0 4px var(--brand),var(--shadow)}
.svc:hover .svc-img img{transform:scale(1.08)}
.svc strong{font-family:var(--display);font-size:20px;line-height:1.25}
.svc-sum{font-size:14px;color:var(--muted);max-width:280px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--brand)}
.more .ic{width:16px;height:16px;transition:transform .25s var(--ease)}
a:hover .more .ic{transform:translateX(4px)}

/* quotes */
.quotes-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.quote{margin:0;display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:var(--r);padding:32px;position:relative;box-shadow:0 10px 30px -22px rgba(31,58,70,.5)}
.quote::before{content:"“";position:absolute;right:24px;top:-6px;font-family:Georgia,serif;font-size:110px;line-height:1;color:var(--sky)}
.quote blockquote{margin:0;font-size:16px;color:var(--ink)}
.quote figcaption{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;margin-top:auto}
.quote figcaption small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:13px;margin-left:auto}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--sky);color:var(--ink);display:grid;place-items:center;font-size:15px}
.quote-big{padding:48px;background:var(--sky-soft);box-shadow:none}
.quote-big blockquote{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.35}
.wall{columns:3 300px;column-gap:28px}
.wall>*{break-inside:avoid;margin:0 0 28px}
.pull{margin:0 0 28px;padding:8px 0 8px 22px;border-left:4px solid var(--brand);font-family:var(--display);font-weight:700;font-size:22px;line-height:1.35;color:var(--ink)}
.pull figcaption{font-family:var(--body);font-weight:500;font-size:14px;color:var(--muted);margin-top:8px}
.rating{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-weight:500}
.rating .stars svg{width:22px;height:22px}
.leave{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.leave>div{flex:1 1 320px}

/* why / pillars */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.why-head .btn{margin-top:28px}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px}
.pillars.p3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pillars.p4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pillar h3{margin:16px 0 8px}
.pillar p{color:var(--muted);font-size:15px}
.pi{width:60px;height:60px;border-radius:50%;background:var(--sky-soft);color:var(--brand);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s}
.pi .ic{width:28px;height:28px}
.pillar:hover .pi{transform:rotate(-8deg) scale(1.08);background:var(--sky)}

/* circles / people */
.ring{display:block;border-radius:50%;overflow:hidden;border:8px solid #fff;box-shadow:0 0 0 3px var(--sky),var(--shadow);aspect-ratio:1}
.ring img{width:100%;height:100%;object-fit:cover}
.ring-xl{width:min(380px,80vw)}
.ring-md{width:160px;flex:none}
.doc-feature{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.df-text p+p{margin-top:16px}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px 28px}
.people.p2{max-width:640px;margin-inline:auto}
.people.p3{max-width:900px;margin-inline:auto}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;color:var(--ink)}
.person .ring{width:200px;margin-bottom:14px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.person .ring img{transition:transform .6s var(--ease)}
.person:hover .ring{transform:translateY(-6px);box-shadow:0 0 0 5px var(--brand),var(--shadow)}
.person:hover .ring img{transform:scale(1.06)}
.person strong{font-family:var(--display);font-size:20px}
.role{font-size:14px;color:var(--muted)}

/* welcome */
.welcome{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.wel-media{position:relative}
.wel-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:200px 200px var(--r) var(--r);box-shadow:var(--shadow)}
.wel-badge{position:absolute;left:-14px;bottom:28px;display:flex;align-items:center;gap:10px;background:var(--brand);color:#fff;border-radius:50px;padding:12px 20px;font-family:var(--display);font-weight:700;font-size:15px;box-shadow:var(--shadow)}
.wel-badge .ic{color:var(--sky)}
.wel-text p+p{margin-top:16px}
.wel-text .btn{margin-top:28px}

/* gallery */
.gallery{display:grid;gap:18px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);transition:transform .5s var(--ease)}
.gallery img:hover{transform:scale(1.02)}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3 img{aspect-ratio:4/3}
.masonry{display:block;columns:3 260px;column-gap:18px}
.masonry img{height:auto;margin-bottom:18px;break-inside:avoid}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--brand-deep),var(--brand));color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(138,230,255,.25)}
.cta-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-block:64px}
.cta-in h2{color:#fff}
.cta-in p{color:rgba(255,255,255,.88);margin-top:10px;max-width:560px}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}

/* visit / hours */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.info-list{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:18px}
.info-list li{display:flex;gap:14px;color:var(--muted)}
.info-list .ic{color:var(--brand);margin-top:4px}
.info-list strong{display:block;color:var(--ink);font-family:var(--display)}
.info-list a{color:inherit;text-decoration:none}
.hours-card{background:var(--sky-soft);border-radius:var(--r);padding:36px}
.hours-card h3,.three h3{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hours-card h3 .ic,.three h3 .ic{color:var(--brand)}
.hours{list-style:none;padding:0;margin:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed #b9cdd3}
.hours li span:last-child{font-weight:600}

/* page hero */
.page-hero{background:var(--gray-soft);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--sky);opacity:.35;right:-140px;top:-160px}
.ph-in{position:relative;display:grid;gap:48px;align-items:center;padding-block:clamp(56px,7vw,88px)}
.ph-in.has-media{grid-template-columns:1.15fr .85fr}
.page-hero.center .ph-text{text-align:center;max-width:760px;margin-inline:auto}
.page-hero.center .btns{justify-content:center}
.ph-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:46% 54% 50% 50%/48% 44% 56% 52%;box-shadow:var(--shadow)}
.ph-media.round img{border-radius:50%;border:10px solid #fff}
.crumbs{font-size:14px;font-weight:500;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--brand-deep);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{padding:10px 18px;border-radius:50px;background:#fff;border:1.5px solid var(--sky);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:14px;transition:background .2s,transform .2s}
.chip:hover{background:var(--sky);transform:translateY(-2px)}
.help{display:flex;flex-wrap:wrap;align-items:center;gap:28px;background:var(--sky-soft);border-radius:999px;padding:28px 40px}
.help>div{flex:1 1 320px}
.help .btns{margin:0}
.help-ic{width:72px;height:72px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center}
.help-ic .ic{width:32px;height:32px}
@media (max-width:700px){.help{border-radius:var(--r)}}

/* service detail */
.dyk{display:flex;gap:20px;align-items:flex-start;padding:28px 32px;border-radius:var(--r);background:var(--sky-soft);margin-bottom:56px}
.dyk .eyebrow{margin-bottom:6px}
.dyk-ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center}
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--display);font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.plus{flex:none;width:32px;height:32px;border-radius:50%;background:var(--sky-soft);position:relative;transition:background .2s,transform .3s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--brand-deep);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq[open] .plus{background:var(--sky);transform:rotate(180deg)}
.faq[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq p{padding:0 50px 24px 0;color:var(--muted)}

/* specials */
.special-hero{background:radial-gradient(circle at 20% 20%,#0aa3cc,var(--brand-deep) 60%);color:#fff;position:relative;overflow:hidden;text-align:center}
.sh-in{position:relative;z-index:1;padding-block:clamp(70px,9vw,120px);max-width:820px}
.special-hero h1{color:#fff}
.special-hero .lead{color:rgba(255,255,255,.88)}
.special-hero .btns{justify-content:center}
.sp-glow{position:absolute;border-radius:50%;filter:blur(2px)}
.sp-glow.g1{width:340px;height:340px;background:rgba(138,230,255,.35);left:-120px;bottom:-140px;animation:float 10s ease-in-out infinite}
.sp-glow.g2{width:220px;height:220px;background:rgba(254,216,211,.35);right:-60px;top:-60px;animation:float 8s ease-in-out infinite reverse}
.tickets-sec{margin-top:-70px;position:relative;z-index:2;padding-top:0}
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:28px;align-items:stretch}
.ticket{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:26px;box-shadow:0 26px 50px -28px rgba(31,58,70,.55);overflow:hidden;transition:transform .35s var(--ease)}
.ticket:hover{transform:translateY(-8px)}
.t-top{padding:36px 32px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--sky-soft)}
.t-name{font-family:var(--display);font-weight:800;font-size:20px}
.t-price{font-family:var(--display);font-weight:800;font-size:76px;line-height:1;color:var(--brand-deep);margin-top:12px;letter-spacing:-.04em}
.t-price sup{font-size:30px;vertical-align:top;position:relative;top:10px;margin-right:2px}
.t-freq{font-size:14px;color:var(--muted);margin-top:6px}
.t-cut{position:relative;height:0;border-top:2px dashed var(--gray)}
.t-cut::before,.t-cut::after{content:"";position:absolute;top:-15px;width:30px;height:30px;border-radius:50%;background:var(--white)}
.t-cut::before{left:-15px}.t-cut::after{right:-15px}
.t-list{list-style:none;margin:0;padding:26px 32px;display:flex;flex-direction:column;gap:12px;flex:1}
.t-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.t-list .ic{color:var(--brand);width:18px;height:18px;margin-top:4px}
.ticket .btn{margin:0 32px 32px}
.ticket.featured{background:var(--ink);color:#fff}
.ticket.featured .t-top{background:linear-gradient(160deg,var(--brand),var(--brand-deep))}
.ticket.featured .t-name,.ticket.featured .t-price,.ticket.featured .t-freq{color:#fff}
.ticket.featured .t-list .ic{color:var(--sky)}
.ticket.featured .t-cut::before,.ticket.featured .t-cut::after{background:var(--white)}
.ribbon{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);background:var(--sky);color:var(--ink);font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 16px;border-radius:50px;white-space:nowrap}
.ticket.featured .t-top{padding-top:52px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;counter-reset:s}
.steps li{text-align:center}
.steps p{color:var(--muted);margin-top:8px}
.step-n{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--display);font-weight:800;font-size:24px;box-shadow:0 0 0 8px var(--sky-soft)}

/* patient info */
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;position:relative}
.timeline li{position:relative;display:flex;flex-direction:column;gap:14px}
.timeline li:not(:last-child)::after{content:"";position:absolute;top:28px;left:72px;right:-20px;height:2px;background:repeating-linear-gradient(90deg,var(--sky) 0 8px,transparent 8px 14px)}
.tl-n{width:56px;height:56px;border-radius:50%;background:var(--sky);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px}
.timeline p{color:var(--muted);margin-top:6px}
.timeline a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:600;text-decoration:none}
.timeline a .ic{width:16px;height:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.carriers{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.carriers li{padding:8px 16px;border-radius:50px;background:#fff;border:1.5px solid var(--line);font-size:14px;font-weight:500}
.price-lines{list-style:none;padding:0;margin:22px 0 28px}
.price-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px dashed #b9cdd3}
.price-lines b{font-family:var(--display);font-size:24px;color:var(--brand-deep)}

/* contact */
.contact-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-block:clamp(56px,7vw,88px)}
.methods{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:6px}
.methods a{display:flex;align-items:center;gap:16px;padding:12px 0;text-decoration:none;color:var(--ink)}
.methods small{display:block;color:var(--muted);font-size:13px}
.methods strong{font-family:var(--display);font-size:18px;overflow-wrap:anywhere}
.m-ic{flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 0 0 2px var(--sky);transition:background .25s,color .25s,transform .25s var(--ease)}
.methods a:hover .m-ic{background:var(--brand);color:#fff;transform:scale(1.06)}
.form-card{background:#fff;border-radius:28px;padding:clamp(28px,4vw,44px);box-shadow:0 30px 60px -30px rgba(31,58,70,.45);scroll-margin-top:130px}
.form-card>p{color:var(--muted);margin:6px 0 24px}
.form-card form{display:flex;flex-direction:column;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-card label{display:block;font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:6px}
.form-card input,.form-card textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--gray-soft);font:inherit;color:var(--ink);transition:border-color .2s,background .2s}
.form-card input:focus,.form-card textarea:focus{border-color:var(--brand);background:#fff;outline:none;box-shadow:0 0 0 4px var(--sky-soft)}
.form-card textarea{resize:vertical}
.form-card .btn{align-self:flex-start}
.hp{display:none}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.three p{color:var(--muted);margin-bottom:20px}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:11px 0;border-bottom:1px dashed #b9cdd3}

/* office / profile */
.checks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ic{flex:none;color:#fff;background:var(--brand);border-radius:50%;padding:4px;width:24px;height:24px;margin-top:2px}
.profile-in{position:relative;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;padding-block:clamp(56px,7vw,88px)}
.bio-text p{font-size:17px}
.bio-text p+p{margin-top:18px}
.edu{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.prose p{font-size:17px;color:var(--muted)}
.prose p+p{margin-top:16px}

/* footer */
.footer{background:var(--ink);color:rgba(255,255,255,.8);font-size:15px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:40px;padding-block:72px 48px}
.foot-brand img{width:170px;height:auto;background:#fff;border-radius:22px;padding:14px}
.foot-brand p{margin-top:18px;max-width:300px}
.footer h4{color:#fff;font-size:16px;margin-bottom:14px}
.footer p+p{margin-top:12px}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{color:var(--sky)}
.foot-hours,.foot-links{list-style:none;padding:0;margin:0}
.foot-hours li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.foot-links li{padding:3px 0}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.foot-legal{display:flex;flex-wrap:wrap;gap:18px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .hero-in,.ph-in.has-media,.why,.doc-feature,.welcome,.visit,.two,.contact-in,.profile-in{grid-template-columns:1fr}
  .hero-media{max-width:480px;margin-inline:auto;width:100%}
  .doc-feature,.profile-in{justify-items:center;text-align:center}
  .doc-feature .btns,.profile-in .btns{justify-content:center}
  .three{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .timeline li::after{display:none}
  .ph-media{max-width:420px}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .svc-img{width:160px;height:160px}
  .fc1{left:0;top:4%}.fc2{right:0}
  .topbar-in{justify-content:center;text-align:center}
  .quote-big{padding:32px}
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
