/* Northside Denture Clinic — static site styles
   Studio palette: ink petrol · bone · muted brass. Fraunces + Hanken Grotesk. */

:root{
  --bone:#f5f1e8;
  --bone-2:#eee7d8;
  --ink:#16333f;
  --ink-deep:#0e2530;
  --brass:#bd823c;
  --brass-hover:#a96f2c;
  --brass-soft:#e8c491;
  --teal:#2c6068;
  --teal-deep:#16333f;
  --card:#fffdf8;
  --line:#e6dfd1;
  --line-dark:rgba(255,255,255,.14);
  --text:#26332f;
  --text-2:#4b5551;
  --text-3:#55605d;
  --muted:#6a736f;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --shell:1160px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-s:0 2px 8px rgba(14,37,48,.06);
  --shadow-m:0 18px 40px rgba(14,37,48,.12);
  --shadow-l:0 30px 70px rgba(14,37,48,.20);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}
body{
  margin:0;background:var(--bone);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--teal);text-decoration:none;}
a:hover{color:var(--ink);}
::selection{background:var(--brass);color:#fff;}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px;}

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 .5em;font-variant-ligatures:none;}
h1{font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1.05;}
h2{font-size:clamp(1.8rem,3vw,2.55rem);}
h3{font-size:1.28rem;letter-spacing:-.01em;}
p{margin:0 0 1rem;max-width:68ch;}
strong{color:var(--ink);font-weight:700;}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px;}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;color:#8a561b;font-weight:700;
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 16px;}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--brass);}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--text-2);max-width:52ch;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  min-height:50px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;white-space:nowrap;}
.btn-solid{background:var(--ink);color:var(--bone);}
.btn-solid:hover{background:var(--ink-deep);color:#fff;}
.btn-brass{background:var(--brass);color:var(--ink);}
.btn-brass:hover{background:var(--brass-hover);color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;}
.btn-light{background:var(--bone);color:var(--ink);}
.btn-light:hover{background:#fff;}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:var(--ink);color:#fff;}
.actions{display:flex;flex-wrap:wrap;gap:12px;}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(245,241,232,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hdr-in{max-width:var(--shell);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink);}
.brand-logo{height:44px;width:auto;}
.brand-tag{border-left:1px solid #d8cfbc;padding-left:13px;color:var(--muted);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;line-height:1.35;}
.nav{display:flex;align-items:center;gap:6px;}
.nav-link{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);color:#3a4642;font-weight:600;font-size:14.5px;padding:9px 12px;border-radius:8px;}
.nav-link:hover{color:var(--brass-hover);background:rgba(189,130,60,.08);}
.nav-item{position:relative;}
.caret{font-size:10px;transition:transform .18s ease;}
.sub{position:absolute;top:100%;left:0;min-width:230px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-m);
  margin-top:6px;padding:8px;display:none;flex-direction:column;gap:2px;}
/* invisible hover bridge so the menu doesn't drop while crossing the gap */
.nav-item.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px;display:none;}
.nav-item.has-sub:hover::after{display:block;}
.sub a{padding:11px 14px;border-radius:9px;color:#3a4642;font-weight:600;font-size:14.5px;}
.sub a:hover{background:var(--bone-2);color:var(--ink);}
.nav-item:hover .sub,.nav-item.sub-open .sub{display:flex;}
.nav-item:hover .caret,.nav-item.sub-open .caret{transform:rotate(180deg);}
.hdr-cta{display:inline-flex;}
.menu-toggle{display:none;background:none;border:1.5px solid var(--ink);color:var(--ink);
  width:46px;height:46px;border-radius:10px;font-size:20px;cursor:pointer;align-items:center;justify-content:center;}
.mobile-menu{display:none;}

@media (max-width:960px){
  .nav,.hdr-cta{display:none;}
  .menu-toggle{display:inline-flex;}
  .brand-tag{display:none;}
  .mobile-menu{display:block;max-height:0;overflow:hidden;transition:max-height .28s ease;
    background:var(--card);border-top:1px solid var(--line);}
  .hdr.menu-open .mobile-menu{max-height:640px;border-bottom:1px solid var(--line);}
  .mobile-menu .mm-in{padding:12px 24px 22px;display:flex;flex-direction:column;gap:2px;}
  .mobile-menu a{padding:13px 8px;border-bottom:1px solid var(--line);color:#3a4642;font-weight:600;font-size:16px;}
  .mobile-menu a.mm-head{font-family:var(--serif);color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.08em;border:0;padding-bottom:4px;padding-top:14px;}
  .mobile-menu a.mm-sub{padding-left:20px;font-weight:600;}
  .mobile-menu .mm-call{margin-top:16px;border:0;justify-content:center;}
}

/* ---------- hero ---------- */
.hero{background:var(--bone);}
.hero-grid{max-width:var(--shell);margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:min(78vh,720px);}
.hero-copy{padding:56px 0;}
.hero h1{max-width:15ch;margin-bottom:22px;}
.hero .lead{margin-bottom:30px;}
.hero-checks{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;font-size:13.5px;color:var(--text-3);font-weight:600;}
.hero-checks span{display:inline-flex;align-items:center;gap:7px;}
.hero-checks .tick{color:var(--teal);font-size:15px;}
.hero-media{position:relative;align-self:stretch;min-height:500px;margin:40px 0;}
.hero-media .photo{position:absolute;inset:0;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-l);}
.hero-badge{position:absolute;left:-18px;bottom:34px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-m);max-width:250px;}
.hero-badge b{display:block;font-family:var(--serif);color:var(--ink);font-size:16px;}
.hero-badge span{color:var(--muted);font-size:12.5px;font-weight:600;}

/* compact hero for inner pages */
.hero-slim{background:var(--bone);border-bottom:1px solid var(--line);}
.hero-slim .in{max-width:var(--shell);margin:0 auto;padding:clamp(48px,7vw,84px) 24px;max-width:min(var(--shell),980px);}
.hero-slim h1{max-width:20ch;}
.hero-slim .lead{margin-bottom:26px;}
.hero-slim.on-ink{background:var(--ink);border-bottom:0;}
.hero-slim.on-ink h1,.hero-slim.on-ink .lead{color:#fff;}
.hero-slim.on-ink .lead{color:#c8d4d9;}
.hero-slim.on-ink .eyebrow{color:var(--brass-soft);}
.hero-slim.on-ink .eyebrow::before{background:var(--brass-soft);}

/* ---------- photo placeholder ---------- */
.photo,.photo-ph{background:var(--bone-2);}
.photo-ph{position:relative;border-radius:var(--radius-l);overflow:hidden;min-height:320px;
  display:grid;place-items:center;text-align:center;border:1px dashed #cdbf9f;color:var(--muted);}
.photo-ph .ph-in{padding:24px;max-width:30ch;}
.photo-ph .ph-icon{font-size:30px;margin-bottom:10px;opacity:.6;}
.photo-ph b{color:var(--ink);font-family:var(--serif);display:block;font-size:1.05rem;margin-bottom:4px;}
.photo-ph small{font-size:12.5px;}
.aspec-45{aspect-ratio:4/5;}
.aspec-43{aspect-ratio:4/3;}
.photo-img{display:block;width:100%;object-fit:cover;border-radius:var(--radius-l);}
.hero-media .photo .photo-img{position:absolute;inset:0;height:100%;}
/* placeholder filling an absolutely-positioned .photo (hero) must not impose its own ratio */
.hero-media .photo .photo-ph{position:absolute;inset:0;height:100%;aspect-ratio:auto;min-height:0;}

/* ---------- stats strip ---------- */
.stat-strip{background:var(--ink);color:#e7eceb;}
.stat-grid{max-width:var(--shell);margin:0 auto;padding:38px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.stat b{font-family:var(--serif);font-size:2rem;color:var(--brass-soft);font-weight:600;line-height:1;display:block;}
.stat span{font-size:13.5px;color:#aebbc0;margin-top:8px;display:block;}

/* ---------- sections ---------- */
.section{max-width:var(--shell);margin:0 auto;padding:clamp(56px,8vw,100px) 24px;}
.section.compact{padding:clamp(40px,5vw,64px) 24px;}
.section-intro{max-width:60ch;margin:0 auto clamp(36px,5vw,52px);text-align:center;}
.section-intro.left{margin-left:0;text-align:left;}
.section-intro .eyebrow{justify-content:center;}
.section-intro.left .eyebrow{justify-content:flex-start;}
.band-wrap{background:var(--bone-2);}
.band-wrap.ink{background:var(--ink);color:#e7eceb;}
.band-wrap.ink h2{color:#fff;}
.band-wrap.ink p{color:#aebbc0;}
.band-wrap.ink .eyebrow{color:var(--brass-soft);}
.band-wrap.ink .eyebrow::before{background:var(--brass-soft);}
.band-wrap.ink a{color:var(--brass-soft);}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.split.sticky-left{grid-template-columns:.82fr 1.18fr;align-items:start;}
.split.wide-left{grid-template-columns:1.1fr .9fr;}
.sticky{position:sticky;top:100px;}

/* editorial numbered service list */
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.svc{display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:baseline;
  padding:26px 20px;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  color:inherit;transition:background .18s ease,border-color .18s ease;}
.svc:hover{background:var(--card);border-left-color:var(--brass);}
.svc .num{font-family:var(--serif);color:var(--brass);font-size:15px;font-weight:600;}
.svc .svc-title{display:block;font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--ink);margin-bottom:5px;}
.svc .svc-desc{color:var(--text-3);font-size:.98rem;}
.svc .arrow{color:#98a29d;font-size:1.4rem;align-self:center;transition:transform .18s ease,color .18s ease;}
.svc:hover .arrow{transform:translateX(5px);color:var(--brass-hover);}

/* cards */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px 26px;}
.card h3{margin-bottom:8px;}
.card p:last-child{margin-bottom:0;}
.card .num{font-family:var(--serif);font-size:2.1rem;color:var(--brass);font-weight:600;line-height:1;margin-bottom:14px;display:block;}
.card-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:10px;}
a.card{display:block;transition:border-color .18s ease,background .18s ease,transform .18s ease;}
a.card:hover{border-color:var(--brass);background:#fff;}
a.card .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--ink);font-weight:700;font-size:.95rem;}
a.card:hover .go{color:var(--brass-hover);}

/* callouts */
.callout{background:#eef3f2;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;padding:22px 26px;margin:0 0 1rem;}
.callout.plain{background:var(--card);border-left-color:var(--brass);border:1px solid var(--line);border-left-width:4px;}
.callout p:last-child{margin-bottom:0;}
.callout--cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}

/* steps */
.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--serif);font-weight:600;
  color:var(--brass);font-size:1.15rem;background:var(--card);border:1px solid var(--line);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;}
.steps strong{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:3px;}
.steps .st-body{color:var(--text-3);padding-top:2px;}

/* quote */
.pullquote{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.5;color:#3f4a46;
  border-left:3px solid var(--brass);padding-left:20px;margin:0 0 26px;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{border:1px solid #d8cfbc;background:var(--card);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--ink);}
.chips.on-ink .chip{border-color:var(--line-dark);background:transparent;color:#e7eceb;}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--card);}
table.tbl{width:100%;border-collapse:collapse;min-width:520px;}
table.tbl th,table.tbl td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;}
table.tbl thead th{background:var(--ink);color:#fff;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;border-bottom:0;}
table.tbl thead th:first-child{border-top-left-radius:var(--radius-m);}
table.tbl thead th:last-child{border-top-right-radius:var(--radius-m);}
table.tbl tbody tr:last-child td{border-bottom:0;}
table.tbl tbody tr:nth-child(even){background:rgba(238,231,216,.4);}
.price{font-family:var(--serif);font-weight:600;color:var(--ink);white-space:nowrap;}

/* lists */
.ticks{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:10px;}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:11px;color:var(--text-2);}
.ticks li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brass);margin-top:9px;}

/* mini facts */
.mini-facts{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.mini-fact{background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:11px 15px;font-size:14.5px;color:var(--text-2);font-weight:500;}

/* FAQ */
.faqs{border-top:1px solid var(--line);max-width:820px;margin:0 auto;}
.faq{border-bottom:1px solid var(--line);}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;
  font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ink);cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:#eef3f2;position:relative;color:transparent;font-size:0;}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--teal);border-radius:2px;}
.faq .plus::before{width:12px;height:2px;transform:translate(-50%,-50%);}
.faq .plus::after{width:2px;height:12px;transform:translate(-50%,-50%);transition:transform .2s ease,opacity .2s ease;}
.faq[open] .plus{background:var(--brass);}
.faq[open] .plus::before{background:var(--ink);}
.faq[open] .plus::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}
.faq .ans{padding:0 4px 22px;color:var(--text-3);}
.faq .ans p:last-child{margin-bottom:0;}

/* final CTA panel */
.cta-panel{max-width:var(--shell);margin:0 auto;padding:0 24px clamp(56px,8vw,90px);}
.cta-box{background:var(--brass);border-radius:24px;padding:clamp(38px,6vw,60px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;}
.cta-box h2{color:var(--ink);margin-bottom:12px;max-width:20ch;}
.cta-box p{color:#3d2f16;font-weight:500;margin:0;max-width:38ch;}
.cta-box .actions{flex-direction:column;min-width:230px;}
.cta-box .btn{width:100%;}

/* form */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-l);padding:clamp(26px,4vw,38px);box-shadow:var(--shadow-s);}
.field{margin-bottom:18px;}
.field label{display:block;font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:7px;}
.field label .req{color:var(--brass-hover);}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--text);
  background:#fff;border:1.5px solid #d8cfbc;border-radius:var(--radius-s);padding:13px 15px;transition:border-color .16s ease,box-shadow .16s ease;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(44,96,104,.16);}
.form-note{font-size:13px;color:var(--muted);margin-top:14px;}
.form-status{display:none;padding:14px 16px;border-radius:var(--radius-s);font-weight:600;margin-bottom:16px;}
.form-status.ok{display:block;background:#e7f1ec;color:#1c5b3f;border:1px solid #b9d9c8;}
.form-status.err{display:block;background:#f6e7e3;color:#8a3222;border:1px solid #e2bcb1;}

/* footer */
.ft{background:var(--ink-deep);color:#9fb0b6;}
.ft-in{max-width:var(--shell);margin:0 auto;padding:52px 24px 30px;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;}
.ft-logo{height:50px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:14px;}
.ft-blurb{max-width:34ch;}
.ft-blurb p{font-size:14px;color:#8ea1a8;margin-bottom:16px;}
.ft-cols{display:flex;gap:56px;flex-wrap:wrap;}
.ft-col{display:flex;flex-direction:column;gap:10px;}
.ft-col b{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;font-family:var(--sans);}
.ft-col a{color:#9fb0b6;font-size:14px;}
.ft-col a:hover{color:#fff;}
.ft-bottom{border-top:1px solid rgba(255,255,255,.1);}
.ft-bottom .in{max-width:var(--shell);margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:#6f838a;}
.ft-bottom a{color:#6f838a;}

/* mobile action bar */
.action-bar{display:none;}
@media (max-width:720px){
  .action-bar{display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(14,37,48,.1);}
  .action-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;font-weight:700;font-size:15px;min-height:56px;}
  .action-bar a.call{color:var(--ink);}
  .action-bar a.book{background:var(--brass);color:var(--ink);}
  body{padding-bottom:56px;}
}

/* responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:8px;min-height:0;}
  .hero-media{order:-1;min-height:320px;margin:32px 0 0;}
  .hero-copy{padding:40px 0 8px;}
  .split,.split.sticky-left,.split.wide-left{grid-template-columns:1fr;gap:2.2rem;}
  .sticky{position:static;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .stat-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
}
@media (max-width:600px){
  body{font-size:16px;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .svc{grid-template-columns:auto 1fr;}
  .svc .arrow{display:none;}
  .cta-box .actions{width:100%;}
  .callout--cta{flex-direction:column;align-items:flex-start;}
  .hero-badge{left:12px;right:12px;max-width:none;}
  /* stacked pricing/comparison tables */
  table.tbl.stack,table.tbl.stack thead,table.tbl.stack tbody,table.tbl.stack tr,table.tbl.stack th,table.tbl.stack td{display:block;width:100%;}
  table.tbl.stack{min-width:0;}
  table.tbl.stack thead{display:none;}
  table.tbl.stack tr{border-bottom:1px solid var(--line);padding:6px 0;}
  table.tbl.stack td{border-bottom:0;padding:8px 18px;}
  table.tbl.stack td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px;}
  .table-wrap{overflow-x:visible;}
}