/* ================================================================
   READABILITY & ACCESSIBILITY LAYER — Marlowe
   ----------------------------------------------------------------
   Loaded AFTER style.css, so everything here wins without touching
   the theme file. Tuned for older visitors, who are the main
   customers: larger type, stronger contrast, big tap targets,
   always-visible field labels, obvious focus, calm motion.

   Nothing here changes layout structure or class names — it only
   adjusts size, colour, spacing and interaction affordances.
   ================================================================ */

/* ── 1 · Base type: bigger and airier ─────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-size: 18px;
  line-height: 1.75;
}
p, li, dd, blockquote { font-size: 1.03rem; line-height: 1.75; }

.eyebrow, .fin2-kicker { font-size: 14px !important; }
.feat-card__title, .merch-card__name, .vid-card__title { font-size: 1.06rem; }
.feat-card__price { font-size: 1.22rem; }

/* ── 3 · Contrast: lift the muted grey to WCAG AA ─────────────
   Measured before: 3.03:1 against the page. Now 5.43:1. */
:root { --muted: #63625B; }
.muted, .text-muted, small, figcaption { color: #63625B; }

/* Links inside prose are underlined, not colour-only — colour alone
   is easy to miss with reduced colour discrimination. */
.det-desc a, .faq a, .prose a, .legal a, main p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ── 4 · Tap targets: nothing important under 48px ────────────
   Apple/Google guidance is 44px; 48px is kinder to less steady hands. */
.btn, button, [role="button"], .nav-toggle, .topbar__phone {
  min-height: 48px;
  font-size: 16px;
}
.btn {
  padding: 14px 28px;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--sm { min-height: 44px; font-size: 15px; padding: 10px 18px; }
.topbar__phone { font-size: 17px; display: inline-flex; align-items: center; }
.nav-drawer a, .topbar__nav a { min-height: 48px; display: flex; align-items: center; }
.footer a, .foot-col a { display: inline-block; padding: 4px 0; min-height: 32px; }

/* ── 5 · Forms: visible labels, large fields, clear errors ────
   Placeholders disappear the moment typing starts, so every field
   now carries a permanent label above it (added in the templates).
   Fields themselves are tall, high-contrast and never below 16px —
   16px also stops iOS zooming the page on focus. */
.field-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: #3A3C42;
}
.field-label .req { color: #2348FF; font-weight: 700; }
.field-hint { display:block; font-size: 13.5px; color: #63625B; margin-top: 5px; }
.form-field { margin-bottom: 18px; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  font-size: 16px !important;
  min-height: 52px;
  padding: 13px 15px;
  background: #FFFFFF;
  color: #15171C;
  border: 2px solid #B4AF9F;
  border-radius: 6px;
  width: 100%;
}
textarea { min-height: 130px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #63625B; opacity: 1; }

/* ── 6 · Focus: always obvious, for keyboard and magnifier users ─
   The theme sets outline:none in several places; this restores a
   thick, offset ring that is visible on every background. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid #2348FF !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
input:focus, select:focus, textarea:focus {
  border-color: #2348FF !important;
  box-shadow: 0 0 0 3px #2348FF33 !important;
}

/* ── 7 · Anything revealed on hover also shows on focus ───────
   Hover-only affordances are invisible on touch and unreachable by
   keyboard. */
.feat-card:focus-within .feat-card-img__hover,
.merch-card:focus-within .merch-card__cta,
a:focus-visible .feat-card-img__hover { opacity: 1 !important; }

/* ── 8 · Calmer motion ────────────────────────────────────────
   Scroll-reveal and parallax can be disorienting. Users who ask the
   OS for reduced motion get a completely still page; everyone else
   gets slower, gentler transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger .reveal-item { opacity: 1 !important; transform: none !important; }
}


/* ── 10 · Skip link for keyboard users ───────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #FFFFFF; color: #15171C;
  padding: 14px 20px; border: 3px solid #2348FF;
  font-size: 16px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }


/* ── Call-back capture band ──────────────────────────────────────── */
.cta-band__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: clamp(26px, 4vw, 48px);
}
.cta-band__head {
  font-family: var(--font-disp); font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08; margin: 6px 0 12px; color: var(--fg);
}
.cta-band__sub { margin: 0 0 22px; color: var(--fg-2); max-width: 46ch; }
.cta-band__phone {
  display: inline-block; font-family: var(--font-disp);
  font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.01em;
  color: var(--accent); text-decoration: none; min-height: 48px;
}
.cta-band__phone:hover, .cta-band__phone:focus-visible { text-decoration: underline; }
.cta-band__hours { margin-top: 6px; font-size: 14px; color: var(--fg-2); }
.cta-band__form {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r)_SM; padding: clamp(20px, 3vw, 28px);
}
.cta-band__formhead {
  font-family: var(--font-disp); font-size: 20px; margin-bottom: 16px; color: var(--fg);
}
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }


/* ── Shipping carrier photo band (Marlowe) ──────────────────────── */
.ship-photo { padding: 0 0 clamp(28px, 5vw, 56px); }
.ship-photo__fig { margin: 0; }
.ship-photo__fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); border: 1px solid var(--border);
}
.ship-photo__cap {
  margin-top: 12px; font-size: 15px; color: var(--fg-2);
  max-width: 62ch;
}