/* ==========================================================================
   Dr. Brion Gardner – site.css
   One shared stylesheet. Hand-written, no build step.

   1. Tokens (colors, fonts, type, spacing) – edit here to re-brand
   2. Base
   3. Utilities
   4. Buttons and links
   5. Header
   6. Hero + trust bar
   7. Sections and eyebrows
   8. About
   9. Conditions grid
   10. What to expect
   11. Locations
   12. Appointment request
   13. FAQ
   14. CTA band
   15. Footer
   16. Legal pages
   17. 404
   18. Reduced motion
   ========================================================================== */


/* 1. Tokens ------------------------------------------------------------- */

:root {
  /* Brand colors – PROVISIONAL, sampled from the ABG logo. Not final. */
  --color-navy: #001f47;           /* logo navy: dark surfaces, headings, links */
  --color-navy-hover: #0b3a75;
  --color-orange: #fe7400;         /* logo orange: primary button fill, accents. Never use as text on white (2.7:1). */
  --color-orange-hover: #ff8a2a;
  --color-orange-deep: #b35000;    /* text-safe orange on white (5.2:1); primary button edge */
  --color-orange-light: #ff9a45;   /* text-safe orange on navy (7.7:1): eyebrows on dark */
  --color-sky: #a9bbd3;            /* logo light blue: decoration only */

  /* Neutrals */
  --color-ink: #1b2a3d;            /* body text (12.9:1 on tint) */
  --color-muted: #4c4c4e;          /* secondary text, logo gray (7.6:1 on tint) */
  --color-bg: #ffffff;
  --color-tint: #eef2f7;           /* alternate section background */
  --color-border: #cfd8e3;
  --color-frame: #d8dee6;          /* image slot fallback */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #c8d4e5;  /* secondary text on navy (10.9:1) */

  /* Review-only placeholder boxes */
  --color-placeholder-bg: #f5f6f8;
  --color-placeholder-line: #8a96a8;

  /* Focus rings (3:1 or better against the surface they sit on) */
  --color-focus: #b35000;
  --color-focus-on-dark: var(--color-orange-light);

  /* Fonts (loaded from Google Fonts with display=swap; system fallbacks follow) */
  --font-heading: "Bitter", Georgia, Cambria, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (18px base) */
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-h3: 1.3125rem;
  --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.125rem);
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Layout */
  --container: 74rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --measure: 72ch;
  --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --radius-sm: 4px;
  --radius: 8px;
  --header-offset: 0px;            /* space reserved for the sticky header when jumping to #anchors */
}

@media (min-width: 60em) {
  :root { --header-offset: 6rem; }
}


/* 2. Base --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-wrap: break-word;
}

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

img { height: auto; }

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-navy);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p,
ul,
ol,
dl,
address,
blockquote {
  margin: 0 0 1em;
}

address { font-style: normal; }

a {
  color: var(--color-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Programmatic focus targets (main, #request) don't need a ring */
[tabindex="-1"]:focus { outline: none; }

main { display: block; }


/* 3. Utilities ---------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow { --container: 50rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-navy);
  color: var(--color-on-dark);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 2px;
}

/* Dark surfaces: swap focus color and text color */
.on-dark {
  --color-focus: var(--color-focus-on-dark);
  color: var(--color-on-dark);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: var(--color-on-dark);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}


/* 4. Buttons and links -------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button--lg {
  min-height: 54px;
  padding-inline: 1.6rem;
  font-size: 1.125rem;
}

.button--primary {
  background: var(--color-orange);
  border-color: var(--color-orange-deep);
  color: var(--color-navy);                 /* 6.0:1 on orange */
}

.button--primary:hover { background: var(--color-orange-hover); }

.button--secondary {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-on-dark);
}

.button--secondary:hover {
  background: var(--color-navy-hover);
  border-color: var(--color-navy-hover);
}

.button--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--color-on-dark);
}

.button--outline-light:hover { background: rgba(255, 255, 255, 0.1); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.tel-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}


/* 5. Header ------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 60em) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

.brand img {
  width: 94px;
  height: 48px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0.25rem 0.6rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
}

.header-phone:hover .header-phone__text { text-decoration: underline; }

.header-phone .icon {
  width: 20px;
  height: 20px;
}

.site-header .button { padding-inline: 1rem; }

/* Below 40em: icon-only phone, short button label (full text stays in the accessible name) */
@media (max-width: 39.99em) {
  .header-phone__text,
  .hide-sm {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 40em) {
  .brand img {
    width: 118px;
    height: 60px;
  }

  .header-phone {
    border-color: transparent;
    font-size: 1.125rem;
  }

  .site-header .button { padding-inline: 1.35rem; }
}


/* 6. Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: var(--color-navy);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.hero__title { max-width: 20ch; }

.hero__sub {
  max-width: 40ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 1.25rem;
}

.hero__actions .button { flex: 1 1 auto; }

@media (min-width: 40em) {
  .hero__actions .button { flex: 0 0 auto; }
}

.hero__offices {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
}

/* Image slot: 4:5 frame orbited by two swooshes echoing the logo */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 7% 9%;            /* the swoosh SVG's viewBox (400 x 466) matches this box exactly */
  justify-self: center;
}

@media (min-width: 56em) {
  .hero__media {
    max-width: 30rem;
    justify-self: end;
  }
}

.hero__swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__swoosh-top { fill: var(--color-orange); }
.hero__swoosh-bottom { fill: var(--color-sky); }

.hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-frame);
  border-radius: var(--radius);
}

.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: var(--color-ink);      /* alt text color if the image is missing */
  font-size: var(--fs-sm);
}

/* Trust bar: four short credentials directly under the hero */
.trust {
  padding-block: 1.5rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.trust__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.trust__item {
  padding-left: 0.9rem;
  border-left: 3px solid var(--color-orange);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-navy);
}


/* 7. Sections ----------------------------------------------------------- */

.section { padding-block: var(--section-pad); }

.section--tint { background: var(--color-tint); }

.section__title { margin-bottom: 2rem; }

.section__intro {
  max-width: 60ch;
  margin-bottom: 2rem;
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

.section__head {
  max-width: 48rem;
  margin-bottom: 2.5rem;
}

.section__head h2 { margin-bottom: 0.6rem; }

.section__head .section__intro { margin-bottom: 0; }

/* Short label above a heading, carried over from the ad creative */
.eyebrow {
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-orange-deep);
}

.eyebrow--caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.on-dark .eyebrow { color: var(--color-orange-light); }

.sep {
  margin-inline: 0.15em;
  opacity: 0.6;
}


/* 8. About -------------------------------------------------------------- */

.about {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 52em) {
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.about__photo {
  max-width: 15rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-frame);
  border-radius: var(--radius);
}

@media (min-width: 52em) {
  .about__photo { max-width: none; }
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.about__body > p { max-width: 62ch; }

.credentials__title {
  margin-top: 2rem;
  font-size: 1.1875rem;
}

.credentials {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.credentials li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-orange);
  border-radius: 50%;
}


/* 9. Conditions grid ---------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-navy);
  border-radius: var(--radius-sm);
}

.card h3 { margin-bottom: 0.4rem; }

.card p {
  margin: 0;
  color: var(--color-muted);
}


/* 10. What to expect ---------------------------------------------------- */

.steps {
  display: grid;
  gap: 2rem;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-left: 4.5rem;
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--color-bg);
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
}

/* connector line: vertical on mobile */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: -1.75rem;
  left: calc(1.625rem - 1px);
  width: 2px;
  background: var(--color-border);
}

.step__title {
  margin-bottom: 0.35rem;
  padding-top: 0.6rem;
}

.step p {
  margin: 0;
  color: var(--color-muted);
}

@media (min-width: 52em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .step {
    padding-left: 0;
    padding-top: 4.5rem;
  }

  .step__title { padding-top: 0; }

  /* connector line: horizontal on desktop */
  .step:not(:last-child)::after {
    top: calc(1.625rem - 1px);
    bottom: auto;
    left: 4rem;
    right: -1.75rem;
    width: auto;
    height: 2px;
  }
}


/* 11. Locations --------------------------------------------------------- */

.offices {
  display: grid;
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 52em) {
  .offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.office-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.office-card h3 {
  margin-bottom: 1rem;
  font-size: 1.625rem;
}

.office-card__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin-bottom: 1.5rem;
}

.office-card__meta dt {
  padding-top: 0.2rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-muted);
}

.office-card__meta dd { margin: 0; }

.office-card__meta address { margin: 0; }

/* phone row: center the label against the 44px tap target */
.office-card__meta dt.is-phone { padding-top: 0.7rem; }

.office-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: auto;
}


/* 12. Appointment request ----------------------------------------------- */

.request__intro {
  max-width: 60ch;
  margin-bottom: 2rem;
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

.pb-form-slot { width: 100%; }

/* Review-only: obvious dashed box until the PracticeBeacon embed replaces it */
.pb-form-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;          /* inherits the slot's inline 640px */
  margin: 0;
  padding: 2rem;
  background: var(--color-placeholder-bg);
  border: 2px dashed var(--color-placeholder-line);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-align: center;
}

.consent-note {
  max-width: 70ch;
  margin: 1.25rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.consent-note a,
.pb-form-placeholder a,
.faq__answer a {
  display: inline-block;
  padding-block: 0.75rem;    /* 44px tap target without changing line spacing */
  margin-block: -0.75rem;
}

.emergency-note {
  max-width: 70ch;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--color-tint);
  border-left: 4px solid var(--color-orange-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}


/* 13. FAQ --------------------------------------------------------------- */

.faq {
  max-width: 50rem;
  border-top: 1px solid var(--color-border);
}

.faq details { border-bottom: 1px solid var(--color-border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1.1rem 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

/* plus / minus drawn with two bars */
.faq summary::after {
  content: "";
  flex: 0 0 1.125rem;
  height: 1.125rem;
  background:
    linear-gradient(var(--color-orange-deep), var(--color-orange-deep)) center / 100% 2px no-repeat,
    linear-gradient(var(--color-orange-deep), var(--color-orange-deep)) center / 2px 100% no-repeat;
}

.faq details[open] summary::after {
  background-size: 100% 2px, 2px 0;
}

.faq__answer {
  max-width: 65ch;
  padding-bottom: 1.25rem;
}

.faq__answer p:last-child { margin-bottom: 0; }


/* 14. CTA band ---------------------------------------------------------- */

.cta-band {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: var(--color-navy);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.cta-band__title {
  margin: 0;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
}

.cta-band__line {
  margin: 0.5rem 0 0;
  color: var(--color-on-dark-muted);
}

.cta-band__text { flex: 1 1 26rem; }

.cta-band__actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* 15. Footer ------------------------------------------------------------ */

.site-footer {
  padding-block: 3rem 2rem;
  background: var(--color-bg);
  border-top: 4px solid var(--color-navy);
  font-size: 1rem;
}

.footer__logo {
  width: 102px;
  height: 52px;
  margin-bottom: 2rem;
}

.footer__offices {
  display: grid;
  gap: 2rem;
}

@media (min-width: 44em) {
  .footer__offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer__heading {
  margin-bottom: 0.4rem;
  font-size: 1.1875rem;
}

.footer__office address,
.footer__office p {
  margin: 0;
}

.footer__hours { color: var(--color-muted); }

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer__links a[aria-current="page"] { font-weight: 700; }

.footer__copy,
.footer__disclaimer {
  margin: 0 0 0.35rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}


/* 16. Legal pages ------------------------------------------------------- */

.legal { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.legal__inner { max-width: var(--measure); }

.legal h1 { margin-bottom: 0.35rem; }

.legal__updated {
  margin-bottom: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.legal__lead { font-size: var(--fs-lead); }

.legal h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.legal h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
  font-size: 1.1875rem;
}

.legal ul { padding-left: 1.25rem; }

.legal li { margin-bottom: 0.4rem; }

.legal__toc {
  margin: 0 0 1.5rem;
  font-size: var(--fs-sm);
}

.identity {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.identity a {
  display: inline-block;
  padding-block: 0.6rem;     /* 44px tap target inside the text block */
  margin-block: -0.6rem;
}

.notice {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--color-tint);
  border-left: 4px solid var(--color-orange-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.notice p:last-child { margin-bottom: 0; }

/* Exact consent wording, shown the way patients see it next to the checkbox */
.consent-quote {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.5rem 1.5rem 1.5rem 3.75rem;
  background: var(--color-tint);
  border-left: 4px solid var(--color-navy);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.consent-quote::before {      /* empty checkbox: unchecked by default */
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 1.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-bg);
  border: 2px solid var(--color-navy);
  border-radius: 3px;
}

.consent-quote p { margin: 0; }


/* 17. 404 --------------------------------------------------------------- */

.error-page {
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0;
}


/* 18. Reduced motion ---------------------------------------------------- */

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