/* ==========================================================================
   BrightSmile Family Dental — Base Styles
   Modern, warm, trustworthy.
   ========================================================================== */

:root {
  --color-primary: #2F6F6B;
  --color-primary-dark: #234F4C;
  --color-primary-light: #E7F2F0;
  --color-accent: #E29048;
  --color-accent-dark: #C97830;
  --color-bg: #FDFBF6;
  --color-surface: #FFFFFF;
  --color-text: #2B2B28;
  --color-text-muted: #63625B;
  --color-border: #E6E1D6;
  --radius: 10px;
  --container-width: 1140px;
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--color-text);
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; display: block; }

ul, ol { padding-left: 1.3em; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.section-alt {
  background-color: var(--color-primary-light);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%0A%20%20%3Cpath%20d%3D%22M34%2020c-9%200-16%205-16%2013.5%200%204.5%201.7%206.8%202.4%2010.8%201%205.7%202.1%2015.4%206.4%2015.4%203.4%200%203.2-9%205.6-9s3.2%209%205.6%209c4.3%200%205.4-9.7%206.4-15.4.7-4%202.4-6.3%202.4-10.8C47%2025%2040%2020%2034%2020z%22%20fill%3D%22none%22%20stroke%3D%22%232F6F6B%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.10%22/%3E%0A%20%20%3Cpath%20transform%3D%22translate%28104%2C96%29%22%20fill%3D%22%23E29048%22%20opacity%3D%220.14%22%20d%3D%22M0%20-8%20L2.2%20-2.2%20L8%200%20L2.2%202.2%20L0%208%20L-2.2%202.2%20L-8%200%20L-2.2%20-2.2%20Z%22/%3E%0A%20%20%3Cpath%20transform%3D%22translate%28112%2C28%29%22%20fill%3D%22%232F6F6B%22%20opacity%3D%220.08%22%20d%3D%22M0%20-5%20L1.4%20-1.4%20L5%200%20L1.4%201.4%20L0%205%20L-1.4%201.4%20L-5%200%20L-1.4%20-1.4%20Z%22/%3E%0A%3C/svg%3E");
  background-repeat: repeat;
}
.section-dark { background: var(--color-primary); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark p { color: #fff; }

.text-center { text-align: center; }
.eyebrow {
  display: inline-block;
  color: var(--color-accent-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.6em;
}

.lead {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  max-width: 700px;
}
.lead.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-body);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(43, 43, 40, 0.12); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(43, 43, 40, 0.12); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--color-primary); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo svg { flex-shrink: 0; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  align-items: center;
}
.main-nav > ul > li { position: relative; }
.main-nav a.nav-link {
  display: block;
  padding: 10px 12px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: 6px;
  white-space: nowrap;
}
.main-nav a.nav-link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.main-nav li.active > a.nav-link { color: var(--color-primary); font-weight: 600; }

.has-dropdown > .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 240px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { display: block; }
.dropdown li { list-style: none; }
.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.92rem;
}
.dropdown a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

.nav-cta { margin-left: 10px; }

.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

/* Mobile nav (checkbox hack, no JS/animation) */
@media (max-width: 900px) {
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
  }
  .main-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .nav-toggle:checked ~ .main-nav { display: block; }
  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 0;
  }
  .has-dropdown > .dropdown {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 12px;
    margin-bottom: 6px;
  }
  .nav-cta { margin: 12px 0 0; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--color-primary-light);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 72px 24px;
  max-width: var(--container-width);
  margin: 0 auto;
}
.hero h1 { margin-bottom: 0.4em; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-media img, .hero-media .placeholder, .hero-media .illustration { border-radius: var(--radius); }

@media (max-width: 800px) {
  .hero-inner { grid-template-columns: 1fr; padding: 48px 24px; }
}

/* ---------- Placeholder media ---------- */
.placeholder {
  background: var(--color-primary-light);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 20px;
  min-height: 220px;
}
.placeholder.square { aspect-ratio: 1 / 1; min-height: 0; }
.placeholder.wide { aspect-ratio: 16 / 9; min-height: 0; }
.placeholder.portrait { aspect-ratio: 3 / 4; min-height: 0; }

/* ---------- Illustrations (real inline-SVG imagery, replaces .placeholder) ---------- */
.illustration {
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  min-height: 220px;
  line-height: 0;
}
.illustration.square { aspect-ratio: 1 / 1; min-height: 0; }
.illustration.wide { aspect-ratio: 16 / 9; min-height: 0; }
.illustration.portrait { aspect-ratio: 3 / 4; min-height: 0; }
.illustration svg { width: 100%; height: 100%; display: block; }
.team-card .illustration { margin: 0 auto 18px; width: 100%; }
.before-after-pair .illustration { position: relative; min-height: 0; }

/* ---------- Grids & Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(43, 43, 40, 0.09);
  border-color: var(--color-primary);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-primary);
}
.service-badge {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
}
.service-badge svg { width: 100%; height: 100%; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--color-text-muted); margin-bottom: 0; }
.card-link { display: inline-block; margin-top: 14px; font-weight: 600; }

.service-card { display: flex; flex-direction: column; height: 100%; }

/* ---------- Team / bios ---------- */
.team-card { text-align: center; }
.team-card .placeholder { margin: 0 auto 18px; width: 100%; }
.team-card h3 { margin-bottom: 0.1em; }
.team-role { color: var(--color-accent-dark); font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(43, 43, 40, 0.09);
  border-color: var(--color-primary);
}
.testimonial blockquote {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-text);
}
.testimonial cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: 10px; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
}
.faq-item h3 { margin-bottom: 0.4em; font-size: 1.1rem; }
.faq-item p { color: var(--color-text-muted); margin-bottom: 0; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-heading);
}
.steps h4 { margin-bottom: 4px; }
.steps p { color: var(--color-text-muted); margin-bottom: 0; }

/* ---------- Emergency banner ---------- */
.emergency-phone {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-accent);
}
.emergency-banner {
  background: var(--color-primary-dark);
  color: #fff;
  padding: 20px 0;
  text-align: center;
}
.emergency-banner a { color: #fff; }

/* ---------- Tables ---------- */
table.hours { width: 100%; border-collapse: collapse; }
table.hours td, table.hours th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li {
  padding: 10px 0 10px 32px;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- Gallery ---------- */
.gallery-item { border-radius: var(--radius); overflow: hidden; }
.gallery-caption { padding: 10px 4px 0; font-size: 0.9rem; color: var(--color-text-muted); }

.before-after-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.before-after-pair .placeholder {
  position: relative;
  min-height: 0;
  padding: 10px;
}
.ba-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.ba-label.after { background: var(--color-accent); }

/* ---------- Breadcrumb / page header ---------- */
.page-header { padding: 48px 0 24px; }
.page-header .eyebrow { display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); }

/* ---------- Sitemap ---------- */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.sitemap-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--color-border);
}
.sitemap-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
}
.sitemap-row a.sitemap-title {
  flex: 1;
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.05rem;
}
.sitemap-row a.sitemap-title:hover { color: var(--color-primary); }
.sitemap-section {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.sitemap-view {
  flex-shrink: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #21332F;
  color: #E8E5DC;
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer a { color: #C9C6BB; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 0.85rem;
  color: #A6A399;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; }

/* ---------- Reveal on scroll ----------
   Usage:
     1. Add class="reveal" to any element you want to fade + slide up
        when it scrolls into view.
     2. For a staggered row/grid (cards revealing one after another),
        add data-reveal-stagger="100" to the PARENT container (the number
        is the delay in ms between each child, ~100ms = 0.1s by default —
        omit the value to just use 100ms) and class="reveal" to each CHILD.
     3. Include js/reveal.js on the page (already added to every page's
        layout). No other setup needed — it self-initializes.
     4. Respects prefers-reduced-motion: reduce automatically — elements
        just appear, no motion.
------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Scroll progress bar ----------
   A thin bar fixed to the top of the viewport that fills left-to-right
   as the visitor scrolls down the page. Included on every page via
   js/scroll-progress.js — no markup needed beyond what layout() emits.
------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transform-origin: left;
}

/* ---------- Parallax banners ----------
   Applied automatically by js/parallax.js to any .hero or .page-header
   section: a soft decorative background layer that scrolls slower than
   the heading/text sitting on top of it. Disabled entirely under
   prefers-reduced-motion (background just stays put).
------------------------------------------ */
.hero, .page-header {
  position: relative;
  overflow: hidden;
}
.hero-inner, .page-header .container {
  position: relative;
  z-index: 1;
}
.parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  bottom: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(47, 111, 107, 0.14), transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(226, 144, 72, 0.16), transparent 40%);
  will-change: transform;
}

/* ---------- Sticky scroll section ----------
   A two-column "scrollytelling" layout: the left panel stays pinned in
   place while the visitor scrolls through steps on the right; the
   pinned panel's content swaps to match whichever step is centered in
   the viewport. Driven by js/scrolly.js.
------------------------------------------ */
.scrolly-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.scrolly-sticky {
  position: sticky;
  top: 110px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 40px;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.scrolly-panel-step { display: none; }
.scrolly-panel-step.is-active {
  display: block;
  animation: none;
}
.scrolly-panel-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.scrolly-sticky h3 { color: #fff; margin-bottom: 10px; }
.scrolly-sticky p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

.scrolly-steps { display: flex; flex-direction: column; }
.scrolly-step {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.scrolly-step:last-child { min-height: 40vh; }
.scrolly-step.is-active { opacity: 1; }
.scrolly-step-num {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: block;
}

@media (max-width: 800px) {
  .scrolly-grid { grid-template-columns: 1fr; }
  .scrolly-sticky {
    position: static;
    margin-bottom: 32px;
    min-height: 0;
  }
  .scrolly-step { min-height: 0; opacity: 1; padding: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-bg { transform: none !important; }
  .scroll-progress-bar { transition: none; }
  .scrolly-step { transition: none; }
  .btn, .card, .testimonial {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .btn:hover, .btn:active, .card:hover, .testimonial:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ---------- Hover-state precedence ----------
   Cards/testimonials can also carry .reveal (scroll-in animation).
   .reveal.is-visible sets transform: translateY(0) at the same
   specificity as .card:hover, and it's declared earlier in this file,
   so without this it silently wins the cascade and the hover lift
   never shows on any revealed card. Redeclaring hover's transform
   down here (after .reveal's rules) restores the correct precedence:
   hover always wins while actually hovered, .reveal governs it the
   rest of the time.
------------------------------------------ */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.card:hover, .testimonial:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .card:hover, .testimonial:hover { transform: none; }
}

/* ---------- Keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-toggle-label:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }