/* Dr. Nick DDS — site styles.
   Colours and fonts are tokens at the top: change a colour once here and it
   changes everywhere. Light only: the page stays light even when the
   device is in dark mode. Every text pair passes WCAG AA (lowest: gold
   on warm, 4.77:1) — check contrast before changing a colour. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF6F0; --warm:#F3EBE1; --mint:#E8F2EE;
  --ink:#1F2A28; --body:#3D4644; --muted:#5E6765;
  --gold:#7B6526; --primary:#0A5C57; --on-primary:#FFFFFF;
  --line:#E2D8CC; --grid:rgba(123,101,38,.07); --frame:#FFFFFF; --fab-shadow:rgba(31,42,40,.22);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* M3 easing */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-standard-accel:cubic-bezier(.3,0,1,1);
  --ease-emph-decel:cubic-bezier(.05,.7,.1,1);

  --bar-h:72px;
  color-scheme:only light;
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Anchor jumps and keyboard focus land below the sticky bar and above the phone FAB. */
  scroll-padding-top:calc(var(--bar-h) + 16px);
  scroll-padding-bottom:96px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:28px;
  background:var(--bg);
  color:var(--body);
  overflow-wrap:break-word;
}
a{color:var(--primary)}
img,svg,picture{display:block}
h1,h2,h3,p,ol,ul{margin:0}
.skip{position:absolute;left:16px;top:-80px;z-index:10;text-decoration:none}
.skip:focus{top:8px;background:var(--primary);color:var(--on-primary);padding:10px 18px;border-radius:999px;font-weight:600}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.col{max-width:1040px;margin:0 auto;padding:0 24px}
.lined{background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),var(--grid) calc(20% - 1px),var(--grid) 20%)}

/* ---------- Top bar ---------- */
.bar{position:sticky;top:0;z-index:3;min-height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.mark{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.mark-name{font-family:var(--serif);font-weight:600;font-size:24px;line-height:26px;color:var(--ink);white-space:nowrap}
.mark-sub{font-size:11px;line-height:16px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-weight:500}
@media (max-width:399px){.mark-name{font-size:20px}}
.bar-nav{display:none}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-size:13px;line-height:16px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);font-weight:500}
.eyebrow::before{content:"";width:56px;height:1px;background:var(--gold);flex:none}
.num{font-family:var(--serif);font-size:26px;line-height:1;color:var(--gold);letter-spacing:1px}
.d-lg{text-wrap:balance;font-family:var(--serif);font-weight:500;font-size:46px;line-height:50px;letter-spacing:-.3px;color:var(--ink)}
.d-md{text-wrap:balance;font-family:var(--serif);font-weight:500;font-size:38px;line-height:44px;color:var(--ink)}
.d-sm{text-wrap:balance;font-family:var(--serif);font-weight:500;font-size:30px;line-height:36px;color:var(--ink)}
.d-teal{color:var(--primary);font-weight:600}
.t-md{text-wrap:balance;font-family:var(--serif);font-weight:600;font-size:24px;line-height:30px;color:var(--ink)}
.b-lg{font-size:17px;line-height:28px}
.b-md{font-size:15px;line-height:24px}
.b-sm{font-size:13px;line-height:20px}
.muted{color:var(--muted)}

/* ---------- Buttons and links: M3 state layer (8% hover, 10% focus and press, 100 ms). Touch targets 48 px ---------- */
.sl{position:relative;overflow:hidden;isolation:isolate}
.sl::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;z-index:-1;pointer-events:none;transition:opacity 100ms var(--ease-standard)}
.sl:hover::before{opacity:.08}
.sl:focus-visible::before,.sl:active::before{opacity:.1}
.sl:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:999px;font-family:var(--sans);font-size:16px;line-height:20px;font-weight:600;letter-spacing:.2px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn .ico{width:18px;height:18px}
.btn-filled{background:var(--primary);color:var(--on-primary)}
.btn-sm{min-height:48px;padding:0 22px;font-size:15px}
.link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;margin:0 -12px;border-radius:999px;font-size:14px;line-height:20px;letter-spacing:2.2px;text-transform:uppercase;font-weight:600;color:var(--gold);text-decoration:none}
.link .ico{width:18px;height:18px}
.navlink{min-height:48px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;font-size:15px;font-weight:500;color:var(--body);text-decoration:none;white-space:nowrap}

/* ---------- Hero and Call to book strip ---------- */
.hero{padding:32px 0 48px;display:flex;flex-direction:column;gap:32px}
.hero-text{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.frame{background:var(--frame);padding:14px;border:1px solid var(--line)}
.photo{aspect-ratio:1/1;background:var(--warm);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.photo .ico{width:64px;height:64px;stroke-width:1}
.frame img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%}
.quick{display:flex;flex-direction:column;gap:12px}
.quick-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quick-h .eyebrow::before{width:32px}
.qo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:var(--bg)}
.qo-city{font-family:var(--serif);font-weight:600;font-size:24px;line-height:28px;color:var(--ink)}
.qo-meta{grid-column:1;font-size:14px;line-height:20px;color:var(--muted)}
.qo-phone{display:none}
.qo .btn{grid-column:2;grid-row:1 / span 3}

/* ---------- Sections ---------- */
section{padding:56px 0}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;max-width:640px}
.steps{list-style:none;padding:0;display:flex;flex-direction:column}
.step{display:flex;flex-direction:column;gap:12px;padding:24px 0;border-top:1px solid var(--line)}
.step-top{display:flex;align-items:baseline;gap:20px}
.step-label{font-size:13px;line-height:20px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);font-weight:600}

.band{background:var(--mint)}
.svcs{list-style:none;padding:0;display:flex;flex-direction:column;gap:28px}
.svc{display:flex;flex-direction:row;gap:18px;align-items:flex-start}
.svc-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.illo{width:72px;height:54px;flex:none}
.illo .s{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illo .f{fill:var(--warm)}
.illo .g{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illo .d{fill:var(--gold)}
.illo .t{fill:var(--warm);stroke:var(--primary);stroke-width:3.2;stroke-linejoin:round}
.illo .r{fill:none;stroke:var(--gold);stroke-width:1.25;stroke-linecap:round;opacity:.45}

.urgent{margin-top:56px;background:var(--warm);border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.u-text{display:flex;flex-direction:column;gap:16px}
.er{padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:22px;color:var(--body)}
.er strong{color:var(--ink)}

/* Smile gallery (not on the page until real, consented cases exist — see CLAUDE.md). */
.gallery{display:flex;flex-direction:column;gap:40px;list-style:none;padding:0}
.case{display:flex;flex-direction:column;gap:12px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba-ph{position:relative;aspect-ratio:1/1;background:var(--warm);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ba-ph img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;left:8px;top:8px;padding:2px 10px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:11px;line-height:18px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600}
.case-t{font-family:var(--serif);font-weight:600;font-size:22px;line-height:28px;color:var(--ink)}
.consent{margin-top:28px;font-size:13px;line-height:20px;color:var(--muted)}

/* Offices */
.offices{display:flex;flex-direction:column;gap:72px}
.office{display:flex;flex-direction:column;gap:24px}
.office-title{display:flex;align-items:baseline;gap:20px;padding-top:24px;border-top:1px solid var(--line)}
.ins{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--mint);color:var(--primary);font-size:14px;line-height:20px;font-weight:600}
.ins .ico{width:16px;height:16px}
.rows{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0}
.row{display:flex;gap:14px;align-items:flex-start}
.row .ico{color:var(--gold);margin-top:3px}
.row a{font-weight:600}
.callrow{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.callnote{font-size:14px;line-height:20px;color:var(--muted)}

/* About */
.about{display:flex;flex-direction:column;gap:48px}
.bio{display:flex;flex-direction:column;gap:20px}
.xp-h{margin-bottom:24px}
.xp{list-style:none;padding:0}
.xp-li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.xp-li:last-child{border-bottom:1px solid var(--line)}
.xp-li .num{font-size:20px;padding-top:4px}
.xp-t{font-family:var(--serif);font-weight:600;font-size:22px;line-height:28px;color:var(--ink)}
.xp-li .b-md{grid-column:2}
.xp-key .xp-t{color:var(--primary)}

/* Closing line and footer */
.closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.foot{padding:32px 0 128px;border-top:1px solid var(--line);text-align:center}
.foot .col{display:flex;flex-direction:column;gap:8px;align-items:center}
.foot a{font-weight:600}

/* ---------- Phone FAB ("Find an office") ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 24px 0 20px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 4px 8px 3px rgba(0,0,0,.1),0 1px 3px var(--fab-shadow)}
/* With JS: hidden until the Call to book strip leaves view. Out: fade, 200 ms, standard accelerate. */
.js-fab .fab{opacity:0;transform:scale(.8);visibility:hidden;pointer-events:none;transition:opacity 200ms var(--ease-standard-accel),transform 0s linear 200ms,visibility 0s linear 200ms}
/* In: fade + scale .8 → 1, 250 ms, emphasized decelerate. */
.js-fab .fab.show{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity 250ms var(--ease-emph-decel),transform 250ms var(--ease-emph-decel),visibility 0s}

/* ---------- Section reveal (only once app.js confirms it can show them again) ---------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity 250ms var(--ease-emph-decel),transform 250ms var(--ease-emph-decel)}

/* ---------- Medium: 600 px and up — section links in the top bar, no FAB ---------- */
@media (min-width:600px){
  .bar-nav{display:flex;align-items:center;gap:2px}
  .navlink{padding:0 10px}
  .fab{display:none}
  .foot{padding-bottom:48px}
  html{scroll-padding-bottom:0}
  .svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px}
  .svc{flex-direction:column;gap:14px}
}
.bar-cta{display:none}

/* ---------- Expanded: 840 px and up — the PC layout ---------- */
@media (min-width:840px){
  .bar{padding:8px 48px}
  .bar-nav{gap:8px}
  .navlink{padding:0 14px}
  .bar-cta{display:inline-flex;margin-left:8px}
  .col{padding:0 48px}
  .d-lg{font-size:72px;line-height:76px}
  .d-md{font-size:52px;line-height:58px}

  .hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto auto;gap:40px 72px;align-items:start;padding:80px 0 96px}
  .hero-text{grid-column:1;grid-row:1}
  .hero .quick{grid-column:1 / -1;grid-row:2}
  .hero .frame{grid-column:2;grid-row:1}
  .hero .photo,.hero .frame img{aspect-ratio:4/5}
  .quick{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch;padding-top:32px;border-top:1px solid var(--line)}
  .quick-h{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
  .qo{padding:22px 28px}
  .qo-phone{display:block}

  section{padding:96px 0}
  .head{margin-bottom:40px}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px}
  .svcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
  .illo{width:96px;height:72px}
  .urgent{padding:48px 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:end}
  .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
  .office .rows{flex:1}
  .about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start}
}

/* ---------- Reduced motion: no reveals, no smooth scroll, no transitions ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* 404 page */
.notfound{padding:96px 0 128px}
.notfound .eyebrow::before{display:none}

/* Print: show every section and drop the floating button. */
@media print{
  .reveal{opacity:1;transform:none}
  .fab,.skip{display:none}
  .bar{position:static}
}