/* ============================================================
   Innisfil Dental Smile Solutions — "Still Water"
   Design system: tokens, base, header, footer, buttons, forms,
   cards, badges, key-facts tables, FAQ, quick-answer, breadcrumbs.
   One edit to :root re-themes the whole site.
   ============================================================ */
:root{
  /* brand */
  --teal:        #0E7C86;
  --teal-deep:   #0A5A62;
  --teal-darker: #073f46;
  --teal-soft:   #7FC9CE;
  --mint:        #E6F3F2;
  --mint-2:      #D5EBEA;
  --coral:       #E08A72;   /* warmth accent — used sparingly */
  --coral-deep:  #C56A50;
  --coral-soft:  #F6E0D8;

  /* neutrals */
  --ink:         #102A30;   /* primary text */
  --ink-soft:    #3C565C;   /* secondary text (>=4.5:1 on porcelain) */
  --ink-mute:    #5E777C;   /* tertiary */
  --porcelain:   #F6F8F7;   /* page bg */
  --paper:       #FFFFFF;   /* cards */
  --line:        #DCE7E6;   /* hairlines */
  --line-soft:   #EAF1F0;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scale */
  --maxw: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(16,42,48,.05), 0 2px 8px rgba(16,42,48,.04);
  --shadow:    0 10px 30px -12px rgba(10,90,98,.20), 0 4px 12px -6px rgba(16,42,48,.08);
  --shadow-lg: 0 28px 60px -24px rgba(10,90,98,.30);
  --ring: 0 0 0 3px rgba(14,124,134,.32);
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis, html.lenis body{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--teal-deep); text-decoration:none; }
a:hover{ color:var(--coral-deep); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem,5.4vw,4rem); }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
p{ margin:0 0 1.1rem; color:var(--ink-soft); }
strong{ color:var(--ink); font-weight:600; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--teal-soft); color:var(--teal-darker); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(3.6rem,8vw,7rem) 0; }
.eyebrow{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--coral); border-radius:2px; }
.lead{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-soft); line-height:1.6; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.measure{ max-width:64ch; }

/* ---- skip link ---- */
.skip{ position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0; z-index:2000; }
.skip:focus{ left:0; color:#fff; }

/* ============================================================ HEADER */
.site-header{ position:sticky; top:0; z-index:900; background:rgba(246,248,247,.82); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s, background .3s; }
.site-header.scrolled{ box-shadow:var(--shadow-sm); background:rgba(255,255,255,.9); }
.topbar{ background:var(--teal-darker); color:#cfeceb; font-size:.82rem; }
.topbar__row{ display:flex; gap:1.4rem; align-items:center; justify-content:center; flex-wrap:wrap; padding:.45rem var(--gutter); }
.topbar a{ color:#eafafa; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.topbar a:hover{ color:#fff; }
.topbar .sep{ opacity:.4; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem var(--gutter); max-width:var(--maxw); margin-inline:auto; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:46px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.nav__links > li{ position:relative; }
.nav__links a{ color:var(--ink); font-weight:600; font-size:.93rem; padding:.6rem .8rem; border-radius:10px; display:inline-flex; align-items:center; gap:.35rem; transition:background .2s,color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ background:var(--mint); color:var(--teal-deep); }
.nav__links a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--teal); }
.has-mega > a::after{ content:"▾"; font-size:.65rem; opacity:.6; }
.mega{ position:absolute; top:calc(100% + 8px); left:0; min-width:300px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:.6rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s; }
.has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega a{ display:block; padding:.55rem .7rem; border-radius:10px; font-size:.9rem; }
.mega a small{ display:block; color:var(--ink-mute); font-weight:500; font-size:.78rem; }
.nav__cta{ display:flex; align-items:center; gap:.6rem; }

/* burger */
.burger{ display:none; width:46px; height:46px; border:1px solid var(--line); background:var(--paper); border-radius:12px; cursor:pointer; align-items:center; justify-content:center; }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.25s; }
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.drawer{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--paper); z-index:1200; transform:translateX(100%); transition:transform .32s cubic-bezier(.5,0,.2,1); box-shadow:var(--shadow-lg); padding:1.3rem; overflow-y:auto; }
.drawer.open{ transform:translateX(0); }
.drawer__scrim{ position:fixed; inset:0; background:rgba(8,47,54,.42); backdrop-filter:blur(2px); z-index:1100; opacity:0; visibility:hidden; transition:.3s; }
.drawer__scrim.open{ opacity:1; visibility:visible; }
.drawer h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:1.2rem 0 .4rem; }
.drawer a{ display:block; padding:.6rem .3rem; color:var(--ink); font-weight:600; border-bottom:1px solid var(--line-soft); }
.drawer__close{ float:right; background:none; border:none; font-size:1.6rem; color:var(--ink-mute); cursor:pointer; line-height:1; }

/* ============================================================ BUTTONS */
.btn{ --bg:var(--teal); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--sans); font-weight:700; font-size:.96rem; line-height:1; padding:.95rem 1.5rem; border-radius:999px; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .25s, background .2s; background:var(--bg); color:var(--fg); box-shadow:0 8px 20px -10px rgba(10,90,98,.6); }
.btn:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 14px 26px -10px rgba(10,90,98,.7); }
.btn::after{ content:""; position:absolute; top:0; left:-80%; width:55%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:left .55s; }
.btn:hover::after{ left:130%; }
.btn--ghost{ --bg:transparent; --fg:var(--teal-deep); border-color:var(--teal); box-shadow:none; }
.btn--ghost:hover{ background:var(--teal); --fg:#fff; }
.btn--coral{ --bg:var(--coral); box-shadow:0 8px 20px -10px rgba(197,106,80,.6); }
.btn--white{ --bg:#fff; --fg:var(--teal-deep); }
.btn--lg{ padding:1.1rem 1.9rem; font-size:1.02rem; }
.btn--block{ width:100%; }
@media (prefers-reduced-motion:reduce){ .btn::after{ display:none; } .btn:hover{ transform:none; } }

/* ============================================================ CARDS */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(14,124,134,.5),transparent); opacity:0; transition:opacity .3s; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--mint-2); }
.card:hover::before{ opacity:1; }
.card__icon{ width:52px; height:52px; border-radius:14px; background:var(--mint); color:var(--teal-deep); display:grid; place-items:center; margin-bottom:1rem; }
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.4rem; }
.card p{ font-size:.96rem; margin-bottom:1rem; }
.card .link-arrow{ font-weight:700; color:var(--teal-deep); font-family:var(--sans); font-size:.9rem; display:inline-flex; gap:.35rem; align-items:center; }
.card .link-arrow svg{ width:16px; height:16px; transition:transform .25s; }
.card:hover .link-arrow svg{ transform:translateX(4px); }

.grid{ display:grid; gap:1.3rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* pill / badges */
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:999px; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.02em; }
.pill--mint{ background:var(--mint); color:var(--teal-deep); }
.pill--coral{ background:var(--coral-soft); color:var(--coral-deep); }
.pill--cdcp{ background:var(--teal); color:#fff; }

/* ============================================================ QUICK ANSWER + KEY FACTS (AEO) */
.quick-answer{ background:linear-gradient(180deg,var(--mint),#fff); border:1px solid var(--mint-2); border-left:4px solid var(--teal); border-radius:var(--radius-sm); padding:1.3rem 1.5rem; margin:0 0 1.8rem; box-shadow:var(--shadow-sm); }
.quick-answer .qa-label{ font-family:var(--sans); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:0 0 .4rem; }
.quick-answer p{ margin:0; color:var(--ink); font-size:1.05rem; }
table.key-facts{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin:1.5rem 0; font-size:.96rem; }
table.key-facts th, table.key-facts td{ text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.key-facts tr:last-child th, table.key-facts tr:last-child td{ border-bottom:none; }
table.key-facts th{ width:38%; color:var(--teal-deep); font-family:var(--sans); font-weight:700; background:var(--mint); }
table.key-facts td{ color:var(--ink-soft); }
table.key-facts tr:hover td, table.key-facts tr:hover th{ background:var(--coral-soft); }

/* comparison table */
table.compare{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin:1.5rem 0; font-size:.95rem; }
table.compare th, table.compare td{ padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); text-align:left; }
table.compare thead th{ background:var(--teal-deep); color:#fff; font-family:var(--sans); }
table.compare tbody th{ font-family:var(--sans); color:var(--ink); background:var(--mint); font-weight:700; }
table.compare tr:hover td{ background:var(--mint); }

/* ============================================================ FAQ */
.faqs{ display:grid; gap:.8rem; }
.faqs details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.2rem 1.2rem; transition:border-color .25s, box-shadow .25s; }
.faqs details[open]{ border-color:var(--teal-soft); box-shadow:var(--shadow-sm); }
.faqs summary{ list-style:none; cursor:pointer; font-family:var(--sans); font-weight:700; color:var(--ink); padding:1rem 2rem 1rem 0; position:relative; font-size:1.02rem; }
.faqs summary::-webkit-details-marker{ display:none; }
.faqs summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--teal); transition:transform .25s; font-weight:400; }
.faqs details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faqs details p{ margin:0 0 1rem; }

/* ============================================================ BREADCRUMB + PAGE HERO */
.breadcrumb{ font-size:.84rem; color:var(--ink-mute); font-family:var(--sans); }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; }
.breadcrumb li::after{ content:"/"; margin-left:.45rem; opacity:.5; }
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb a{ color:var(--ink-mute); }
.breadcrumb a:hover{ color:var(--teal-deep); }

/* ============================================================ TESTIMONIALS */
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; position:relative; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column; }
.quote::before{ content:"\201C"; font-family:var(--serif); font-size:4.5rem; line-height:1; color:var(--teal-soft); position:absolute; top:.4rem; right:1.1rem; opacity:.6; }
.quote h4{ font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin:0 0 .7rem; }
.quote p{ color:var(--ink); font-size:1rem; }
.quote cite{ margin-top:auto; font-style:normal; font-weight:700; color:var(--ink); font-family:var(--sans); display:flex; align-items:center; gap:.6rem; }
.quote cite::before{ content:""; width:26px; height:26px; border-radius:50%; background:var(--mint); }

/* ============================================================ STATS */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.stat{ padding:1.6rem 1.2rem; text-align:center; border-right:1px solid var(--line-soft); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2rem,4vw,2.8rem); color:var(--teal-deep); line-height:1; }
.stat span{ font-size:.85rem; color:var(--ink-mute); font-family:var(--sans); font-weight:600; }

/* ============================================================ FORMS */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.35rem; }
.field .req{ color:var(--coral-deep); }
.field input, .field select, .field textarea{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:var(--ring); }
.field textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:.82rem; color:var(--ink-mute); }
.form-success{ display:none; background:var(--mint); border:1px solid var(--teal-soft); border-radius:12px; padding:1rem 1.2rem; color:var(--teal-darker); font-weight:600; }

/* ============================================================ CTA BAND */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--teal-deep),var(--teal-darker)); color:#eafafa; border-radius:var(--radius-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#cfeceb; }
.cta-band__mark{ position:absolute; right:-30px; bottom:-50px; width:280px; opacity:.07; pointer-events:none; }
.cta-band .btn-row{ justify-content:center; }

.btn-row{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }

/* ============================================================ FOOTER */
.site-footer{ background:var(--teal-darker); color:#bfe0df; position:relative; overflow:hidden; padding:clamp(3rem,6vw,4.5rem) 0 0; margin-top:3rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2rem; position:relative; z-index:2; }
.site-footer h5{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#7fc9ce; margin:0 0 1rem; }
.site-footer a{ color:#d6ecec; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.92rem; }
.footer-brand img{ height:52px; margin-bottom:1rem; }
.footer-brand p{ color:#9fcccb; font-size:.92rem; max-width:32ch; }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.footer-socials{ display:flex; gap:.6rem; margin-top:1rem; }
.footer-socials a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .2s; }
.footer-socials a:hover{ background:var(--teal); }
.footer-socials svg{ width:19px; height:19px; }
.footer-badges{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.1); }
.footer-badges img{ height:38px; width:auto; background:#fff; border-radius:8px; padding:5px 8px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.4rem; padding:1.3rem 0; font-size:.82rem; color:#8fc0bf; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; position:relative; z-index:2; }
.footer-watermark{ position:absolute; left:0; right:0; bottom:-3.5vw; text-align:center; font-family:var(--serif); font-weight:600; font-size:18vw; line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(127,201,206,.10); white-space:nowrap; pointer-events:none; user-select:none; z-index:1; }

/* ============================================================ CUSTOM CURSOR */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:5000; opacity:0; transition:opacity .3s; }
.cursor-dot{ width:7px; height:7px; background:var(--teal); margin:-3.5px 0 0 -3.5px; }
.cursor-ring{ width:34px; height:34px; border:1.5px solid var(--coral); margin:-17px 0 0 -17px; transition:width .25s, height .25s, margin .25s, background .25s, opacity .3s; }
html.has-cursor.ready .cursor-dot, html.has-cursor.ready .cursor-ring{ opacity:1; }
html.has-cursor.cursor-active .cursor-ring{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(224,138,114,.12); }
html.has-cursor.cursor-press .cursor-ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }
html.has-cursor *{ cursor:none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select{ cursor:auto !important; }

/* ============================================================ REVEAL */
[data-reveal]{ opacity:0; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* grain */
.grain::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:400; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================================================ RESPONSIVE */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-soft); }
}
@media (max-width:880px){
  .nav__links, .topbar{ display:none; }
  .burger{ display:flex; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  body{ font-size:16px; }
  .nav__cta .btn--ghost{ display:none; }
}