/* =====================================================================
   Rest & Beauty — service landing pages

   One stylesheet for four single-intent local pages. It is a deliberate
   companion to medspa.css rather than an extension of it: the same palette,
   the same editorial grammar (hairlines instead of cards, flat warm fields
   instead of gradients, price set in the serif), but self-contained so a
   landing page ships one CSS request and nothing else.

   Constraints held on purpose:
     · no remote assets, no webfonts, no photography, no canvas, no video;
     · no JavaScript — every state here is a link, a hover or a focus ring,
       so the page is complete on first paint with scripting disabled;
     · no card grid — the catalogue reads as a list under hairlines;
     · no ornamental animation — the only motion is a hover underline and
       a button lift, both compositor-cheap and both silenced under
       prefers-reduced-motion.

   Layout rules that keep 320px and 200% zoom honest:
     · the masthead is static, never sticky, so it can never overlap copy
       once text reflows;
     · every grid track is minmax(0, …) so long strings cannot force a
       horizontal scrollbar;
     · every interactive target is at least --tap (44px) tall.
   ===================================================================== */

:root {
  /* Ink, warm neutrals and evergreen — carried across from medspa.css so
     the landing pages and the homepage read as one house. */
  --ink: #1c2a22;
  --ink-soft: #38453c;
  --muted: #566056;
  --muted-soft: #626b61;

  --paper: #f4efe4;
  --paper-2: #faf6ec;
  --white: #fffdf8;

  --forest-deep: #0c261d;
  --forest-night: #0b241b;
  --sage: #3a6551;
  --sage-dark: #1d4735;

  /* One metallic accent, three values */
  --gold: #a97f34;
  --gold-lo: #7f5f26;
  --gold-ink: #7c5d27;
  --champagne: #d3b878;
  --pearl: #f3eee1;

  --on-dark: #f0f1e8;
  --on-dark-soft: #cdd5cb;
  --on-dark-mute: #a9b5a4;

  /* Hairlines — the primary structural device */
  --line: rgba(28, 42, 34, 0.13);
  --line-strong: rgba(28, 42, 34, 0.22);
  --on-dark-line: rgba(240, 241, 232, 0.16);
  --on-dark-line-strong: rgba(240, 241, 232, 0.32);

  --shadow-sm: 0 12px 30px -22px rgba(12, 38, 29, 0.5);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Cambria", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.15rem, 5vw, 4rem);
  --maxw: 1120px;
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --tap: 2.75rem;

  color-scheme: light;
}

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.08;
  color: var(--ink);
}
p { text-wrap: pretty; }
a { color: inherit; }
svg { max-width: 100%; }
::selection { background: rgba(169, 127, 52, 0.24); }

:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
}
.sp-hero :focus-visible,
.sp-cta :focus-visible { outline-color: var(--champagne); }

.sp-skip {
  position: absolute;
  z-index: 10;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.8rem 1.1rem;
  background: var(--forest-deep);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform 200ms var(--ease);
}
.sp-skip:focus { transform: translateY(0); }

/* Shared type primitives --------------------------------------------- */
.sp-eyebrow {
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold-ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.5;
  text-transform: uppercase;
}
.sp-eyebrow::before {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
.sp-eyebrow-ondark { color: var(--champagne); }

/* =====================================================================
   Masthead — compact, static, one line of identity and one of index

   Static rather than sticky is the accessibility decision here: at 200%
   zoom a sticky spine eats the viewport and can land on top of the H1.
   ===================================================================== */
.sp-header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.sp-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem 1.75rem;
}

.sp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  text-decoration: none;
}
.sp-brand-mark { width: 1.05rem; height: 2.1rem; flex: none; display: block; overflow: visible; }
.sp-brand-copy { display: grid; justify-items: center; line-height: 1; }
.sp-brand-name {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.sp-brand-amp { color: var(--gold); font-style: italic; }
.sp-brand-tag {
  margin-top: 0.38rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted-soft);
  font-size: 0.47rem;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-brand-tag::before,
.sp-brand-tag::after { content: ""; width: 1.05rem; height: 1px; background: currentColor; opacity: 0.55; }

/* Crest linework on paper: one gold family, so it stays legible at 17px. */
.sp-crest-arch {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sp-crest-mark { fill: var(--gold); }
.sp-crest-stem { fill: var(--gold-lo); }

.sp-header-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(0.9rem, 2.4vw, 1.9rem);
}
.sp-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms var(--ease);
}
.sp-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.65rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.sp-nav-link:hover { color: var(--ink); }
.sp-nav-link:hover::after { transform: scaleX(1); }
.sp-nav-call { color: var(--gold-ink); }
.sp-nav-call:hover { color: var(--gold-lo); }

/* =====================================================================
   Hero — the dark field, the intent line, the price and the one action
   ===================================================================== */
.sp-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.6rem, 6.5vw, 4.75rem) var(--gutter) clamp(2.6rem, 6vw, 4.25rem);
  background: var(--forest-night);
  color: var(--on-dark);
}
.sp-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(105% 90% at 22% 26%, rgba(29, 71, 53, 0.5), transparent 66%);
}
.sp-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  justify-items: start;
  gap: 1.15rem;
}

/* The page device: a hairline interrupted by a small arch holding the
   crescent. It is the crest's grammar reduced to a rule — original to these
   pages, drawn in the document, and completely still. */
.sp-crestline {
  width: min(100%, 16rem);
  height: auto;
  margin-bottom: 0.4rem;
}
.sp-crestline-rule { fill: none; stroke: var(--on-dark-line-strong); stroke-width: 1.1; stroke-linecap: round; }
.sp-crestline-arch { fill: none; stroke: var(--champagne); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.sp-crestline-moon { fill: var(--pearl); }
.sp-crestline-star { fill: var(--champagne); }

.sp-hero h1 {
  margin: 0;
  max-width: 17ch;
  color: var(--on-dark);
  font-size: clamp(2.1rem, 6.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.sp-hero h1 em { font-style: italic; color: var(--champagne); }

.sp-lede {
  margin: 0;
  max-width: 50ch;
  color: var(--on-dark-soft);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}

/* Starting price: stated in the first viewport, with the condition that
   makes it true sitting on the same line rather than in fine print. */
.sp-hero-price {
  margin: 0.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--on-dark-line);
  display: grid;
  gap: 0.3rem;
  max-width: 46ch;
}
.sp-hero-price-figure {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.1;
  color: var(--champagne);
}
.sp-hero-price-note {
  color: var(--on-dark-mute);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.sp-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.6rem;
  max-width: 100%;
}

.sp-hero-meta {
  margin: 0.6rem 0 0;
  max-width: 54ch;
  color: var(--on-dark-mute);
  font-size: 0.78rem;
  line-height: 1.7;
}
.sp-hero-meta a { color: var(--champagne); text-decoration: none; }
.sp-hero-meta a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   Buttons and quiet actions
   ===================================================================== */
.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.85rem 1.75rem;
  border: 0;
  background: var(--sage-dark);
  color: var(--paper-2);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 260ms var(--ease), transform 260ms var(--ease-out), box-shadow 260ms var(--ease);
}
.sp-button:hover {
  background: var(--forest-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.sp-button:active { transform: translateY(0); }

/* On the two dark fields the action is champagne — quiet, maximum contrast. */
.sp-hero .sp-button,
.sp-cta .sp-button { background: var(--champagne); color: var(--forest-deep); }
.sp-hero .sp-button:hover,
.sp-cta .sp-button:hover { background: #e7d3a0; box-shadow: 0 18px 40px -22px rgba(211, 184, 120, 0.6); }

.sp-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--tap);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}
.sp-ghost::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: width 280ms var(--ease-out);
}
.sp-ghost:hover::after { width: 2.3rem; }
.sp-ghost-ondark { color: var(--on-dark); }

/* =====================================================================
   Section shell
   ===================================================================== */
.sp-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--line);
}
/* The band under the hero needs no rule — the dark field already ends it. */
.sp-hero + .sp-section { border-top: 0; }
.sp-section-head {
  max-width: 52ch;
  margin-bottom: clamp(1.7rem, 4vw, 2.6rem);
}
.sp-section-head h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.8rem, 4.2vw, 2.85rem);
}
.sp-section-head p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.7;
}

/* =====================================================================
   Price list — an editorial list under hairlines, never a card grid
   ===================================================================== */
.sp-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.sp-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.4rem clamp(1.25rem, 4vw, 2.5rem);
  padding: 1.45rem 0;
  border-top: 1px solid var(--line);
}
.sp-menu-row:first-child { border-top: 0; }
.sp-menu-name { min-width: 0; }
.sp-menu-name h3 {
  margin: 0 0 0.35rem;
  font-size: 1.24rem;
  line-height: 1.25;
}
.sp-menu-name p {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.sp-menu-price {
  margin: 0;
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  text-align: right;
}
.sp-price-figure {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.sp-price-unit { color: var(--muted); font-size: 0.8rem; }
.sp-price-flag {
  color: var(--muted-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sp-menu-note {
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
  max-width: 62ch;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}
.sp-menu-action { margin-top: 1.6rem; }

/* =====================================================================
   The flow — request, confirmation, visit. Plan-first, stated as steps.
   ===================================================================== */
.sp-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.sp-flow-step {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem clamp(1rem, 2.5vw, 1.9rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-strong);
}
.sp-flow-index {
  grid-row: 1 / span 2;
  padding-top: 0.1rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.sp-flow-step h3 { margin: 0 0 0.45rem; font-size: 1.35rem; }
.sp-flow-step p { margin: 0; max-width: 50ch; color: var(--muted); line-height: 1.7; }

.sp-boundary {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0 0;
  padding: 1.2rem 0 1.2rem 1.4rem;
  display: grid;
  gap: 0.35rem;
  max-width: 58ch;
  border-left: 2px solid var(--gold);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.sp-boundary strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
}

/* =====================================================================
   Visit — address, hours, phone
   ===================================================================== */
.sp-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.8rem, 5vw, 4rem);
}
.sp-address {
  display: grid;
  gap: 0.3rem;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--gold);
  font-style: normal;
  color: var(--muted);
  line-height: 1.6;
}
.sp-address .sp-address-brand {
  margin-bottom: 0.15rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
}
.sp-address a { color: var(--sage-dark); font-weight: 600; }

.sp-hours { margin: 0; }
.sp-hours-label {
  margin: 0 0 0.75rem;
  color: var(--gold-ink);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sp-hours dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0;
}
.sp-hours dt,
.sp-hours dd {
  margin: 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
}
.sp-hours dt { color: var(--ink-soft); font-weight: 600; padding-right: 1.25rem; }
.sp-hours dd { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sp-visit-note {
  margin: 1.4rem 0 0;
  max-width: 56ch;
  color: var(--muted-soft);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* =====================================================================
   Questions — always visible, so the structured data stays honest
   ===================================================================== */
.sp-faq { display: grid; }
.sp-faq-item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.sp-faq-item:first-child { border-top: 0; }
.sp-faq-item h3 {
  margin: 0 0 0.55rem;
  max-width: 46ch;
  font-size: 1.2rem;
  line-height: 1.3;
}
.sp-faq-item p {
  margin: 0;
  max-width: 66ch;
  color: var(--muted);
  line-height: 1.75;
}
.sp-faq-item a { color: var(--sage-dark); font-weight: 600; }

/* =====================================================================
   Elsewhere — the sibling pages and the full menu, as an index
   ===================================================================== */
.sp-index {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.sp-index li { border-top: 1px solid var(--line); }
.sp-index li:first-child { border-top: 0; }
.sp-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 1.25rem;
  min-height: var(--tap);
  padding: 1.15rem 0;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.sp-index a:hover { color: var(--gold-lo); }
.sp-index-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
}
.sp-index-note {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.sp-index-arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: width 260ms var(--ease-out);
}
.sp-index a:hover .sp-index-arrow { width: 2.4rem; opacity: 1; }

/* =====================================================================
   Bottom conversion band
   ===================================================================== */
.sp-cta {
  padding: clamp(2.75rem, 7vw, 4.75rem) var(--gutter);
  background: var(--forest-deep);
  color: var(--on-dark);
}
.sp-cta-inner {
  max-width: 46rem;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}
.sp-cta .sp-eyebrow { margin: 0; justify-content: center; }
.sp-cta h2 {
  margin: 0;
  max-width: 20ch;
  color: var(--on-dark);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}
.sp-cta p {
  margin: 0;
  max-width: 52ch;
  color: var(--on-dark-soft);
  line-height: 1.7;
}
.sp-cta .sp-actions { justify-content: center; }
.sp-cta-fineprint {
  margin: 0.4rem 0 0;
  max-width: 54ch;
  color: var(--on-dark-mute);
  font-size: 0.8rem;
  line-height: 1.65;
}

/* =====================================================================
   Footer
   ===================================================================== */
.sp-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.7;
}
.sp-footer-brand { display: grid; gap: 0.35rem; max-width: 44ch; }
.sp-footer-name {
  margin-bottom: 0.3rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sp-footer a { color: var(--sage-dark); font-weight: 600; text-decoration: none; }
.sp-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sp-footer-note {
  margin: 0;
  max-width: 46ch;
  justify-self: end;
  text-align: right;
  color: var(--muted-soft);
  font-size: 0.78rem;
}

/* =====================================================================
   Responsive — the only three widths that change the composition
   ===================================================================== */
@media (max-width: 760px) {
  .sp-visit-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-footer { grid-template-columns: minmax(0, 1fr); }
  .sp-footer-note { justify-self: start; text-align: left; }
}

@media (max-width: 620px) {
  /* Lockup centred over a centred index, the way the homepage behaves once
     the masthead loses its side columns. */
  .sp-header-inner { justify-content: center; padding-bottom: 0.35rem; }
  .sp-brand { flex: 1 0 100%; justify-content: center; }
  .sp-header-links { flex: 1 0 100%; justify-content: center; gap: 0 clamp(0.75rem, 3.5vw, 1.4rem); }
  /* Tighter tracking, but the 44px target is never traded away. */
  .sp-nav-link { font-size: 0.66rem; letter-spacing: 0.1em; }

  .sp-menu-row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .sp-menu-price { justify-items: start; text-align: left; }

  .sp-flow-step { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .sp-flow-index { grid-row: auto; }

  .sp-index a { grid-template-columns: minmax(0, 1fr); }
  .sp-index-arrow { grid-row: auto; grid-column: 1; margin-top: 0.4rem; }
}

@media (max-width: 460px) {
  /* Full-width actions: nothing to clip, nothing to mis-tap. */
  .sp-actions { align-items: stretch; gap: 0.85rem; }
  .sp-actions > * { flex: 1 0 100%; }
  .sp-ghost { justify-content: flex-start; }
  .sp-cta .sp-ghost { justify-content: center; }
  .sp-button { letter-spacing: 0.12em; }
  .sp-hours dl { grid-template-columns: minmax(0, 1fr); }
  .sp-hours dd { text-align: left; border-top: 0; padding-top: 0; }
  .sp-hours dt { padding-bottom: 0.15rem; padding-right: 0; }
}

/* =====================================================================
   Reduced motion — the page has nothing to lose by holding still
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}