/* HNO Paunsdorf — base styles. Tokens live in tokens.css; see /DESIGN.md.
   No hardcoded hex here — every colour is a var(--token). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: var(--leading-head);
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 var(--space-5);
  hyphens: manual;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); font-weight: 600; }
h4 { font-size: var(--text-base); font-weight: 600; }

p, ul, ol { margin: 0 0 var(--space-4); }
p, li { max-width: var(--measure); }

a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--hover); }

:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Numeric contexts: opening hours + phone numbers align in columns. */
.u-tnum, .num, .hours { font-variant-numeric: tabular-nums; }

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.section { padding-block: var(--space-8); }

/* Prose column capped at the measure. */
.measure { max-width: var(--measure); }
.prose > * { max-width: var(--measure); }

/* Date/CV tables in prose content (arzt/doctor): the first column holds a
   short date range — keep it on ONE line, shrink-to-fit, so the description
   column gets the rest of the row. tabular-nums aligns the year digits. */
.prose table { border-collapse: collapse; }
.prose table th:first-child,
.prose table td:first-child {
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
  text-align: left;
  padding-right: var(--space-5);
  font-variant-numeric: tabular-nums;
}
.prose table td { vertical-align: top; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 100;
  background: var(--action);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); color: var(--bg); }

/* Anchored landings clear the two-tier header (utility bar + main row). */
#main { scroll-margin-top: var(--header-h); }

/* ---- Site header — TWO TIERS -------------------------------------------
   Tier 1 (.site-utility): slim ~40px bar, subtle --surface fill + hairline,
     right-aligned cluster in reading order [DE|EN] [phone] [Online-Termin].
     Present in both locales and on mobile, so switcher + phone stay reachable.
   Tier 2 (.site-header__inner): logo left + primary nav taking the full
     remaining width. Both inners reuse the .container primitive so their edges
     line up with every page band below. */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* Tier 1 — utility bar. */
.site-utility {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
}
.site-utility__phone {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.site-utility__phone:hover { color: var(--action); text-decoration: underline; }
/* Compact CTA in the utility bar: btn--primary, but slimmer than the base .btn. */
.site-utility__cta.btn {
  min-height: 32px;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  border-width: 1px;
}
.site-utility__cta.btn--primary,
.site-utility__cta.btn--primary:hover { color: var(--bg); text-decoration: none; }

/* Tier 2 — main row. */
.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
}
.site-logo { display: inline-flex; line-height: 0; text-decoration: none; margin-right: auto; }
/* Round badge sized to anchor the nav row (client: 64px read too small).
   Fluid: 72px on small screens up to 92px on desktop. */
.site-logo img { width: clamp(72px, 5.5vw + 3rem, 92px); height: auto; aspect-ratio: 1; }
.site-logo__text { font-family: var(--font-head); font-weight: 700; color: var(--heading); }

/* ---- Mobile menu button (labelled, 44x44 min — no icon-only hamburger) ---- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--heading);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--action); color: var(--action); }
.nav-toggle__bars { display: inline-grid; gap: 3px; width: 20px; }
.nav-toggle__bars > span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__bars > span { transition: transform .2s ease, opacity .2s ease; }
}

/* ---- Primary navigation ---- */
.main-nav { width: 100%; }
.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.main-nav__item { position: relative; max-width: none; }
/* Top-level links only (child combinator keeps these off dropdown links). */
.main-nav__list > li > a {
  display: block;
  padding: var(--space-3) var(--space-2);
  color: var(--heading);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
}
.main-nav__list > li > a:hover { color: var(--action); text-decoration: underline; }
.main-nav__list > li > a[aria-current="page"],
.main-nav__item.is-trail > a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Submenu toggle (caret) — for touch; desktop also uses hover/:focus-within. */
.main-nav__toggle {
  position: absolute;
  top: var(--space-2);
  right: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--heading);
  cursor: pointer;
}
.main-nav__caret {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.main-nav__item--has-children.is-open > .main-nav__toggle .main-nav__caret { transform: rotate(180deg); }

/* Dropdown list — distinct class so top-level rules never leak in (gotchas). */
.main-nav__dropdown {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
  display: none;
}
.main-nav__item--has-children.is-open > .main-nav__dropdown { display: block; }
.main-nav__dropdown > li { max-width: none; }
.main-nav__dropdown a {
  display: block;
  padding: var(--space-2);
  color: var(--action);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
}
.main-nav__dropdown a:hover { text-decoration: underline; }
.main-nav__dropdown a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* Language switcher — lives in the utility bar (both tiers of type sm). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
}
.lang-switch a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.lang-switch a:hover { color: var(--hover); }
.lang-switch__current { color: var(--muted); }
.lang-switch__sep { color: var(--muted); opacity: .5; }

/* --- No-JS fallback: nav is always shown as a stacked list --- */
.no-js .nav-toggle { display: none; }

/* --- With JS: mobile menu collapses behind the button (<1024px) --- */
@media (max-width: 63.9375rem) {
  .js .main-nav { display: none; }
  .js .main-nav.is-open {
    display: block;
    width: 100%;
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }
}

/* --- Desktop (>=1024px): main row is logo + full-width nav, no hamburger ---
   With the phone/switch/CTA lifted into the utility bar, the whole main-row
   width is free for navigation: comfortable gaps, links right-aligned toward
   the logo's counterweight, every label on one line. */
@media (min-width: 64rem) {
  .nav-toggle { display: none; }

  .site-header__inner {
    flex-wrap: nowrap;
    gap: clamp(var(--space-5), 1rem + 1.5vw, var(--space-7));
    padding-block: var(--space-3);              /* 64px logo + 2*12 = ~88px tall */
  }
  .site-logo { margin-right: 0; }

  .main-nav,
  .js .main-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    width: auto;
  }
  .main-nav__list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(var(--space-4), 0.6rem + 1.4vw, var(--space-7));
    margin: 0;
  }
  /* Item is an inline row so the caret sits inline with its label, centred. */
  .main-nav__item { display: flex; align-items: center; gap: var(--space-1); }
  .main-nav__list > li > a {
    position: relative;
    padding: var(--space-2) 0;
    white-space: nowrap;                         /* a label NEVER wraps */
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  }
  /* Tasteful hover/active affordance: a 2px brand underline that wipes in from
     the left (offset below the label). Motion-gated; under reduced-motion it
     simply appears. aria-current + trail ancestors keep it lit. */
  .main-nav__list > li > a:hover { text-decoration: none; }
  .main-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .main-nav__list > li > a:hover::after,
  .main-nav__list > li > a:focus-visible::after,
  .main-nav__list > li > a[aria-current="page"]::after,
  .main-nav__item.is-trail > a::after { transform: scaleX(1); }
  .main-nav__list > li > a[aria-current="page"],
  .main-nav__item.is-trail > a { text-decoration: none; }
  @media (prefers-reduced-motion: no-preference) {
    .main-nav__list > li > a::after { transition: transform .2s ease; }
  }

  /* Caret button collapses to an inline glyph next to its label. */
  .main-nav__toggle {
    position: static;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    padding: 0;
  }

  /* Dropdown floats below its parent; opens on hover, keyboard focus, or the
     touch toggle. :focus-within keeps it open while tabbing through children. */
  .main-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    padding: var(--space-2);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    z-index: 50;
  }
  .main-nav__item--has-children:hover > .main-nav__dropdown,
  .main-nav__item--has-children:focus-within > .main-nav__dropdown,
  .main-nav__item--has-children.is-open > .main-nav__dropdown { display: block; }
}

/* English locale: the 7 EN labels ("Premium Services", "Patient Information",
   "Contact & Directions") are wider than the DE set. With the whole main row
   now free for nav, they fit — just step the gaps/type down a notch so every
   label stays on one line from 1024 up. */
@media (min-width: 64rem) {
  html[lang="en"] .main-nav__list { gap: clamp(var(--space-3), 0.3rem + 1vw, var(--space-6)); }
  html[lang="en"] .main-nav__list > li > a {
    font-size: clamp(0.9375rem, 0.82rem + 0.35vw, 1.0625rem);
  }
}

/* ---- Buttons (unified system §3) ----
   One base; three variants (primary / secondary / ghost). Consistent 48px min
   target, padding, radius, weight and size; hover darkens + lifts 1px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
  .btn:hover { transform: translateY(-1px); }
}
.btn--primary { background: var(--action); border-color: var(--action); color: var(--bg); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--bg); }
.btn--secondary { background: transparent; color: var(--action); border-color: var(--action); }
.btn--secondary:hover { color: var(--action-hover); border-color: var(--action-hover); }
.btn--ghost { background: transparent; color: var(--action); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn--ghost:hover { color: var(--action-hover); }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

/* Circular badge echo (logo roundel) for icon backgrounds. */
.badge-circle {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
}

/* ---- Page banner (interior pages) ---- */
.page-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-8);
}
.page-banner .container { padding-inline: max(var(--space-5), var(--space-4)); }
.page-banner h1 {
  margin: 0;
  font-size: var(--text-2xl);
}
/* Short rope-motif underline under the banner h1 (not full-width). */
.page-banner h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 10px;
  margin-top: var(--space-4);
  background: repeat-x left center / 24px 10px url("../images/rope-divider.svg");
}
/* Breadcrumb above the h1 on subpages. */
.breadcrumb { margin: 0 0 var(--space-4); }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--text-sm);
}
.breadcrumb li { max-width: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:first-child)::before { content: "/"; color: var(--muted); }
.breadcrumb a { color: var(--action); }
.breadcrumb [aria-current="page"] { color: var(--muted); }

/* ---- Hinweise announcement notices (§5: calm cards, no red underlines) ----
   Each owner-editable Content block renders as one <p>; style them as notice
   cards with a surface fill and an accent left border (decorative --brand). */
.home-hinweise .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.home-hinweise .container > p {
  margin: 0;
  max-width: var(--measure);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
/* Non-link notice text is never underlined; genuine links keep the link style. */
.home-hinweise .container > p u { text-decoration: none; }
.home-hinweise .container > p a { color: var(--action); text-decoration: underline; }

/* ---- CTA band ---- */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band h2 { margin-top: 0; }

/* ---- Rope divider (motif — max 1x per viewport) ---- */
.rope-divider {
  display: block;
  width: 100%;
  height: 12px;
  margin-block: var(--space-6);
  border: 0;
  background: repeat-x center / 24px 12px url("../images/rope-divider.svg");
}

/* ---- Seagull list accent ---- */
.list-seagull { list-style: none; padding-left: 0; }
.list-seagull > li {
  position: relative;
  padding-left: var(--space-6);
}
.list-seagull > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1rem; height: 1.1rem;
  background: no-repeat center / contain url("../images/seagull.svg");
}

/* ---- Site footer ---- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: var(--space-7);
  color: var(--muted);
}
.site-footer a { color: var(--action); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__col { min-width: 0; }
.site-footer__h {
  font-size: var(--text-md);
  margin: 0 0 var(--space-4);
}
.site-footer__brand { color: var(--ink); margin-bottom: var(--space-2); }
.site-footer__address { font-style: normal; line-height: var(--leading-body); }
.site-footer__address .num { font-variant-numeric: tabular-nums; }
.site-footer__fax { color: var(--muted); }

.site-footer__hours {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--measure);
  font-variant-numeric: tabular-nums;
}
.site-footer__hours th,
.site-footer__hours td {
  text-align: left;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.site-footer__hours th { font-weight: 700; color: var(--ink); padding-right: var(--space-4); }
.site-footer__hours td { color: var(--muted); }
.site-footer__hours tr:last-child th,
.site-footer__hours tr:last-child td { border-bottom: 0; }

.site-footer__nav { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li { max-width: none; margin-bottom: var(--space-2); }

.site-footer__bar {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.site-footer__credit { margin: 0; color: var(--muted); }

/* ---- Load reveal (one staggered fade-up; motion-safe only) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: hno-rise .5s ease-out forwards;
  }
  .reveal--1 { animation-delay: var(--reveal-1); }
  .reveal--2 { animation-delay: var(--reveal-2); }
  .reveal--3 { animation-delay: var(--reveal-3); }
  html { scroll-behavior: smooth; }
}
@keyframes hno-rise {
  to { opacity: 1; transform: none; }
}

/* ---- Alerts ---- */
.alert { border-radius: var(--radius-input); padding: var(--space-4); border: 1px solid var(--border); }
.alert--success { color: var(--success); border-color: var(--success); }
.alert--error { color: var(--error); border-color: var(--error); }

/* ==========================================================================
   Polish round (Task 14) — section rhythm, deep CTA band, mobile fixes.
   Tokens only; no hardcoded hex.
   ========================================================================== */

/* Full-width surface band (alternating rhythm white -> surface -> white). */
.band-surface { background: var(--surface); }

/* Home focus band sits on the surface rhythm band; its inner section+container
   already center the content, so drop the block's extra top padding. */
.home-focus .hno-band--focus { padding-top: 0; }

/* ---- Deep pre-footer CTA band (§2): navy bg, white text, primary CTA ------
   Gives every page a designed "end". White/near-white on navy-900 = AAA. */
.cta-final {
  background: var(--navy-900);
  color: var(--on-navy);
}
.cta-final__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-8);
}
.cta-final__text { max-width: 46ch; }
.cta-final__title {
  color: var(--bg);
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.cta-final__lead { margin: 0; color: var(--on-navy); }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
/* Buttons on the dark band: solid primary + a white-outline secondary. */
.cta-final .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--navy-900); }
.cta-final .btn--primary:hover { background: var(--bg); border-color: var(--bg); color: var(--navy-900); }
.cta-final .btn--onnavy { background: transparent; border-color: var(--on-navy); color: var(--bg); }
.cta-final .btn--onnavy:hover { background: var(--on-navy); color: var(--navy-900); }
.cta-final a:not(.btn) { color: var(--bg); }
.cta-final :focus-visible { outline-color: var(--bg); }
@media (max-width: 33.75rem) {
  .cta-final__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-final__actions .btn { width: 100%; }
}

/* ---- nowrap atom: keep time ranges / phone segments from mid-token wraps --- */
.nowrap { white-space: nowrap; }

/* ---- Long URLs in prose may break anywhere (only prose links) ------------- */
.prose a { overflow-wrap: anywhere; }

/* ---- Contact block polish (§3/§4) ---------------------------------------- */
.hno-contact__note { display: block; font-size: var(--text-sm); color: var(--muted); }
/* Kontakt page: address card + hours card side-by-side (desktop), stacked
   mobile; the booking buttons go full-width stacked. */
.hno-contact--full {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-6);
}
.hno-contact--full address { margin: 0; }
.hno-contact--full .hno-contact__hours { margin-block: 0; }
.hno-contact--full .hno-contact__actions { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .hno-contact--full { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 33.75rem) {
  .hno-contact__actions { flex-direction: column; align-items: stretch; }
  .hno-contact__actions .btn { width: 100%; }
}

/* ---- Contact/directions page: functional blocks span the full band ------- */
/* The Main column drops `.measure` (see full.php), so the prose paragraphs stay
   capped at the readable measure (global `p,li` + `.prose > *`) while the
   functional blocks below break out to the full container width. Higher
   specificity than `.prose > *` so it overrides the measure cap. */
.has-wide-blocks > .hno-contact--full,
.has-wide-blocks > .map-embed { max-width: none; }

/* ---- Card / interactive focus rings stay visible on new surfaces --------- */
.hno-band__focus li:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }

/* ---- Mobile hours: stacked rows < 480px (day label own line, times below) - */
.site-footer__hours th,
.hno-contact__hours li > span:first-child { font-weight: 600; }
@media (max-width: 30rem) {
  /* Footer opening-hours table -> stacked blocks. */
  .site-footer__hours, .site-footer__hours tbody, .site-footer__hours tr,
  .site-footer__hours th, .site-footer__hours td { display: block; }
  .site-footer__hours th { padding: var(--space-3) 0 0; border: 0; }
  .site-footer__hours td { padding: 0 0 var(--space-3); border-bottom: 1px solid var(--border); }
  .site-footer__hours tr:last-child td { border-bottom: 0; }
  /* Practice-contact hours list -> stacked. */
  .hno-contact__hours li { flex-direction: column; gap: var(--space-1); }
}


/* ---- Obfuscated e-mail address (image + JS-assembled mailto) ---- */
/* The visible address is a PNG typeset in the body font (ink = --ink); the
   mailto: href is assembled client-side (js/main.js). Sized to the surrounding
   text so it reads as an inline address link. */
.hno-email { text-decoration: none; }
.hno-email[href] { cursor: pointer; }
.hno-email__img {
  height: 1.15em;
  width: auto;
  max-width: 100%;
  vertical-align: -0.17em;
}