@charset "UTF-8";
/* ==========================================================================
   Patterson Lakes Dental Group - site styles
   --------------------------------------------------------------------------
   One stylesheet for every page, linked from the <head> of each page.

   Contents
     1.  Font (Open Sans, served from this website)
     2.  Colours and sizes
     3.  Base elements and helpers
     4.  Buttons
     5.  Brand lockup (logo)
     6.  Top bar and header
     7.  Homepage: hero and opening hours card
     8.  Homepage: quick help cards
     9.  Shared section layout
     10. Homepage: health funds and Medicare
     11. Homepage: approach, services, team, nervous/urgent, visit us
     12. Footer
     13. Mobile call bar
     14. Responsive layout (home and shared parts)
     15. Inner pages: hero and breadcrumbs
     16. Inner pages: cards, notices and calls to action
     17. Dentists and staff page
     18. FAQ page
     19. Children's and privacy pages
     20. Contact page
     21. Responsive layout (inner pages)
   ========================================================================== */


/* 1. Font
   --------------------------------------------------------------------------
   Open Sans variable font (weights 300-800 in one file), Latin characters.
   Licensed under the SIL Open Font License; see /assets/fonts/OFL.txt.
   The italic file is only downloaded by pages that use italics. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-wght-italic.woff2") format("woff2");
}


/* 2. Colours and sizes
   -------------------------------------------------------------------------- */
:root {
  --navy-900: #0d2230;   /* darkest background: top bar, footer */
  --navy-800: #12384a;   /* headings, dark panels */
  --teal-700: #17506a;
  --teal-600: #1a6e8e;   /* links, icons, accents */
  --teal-500: #2a87a8;
  --ice: #9fd3e6;        /* light accent on dark backgrounds */
  --ice-100: #e3f2f8;    /* pale tint for notices and icon tiles */
  --ink: #1c2a33;        /* body text */
  --ink-soft: #4a5d69;   /* secondary text */
  --line: #d7e5ec;       /* borders and dividers */
  --paper: #ffffff;
  --mist: #f3f8fa;       /* light grey section background */
  --radius: 14px;        /* corner rounding for cards */
  --wrap: 1140px;        /* maximum content width */
}


/* 3. Base elements and helpers
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 "Open Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-600); }
img, svg { display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--navy-800); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

/* Centred content column */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Small spaced-out capitals above headings */
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--teal-600); margin-bottom: 12px;
}

/* "Skip to content" link: hidden until it receives keyboard focus */
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

/* The hidden SVG that holds the reusable icons (<use href="#i-phone"> etc.) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Decorative drawings laid over sections (the wave lines and the large tooth
   outline) let clicks and taps through to the buttons and links beneath them */
.waves, .hero-mark { pointer-events: none; }


/* 4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }

/* White button, for dark backgrounds */
.btn-light { background: #fff; color: var(--navy-800); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.btn-light:hover { background: var(--ice-100); }

/* Outline button, for dark backgrounds */
.btn-ghost { color: #fff; border: 1.5px solid rgba(159,211,230,.6); }
.btn-ghost:hover { background: rgba(159,211,230,.12); }

/* Solid teal button, for light backgrounds */
.btn-teal { background: var(--teal-600); color: #fff; }
.btn-teal:hover { background: var(--teal-700); }


/* 5. Brand lockup (tooth outline with "Patterson Lakes / Dental Group")
   -------------------------------------------------------------------------- */
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.lockup .tooth { width: 36px; height: 41px; }
.lockup b {
  display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: .12em; line-height: 1.1;
  text-transform: uppercase; white-space: nowrap;
}
.lockup small {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .4em; color: var(--ice);
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(159,211,230,.35);
  white-space: nowrap; text-transform: uppercase;
}
.tooth path { fill: none; stroke: var(--ice); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }


/* 6. Top bar and header
   -------------------------------------------------------------------------- */
/* Thin bar above the header with today's open/closed status and the phone number */
.topbar { background: var(--navy-900); color: var(--ice-100); font-size: .85rem; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar .today b { color: var(--ice); font-weight: 600; }

/* The header sits over the top of the dark hero section */
header.site { position: absolute; left: 0; right: 0; z-index: 10; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }

/* Main menu */
nav.main ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; }
nav.main a {
  color: #e6f3f8; text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
nav.main a:hover, nav.main a[aria-current] { color: #fff; background: rgba(159,211,230,.14); }
nav.main .call { margin-left: 8px; background: #fff; color: var(--navy-800); border-radius: 999px; padding: 9px 18px; }
nav.main .call:hover { background: var(--ice-100); color: var(--navy-800); }
.menu-btn { display: none; }   /* shown on narrow screens, see section 14 */


/* 7. Homepage: hero and opening hours card
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 600px at 85% 110%, rgba(42,135,168,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--teal-700) 100%);
  padding: 150px 0 190px;
}
/* Flowing lines along the bottom of the hero */
.hero .waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 300px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr .85fr; gap: 56px; align-items: center; }
.hero .eyebrow { color: var(--ice); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.hero h1 span { color: var(--ice); }
.hero p.lead { font-size: 1.15rem; color: #d5e8f0; max-width: 34em; margin-bottom: 30px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Frosted-glass opening hours card */
.hours-card {
  background: rgba(13,34,48,.45); border: 1px solid rgba(159,211,230,.28); border-radius: 18px;
  padding: 28px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hours-card h2 { color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.hours-card h2 svg { width: 20px; height: 20px; stroke: var(--ice); }
.hours-card .addr { font-size: .93rem; color: #d5e8f0; margin: 0; }

/* Opening hours table (dark version; the light version is in section 20).
   The script adds "is-today" to today's row. */
.hours { width: 100%; border-collapse: collapse; font-size: .97rem; margin: 6px 0 18px; }
.hours td { padding: 7px 0; border-bottom: 1px solid rgba(159,211,230,.15); color: #d5e8f0; }
.hours td:last-child { text-align: right; color: #fff; font-weight: 600; }
.hours tr.is-today td { color: #fff; }
.hours tr.is-today td:first-child::after {
  content: "Today"; margin-left: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ice); color: var(--navy-800); padding: 2px 7px; border-radius: 999px; vertical-align: 2px;
}


/* 8. Homepage: quick help cards (overlapping the bottom of the hero)
   -------------------------------------------------------------------------- */
.quick { position: relative; margin-top: -70px; z-index: 2; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quick-card {
  background: #fff; border-radius: var(--radius); padding: 26px 26px 22px;
  box-shadow: 0 14px 40px rgba(13,34,48,.12); border-top: 4px solid var(--teal-600);
}
.quick-card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ice-100); display: grid; place-items: center; margin-bottom: 14px; }
.quick-card .ico svg { width: 22px; height: 22px; stroke: var(--teal-600); }
.quick-card p { color: var(--ink-soft); font-size: .97rem; }
.quick-card a.more { font-weight: 700; text-decoration: none; }
.quick-card a.more::after { content: " →"; }


/* 9. Shared section layout
   -------------------------------------------------------------------------- */
section { padding: 96px 0; }

/* Centred heading block at the top of a section */
.center { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.center p { color: var(--ink-soft); font-size: 1.08rem; }


/* 10. Homepage: health funds and Medicare
   -------------------------------------------------------------------------- */
.funds { padding: 80px 0 8px; }
.funds-head { text-align: center; margin-bottom: 28px; }
.funds-head h2 { margin-bottom: .3em; }
.funds-lead { color: var(--ink-soft); margin: 0; }

/* Scrolling strip of fund logos. The list appears twice (the second copy is
   hidden from screen readers) so the strip loops without a gap. It pauses on
   hover, on keyboard focus, or when tapped (the script adds "paused"). */
.marquee {
  --gap: 56px;
  display: flex; gap: var(--gap); overflow: hidden; padding: 12px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.marquee-track {
  flex: none; display: flex; gap: var(--gap); align-items: center; min-width: 100%; justify-content: space-around;
  list-style: none; margin: 0; padding: 0; animation: funds-scroll 50s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-track li { flex: none; display: flex; align-items: center; }
.marquee-track img { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.marquee-track img.lg { height: 56px; }  /* two-line logos look smaller at the same height */
@keyframes funds-scroll { to { transform: translateX(calc(-100% - var(--gap))); } }

.funds-note { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); text-align: center; }

/* Medicare CDBS panel below the fund logos */
.medicare {
  display: flex; align-items: center; gap: 18px; margin-top: 8px; padding: 18px 22px;
  background: var(--ice-100); border-left: 4px solid var(--teal-600); border-radius: var(--radius);
}
.medicare-tag { flex: none; padding: 6px 12px; border-radius: 8px; background: var(--teal-600); color: #fff; font-size: .9rem; font-weight: 800; }
.medicare p { margin: 0; }
.medicare b { color: var(--navy-800); }

/* Visitors who ask for less motion get a still, wrapped grid of logos */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; }
  .marquee-track[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .funds { padding-top: 56px; }
  .marquee { --gap: 36px; }
  .marquee-track img { height: 34px; max-width: 140px; }
  .marquee-track img.lg { height: 44px; }
  .medicare { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
}


/* 11. Homepage: approach, services, team, nervous/urgent, visit us
   -------------------------------------------------------------------------- */
/* "Our approach": four numbered points */
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.approach-item { padding: 4px 4px 0; }
.approach-item .num {
  font-size: .8rem; font-weight: 800; letter-spacing: .2em; color: var(--teal-600);
  border-bottom: 2px solid var(--line); padding-bottom: 12px; margin-bottom: 16px;
}
.approach-item p { color: var(--ink-soft); font-size: .97rem; }

/* Services grid (the grey "services" background is also used on inner pages) */
.services { background: var(--mist); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.svc svg { width: 30px; height: 30px; stroke: var(--teal-600); margin-bottom: 14px; }
.svc p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.svc a.more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .95rem; text-decoration: none; }
.svc a.more::after { content: " →"; }
.svc-note { margin-top: 24px; font-size: .88rem; color: var(--ink-soft); text-align: center; }

/* "Meet the dentists" cards. The portrait is a placeholder showing initials. */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.dentist {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
}
.portrait {
  width: 120px; height: 140px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-800), var(--teal-600)); color: var(--ice);
  font-size: 2rem; font-weight: 700; letter-spacing: .08em;
}
.dentist .role { color: var(--teal-600); font-weight: 600; font-size: .93rem; margin: -6px 0 12px; }
.dentist p { color: var(--ink-soft); font-size: .97rem; }
.team-more { text-align: center; margin-top: 36px; }

/* Dark band with the "Nervous patients" and "Call us, even after hours" panels */
.split { background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--teal-700)); color: #d5e8f0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.panel { border-radius: 18px; padding: 40px; border: 1px solid rgba(159,211,230,.25); background: rgba(255,255,255,.04); }
.panel h2 { color: #fff; font-size: 1.6rem; }
.panel .eyebrow { color: var(--ice); }
.panel ul { padding-left: 1.1em; margin: 0 0 1.4em; }
.panel li { margin-bottom: .4em; }
.panel a.tel { color: #fff; font-size: 1.6rem; font-weight: 800; text-decoration: none; letter-spacing: .01em; }
.panel .small-print { font-size: .9rem; }

/* "Visit us": address list beside the map */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.facts { list-style: none; padding: 0; margin: 0 0 28px; }
.facts li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts svg { flex: none; width: 22px; height: 22px; stroke: var(--teal-600); color: var(--teal-600); margin-top: 3px; }
.facts b { display: block; color: var(--navy-800); }
.map-card { border-radius: 18px; overflow: hidden; min-height: 360px; background: var(--ice-100); box-shadow: 0 14px 40px rgba(13,34,48,.12); }
.map-card iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }


/* 12. Footer
   -------------------------------------------------------------------------- */
footer.site { position: relative; overflow: hidden; background: var(--navy-900); color: #b9d3de; font-size: .92rem; padding: 64px 0 28px; }
footer.site .waves-foot { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 160px; }
footer.site .lockup { margin-bottom: 18px; }
.foot-grid {
  position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(159,211,230,.18);
}
footer.site h3 { color: #fff; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 6px; }
footer.site a { color: #e6f3f8; text-decoration: none; }   /* no underline, including on hover */

/* Required statements (surgical risk, general information, registration) */
.legal { position: relative; padding-top: 24px; font-size: .82rem; color: #8fb0be; }
.legal p { margin-bottom: .7em; max-width: 70em; }


/* 13. Mobile call bar (fixed to the bottom of small screens; see section 14)
   -------------------------------------------------------------------------- */
.callbar { display: none; }


/* 14. Responsive layout (home and shared parts)
   -------------------------------------------------------------------------- */
/* The full menu needs about 1100px; below that it collapses to the Menu button */
@media (max-width: 1100px) {
  nav.main ul { display: none; }
  nav.main.open ul {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; right: 24px; top: 78px;
    background: var(--navy-800); border: 1px solid rgba(159,211,230,.3); border-radius: 14px; padding: 10px; min-width: 240px;
  }
  nav.main .call { margin: 6px 0 0; text-align: center; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; background: none; color: #fff; font: inherit; font-weight: 600;
    border: 1.5px solid rgba(159,211,230,.5); border-radius: 10px; padding: 8px 14px; cursor: pointer;
  }
}

/* Tablets: single-column layouts */
@media (max-width: 960px) {
  .hero-grid, .visit-grid, .split-grid, .team-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* Phones */
@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 68px; }   /* room for the call bar */
  .wrap { padding: 0 16px; }
  .topbar .addr-short { display: none; }
  .lockup b { font-size: 1rem; letter-spacing: .1em; }
  .lockup small { font-size: .64rem; letter-spacing: .34em; }
  .lockup .tooth { width: 30px; height: 34px; }
  .hero { padding: 120px 0 150px; }
  .hero .waves { height: 200px; }
  section { padding: 72px 0; }
  .approach-grid, .svc-grid, .foot-grid { grid-template-columns: 1fr; }
  .dentist { grid-template-columns: 1fr; padding: 22px; }
  .panel { padding: 28px 22px; }
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--navy-900); border-top: 1px solid rgba(159,211,230,.25);
  }
  .callbar a { justify-content: center; padding: 12px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}


/* 15. Inner pages: hero and breadcrumbs
   -------------------------------------------------------------------------- */
/* A shorter version of the homepage hero */
.hero.inner { padding: 136px 0 120px; }
.hero.inner.has-quick { padding-bottom: 150px; }   /* extra room when quick cards overlap it */
.hero.inner .waves { height: 200px; }
.hero.inner .wrap { position: relative; }
.hero.inner .intro { position: relative; max-width: 700px; }
.hero.inner h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 16px; }
.hero.inner p.lead { margin-bottom: 28px; }
.hero.inner p.lead:last-child { margin-bottom: 0; }

/* Large faint tooth outline on the right of the hero */
.hero-mark { position: absolute; right: 48px; top: 50%; width: 140px; height: 158px; transform: translateY(-50%); opacity: .55; }
.hero-mark path { fill: none; stroke: var(--ice); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Breadcrumbs: Home / Page name */
.crumbs { font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 .7em; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .7em; color: var(--ice); opacity: .55; }
.crumbs a { color: var(--ice); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }


/* 16. Inner pages: cards, notices and calls to action
   -------------------------------------------------------------------------- */
.quick-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.quick-card a.tel { display: inline-block; color: var(--navy-800); font-size: 1.4rem; font-weight: 800; text-decoration: none; margin-bottom: 10px; }
.quick-card .small { font-size: .9rem; }
.quick-card .ico svg.ph { color: var(--teal-600); }   /* the phone icon is drawn in the text colour */

/* Pale box with an icon, e.g. the medical emergency notice */
.notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--ice-100); border-left: 4px solid var(--teal-600); border-radius: 12px; padding: 20px 24px;
}
.notice svg { flex: none; width: 24px; height: 24px; stroke: var(--teal-600); margin-top: 2px; }
.notice p { margin: 0; }
.notice b { color: var(--navy-800); }
.section-tight { padding-top: 56px; padding-bottom: 0; }

/* Dark call-to-action card, e.g. "Have another question?" */
.cta-card {
  border-radius: 18px; padding: 48px 40px; text-align: center; color: #d5e8f0;
  background:
    radial-gradient(800px 400px at 90% 130%, rgba(42,135,168,.5), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--teal-700));
}
.cta-card h2 { color: #fff; }
.cta-card p { max-width: 36em; margin: 0 auto 24px; }
.cta-card .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Grid of large links, e.g. into the FAQ, or on the "page not found" page */
.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.link-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy-800); font-weight: 700; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.link-card:hover { border-color: var(--teal-500); box-shadow: 0 8px 24px rgba(13,34,48,.08); }
.link-card::after { content: "→"; flex: none; color: var(--teal-600); }
.link-card small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .9rem; font-weight: 400; }


/* 17. Dentists and staff page
   -------------------------------------------------------------------------- */
/* Dentist biographies */
.bios { display: grid; gap: 28px; }
.bio {
  display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: start;
  padding: 36px; border: 1px solid var(--line); border-radius: var(--radius);
}
.bio .portrait { width: 150px; height: 175px; font-size: 2.4rem; }
.bio h3 { font-size: 1.45rem; margin-bottom: .6em; }
.bio .role { color: var(--teal-600); font-weight: 600; font-size: .95rem; margin: 0 0 16px; }
.bio p { color: var(--ink-soft); max-width: 46em; }
.bio p:last-child { margin-bottom: 0; }

/* Practice support team cards, with a round initial instead of a photo */
.staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.staff {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-800), var(--teal-600)); color: var(--ice); font-weight: 700; font-size: 1.2rem;
}
.staff h3 { margin-bottom: 8px; }
.staff .role { color: var(--teal-600); font-weight: 600; font-size: .9rem; margin: 0 0 10px; }
.staff p { color: var(--ink-soft); font-size: .97rem; margin: 0; }


/* 18. FAQ page
   -------------------------------------------------------------------------- */
/* Topic list on the left (sticky on wide screens), questions on the right */
.faq-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
.faq-side { position: sticky; top: 24px; }
.faq-side ul { list-style: none; padding: 0; margin: 0 0 28px; border-left: 2px solid var(--line); }
.faq-side li a {
  display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--ink-soft); font-size: .95rem; font-weight: 600; text-decoration: none;
}
.faq-side li a:hover { color: var(--navy-800); border-left-color: var(--teal-600); }
.ask-card { background: var(--mist); border-radius: var(--radius); padding: 22px; font-size: .95rem; color: var(--ink-soft); }
.ask-card b { display: block; color: var(--navy-800); margin-bottom: 4px; }
.ask-card a { font-weight: 800; font-size: 1.15rem; color: var(--navy-800); text-decoration: none; }
.faq-group { padding: 0; margin-bottom: 56px; scroll-margin-top: 24px; }
.faq-group > h2 { font-size: 1.5rem; margin-bottom: 6px; }

/* Each question is a <details> element that opens and closes when clicked */
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 0;
  list-style: none; cursor: pointer; color: var(--navy-800); font-size: 1.05rem; font-weight: 700; line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font: inherit; color: inherit; }
.faq-item summary:hover { color: var(--teal-600); }

/* Round button beside each question: a plus sign when closed, a minus sign when open */
.faq-item summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ice-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6e8e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.faq-item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6e8e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.faq-item .answer { padding: 0 48px 22px 0; color: var(--ink-soft); }
.faq-item .answer ol { padding-left: 1.3em; margin: 0 0 1em; }
.faq-item .answer li { margin-bottom: .35em; }
.faq-item .answer > :last-child { margin-bottom: 0; }


/* 19. Children's and privacy pages
   -------------------------------------------------------------------------- */
/* Two-column introduction */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.split-2 p { color: var(--ink-soft); }

/* Question-and-answer cards (Medicare CDBS) */
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.qa h3 { margin-bottom: .4em; }
.qa p { color: var(--ink-soft); font-size: .97rem; margin: 0 0 .7em; }
.qa p:last-child { margin-bottom: 0; }

/* Long-form text, e.g. the privacy policy */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.35rem; margin: 1.8em 0 .5em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }


/* 20. Contact page
   -------------------------------------------------------------------------- */
/* Light version of the opening hours table */
.hours.light { margin: 4px 0 24px; font-size: 1rem; }
.hours.light td { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 10px 0; }
.hours.light td:last-child { color: var(--navy-800); }
.hours.light tr.is-today td { color: var(--navy-800); font-weight: 700; }
.visit-grid.contact { align-items: stretch; }
.visit-grid .notice { margin-top: 28px; }


/* 21. Responsive layout (inner pages)
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-mark { display: none; }
  .quick-grid.cols-2, .link-grid, .staff-grid, .qa-grid, .split-2 { grid-template-columns: 1fr; }
  .split-2 { gap: 8px; }
  /* FAQ topics become a row of pill links above the questions */
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-side { position: static; }
  .faq-side ul { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; margin-bottom: 0; }
  .faq-side li a { margin: 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; }
  .faq-side li a:hover { border-color: var(--teal-600); }
  .faq-side .ask-card { display: none; }
}
@media (max-width: 640px) {
  .hero.inner { padding: 116px 0 96px; }
  .hero.inner.has-quick { padding-bottom: 124px; }
  .hero.inner .waves { height: 130px; }
  .crumbs { letter-spacing: .2em; }
  .bio { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .bio .portrait { width: 96px; height: 112px; font-size: 1.6rem; }
  .staff { grid-template-columns: 48px 1fr; gap: 14px; padding: 20px; }
  .avatar { width: 48px; height: 48px; font-size: 1.05rem; }
  .cta-card { padding: 36px 22px; }
  .faq-item .answer { padding-right: 0; }
  .notice { padding: 16px 18px; }
  .section-tight { padding-top: 40px; }
}