/* AfterGlow Skin by Carli: shared styles
   Palette adopted from the "AfterGlow Brand Concepts" deck, slide 13
   ("Soft": tonal, elevated, calm, softly desaturated). All twelve deck
   swatches are tokenised below. --pine-soft and --forest-dark are the two
   shades the deck does not supply; they are derived for muted text and
   hover states. Ratios are vs --ivory unless noted.

   Neutrals
   --ivory       #FAFBFA  page background
   --ivory-deep  #EDEFF0  alt band / badge background
   --stone       #C6CBC8  hairlines, dividers (never text)
   --pine        #2B2F2D  ink / body text, dark bands, footer, trust bar (13.1:1)
   --pine-soft   #55605A  derived; secondary / muted text (6.3:1)

   Greens
   --forest      #4F6B5A  links, primary buttons, eyebrows, active nav, focus (5.7:1)
   --forest-dark #3E5449  derived; hover states (7.9:1)
   --sage        #7E9F8C  decorative borders / accents (never text on light bg, 2.8:1)
   --sage-light  #A8BFAE  soft accent fills
   --sage-pale   #C9D8CE  palest accent fills

   Warms
   --blush       #D8C6BE  accent text on dark bands (8.2:1 on --pine)
   --clay        #C49A8E  warm accent (never text on light bg, 2.4:1)
   --plum        #9A6F7A  deep warm accent (large text only on light bg, 4.1:1)
   --gold        #C2A86D  stars, rules, links on dark bands (never text on light bg, 2.2:1)

   The -rgb channel tokens exist so translucent fills track the palette
   instead of hardcoding the same colour a second time.
*/

:root {
  --ivory: #FAFBFA;
  --ivory-deep: #EDEFF0;
  --stone: #C6CBC8;
  --pine: #2B2F2D;
  --pine-soft: #55605A;
  --forest: #4F6B5A;
  --forest-dark: #3E5449;
  --sage: #7E9F8C;
  --sage-light: #A8BFAE;
  --sage-pale: #C9D8CE;
  --blush: #D8C6BE;
  --clay: #C49A8E;
  --plum: #9A6F7A;
  --gold: #C2A86D;
  --white: #FFFFFF;

  --ivory-rgb: 250, 251, 250;
  --pine-rgb: 43, 47, 45;
  --sage-rgb: 126, 159, 140;
  --gold-rgb: 194, 168, 109;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1120px;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(var(--pine-rgb), 0.08);
  --shadow-sm: 0 4px 14px rgba(var(--pine-rgb), 0.06);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--pine);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.05rem, 5.9vw, 3.75rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1rem; }
a { color: var(--forest); }
a:hover { color: var(--forest-dark); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 0.9rem;
}

.lede { font-size: 1.18rem; color: var(--pine-soft); max-width: 60ch; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
section { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* ---------- Skip link + focus ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--pine);
  color: var(--ivory);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  z-index: 200;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.8rem; color: var(--ivory); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--forest); color: var(--white); }
.btn-primary:hover { background: var(--forest-dark); color: var(--white); }
.btn-secondary {
  background: transparent;
  color: var(--pine);
  border-color: var(--sage);
}
.btn-secondary:hover { background: var(--ivory-deep); color: var(--pine); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--ivory-rgb), 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(var(--sage-rgb), 0.28);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--pine);
  text-decoration: none;
  letter-spacing: 0.01em;
}
/* The header lockup is the full wordmark. Its gold arc means the lettering
   is only ~23% of the image height, so it needs real height to stay legible. */
.brand img { display: block; width: auto; height: clamp(44px, 5vw, 56px); }
.header-right { display: flex; align-items: center; gap: 0.4rem 1.1rem; flex-wrap: wrap; }
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.3rem 1.25rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--pine);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--forest); border-bottom-color: var(--sage); }
.site-nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--forest); }

/* ---------- Mobile nav disclosure (CSS-only, hidden on desktop) ---------- */
.nav-mobile { display: none; }
.nav-mobile > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile .hamburger,
.nav-mobile .hamburger::before,
.nav-mobile .hamburger::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pine);
  border-radius: 2px;
}
.nav-mobile .hamburger { position: relative; }
.nav-mobile .hamburger::before { position: absolute; left: 0; top: -7px; }
.nav-mobile .hamburger::after { position: absolute; left: 0; top: 7px; }
.nav-mobile[open] .hamburger { background: transparent; }
.nav-mobile[open] .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-mobile[open] .hamburger::after { top: 0; transform: rotate(-45deg); }
.mobile-nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ivory);
  border-top: 1px solid rgba(var(--sage-rgb), 0.28);
  border-bottom: 1px solid rgba(var(--sage-rgb), 0.28);
  box-shadow: var(--shadow);
}
.mobile-nav-panel ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--maxw);
}
.mobile-nav-panel li { border-top: 1px solid rgba(var(--sage-rgb), 0.22); }
.mobile-nav-panel li:first-child { border-top: none; }
.mobile-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.9rem 1.25rem;
  color: var(--pine);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
}
.mobile-nav-panel a:hover { background: var(--ivory-deep); color: var(--forest); }
.mobile-nav-panel a[aria-current="page"] {
  color: var(--forest);
  box-shadow: inset 3px 0 0 var(--forest);
}

/* ---------- Hero ---------- */
.hero {
  /* .hero-inner owns all hero spacing. Without this, a <section class="hero">
     also picks up the generic `section` padding and the two stack, which put
     ~176px above every page heading. */
  padding: 0;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(var(--gold-rgb), 0.26), transparent 60%),
    radial-gradient(760px 460px at 6% 4%, rgba(var(--sage-rgb), 0.16), transparent 55%),
    var(--ivory);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.75rem, 5vw, 4.25rem) 1.25rem clamp(2rem, 4vw, 3rem); }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 0.4rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; }

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1.6rem 0 1.5rem;
}
.quote {
  margin: 0;
  background: var(--white);
  border: 1px solid rgba(var(--sage-rgb), 0.35);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.42;
  color: var(--pine);
  flex: 1;
}
.quote .stars { margin-bottom: 0.7rem; }
.quote figcaption { font-size: 0.92rem; font-weight: 700; color: var(--pine-soft); }

/* ---------- Hero with photo (full-bleed background, scroll fade) ---------- */
.hero-photo { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the wall sign (upper-right of the source photo) fully in frame:
     wider viewports see a shorter vertical band, so bias the crop high */
  object-position: 72% 18%;
  z-index: 0;
}
/* Ivory scrim: near-solid over the text column, opening up to the photo on the right,
   plus a bottom fade so the section melts into the page background */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ivory) 0%, rgba(var(--ivory-rgb), 0.96) 34%, rgba(var(--ivory-rgb), 0.72) 55%, rgba(var(--ivory-rgb), 0.18) 100%),
    linear-gradient(0deg, var(--ivory) 0%, rgba(var(--ivory-rgb), 0) 26%);
}
.hero-photo .hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 66vh, 700px);
}
.hero-photo .hero-copy { max-width: 34rem; }
/* Scroll-driven fade+drift: pure CSS, progressive enhancement, motion-safe.
   The timeline is named on the in-flow section, not the absolutely-positioned img:
   Chromium never advances a view() timeline whose subject is abs-positioned inside
   an overflow:hidden ancestor. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-photo { view-timeline: --hero-exit block; }
    .hero-bg {
      animation: hero-bg-fade linear both;
      animation-timeline: --hero-exit;
      animation-range: exit 0% exit 85%;
    }
  }
}
@keyframes hero-bg-fade {
  to { opacity: 0; transform: translateY(48px) scale(1.05); }
}
@media (max-width: 799.98px) {
  /* Flipped composition: photo (and the wall sign) clear at the top, text below.
     Top-anchoring the image with a fixed height makes cover-scaling
     width-dominated on phones, so the full image width is always visible
     (sign can't clip at the right edge) and the sign lands at a fixed
     ~86-146px band from the top regardless of section height. The scrim
     stays clear over that band and is solid ivory by 300px, which also
     hides the image's hard bottom edge. */
  .hero-bg { inset: 0 0 auto 0; height: 320px; object-position: 50% 0%; }
  .hero-photo::before {
    background:
      linear-gradient(180deg, rgba(var(--ivory-rgb), 0.12) 0px, rgba(var(--ivory-rgb), 0.12) 150px, rgba(var(--ivory-rgb), 0.9) 215px, var(--ivory) 300px);
  }
  .hero-photo .hero-inner { min-height: 0; padding-top: 150px; padding-bottom: 2rem; align-items: flex-start; }
  /* Tighter hero type on phones so both CTAs land above the fold on ~740px-tall viewports */
  .hero-photo .lede { font-size: 1.02rem; }
  .hero-photo .cta-row { margin-top: 1.2rem; }
}

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--pine);
  color: var(--ivory);
  text-align: center;
}
.trust-bar .wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.trust-bar a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.trust-bar a:hover { color: var(--blush); }
.stars { color: var(--gold); letter-spacing: 0.12em; font-size: 1.05rem; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--white);
  border: 1px solid rgba(var(--sage-rgb), 0.32);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.35rem; }
.card .meta { font-weight: 800; color: var(--forest); margin-bottom: 0.6rem; font-size: 0.98rem; }
.card p { color: var(--pine-soft); flex: 1; }
.card .card-link { margin-top: 0.9rem; font-weight: 800; text-decoration: none; }
.card .card-link:hover { text-decoration: underline; }
.badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--ivory-deep);
  color: var(--forest);
  border: 1px solid var(--sage);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

/* ---------- Alt band ---------- */
.band-cream { background: var(--ivory-deep); }
.band-espresso { background: var(--pine); color: var(--ivory); }
.band-espresso h2, .band-espresso h3 { color: var(--ivory); }
.band-espresso .lede, .band-espresso p { color: rgba(var(--ivory-rgb), 0.88); }
.band-espresso a { color: var(--gold); }
/* On dark pine bands a forest button sits at only 2.2:1, so use blush with pine text */
.band-espresso .btn-primary, .site-footer .btn-primary { background: var(--blush); color: var(--pine); }
.band-espresso .btn-primary:hover, .site-footer .btn-primary:hover { background: var(--white); color: var(--pine); }

/* ---------- Steps strip ---------- */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 2rem; }
.step { padding: 1.2rem 0; }
.step .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--forest);
  display: inline-flex;
  width: 2.6rem; height: 2.6rem;
  align-items: center; justify-content: center;
  border: 2px solid var(--sage);
  border-radius: 999px;
  margin-bottom: 0.7rem;
}

/* ---------- Service menu ---------- */
.menu-group { margin-top: 2.4rem; }
.menu-group > h2 { border-bottom: 2px solid var(--sage); padding-bottom: 0.4rem; }
.menu-note { color: var(--pine-soft); font-size: 0.98rem; margin-top: 0.3rem; }
.service {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(var(--sage-rgb), 0.32);
}
.service:last-child { border-bottom: none; }
.service h3 { margin: 0; }
.service .price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--forest); white-space: nowrap; text-align: right; }
.service .dur { display: block; font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; color: var(--pine-soft); letter-spacing: 0.03em; }
.service .desc { grid-column: 1 / -1; color: var(--pine-soft); margin: 0.2rem 0 0; max-width: 62ch; }
.service .book-link { grid-column: 1 / -1; font-weight: 800; text-decoration: none; margin-top: 0.6rem; }
.service .book-link:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-top: 1.5rem; }
details.faq {
  background: var(--white);
  border: 1px solid rgba(var(--sage-rgb), 0.32);
  border-radius: 14px;
  margin-bottom: 0.9rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--pine);
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--forest);
  line-height: 1;
}
details.faq[open] summary::after { content: "\2013"; }
details.faq .answer { padding: 0 1.3rem 1.3rem; color: var(--pine-soft); }
details.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Contact / info blocks ---------- */
.info-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.info-block h3 { margin-bottom: 0.3rem; }
.info-block p { color: var(--pine-soft); margin-bottom: 0.4rem; }
/* .info-block p outranks the band text rule by source order, so restate light text for dark bands */
.band-espresso .info-block p { color: rgba(var(--ivory-rgb), 0.88); }
.info-block a { font-weight: 700; }

.hours-list { margin: 0 0 0.4rem; }
.hours-list div { display: flex; justify-content: space-between; gap: 1rem; }
.hours-list dt { color: var(--pine); font-weight: 700; }
.hours-list dd { margin: 0; color: var(--pine-soft); text-align: right; }
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(var(--sage-rgb), 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.visit-media { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.visit-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: block;
}
@media (min-width: 800px) {
  .visit-media { grid-template-columns: 2fr 3fr; align-items: stretch; }
  .visit-media img, .visit-media .map-embed { height: 100%; object-fit: cover; aspect-ratio: auto; }
}

/* ---------- Prose (about) ---------- */
/* Constrain the children, not the wrap. Narrowing .wrap itself kept `margin:
   0 auto`, which centred the text column in the viewport while the hero above
   it started at the 1120px band's left edge, so the two left edges did not
   line up. Keeping the wrap full width and capping each child preserves the
   readable measure and aligns the column with the hero. */
.prose > * { max-width: 68ch; }
.prose p { margin-bottom: 1.15rem; }
.prose p:first-of-type { font-size: 1.16rem; color: var(--pine); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .wrap { max-width: 720px; }
.cta-band .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--pine);
  color: rgba(var(--ivory-rgb), 0.85);
  padding: 3rem 0 2rem;
  font-size: 0.96rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h2, .site-footer h3 { color: var(--ivory); }
.site-footer h2 { font-size: 1.08rem; margin-bottom: 0.55rem; }
.site-footer .footer-brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); margin-bottom: 0.5rem; }
.site-footer a { color: var(--ivory); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.75; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.footer-note {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ivory-rgb), 0.18);
  font-size: 0.86rem;
  color: rgba(var(--ivory-rgb), 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.text-link { font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Nav swap: inline nav on desktop, disclosure on mobile ---------- */
@media (max-width: 759.98px) {
  .site-nav { display: none; }
  .nav-mobile { display: inline-flex; align-items: center; }
}

@media (max-width: 560px) {
  .service { grid-template-columns: 1fr; }
  .service .price { text-align: left; }
  .header-inner { padding: 0.5rem 0.9rem; gap: 0.5rem; flex-wrap: nowrap; }
  .brand { gap: 0.45rem; }
  .brand img { height: 38px; }
  .header-right { gap: 0.35rem; flex-wrap: nowrap; }
  .header-right .btn-sm { padding: 0.5rem 0.85rem; font-size: 0.86rem; white-space: nowrap; }
  .nav-mobile > summary { width: 40px; height: 40px; }
}

/* ---------- Small-screen typography & spacing ---------- */
@media (max-width: 479.98px) {
  section { padding: clamp(2rem, 6vw, 3.5rem) 0; }
  .trust-bar .wrap { font-size: 0.88rem; }
  .trust-bar .stars { font-size: 0.95rem; letter-spacing: 0.04em; }
  .eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; }
  .cta-row .btn { width: 100%; }
  .quote blockquote { font-size: 1.12rem; }
  .hours-list dt, .hours-list dd { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}