/* ==========================================================================
   Ozark Senior Placement — site styles
   Plain CSS, mobile-first. Edit the colors and sizes in :root below.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #1C2B40;          /* primary */
  --navy-2: #26384F;        /* slightly lighter navy for panels on navy */
  --amber: #C47A3A;         /* brand accent (decorative lines, icons, borders) */
  --amber-btn: #A9622B;     /* deeper amber for buttons, so white text meets contrast standards */
  --amber-btn-hover: #8C4F21;
  --amber-text: #94541F;    /* amber for small text on light backgrounds */

  /* Neutrals */
  --cream: #FAF6EF;         /* warm off-white page background */
  --sand: #F1E8D9;          /* alternate section background */
  --paper: #FFFDF9;         /* cards */
  --line: #E1D5C1;          /* borders */
  --text: #1C2B40;
  --muted: #47515F;
  --on-navy: #F6F0E6;
  --on-navy-muted: #D3CCC0;

  /* Type */
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --wrap: 72rem;
  --gutter: 1.25rem;
  --radius: 14px;
  --tap: 3.25rem;           /* ~52px minimum tap target */
  /* Sticky call button on phones. It floats above the bottom-right corner,
     where Netlify's "Powered by Netlify" badge sits (about 36px tall,
     ~18px from the bottom), so the badge can never cover it. */
  --callbar-lift: 76px;      /* gap between screen bottom and the button */
  --callbar-btn: 3.6rem;     /* button height */
  --callbar-space: calc(var(--callbar-lift) + var(--callbar-btn) + 1rem + env(safe-area-inset-bottom));
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.1875rem;     /* 19px */
  line-height: 1.65;
}
@media (min-width: 900px) {
  body { font-size: 1.25rem; }   /* 20px on larger screens */
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3.6vw, 1.55rem); }
p { margin: 0 0 1.1em; }
p, li { text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--amber-text); }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--paper); color: var(--navy);
  padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.narrow { max-width: 46rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--tap);
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-primary { background: var(--amber-btn); color: #fff; }
.btn-primary:hover { background: var(--amber-btn-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--on-navy); }
.on-navy .btn-outline, .btn-outline.light { color: var(--on-navy); border-color: var(--on-navy); }
.on-navy .btn-outline:hover, .btn-outline.light:hover { background: var(--on-navy); color: var(--navy); }
.btn-lg { min-height: 3.75rem; font-size: 1.25rem; padding: 0.85rem 2rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
@media (max-width: 479px) {
  .btn-row .btn { width: 100%; }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  color: var(--on-navy);
  position: relative;
  z-index: 50;
}
/* Phones/tablets: two columns. The Menu button takes its natural width and
   the wide logo fills all the room that's left (up to 300px), so the name
   stays as large as possible and the row can never wrap. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: center;
  min-height: 4.75rem;
}
/* Wide logo has a transparent background, so it blends into the navy header. */
.logo-link { display: block; justify-self: start; min-width: 0; padding: 0.75rem 0; }
.logo-link img { width: 100%; max-width: 300px; height: auto; }
@media (min-width: 1040px) {
  .header-inner { display: flex; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; }
  .logo-link { flex: none; }
  .logo-link img { width: 300px; }
}
/* Very small phones: slimmer side margins in the header leave more room for the logo */
@media (max-width: 419px) {
  .site-header .wrap { padding-left: 1rem; padding-right: 1rem; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0.55rem 0.75rem;
  background: var(--navy-2);
  color: var(--on-navy);
  border: 2px solid rgba(246, 240, 230, 0.45);
  border-radius: 10px;
  font: 700 1.05rem/1 var(--font-body);
  cursor: pointer;
}
.menu-toggle svg { width: 1.4rem; height: 1.4rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Without JavaScript the menu is simply always shown, so hide the toggle */
html:not(.js) .menu-toggle { display: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
}
.site-nav a:hover { color: #fff; text-decoration: underline; }
.site-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.nav-call { display: none; }

/* Mobile menu panel (phones and tablets) */
@media (max-width: 1039px) {
  .site-nav { grid-column: 1 / -1; padding: 0 0 1rem; }
  html.js .site-nav { display: none; }
  html.js .site-nav.is-open { display: block; }
  .site-nav li + li { border-top: 1px solid rgba(246, 240, 230, 0.15); }
  .site-nav a { padding: 0.5rem 0.25rem; font-size: 1.3rem; }
}

/* Desktop: the wide logo + full menu need about 1040px */
@media (min-width: 1040px) {
  .menu-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: 1.75rem; }
  .site-nav ul { display: flex; gap: 1.6rem; }
  .site-nav a { font-size: 1.1rem; }
  .nav-call { display: inline-flex; }
}
@media (min-width: 1200px) {
  .site-nav ul { gap: 2rem; }
  .site-nav a { font-size: 1.15rem; }
}

/* ---------- Sticky click-to-call (phones and tablets) ---------- */
.callbar {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--callbar-lift) + env(safe-area-inset-bottom));
  z-index: 60;
}
.callbar .btn {
  width: 100%;
  min-height: var(--callbar-btn);
  padding: 0.6rem 1rem;
  font-size: 1.25rem;
  white-space: nowrap;
  /* cream ring + shadow keep it distinct over amber buttons and the navy footer */
  box-shadow: 0 0 0 3px var(--cream), 0 8px 22px rgba(28, 43, 64, 0.35);
}
@media (min-width: 1040px) { .callbar { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 3.5rem 0; }
@media (min-width: 900px) { .section { padding: 5rem 0; } }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: var(--on-navy); }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy a:not(.btn) { color: #fff; }

.eyebrow {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin-bottom: 0.6rem;
}
.section-navy .eyebrow { color: #E9B585; }
.section-intro { max-width: 44rem; margin-bottom: 2.25rem; }
.section-intro p { color: var(--muted); font-size: 1.15em; }
.section-navy .section-intro p { color: var(--on-navy-muted); }

/* ---------- Hero ---------- */
.hero { padding: 3rem 0 3.5rem; }
@media (min-width: 900px) { .hero { padding: 5rem 0 5rem; } }
.hero h1 { max-width: 19ch; }
.hero .lead { font-size: clamp(1.25rem, 3.4vw, 1.5rem); color: var(--muted); max-width: 36em; line-height: 1.55; }

.reassure {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-weight: 600;
  color: var(--navy);
}
.reassure li { display: flex; align-items: center; gap: 0.5rem; }
.reassure svg { width: 1.35rem; height: 1.35rem; color: var(--amber); flex: none; }

/* Page header for inner pages */
.page-hero { padding: 2.75rem 0 2.5rem; }
@media (min-width: 900px) { .page-hero { padding: 4rem 0 3.5rem; } }
.page-hero .lead { font-size: clamp(1.2rem, 3vw, 1.4rem); color: var(--muted); max-width: 38em; margin: 0; }

/* Ozark ridge divider, echoes the logo */
.ridge { display: block; width: 100%; height: clamp(40px, 7vw, 90px); color: var(--sand); margin-bottom: -1px; }
.ridge.to-cream { color: var(--cream); background: var(--sand); }
.ridge.to-navy { color: var(--navy); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) and (max-width: 899px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-top: 4.4rem; }
.steps > li::before {
  content: counter(step);
  position: absolute; top: 1.4rem; left: 1.5rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber-btn); color: #fff;
  font: 700 1.35rem/1 var(--font-head);
}
.steps .note { color: var(--muted); font-size: 0.95em; }

/* Long-form steps (How It Works page) */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 2.25rem 4.25rem;
  border-left: 3px solid var(--line);
  margin-left: 1.4rem;
  padding-left: 2.6rem;
}
.process > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.process > li::before {
  content: counter(step);
  position: absolute; left: -1.55rem; top: -0.2rem;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber-btn); color: #fff;
  font: 700 1.4rem/1 var(--font-head);
  box-shadow: 0 0 0 6px var(--cream);
}
.process h3 { margin-bottom: 0.35em; }
.process ul { padding-left: 1.2em; margin: 0.4rem 0 0; }
.process li li { margin-bottom: 0.3rem; }

/* Icon features ("Why families call us") */
.feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature .icon {
  flex: none;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #F0B47E;
}
.feature .icon svg { width: 1.6rem; height: 1.6rem; }
.feature h3 { margin-bottom: 0.3em; }
.feature p { margin: 0; color: var(--muted); }

/* Highlight box ("How we get paid") */
.callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
@media (min-width: 700px) { .callout { padding: 2.25rem 2.5rem; } }
.callout p:last-child { margin-bottom: 0; }
.callout .big { font-size: 1.15em; font-weight: 600; color: var(--navy); }

/* Simple two-column split */
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }

/* CTA band */
.cta-band { text-align: left; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: var(--on-navy-muted); font-size: 1.15em; max-width: 36em; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--line); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: var(--tap);
  padding: 1.1rem 0.25rem;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 3.4vw, 1.45rem);
  font-weight: 700;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--amber);
  color: var(--amber-text);
  font: 700 1.5rem/1 var(--font-body);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0.25rem 1.4rem; max-width: 44rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Care option cards ---------- */
.care-card { display: flex; flex-direction: column; }
.care-card .tag {
  align-self: flex-start;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber-text);
  margin-bottom: 0.4rem;
}
.care-card h4 {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.35rem;
}
.care-card ul { margin: 0; padding-left: 1.2em; }
.care-card li { margin-bottom: 0.25rem; }

/* ---------- Quiz ---------- */
.quiz-privacy {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; margin-bottom: 2rem; color: var(--muted);
}
.quiz-privacy svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--amber); margin-top: 0.15rem; }

.quiz fieldset {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
  min-width: 0;
}
@media (min-width: 700px) { .quiz fieldset { padding: 1.75rem 1.75rem 1.5rem; } }
.quiz legend {
  float: left; width: 100%;          /* lets padding/margins work consistently */
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 3.4vw, 1.4rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0.35rem;
  padding: 0;
}
.quiz legend .qnum { color: var(--amber-text); margin-right: 0.35rem; }
.quiz .hint { clear: both; color: var(--muted); margin: 0 0 0.9rem; font-size: 1rem; }
.quiz .options { clear: both; display: grid; gap: 0.65rem; }
.quiz .option {
  display: flex; align-items: center; gap: 0.9rem;
  min-height: var(--tap);
  padding: 0.75rem 1rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  line-height: 1.35;
}
.quiz .option:hover { border-color: var(--amber); }
.quiz .option input {
  flex: none;
  width: 1.5rem; height: 1.5rem; margin: 0;
  accent-color: var(--amber-btn);
  cursor: pointer;
}
.quiz .option:has(input:checked) { border-color: var(--amber-btn); background: #FBF1E6; }
.quiz .option:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }
.quiz fieldset.missing { border: 2px solid #A3341F; }
.quiz .missing-msg { color: #A3341F; font-weight: 700; margin: 0.75rem 0 0; }

.quiz-error { color: #A3341F; font-weight: 700; margin-top: 1rem; }

.quiz-result {
  margin-top: 2.5rem;
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}
@media (min-width: 700px) { .quiz-result { padding: 2.75rem 2.75rem; } }
.quiz-result h3 { color: #fff; font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: 0.5em; }
.quiz-result h3:focus { outline: none; }
.quiz-result .eyebrow { color: #E9B585; }
.quiz-result p { color: var(--on-navy); }
.quiz-result .also {
  border-top: 1px solid rgba(246, 240, 230, 0.25);
  padding-top: 1.1rem; margin-top: 1.4rem;
  color: var(--on-navy-muted);
}
.quiz-result .disclaimer {
  background: var(--navy-2);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  color: var(--on-navy-muted);
  margin-top: 1.5rem;
}

/* ---------- About ---------- */
.photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}
/* Portrait frame; trims a little sky so the photo is not overly tall */
.photo-frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 75%; }

/* ---------- Placeholders (things the owners still need to fill in) ---------- */
.placeholder {
  border: 3px dashed var(--amber);
  background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 14px, #F7EFE2 14px, #F7EFE2 28px);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--navy);
}
.placeholder strong { display: block; font-size: 1.15em; margin-bottom: 0.4rem; }
.placeholder code { font-size: 0.95em; background: #fff; padding: 0.1em 0.4em; border-radius: 4px; }

/* ---------- Contact ---------- */
.contact-cards { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: 0.25rem; }
.contact-card .label { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.contact-card .big-link {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 5.2vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  word-break: break-word;
  text-decoration: none;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.contact-card .big-link:hover { color: var(--amber-text); text-decoration: underline; }
.contact-card .btn { align-self: flex-start; margin-top: auto; }

.privacy-note {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: #FBF1E6;
  border: 1px solid #EBCBA8;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-weight: 600;
}
.privacy-note svg { flex: none; width: 1.6rem; height: 1.6rem; color: var(--amber-text); margin-top: 0.1rem; }

/* Microsoft Form embed. Its page lives on Microsoft's site, so the frame can't
   size itself to the form; these heights are set tall enough to avoid a
   scrollbar inside the frame. Adjust if the form gains or loses questions. */
.form-embed iframe {
  display: block;
  width: 100%;
  height: 1700px;            /* phones: questions stack and wrap, so it runs longer */
  border: 0;
  border-radius: var(--radius);
  background: #fff;
}
@media (min-width: 700px) { .form-embed iframe { height: 1400px; } }
.form-fallback { margin: 1rem 0 0; font-weight: 600; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.check-list li::before {
  content: "";
  position: absolute; left: 0.15rem; top: 0.45em;
  width: 0.65rem; height: 1.05rem;
  border: solid var(--amber); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding: 3.5rem 0 2rem;
  border-top: 4px solid var(--amber);
}
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 3rem; } }
.site-footer img { height: 7rem; width: auto; margin-bottom: 1rem; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #E9B585; margin-bottom: 0.75rem;
}
.site-footer p { margin: 0 0 0.6rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #F0B47E; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.15rem; font-weight: 600; word-break: break-word; }
.footer-free {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.35;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 240, 230, 0.18);
  font-size: 1rem; color: var(--on-navy-muted);
}

/* On phones, leave room under the footer for the floating call button
   (and the Netlify badge below it) so the last lines are never hidden. */
@media (max-width: 1039px) {
  .site-footer { padding-bottom: calc(2rem + var(--callbar-space)); }
}

/* ---------- Small utilities ---------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.25rem; }

/* ---------- Office hours ---------- */
.hours { margin: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; text-align: right; }

/* Contact page card: hours on the left, after-hours note on the right (stacks on phones) */
.hours-card { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
.hours-card h3.label {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 700; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.hours-card .hours { max-width: 26rem; }
.after-hours {
  margin: 0;
  padding: 1rem 1.2rem;
  background: var(--sand);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  align-self: center;
}
@media (min-width: 700px) {
  .hours-card { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
}

/* Footer: compact */
.hours-compact { max-width: 19rem; }
.hours-compact div { padding: 0.15rem 0; border-bottom: 0; justify-content: flex-start; }
.hours-compact dt { font-weight: 600; min-width: 4.75rem; color: var(--on-navy); }
.hours-compact dd { text-align: left; color: var(--on-navy-muted); }