/* St. John's Dental — sample site by Skjei AI */
:root{
  --navy:#14324A; --navy-deep:#0E2436; --navy-2:#1C475F;
  --cream:#FBF7EF; --cream-2:#F3ECDD; --cream-3:#EFE7D6;
  --coral:#DD6149; --coral-deep:#C24B36;
  --teal:#2E8F86; --teal-deep:#236E67;
  --slate:#586871; --ink:#1B2730; --line:#E7DECF;
  --shadow:0 18px 50px rgba(14,36,54,.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif;font-weight:600;line-height:1.12;letter-spacing:-0.01em;color:var(--navy);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px;}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--coral);margin-bottom:16px;}
.eyebrow.t{color:var(--teal);}

/* scroll progress */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--coral);z-index:3000;transition:width .1s linear;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-weight:600;font-size:15px;padding:14px 26px;border-radius:8px;transition:transform .15s,background .2s;border:none;cursor:pointer;}
.btn:hover{background:var(--coral-deep);transform:translateY(-2px);}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}
.btn-navy{background:var(--navy);}.btn-navy:hover{background:var(--navy-deep);}
.btn-outline{background:transparent;border:1.5px solid var(--coral);color:var(--coral);}
.btn-outline:hover{background:var(--coral);color:#fff;}

/* topbar */
.topbar{background:var(--navy-deep);color:rgba(251,247,239,.82);font-size:13.5px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 26px;flex-wrap:wrap;}
.topbar a{color:var(--coral);font-weight:600;}
.topbar .star{color:#F2B84B;}

/* nav */
.nav{position:sticky;top:0;z-index:2000;background:rgba(251,247,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;}
.logo{display:inline-flex;align-items:center;gap:11px;}
.logo .mk{width:42px;height:42px;flex-shrink:0;}
.logo .lt{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--navy);line-height:1;}
.logo .lt span{color:var(--coral);}
.logo .ls{display:block;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-top:3px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--navy);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--coral);}
.nav-links .btn{color:#fff;}
.nav-toggle{display:none;background:none;border:none;font-size:26px;color:var(--navy);cursor:pointer;}

/* hero */
.hero{position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:url('hero-stjohns.jpg') center 32%/cover no-repeat;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,40,.78) 0%,rgba(12,30,46,.46) 42%,rgba(14,40,60,.62) 100%);}
.hero .wrap{position:relative;z-index:2;padding-top:70px;padding-bottom:80px;}
.hero-inner{max-width:740px;}
.hero .eyebrow{color:#F2B84B;}
.hero h1{color:#fff;font-size:clamp(34px,5.4vw,58px);line-height:1.08;font-weight:600;}
.hero h1 .twline{display:block;min-height:2.35em;}
.hero h1 .type{color:#FF9E84;}
.hero h1 .cursor{color:var(--coral);font-weight:400;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(16px,2vw,19px);margin:22px 0 30px;max-width:600px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-trust{margin-top:30px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);font-size:14.5px;}
.hero-trust .st{color:#F2B84B;letter-spacing:2px;}

/* stat strip */
.stat-strip{background:var(--navy);color:var(--cream);}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:38px 26px;}
.stat{text-align:center;}
.stat .n{font-family:'Fraunces',serif;font-size:clamp(28px,4vw,40px);font-weight:600;color:#fff;}
.stat .l{font-size:13px;color:rgba(251,247,239,.72);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;}

/* section base */
section{position:relative;}
.pad{padding:clamp(60px,9vw,104px) 0;}
.sec-head{max-width:660px;margin:0 auto 50px;text-align:center;}
.sec-head h2{font-size:clamp(28px,4vw,42px);}
.sec-head p{color:var(--slate);font-size:17px;margin-top:14px;}

/* welcome */
.welcome .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.welcome h2{font-size:clamp(28px,3.8vw,40px);margin-bottom:18px;}
.welcome p{color:var(--slate);font-size:17px;margin-bottom:16px;}
.welcome .dropcap::first-letter{font-family:'Fraunces',serif;font-size:64px;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--coral);font-weight:600;}
.qcard{background:var(--navy);color:var(--cream);border-radius:18px;padding:40px;box-shadow:var(--shadow);}
.qcard .q{font-family:'Fraunces',serif;font-size:22px;line-height:1.4;font-style:italic;color:#fff;}
.qcard .qa{margin-top:20px;font-size:14px;color:rgba(251,247,239,.7);}
.qcard .qa b{color:var(--coral);font-weight:600;display:block;font-style:normal;}

/* services */
.services{background:var(--cream-2);}
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.serv-card{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.serv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.serv-card .ic{width:52px;height:52px;border-radius:13px;background:rgba(221,97,73,.12);color:var(--coral);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.serv-card .ic svg{width:26px;height:26px;}
.serv-card h3{font-size:19px;margin-bottom:8px;}
.serv-card p{color:var(--slate);font-size:15px;}

/* promises / why us */
.why{background:var(--navy);color:var(--cream);}
.why .sec-head h2{color:#fff;}
.why .sec-head p{color:rgba(251,247,239,.72);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why-item{text-align:center;}
.why-item .ic{width:58px;height:58px;border-radius:50%;background:rgba(242,184,75,.14);color:#F2B84B;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.why-item .ic svg{width:27px;height:27px;}
.why-item h3{color:#fff;font-size:18px;margin-bottom:7px;}
.why-item p{color:rgba(251,247,239,.72);font-size:14.5px;}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tcard{text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:34px 24px;transition:transform .2s,box-shadow .2s;}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:34px;font-weight:600;color:#fff;}
.tcard h3{font-size:20px;}
.tcard .role{color:var(--coral);font-size:14px;font-weight:600;margin:3px 0 12px;}
.tcard p{color:var(--slate);font-size:14.5px;}

/* first visit */
.fv{background:var(--cream-2);}
.fv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.fv-card{background:var(--cream);border-radius:16px;padding:32px 28px;border:1px solid var(--line);}
.fv-card .step{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Fraunces',serif;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.fv-card h3{font-size:19px;margin-bottom:8px;}
.fv-card p{color:var(--slate);font-size:15px;}

/* reviews */
.reviews .agg{text-align:center;margin-bottom:42px;}
.reviews .agg .big{font-family:'Fraunces',serif;font-size:54px;color:var(--navy);line-height:1;}
.reviews .agg .st{color:#F2B84B;font-size:22px;letter-spacing:3px;margin:6px 0;}
.reviews .agg .ct{color:var(--slate);font-size:15px;}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rev-card{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:28px;}
.rev-card .st{color:#F2B84B;letter-spacing:2px;margin-bottom:12px;}
.rev-card .q{font-size:15.5px;color:var(--ink);line-height:1.6;margin-bottom:16px;}
.rev-card .who{font-weight:600;font-size:14px;}
.rev-card .src{font-size:12.5px;color:var(--slate);}

/* neighbourhood / local */
.local{background:var(--navy-deep);color:var(--cream);}
.local .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.local .eyebrow{color:#F2B84B;}
.local h2{color:#fff;font-size:clamp(28px,3.8vw,40px);margin-bottom:18px;}
.local p{color:rgba(251,247,239,.78);font-size:16.5px;margin-bottom:16px;}
.local-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;}
.local-img img{width:100%;height:100%;object-fit:cover;}

/* ask band */
.ask{background:var(--coral);color:#fff;text-align:center;}
.ask .ic{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.ask .ic svg{width:30px;height:30px;}
.ask h2{color:#fff;font-size:clamp(26px,3.4vw,36px);}
.ask p{color:rgba(255,255,255,.92);font-size:17px;max-width:540px;margin:14px auto 0;}
.ask .hint{display:inline-block;margin-top:18px;font-weight:600;font-size:15px;}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.contact h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:16px;}
.contact .lead{color:var(--slate);font-size:17px;margin-bottom:26px;}
.detail{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;}
.detail .di{width:42px;height:42px;border-radius:11px;background:rgba(46,143,134,.12);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.detail .di svg{width:20px;height:20px;}
.detail b{display:block;font-size:14px;color:var(--ink);}
.detail span,.detail a{color:var(--slate);font-size:15px;}
.hours-card{background:var(--navy);color:var(--cream);border-radius:18px;padding:34px;box-shadow:var(--shadow);}
.hours-card h3{color:#fff;font-size:20px;margin-bottom:18px;}
.hrow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(251,247,239,.12);font-size:15px;}
.hrow:last-child{border:none;}
.hrow .day{color:rgba(251,247,239,.82);}.hrow .tm{color:#fff;font-weight:500;}
.hrow.late .tm{color:#F2B84B;}
.hrow.closed .tm{color:rgba(251,247,239,.5);}

/* map */
.map iframe{width:100%;height:420px;border:none;display:block;filter:grayscale(.2);}

/* footer */
.footer{background:var(--navy-deep);color:rgba(251,247,239,.66);padding:60px 0 30px;}
.footer .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;}
.footer .lt{font-family:'Fraunces',serif;font-size:24px;color:var(--cream);}
.footer .lt span{color:var(--coral);}
.footer p{font-size:14.5px;margin-top:14px;line-height:1.6;max-width:320px;}
.footer h4{color:var(--cream);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;}
.footer .ft-col a{display:block;font-size:14.5px;margin-bottom:11px;transition:color .2s;}
.footer .ft-col a:hover{color:var(--coral);}
.footer .ft-bottom{border-top:1px solid rgba(251,247,239,.12);margin-top:42px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(251,247,239,.42);}

/* chat bubble (placeholder for live bot) */
.sk-bubble{position:fixed;bottom:24px;right:24px;z-index:2500;display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:14px 20px 14px 16px;border-radius:40px;box-shadow:0 12px 34px rgba(14,36,54,.35);cursor:pointer;font-weight:600;font-size:15px;transition:transform .15s;}
.sk-bubble:hover{transform:translateY(-2px);}
.sk-bubble .dot{width:38px;height:38px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;}
.sk-bubble .dot svg{width:20px;height:20px;}
.sk-bubble .on{position:absolute;top:11px;left:42px;width:9px;height:9px;border-radius:50%;background:#5FBF77;border:2px solid var(--navy);}

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

/* responsive */
@media(max-width:920px){
  .welcome .wrap,.contact .wrap,.local .wrap{grid-template-columns:1fr;gap:34px;}
  .serv-grid,.team-grid,.fv-grid,.rev-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .stat-strip .wrap{grid-template-columns:repeat(2,1fr);gap:28px;}
}
@media(max-width:680px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:10px 26px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:11px 0;width:100%;}
  .nav-toggle{display:block;}
  .serv-grid,.team-grid,.fv-grid,.rev-grid{grid-template-columns:1fr;}
  .footer .ft-grid{grid-template-columns:1fr;gap:28px;}
  .hero{min-height:78vh;}
}

/* timeline */
.timeline-sec{background:var(--cream-2);}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:10px;}
.tl::before{content:"";position:absolute;top:13px;left:11%;right:11%;height:2px;background:var(--line);}
.tl-item{position:relative;text-align:center;padding-top:40px;}
.tl-item .dot{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--coral);border:3px solid var(--cream-2);}
.tl-item .yr{font-family:'Fraunces',serif;font-weight:600;color:var(--coral);font-size:21px;}
.tl-item h3{font-size:17px;margin:6px 0 6px;}
.tl-item p{color:var(--slate);font-size:14.5px;}
/* footer socials */
.footer .socials{display:flex;gap:12px;margin-top:20px;}
.footer .socials a{width:38px;height:38px;border-radius:50%;background:rgba(251,247,239,.1);display:flex;align-items:center;justify-content:center;color:rgba(251,247,239,.72);transition:all .2s;}
.footer .socials a:hover{background:var(--coral);color:#fff;transform:translateY(-2px);}
.footer .socials svg{width:18px;height:18px;}
@media(max-width:680px){
  .tl{grid-template-columns:1fr;gap:6px;}
  .tl::before{display:none;}
  .tl-item{text-align:left;padding:14px 0 14px 26px;border-left:2px solid var(--line);}
  .tl-item .dot{left:-9px;top:18px;}
}

/* subpage hero */
.page-hero{background:var(--navy);color:#fff;padding:clamp(54px,8vw,86px) 0 clamp(46px,6vw,70px);text-align:center;}
.page-hero .eyebrow{color:#F2B84B;}
.page-hero h1{color:#fff;font-size:clamp(32px,5vw,50px);}
.page-hero p{color:rgba(255,255,255,.85);max-width:560px;margin:16px auto 0;font-size:17px;}
/* prose */
.prose{max-width:760px;margin:0 auto;}
.prose p{color:var(--slate);font-size:17px;margin-bottom:18px;}
.prose p.dropcap::first-letter{font-family:'Fraunces',serif;font-size:60px;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--coral);font-weight:600;}
/* values */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:30px 26px;}
.value .ic{width:48px;height:48px;border-radius:12px;background:rgba(46,143,134,.12);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.value .ic svg{width:24px;height:24px;}
.value h3{font-size:18px;margin-bottom:8px;}
.value p{color:var(--slate);font-size:15px;}
/* services list */
.svc-cat{margin-bottom:46px;}
.svc-cat .ct{font-family:'Fraunces',serif;font-size:25px;color:var(--navy);margin-bottom:6px;}
.svc-cat .cd{color:var(--slate);margin-bottom:22px;}
.svc-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.svc-row{display:flex;gap:14px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 24px;}
.svc-row .ck{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.svc-row h4{font-size:17px;margin-bottom:4px;}
.svc-row p{color:var(--slate);font-size:14.5px;}
/* contact form */
.cform{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow);}
.cform label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin:0 0 7px;}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff;margin-bottom:18px;}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--coral);}
.cform textarea{min-height:110px;resize:vertical;}
@media(max-width:920px){.values-grid{grid-template-columns:1fr;}.svc-rows{grid-template-columns:1fr;}}

/* extra mobile polish */
@media(max-width:680px){
  .why-grid{grid-template-columns:1fr;}
  .logo .ls{display:none;}
  .map iframe{height:320px;}
  .hero h1{font-size:clamp(30px,8vw,42px);}
}