/* ===================================
   SHREVEPORT DRYWALL PRO
   Built on local-design base.css.
   Design system: sharp corners (0 radius), strong hierarchy, high contrast.
   Palette extracted from logo. All text colors verified WCAG AA.
   =================================== */

:root {
  /* Brand — from logo */
  --color-primary: #16295c;        /* navy — 13.9:1 on white */
  --color-primary-dark: #0f1d42;
  --color-primary-ink: #ffffff;
  --color-accent: #c2410c;         /* AA-safe orange — 5.2:1 on white */
  --color-accent-dark: #9a330a;
  --color-accent-bright: #f26a21;  /* logo orange — DECORATIVE ONLY, fails AA for text */

  --color-ink: #1e2126;            /* charcoal — 15.8:1 */
  --color-body: #333333;
  --color-muted: #5f6570;          /* 5.9:1 */
  --color-line: #e2e4e8;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f5f7;
  --color-success: #15803d;
  --color-error: #b91c1c;

  /* Typography — trades register per typography-system.md */
  --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;
  --announce-h: 40px;

  --radius: 0;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.12;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: 1.125rem; font-weight: 700; }
p { max-width: 72ch; }

.overline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--s-1);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }
section { padding-block: var(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.9375rem 1.875rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn + .btn { margin-top: var(--s-2); }
@media (min-width: 480px) { .btn + .btn { margin-top: 0; margin-left: var(--s-2); } }

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: #fff; }
.btn-on-dark { background: transparent; color: #fff; border-color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--color-primary); }

/* Announcement bar */
.announcement-bar {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 0.625rem;
  border-bottom: 3px solid var(--color-accent-bright);
}
.announcement-bar strong { font-weight: 800; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--header-h);
}
.site-header .logo { display: block; text-decoration: none; flex-shrink: 0; }

/* Logo lockup — badge mark + wordmark.
   Built in HTML/CSS rather than an <img> so the type renders in Montserrat,
   stays sharp at any DPI, and can invert for the dark footer. */
.logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-heading); }
.logo-city { font-weight: 900; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--color-primary); }
.logo-name { font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.11em; color: var(--color-ink); margin-top: 0.1875rem; }
.logo-name em { font-style: normal; color: var(--color-accent); }
@media (min-width: 480px) {
  .logo-mark { width: 46px; height: 46px; }
  .logo-city { font-size: 1.25rem; }
  .logo-name { font-size: 0.78125rem; }
}
/* Footer / dark-background variant */
.logo-light .logo-city { color: #fff; }
.logo-light .logo-name { color: rgba(255,255,255,0.9); }
.logo-light .logo-name em { color: var(--color-accent-bright); }
.site-header nav { display: none; gap: var(--s-3); }
.site-header nav a { text-decoration: none; font-weight: 700; color: var(--color-ink); font-size: 0.9375rem; }
.site-header nav a:hover { color: var(--color-accent); }
@media (min-width: 900px) { .site-header nav { display: flex; } }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.6875rem 1.125rem;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-call:hover { background: var(--color-accent-dark); }

/* Hero */
.hero { background: var(--color-bg-alt); padding-block: var(--s-5); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-6); }
  .hero > .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-5); align-items: start; }
}
.hero h1 { margin-bottom: var(--s-2); }
.hero .subhead { font-size: 1.1875rem; color: var(--color-body); margin-bottom: var(--s-3); max-width: 54ch; }
.hero-copy .btn-row { margin-top: var(--s-3); }
/* Breathing room between the stacked hero copy and the form card on mobile. */
.hero-copy { margin-bottom: var(--s-4); }
@media (min-width: 900px) { .hero-copy { margin-bottom: 0; } }

.hero-bullets { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 0.625rem; }
.hero-bullets li { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 600; color: var(--color-ink); }
.hero-bullets svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--color-accent); }

/* Lead form */
.lead-form { background: var(--color-bg); padding: var(--s-3); border: 3px solid var(--color-primary); }
.lead-form h2 { font-size: 1.375rem; margin-bottom: 0.25rem; }
.lead-form .form-intro { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.lead-form label { display: block; font-weight: 700; font-size: 0.8125rem; margin-bottom: 0.3125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.8125rem;
  border: 2px solid var(--color-line);
  background: #fff;
  font-size: 1rem;
  color: var(--color-ink);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.lead-form textarea { min-height: 92px; resize: vertical; }
/* Pair the two shortest selects so a longer qualifying form stays compact. */
.lead-form .form-pair { display: grid; gap: var(--s-2); }
@media (min-width: 420px) { .lead-form .form-pair { grid-template-columns: 1fr 1fr; } }
.lead-form .req { color: var(--color-accent); font-weight: 800; }
.lead-form .form-note .req { margin-right: 0.15rem; }
.lead-form select:invalid, .lead-form select option[value=""] { color: var(--color-muted); }
.lead-form .btn { width: 100%; }
.lead-form .form-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--s-1); text-align: center; }
.lead-form ._gotcha { position: absolute; left: -9999px; opacity: 0; }
.form-success { padding: var(--s-3); border: 3px solid var(--color-success); background: #fff; }
.form-success h3 { color: var(--color-success); margin-bottom: var(--s-1); }

/* Google Maps embed. The supplied iframe was a fixed 400x300, which would sit
   as a small box on desktop and overflow narrow phones. Wrapper makes it fluid. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
@media (max-width: 600px) { .map-embed { aspect-ratio: 4 / 3; } }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Trust bar */
.trust-bar { background: var(--color-primary); color: #fff; padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3); text-align: center;
}
@media (min-width: 900px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; }
.trust-bar li svg { margin: 0 auto 0.5rem; color: var(--color-accent-bright); }

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block; padding: var(--s-3);
  background: var(--color-bg); border: 2px solid var(--color-line);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.service-card:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }

/* Image slots. These render only when the file exists at build time (see IMAGES.md),
   so the layout is correct with or without art and never shows a broken image. */
.card-img {
  /* Bleeds past the card's padding. Needs max-width:none because the global
     img reset caps every image at 100% of its container, which would clamp
     the calc() width back to the padded box and kill the bleed. */
  max-width: none;
  width: calc(100% + var(--s-3) * 2);
  margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
.service-card:hover .card-img { border-bottom-color: var(--color-primary); }
/* Homepage hero: dark photo treatment.

   Dark text over a photo on a light background is the worst case in web design.
   Any overlay heavy enough to protect #333 body copy flattens the photo to a ghost,
   and the orange accent could not pass AA as text over the photo's near-black
   regions at ANY overlay (4.3:1 even at 0.96). Inverting solves both: white text
   over a navy overlay is far more forgiving, so the photo can show at roughly
   double the strength.

   Measured against the photo's LIGHTEST pixels under the text, rgb(255,255,255),
   which is the worst case for white type:
     white on 0.86 navy -> 8.8:1   AA pass (needs 4.5)
     white on 0.60 navy -> 4.6:1   still passes, and no text sits there anyway
   The checkmark icons use a light orange rather than the brand orange, which
   drops to 2.3:1 against navy and would fail even the 3:1 graphics threshold. */
.hero-image {
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(15,29,66,0.90), rgba(22,41,92,0.86)),
    url('/assets/img/drywall-contractor-shreveport-hero.webp');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .hero-image {
    background-image:
      linear-gradient(100deg,
        rgba(15,29,66,0.93) 0%,
        rgba(22,41,92,0.88) 45%,
        rgba(22,41,92,0.62) 100%),
      url('/assets/img/drywall-contractor-shreveport-hero.webp');
  }
}

/* The homepage H1 is a long keyword-led heading (94 chars). At the global
   --fs-h1 of 60px it ran to 8 lines, 538px tall, and pushed the call buttons
   below the fold on a 900px viewport. Scale it down for this heading only;
   every other H1 on the site keeps the display size. */
.hero-image h1 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.15; }

/* Invert the hero copy for the dark ground */
.hero-image .overline { color: #ffffff; opacity: 0.95; }
.hero-image h1 { color: #ffffff; }
.hero-image .subhead { color: rgba(255,255,255,0.92); }
.hero-image .hero-bullets li { color: #ffffff; }
.hero-image .hero-bullets svg { color: #ffb380; }
.hero-image .btn-secondary { color: #ffffff; border-color: #ffffff; background: transparent; }
.hero-image .btn-secondary:hover { background: #ffffff; color: var(--color-primary); }

/* Images inside the homepage topical-depth blocks */
.block-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--s-2);
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}

.feature-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--s-3);
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
.service-card h3 { margin-bottom: var(--s-1); color: var(--color-primary); }
.service-card p { font-size: 0.9375rem; color: var(--color-body); }
.service-card .arrow { display: inline-block; margin-top: var(--s-2); font-weight: 800; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Why Choose Us — 3 pillars */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { border-top: 4px solid var(--color-accent-bright); padding-top: var(--s-2); }
.pillar h3 { margin-bottom: var(--s-1); }
.pillar p { font-size: 0.9375rem; }

/* Deep content sections (topical depth blocks) */
.content-blocks { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 768px) { .content-blocks { grid-template-columns: repeat(2, 1fr); } }
.content-block h3 { margin-bottom: var(--s-1); color: var(--color-primary); }
.content-block p { font-size: 0.9375rem; }
.stat-line {
  display: block; margin-top: var(--s-1);
  font-size: 0.8125rem; font-weight: 700; color: var(--color-ink);
  border-left: 3px solid var(--color-accent-bright); padding-left: 0.75rem;
}

/* Mid-page form band */
.form-band { background: var(--color-primary); color: #fff; }
.form-band h2, .form-band h3 { color: #fff; }
/* Top-align rather than centre. The qualifying form is much taller than the copy
   beside it, and centring left a large empty band above the headline. */
.form-band .form-band-grid { display: grid; gap: var(--s-4); align-items: start; }
.form-band .band-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: var(--s-3);
  border: 2px solid rgba(255,255,255,0.25);
}
@media (min-width: 900px) { .form-band .form-band-grid { grid-template-columns: 1fr 1fr; } }
.form-band p { color: rgba(255,255,255,0.9); }
.form-band .lead-form { border-color: var(--color-accent-bright); }
.form-band .lead-form h2, .form-band .lead-form label { color: var(--color-ink); }
.form-band .lead-form .form-intro, .form-band .lead-form .form-note { color: var(--color-muted); }

/* Pricing table */
.price-table { width: 100%; border-collapse: collapse; margin-block: var(--s-2); font-size: 0.9375rem; }
.price-table th, .price-table td { text-align: left; padding: 0.875rem 0.75rem; border-bottom: 1px solid var(--color-line); }
.price-table th { font-family: var(--font-heading); font-weight: 800; background: var(--color-primary); color: #fff; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.price-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.table-scroll { overflow-x: auto; }

/* Reviews / proof */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; padding: var(--s-3); border: 2px solid var(--color-line); }
.review-card .stars { color: #d97706; font-size: 1.125rem; margin-bottom: var(--s-1); letter-spacing: 2px; }
.review-card blockquote { font-style: italic; margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; display: block; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }

/* Process steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem;
}
.steps h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.steps p { font-size: 0.9375rem; }

/* FAQ */
.faq details { border-bottom: 2px solid var(--color-line); padding-block: var(--s-2); }
.faq summary {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem;
  cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem;
  color: var(--color-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: -0.25rem;
  font-size: 1.75rem; line-height: 1; color: var(--color-accent);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > div, .faq details > p { margin-top: var(--s-2); }

/* Service area list */
.area-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
@media (min-width: 768px) { .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-list li { border-left: 3px solid var(--color-accent-bright); padding-left: 0.75rem; font-weight: 600; font-size: 0.9375rem; }

/* Final CTA band */
.cta-band { background: var(--color-primary); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.125rem; margin-bottom: var(--s-3); margin-inline: auto; color: rgba(255,255,255,0.92); }
.cta-band a { color: #fff; }

/* Footer */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.85); padding-block: var(--s-5) var(--s-3); font-size: 0.9375rem; }
.site-footer a { color: #fff; }
.site-footer .footer-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { color: #fff; margin-bottom: var(--s-2); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .footer-bottom {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-size: 0.8125rem; color: rgba(255,255,255,0.65);
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform 0.25s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1.0625rem 1rem; text-align: center; text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: 0.9375rem;
  font-family: var(--font-heading); letter-spacing: 0.03em;
}
.mobile-cta .call { background: var(--color-accent); color: #fff; }
.mobile-cta .quote { background: var(--color-primary); color: #fff; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Desktop floating call button */
.fab-call {
  display: none;
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 90;
  align-items: center; gap: var(--s-1);
  padding: 1rem 1.5rem;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.fab-call:hover { background: var(--color-accent-dark); }
@media (min-width: 768px) { .fab-call.visible { display: inline-flex; } }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--s-2); font-size: 0.875rem; color: var(--color-muted); border-bottom: 1px solid var(--color-line); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Prose helpers for long-form body copy */
.prose p + p { margin-top: var(--s-2); }
.prose h3 { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.prose ul, .prose ol { margin: var(--s-2) 0; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--color-accent); font-weight: 700; }

/* Utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
.mb-3 { margin-bottom: var(--s-3); }
.bg-alt { background: var(--color-bg-alt); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}