/* Cunard Pharmacy — NP Weight-Loss Clinic landing page
   Brand SSOT: ../brand/tokens.css (imported below). Reference token NAMES, not raw hex.
   Mobile-first, lightweight, conversion-first. ~83% mobile traffic. */

@import url("tokens.css");

/* ---------------------------------------------------------------- compat token layer
   The brand SSOT (tokens.css) defines the core palette + type scale but NOT the semantic
   aliases the canonical Claude Design content references. We map them here, on top of the
   SSOT, so the rest of this stylesheet can use clean semantic names without editing brand. */
:root {
  --surface-page: var(--color-white);
  --surface-warm: var(--color-ivory);
  --surface-dark: var(--color-black);

  --text-heading: var(--color-black);
  --text-body: var(--color-graphite);
  --text-muted: var(--color-grey);
  --text-on-dark: var(--color-ivory);
  --text-on-dark-muted: #b9b2a4;

  --border-hairline: var(--color-border);
  --card-top-edge: var(--color-gold);

  --heading-l: clamp(1.5rem, 2.6vw, 2rem);
  --heading-m: clamp(1.25rem, 2vw, 1.5rem);
  --text-small: 0.875rem;
  --line-snug: 1.2;

  --radius-pill: 999px;
  --tracking-tight: -0.01em;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 220ms;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--color-graphite);
  background: var(--color-white);
  font-family: var(--font-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}

body::selection { color: var(--color-black); background: var(--color-gold); }

a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-black);
  font-weight: 500;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}
h1 em, h2 em, h3 em { font-style: italic; }

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}

.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px;
  transform: translateY(-160%);
  color: var(--color-black); background: var(--color-gold);
  padding: 10px 14px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid rgba(200, 162, 74, 0.72); outline-offset: 3px; }

/* ---------------------------------------------------------------- header (slim: logo + phone) */
.site-header {
  position: sticky; z-index: 40; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 64px);
  color: var(--color-white);
  background: rgba(11, 11, 11, 0.94);
  border-bottom: 1px solid rgba(232, 226, 214, 0.18);
  backdrop-filter: blur(18px);
}
.brand { width: 122px; line-height: 0; }
.brand img { width: 100%; height: auto; }

.header-call {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; color: var(--color-gold); text-decoration: none;
  border: 1px solid rgba(200, 162, 74, 0.74); white-space: nowrap;
}
.header-call .label { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.header-call strong { font-weight: 700; }

/* ---------------------------------------------------------------- buttons */
.button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; font-size: 15px; font-weight: 700; line-height: 1.1;
  text-align: center; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; border-radius: var(--radius);
  transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.button:hover { transform: translateY(-1px); }

.button-primary, .button-form {
  color: var(--color-black); background: var(--color-gold); border-color: var(--color-gold);
}
.button-primary:hover, .button-form:hover {
  background: var(--color-gold-dark); border-color: var(--color-gold-dark); color: var(--color-white);
}
.button-outline {
  color: var(--color-gold); background: rgba(11, 11, 11, 0.2);
  border-color: rgba(200, 162, 74, 0.68);
}
.button-outline:hover { color: var(--color-black); background: var(--color-gold); }
.button-outline-dark {
  color: var(--color-black); background: transparent; border-color: rgba(11, 11, 11, 0.44);
}
.button-outline-dark:hover { border-color: var(--color-gold); background: rgba(200, 162, 74, 0.14); }

/* ---------------------------------------------------------------- hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.94fr);
  grid-template-areas: "copy form";
  align-items: stretch;
  color: var(--color-white);
  background:
    linear-gradient(90deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.96) 44%, rgba(11, 11, 11, 0.5) 100%),
    var(--hero-img) center right / cover no-repeat;
}
.hero-copy {
  grid-area: copy;
  width: min(760px, 100%);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: clamp(40px, 6vw, 88px) clamp(22px, 6vw, 80px);
}

.hero-copy .eyebrow { color: var(--color-gold); }
h1#hero-title {
  max-width: 680px;
  font-size: clamp(32px, 5vw, 64px);
  color: var(--color-white);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.hero-subhead {
  max-width: 600px; margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.45;
}

.sub-hero-band {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  margin: 0;
  padding: 9px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--color-ivory);
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-left: 2px solid var(--color-gold);
  background: rgba(11, 11, 11, 0.4);
}

/* trust chips (hero) */
.trust-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 0; padding: 0;
}
.trust-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--color-ivory);
  background: rgba(11, 11, 11, 0.42);
  border: 1px solid rgba(200, 162, 74, 0.42);
  padding: 7px 12px; white-space: nowrap;
}
.trust-chips .dot, .scarcity-line .dot {
  width: 5px; height: 5px; border-radius: 999px; background: var(--color-gold); flex: none;
}
.scarcity-line {
  display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 0;
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7);
}

/* mobile-only inline jump-to-form CTA */
.hero-cta-jump { display: none; }

/* callback card */
.callback-card {
  grid-area: form;
  align-self: center; width: min(560px, calc(100% - 48px));
  margin: 36px 40px 36px 0; color: var(--color-black);
}
.card-heading, .lead-form, .call-card {
  background: rgba(248, 245, 239, 0.97);
  border: 1px solid rgba(232, 226, 214, 0.9);
}
.card-heading {
  display: flex; gap: 16px; padding: 24px 30px 16px;
  border-top: var(--card-edge) solid var(--color-gold); border-bottom: 0;
}
.card-eyebrow {
  margin: 0 0 6px; font-size: var(--eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--color-gold);
}
.card-heading h2 { font-size: clamp(24px, 3vw, 32px); }
.card-sub { margin: 6px 0 0; color: var(--color-grey); font-size: 14px; line-height: 1.45; }

.phone-mark {
  flex: 0 0 auto; width: 32px; height: 32px;
  border: 1px solid var(--color-gold); border-radius: 999px; position: relative;
}
.phone-mark::before {
  content: ""; position: absolute; inset: 9px 8px 8px 11px;
  border-left: 3px solid var(--color-gold); border-bottom: 3px solid var(--color-gold);
  border-radius: 0 0 0 8px; transform: rotate(-28deg);
}

/* rating line (in card + closing CTA) */
.rating-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--color-graphite);
}
.rating-line .stars { color: var(--color-gold-dark); letter-spacing: 1.5px; }
.rating-line .muted { color: var(--color-grey); font-weight: 500; }

.lead-form {
  display: grid; gap: 13px; padding: 16px 30px 24px; border-top: 0;
}
.lead-form label { display: grid; gap: 6px; color: var(--color-graphite); font-size: 14px; font-weight: 700; }
.lead-form label .opt { color: var(--color-grey); font-weight: 500; font-size: 12px; }
.lead-form input, .lead-form select {
  width: 100%; min-height: 48px; padding: 11px 13px;
  color: var(--color-black); background: var(--color-white);
  border: 1px solid #d7d0c4; border-radius: var(--radius);
}
.lead-form input[aria-invalid="true"], .lead-form select[aria-invalid="true"] {
  border-color: #b3261e; background: #fdf6f5;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 13px; }
.field-row label { min-width: 0; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.select-caret {
  position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--color-gold); border-bottom: 2px solid var(--color-gold);
  transform: translateY(-65%) rotate(45deg);
}

.field-error {
  display: none; margin: 0; color: #b3261e; font-size: 12.5px; font-weight: 600;
}
.field-error.show { display: block; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.button-form { width: 100%; margin-top: 4px; }
.form-warning { margin: 0; color: var(--color-grey); font-size: 12.5px; line-height: 1.5; }

.call-card {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 26px;
  background: rgba(255, 255, 255, 0.97);
}
.call-card .lead { display: block; color: var(--color-grey); font-size: 13px; }
.call-card a { display: block; color: var(--color-black); font-family: var(--font-display); font-size: 22px; text-decoration: none; }

/* ---------------------------------------------------------------- 2 · support section (FULL-BLEED SPLIT)
   Fix: text LEFT (normal padding), photo RIGHT filling the FULL section height top-to-bottom and
   bleeding to the right edge. No fixed/clamped height — the image is height:100% of the section,
   object-fit:cover. No stray gold border slivers (one clean intentional hairline at the top). */
.support-section {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: stretch;
  background: var(--surface-warm);
  border-top: 1px solid var(--border-hairline);
}
.support-text {
  display: flex; flex-direction: column; gap: 18px;
  padding: var(--section-pad-y) clamp(22px, 5vw, 72px);
  max-width: 640px;
}
.support-text h2 { font-size: var(--heading-xl); }
.support-text > p { margin: 0; color: var(--text-body); font-size: var(--text-large); line-height: var(--line-body); max-width: 54ch; }
.support-text .provider-note {
  margin: 4px 0 0; padding-top: 16px; font-size: 15px; line-height: 1.55; color: var(--text-body);
  border-top: 1px solid rgba(167, 124, 36, 0.34);
}
.support-text .provider-note strong { color: var(--color-black); }

.support-media { position: relative; min-height: 100%; overflow: hidden; }
.support-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
}

/* ---------------------------------------------------------------- generic section */
.section { padding: var(--section-pad-y) clamp(20px, 5vw, 72px); }
.section-inner { width: min(var(--max), 100%); margin: 0 auto; }
.section-inner.narrow { width: min(920px, 100%); }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .eyebrow { order: -1; }
.section-head h2 { font-size: var(--heading-xl); }
.section-head > p { margin: 0; color: var(--text-muted); font-size: 17px; line-height: 1.56; max-width: 580px; }
.section-rule { width: 78px; height: 2px; background: var(--color-gold); }

/* 3 · why cunard — Option-D cards */
.why-section { background: var(--surface-warm); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.reason-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px; }
.reason-list article {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-top: var(--card-edge) solid var(--color-gold);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease);
}
.reason-list article:hover { transform: translateY(-2px); border-top-color: var(--color-gold-dark); }
.reason-list h3 { font-size: var(--heading-m); }
.reason-list p { margin: 0; color: var(--text-body); font-size: var(--text-base); line-height: var(--line-body); }

/* 3.5 · local, not online */
.local-section { background: var(--surface-page); }
.local-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.local-item { border-top: 2px solid var(--color-gold); padding-top: 22px; }
.local-item h3 { font-size: var(--heading-m); margin-bottom: 12px; }
.local-item p { margin: 0; color: var(--text-body); font-size: var(--text-large); line-height: var(--line-body); max-width: 46ch; }

/* 4 · what happens next — numbered timeline with connector */
.process-section { background: var(--surface-page); border-top: 1px solid var(--color-border); }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 3vw, 28px);
  position: relative; padding-bottom: clamp(32px, 4vw, 44px);
}
.process-list li:last-child { padding-bottom: 0; }
.process-list li:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 64px; bottom: 0; width: 1px; background: var(--border-hairline);
}
.process-list .num {
  display: flex; justify-content: center;
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 56px); line-height: 1;
  color: var(--color-gold); font-weight: 500;
}
.step-body { padding-top: 6px; }
.step-body h3 { font-size: var(--heading-m); margin-bottom: 8px; }
.step-body > p { margin: 0 0 12px; color: var(--text-body); font-size: var(--text-base); line-height: var(--line-body); max-width: 58ch; }
.step-intro { margin: 4px 0 12px; color: var(--text-body); font-weight: 600; }
.step-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.step-list li {
  display: flex; align-items: flex-start; gap: 12px; padding-bottom: 0;
  color: var(--text-body); font-size: var(--text-base); line-height: var(--line-body);
}
.step-list li::before {
  content: ""; flex: 0 0 14px; display: block; width: 14px; height: 2px; background: var(--color-gold); margin-top: 0.7em;
}

/* 5 · FAQ */
.faq-section { background: var(--surface-warm); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.faq-grid { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(28px, 6vw, 64px); align-items: start; }
.faq-list { border-top: 1px solid var(--color-border); }
details { border-bottom: 1px solid var(--color-border); }
summary {
  min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 0; font-family: var(--font-display); font-size: var(--heading-m); font-weight: 500;
  color: var(--color-black); cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--color-gold-dark); font-size: 26px; font-weight: 400; transition: transform 200ms var(--ease); flex: none; }
details[open] summary::after { content: "\2013"; }
.faq-list p { margin: 0; padding: 0 36px 22px 0; color: var(--text-body); max-width: 64ch; line-height: var(--line-body); }

/* 6 · safety band (dark) */
.safety-note {
  display: flex; align-items: center;
  padding: var(--section-pad-y) clamp(20px, 7vw, 92px);
  color: var(--text-on-dark); background: var(--color-black);
}
.safety-inner { width: min(760px, 100%); margin: 0 auto; }
.eyebrow-on-dark { color: var(--color-gold); }
.safety-note h2 { font-size: var(--heading-l); color: var(--text-on-dark); margin: 18px 0 28px; max-width: 22ch; }
.safety-points { display: flex; flex-direction: column; }
.safety-points p {
  margin: 0; padding: 18px 0; font-size: var(--text-large); line-height: var(--line-body);
  color: var(--text-on-dark); border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.safety-points p:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.safety-points p.muted { color: var(--text-on-dark-muted); }
.safety-points strong { font-weight: 700; }

/* 7 · closing CTA */
.final-cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 7vw, 92px);
  background:
    linear-gradient(90deg, rgba(241, 234, 217, 0.97) 0%, rgba(241, 234, 217, 0.9) 55%, rgba(241, 234, 217, 0.7) 100%),
    var(--cta-img) center / cover no-repeat;
  border-top: 1px solid var(--color-border);
}
.final-cta .cta-copy { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; max-width: 620px; }
.final-cta h2 { font-size: var(--heading-xl); }
.final-cta > .cta-copy > p { margin: 0; color: var(--text-body); font-size: var(--text-large); line-height: var(--line-body); max-width: 46ch; }
.final-cta .rating-line { justify-content: center; }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

/* reveal animation: element is ALWAYS present + clickable; only translates/fades in */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: grid; grid-template-columns: 1.3fr 0.8fr; gap: 28px 48px;
  padding: 46px clamp(22px, 7vw, 92px) 84px;
  color: rgba(255, 255, 255, 0.7); background: var(--color-black);
}
.site-footer img { width: 148px; margin-bottom: 14px; }
.site-footer h2 {
  margin: 0 0 12px; color: var(--color-gold); font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.site-footer p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.site-footer a { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--color-gold); }
.footer-disclaimer {
  grid-column: 1 / -1; max-width: 940px; margin-top: 8px; padding-top: 24px;
  color: rgba(255, 255, 255, 0.46); font-size: 12.5px; line-height: 1.5;
  border-top: 1px solid rgba(232, 226, 214, 0.14);
}

/* ---------------------------------------------------------------- mobile sticky bar (hours-aware) */
.mobile-action-bar {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px;
  display: none; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 1px solid rgba(200, 162, 74, 0.6); background: rgba(11, 11, 11, 0.95);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}
.mobile-action-bar a {
  min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--color-white); font-weight: 700; font-size: 15px; text-decoration: none;
}
.mobile-action-bar a + a { border-left: 1px solid rgba(232, 226, 214, 0.16); }
.mobile-action-bar .bar-call { color: var(--color-black); background: var(--color-gold); }
.mobile-action-bar.after-hours .bar-call { color: var(--color-white); background: transparent; }
.mobile-action-bar.after-hours .bar-callback { color: var(--color-black); background: var(--color-gold); }

/* ---------------------------------------------------------------- thank-you page */
.thank-you-page {
  min-height: 100svh; color: var(--color-white);
  background:
    linear-gradient(90deg, rgba(11, 11, 11, 0.96), rgba(11, 11, 11, 0.74)),
    url("assets/opt/waterfront.jpg") center / cover no-repeat;
}
.thank-you {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 30px;
  padding: clamp(28px, 7vw, 82px);
}
.thank-you > img { width: 168px; }
.thank-you-panel {
  width: min(720px, 100%); display: flex; flex-direction: column; gap: 20px;
  padding: clamp(28px, 5vw, 52px); background: rgba(11, 11, 11, 0.82);
  border: 1px solid rgba(232, 226, 214, 0.18); border-top: var(--card-edge) solid var(--color-gold);
}
.thank-you-panel h1 { color: var(--color-white); font-size: clamp(34px, 6vw, 60px); }
.thank-you-panel p { max-width: 600px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.55; }
.thank-you-panel .final-actions { margin-top: 4px; justify-content: flex-start; }
.thank-you .button-outline { color: var(--color-gold); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "form";
    background:
      linear-gradient(180deg, rgba(11, 11, 11, 0.96) 0%, rgba(11, 11, 11, 0.9) 50%, rgba(11, 11, 11, 0.72) 100%),
      var(--hero-img) center top / cover no-repeat;
  }
  .hero-copy { justify-content: flex-start; padding-bottom: 8px; }
  .callback-card { width: min(720px, calc(100% - 40px)); margin: 8px auto 40px; }

  .support-section { grid-template-columns: 1fr; }
  /* mobile: photo UNDER the text, comfortable fixed height, flush (no gap above/below) */
  .support-text { max-width: none; padding-bottom: clamp(28px, 6vw, 40px); }
  .support-media { min-height: 0; height: clamp(320px, 70vw, 440px); }

  .faq-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hero-copy { gap: 14px; padding: 26px 20px 14px; }
  h1#hero-title { font-size: 31px; }
  .hero-subhead { font-size: 16px; }

  /* mobile fold: show inline CTA right after the subhead/band so a tap target is in view */
  .hero-cta-jump {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: stretch;
    margin: 2px 0; font-weight: 700; font-size: 15px; line-height: 1; color: var(--color-black);
    background: var(--color-gold); border: 1px solid var(--color-gold); border-radius: var(--radius-pill);
    padding: 15px 26px; min-height: 52px; text-decoration: none;
  }
  .trust-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .trust-chips li { white-space: normal; align-items: flex-start; line-height: 1.3; }
  .trust-chips .dot { margin-top: 0.42em; }

  .callback-card { width: calc(100% - 28px); margin: 6px auto 32px; }
  .card-heading, .lead-form { padding-left: 18px; padding-right: 18px; }
  .call-card { padding: 16px 18px; }

  .support-media { height: clamp(280px, 72vw, 380px); }
  .reason-list { grid-template-columns: 1fr; }
  .safety-note { padding-left: 20px; padding-right: 20px; }
  .final-actions .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; padding-bottom: 100px; }
  .mobile-action-bar { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}