/* ==========================================================================
   Akupunktur Dietikon — Ruth Bühler
   Design system.
   60 % Perlmutt · 30 % Moosgrün · 10 % Gold (accent only, never a fill).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colors */
  --perlmutt: #f5f1e8;
  --perlmutt-soft: #ede6d6;
  --moss: #2f4f3a;
  --moss-deep: #1e3527;
  --moss-rgb: 47, 79, 58;
  --moss-deep-rgb: 30, 53, 39;
  --gold: #d4a257;
  --gold-hover: #edc988;
  --mid: #8a9a84;

  /* Text */
  --text: #3a332b;
  --text-muted: #5a5248;
  --text-on-dark: #f5f1e8;
  --text-muted-dark: #c8bfa8;

  /* Lines */
  --line: rgba(58, 51, 43, 0.14);
  --line-dark: rgba(245, 241, 232, 0.16);

  /* Fonts */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (mobile → desktop) */
  --t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 4rem);      /* 40 → 64 */
  --t-h2: clamp(2rem, 1.5rem + 2.3vw, 2.75rem);     /* 32 → 44 */
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);  /* 22 → 28 */
  --t-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 → 20 */
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
  --t-micro: 0.8125rem; /* 13 */

  --lh-body: 1.6;
  --lh-head: 1.18;
  --lh-lead: 1.45;

  /* Layout */
  --shell: min(1200px, 100% - 2.5rem);
  --measure: 680px;

  /* Spacing — coherent 4pt scale: 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
     --space-xs (12) fills the common gap between 8 and 16 so spacing can
     express hierarchy precisely rather than jumping a full step. */
  --space-1: 0.5rem;   /* 8  */
  --space-xs: 0.75rem; /* 12 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --section-y: clamp(5rem, 3rem + 6vw, 7.5rem); /* 80 → 120 */
  --fadeH: clamp(50px, 6.3vw, 76px); /* colour-transition fade height (≈60% of prior) */

  --radius: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 18px 48px -24px rgba(30, 53, 39, 0.4);
  --shadow-card: 0 14px 40px -28px rgba(30, 53, 39, 0.55);

  --dur: 600ms;
  --dur-fast: 280ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::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(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  /* One continuous paper texture behind the WHOLE page. Moss sections paint an
     opaque overlay on top; light sections stay transparent so this same grain
     shows through everywhere — no texture-free seams. */
  background-color: var(--perlmutt);
  background-image: url("/assets/images/brand/paper-soft.webp");
  background-size: 340px 340px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--moss-deep); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 1000;
  background: var(--moss-deep);
  color: var(--text-on-dark);
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 10px 10px;
  font-size: var(--t-micro);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
.skip-link:hover, .skip-link:focus-visible { color: var(--gold-hover); }

/* ---------- Layout helpers ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
/* Both beige sections are transparent so the ONE page-wide paper texture shows
   through continuously. .section--soft lays a faint warm tint over that texture,
   eased in and out at its edges, so we keep TWO beige tones with a smooth gradient
   between light and soft while the grain stays unbroken underneath. */
.section--light { background: transparent; }
.section--soft { background: transparent; }
.section--soft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(201, 180, 132, 0)     0,
    rgba(201, 180, 132, 0.007) calc(var(--fadeH) * 0.125),
    rgba(201, 180, 132, 0.026) calc(var(--fadeH) * 0.25),
    rgba(201, 180, 132, 0.056) calc(var(--fadeH) * 0.375),
    rgba(201, 180, 132, 0.09)  calc(var(--fadeH) * 0.5),
    rgba(201, 180, 132, 0.124) calc(var(--fadeH) * 0.625),
    rgba(201, 180, 132, 0.154) calc(var(--fadeH) * 0.75),
    rgba(201, 180, 132, 0.173) calc(var(--fadeH) * 0.875),
    rgba(201, 180, 132, 0.18)  var(--fadeH),
    rgba(201, 180, 132, 0.18)  calc(100% - var(--fadeH)),
    rgba(201, 180, 132, 0.173) calc(100% - var(--fadeH) * 0.875),
    rgba(201, 180, 132, 0.154) calc(100% - var(--fadeH) * 0.75),
    rgba(201, 180, 132, 0.124) calc(100% - var(--fadeH) * 0.625),
    rgba(201, 180, 132, 0.09)  calc(100% - var(--fadeH) * 0.5),
    rgba(201, 180, 132, 0.056) calc(100% - var(--fadeH) * 0.375),
    rgba(201, 180, 132, 0.026) calc(100% - var(--fadeH) * 0.25),
    rgba(201, 180, 132, 0.007) calc(100% - var(--fadeH) * 0.125),
    rgba(201, 180, 132, 0)     100%);
}
.section--moss { background: var(--moss); color: var(--text-on-dark); --to: var(--moss); --to-rgb: var(--moss-rgb); }
.section--deep { background: var(--moss-deep); color: var(--text-on-dark); --to: var(--moss-deep); --to-rgb: var(--moss-deep-rgb); }
.measure { max-width: var(--measure); margin-inline: auto; }
.text-center { text-align: center; }

/* Light sections are one clean, flat colour (paper-texture dot overlay removed). */
.section > .shell { position: relative; z-index: 1; }

/* Section transitions between Perlmutt and Moss — interpolated in OKLAB so the
   ramp is perceptually even (no banding, no muddy grey-green middle) and fully
   resolves to the SOLID section colour before any text. --to = the dark
   section's own colour. (sRGB line first = fallback; oklab line overrides it.) */
/* ---- Colour-zone transitions (texture-continuous) ----
   A dark (moss) section is transparent; a moss overlay (::before) sits on top and
   fades to transparent at the edges that meet a light section. Because the section
   itself is transparent, the faded edge reveals the SAME page-wide paper texture as
   the neighbouring light section — the "cream" part of every transition is real
   textured paper, so there is never a flat, texture-free band. */
.fade-top-light.fade-bottom-light { background: transparent; }
.fade-top-light.fade-bottom-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(var(--to-rgb), 0)     0,
    rgba(var(--to-rgb), 0.038) calc(var(--fadeH) * 0.125),
    rgba(var(--to-rgb), 0.146) calc(var(--fadeH) * 0.25),
    rgba(var(--to-rgb), 0.309) calc(var(--fadeH) * 0.375),
    rgba(var(--to-rgb), 0.5)   calc(var(--fadeH) * 0.5),
    rgba(var(--to-rgb), 0.691) calc(var(--fadeH) * 0.625),
    rgba(var(--to-rgb), 0.854) calc(var(--fadeH) * 0.75),
    rgba(var(--to-rgb), 0.962) calc(var(--fadeH) * 0.875),
    rgba(var(--to-rgb), 1)     var(--fadeH),
    rgba(var(--to-rgb), 1)     calc(100% - var(--fadeH)),
    rgba(var(--to-rgb), 0.962) calc(100% - var(--fadeH) * 0.875),
    rgba(var(--to-rgb), 0.854) calc(100% - var(--fadeH) * 0.75),
    rgba(var(--to-rgb), 0.691) calc(100% - var(--fadeH) * 0.625),
    rgba(var(--to-rgb), 0.5)   calc(100% - var(--fadeH) * 0.5),
    rgba(var(--to-rgb), 0.309) calc(100% - var(--fadeH) * 0.375),
    rgba(var(--to-rgb), 0.146) calc(100% - var(--fadeH) * 0.25),
    rgba(var(--to-rgb), 0.038) calc(100% - var(--fadeH) * 0.125),
    rgba(var(--to-rgb), 0)     100%);
}
/* Light section sitting directly under a dark one (trust bar → intro): a moss strip
   at the very top fades down into the page texture. */
.fade-top-deep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fadeH);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(var(--moss-deep-rgb), 1)     0,
    rgba(var(--moss-deep-rgb), 0.962) 12.5%,
    rgba(var(--moss-deep-rgb), 0.854) 25%,
    rgba(var(--moss-deep-rgb), 0.691) 37.5%,
    rgba(var(--moss-deep-rgb), 0.5)   50%,
    rgba(var(--moss-deep-rgb), 0.309) 62.5%,
    rgba(var(--moss-deep-rgb), 0.146) 75%,
    rgba(var(--moss-deep-rgb), 0.038) 87.5%,
    rgba(var(--moss-deep-rgb), 0)     100%);
}
/* Content in faded sections is centred in the SOLID colour zone (past the gradient),
   not the whole box — add the resolved gradient height to the relevant padding. */
.fade-top-light, .fade-top-deep { padding-top: calc(var(--section-y) + var(--fadeH) * 0.62); }
.fade-bottom-light { padding-bottom: calc(var(--section-y) + var(--fadeH) * 0.62); }
/* chevron scroll lands the Wirkung eyebrow just below the nav (≈ top 10%, readable) */
#wirkung { scroll-margin-top: clamp(78px, 10vh, 104px); }

/* ---------- Typography ---------- */
/* Cormorant display family: enable kerning + common/contextual ligatures and
   oldstyle (proportional) figures so the serif sets the way it was drawn.
   Applied only to the display face — body/UI (Manrope) keeps lining figures. */
h1, h2, h3,
.timeline__name, .timeline__close, .quote blockquote {
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "onum" 1;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-head); letter-spacing: -0.005em; }
h1, .h1 { font-size: var(--t-h1); font-weight: 500; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 300; color: var(--text-muted); }
.section--moss .lead, .section--deep .lead { color: var(--text-muted-dark); line-height: calc(var(--lh-lead) + 0.05); }
p { max-width: 68ch; }

/* Light type on dark grounds reads lighter, so it needs more leading to breathe.
   Add ~0.06 to body line-height on Moss/Deep sections, the hero and the footer.
   Headlines keep their tight display leading untouched. */
.section--moss, .section--deep, .hero, .site-footer { line-height: calc(var(--lh-body) + 0.06); }
.section--moss h1, .section--moss h2, .section--moss h3,
.section--deep h1, .section--deep h2, .section--deep h3,
.hero h1, .hero h2, .hero h3,
.site-footer h2,
.timeline__name { line-height: var(--lh-head); }

.eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--moss .eyebrow, .section--deep .eyebrow { color: var(--gold); }
.eyebrow--gold { color: var(--gold); }

/* Gold divider — 1px line, 40px wide, centered */
.divider {
  width: 40px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: var(--space-3) auto;
}
.divider--left { margin-inline: 0; }


/* Intro grouping (eyebrow → H2 → divider → lead). Spacing is varied on
   purpose: the eyebrow hugs its heading, the divider stays close beneath the
   heading, and a clearer step opens before the lead so each layer reads. */
.intro-block > * + * { margin-top: var(--space-2); }
.intro-block .eyebrow + * { margin-top: var(--space-1); }       /* eyebrow → H2: tight */
.intro-block > .divider { margin-top: var(--space-2); margin-bottom: 0; }
.intro-block .divider + * { margin-top: var(--space-3); }        /* divider → lead: a step */

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--gold);
  background:
    radial-gradient(135% 150% at 30% 12%, rgba(212, 162, 87, 0.58), rgba(212, 162, 87, 0.16) 72%);
  color: var(--text);
  box-shadow: 0 12px 30px -12px rgba(212, 162, 87, 0.5), inset 0 1px 0 rgba(255, 241, 214, 0.25);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.section--moss .button, .section--deep .button, .hero .button { color: var(--text-on-dark); }
.button:hover, .button:focus-visible {
  border-color: var(--gold-hover);
  box-shadow: 0 0 0 1px rgba(237, 201, 136, 0.5), 0 16px 36px -10px rgba(212, 162, 87, 0.62), 0 0 24px rgba(212, 162, 87, 0.5);
}
.button .icon { width: 1.05em; height: 1.05em; }

/* Secondary / ghost pill button (e.g. hero "Behandlungen ansehen") */
.button--ghost {
  background: rgba(245, 241, 232, 0.06);
  border-color: rgba(245, 241, 232, 0.5);
  box-shadow: none;
}
.button--ghost:hover, .button--ghost:focus-visible {
  border-color: var(--gold-hover);
  background: rgba(245, 241, 232, 0.12);
  box-shadow: 0 0 0 1px rgba(237, 201, 136, 0.3);
}

/* Secondary text link with gold underline */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--text);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Light text on every dark ground a link-underline can sit on — the Moss
   sections and the standalone dark map-card bar ("Route öffnen"). */
.section--moss .link-underline, .section--deep .link-underline,
.map-card__bar .link-underline { color: var(--text-on-dark); }
.link-underline .icon { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease); }
.link-underline:hover .icon, .link-underline:focus-visible .icon { transform: translateX(4px); }
/* the mail icon stays put on hover (only the arrow-style links shift) */
.link-underline:hover .icon--mail, .link-underline:focus-visible .icon--mail { transform: none; }
/* Hover/focus: text deepens to Moss on light grounds (gold-on-light is banned
   as text), the underline thickens to 2px and brightens to gold-hover. */
.link-underline:hover, .link-underline:focus-visible {
  color: var(--moss);
  background-image: linear-gradient(var(--gold-hover), var(--gold-hover));
  background-size: 100% 2px;
}
.section--moss .link-underline:hover, .section--moss .link-underline:focus-visible,
.section--deep .link-underline:hover, .section--deep .link-underline:focus-visible,
.map-card__bar .link-underline:hover, .map-card__bar .link-underline:focus-visible { color: var(--gold-hover); }

/* ---------- Header / pill nav ---------- */
.site-header {
  position: fixed;
  top: clamp(0.45rem, 0.9vw, 0.75rem);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms var(--ease);
}
/* Fade away on scroll down, fade back in on scroll up (no slide) */
.site-header.is-hidden { opacity: 0; pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  width: min(1120px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.45rem 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--moss-deep) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(245, 241, 232, 0.1);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled .nav-pill {
  background: color-mix(in srgb, var(--moss-deep) 93%, transparent);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.7);
}
.site-logo { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--gold); transition: color var(--dur-fast) var(--ease); }
.site-logo .lotus { display: inline-flex; width: 46px; height: 42px; color: inherit; transition: color var(--dur-fast) var(--ease); }
.site-logo .lotus .icon { width: 100%; height: 100%; }
.site-logo__word {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.005em;
  color: inherit;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease);
}
/* Logo hover: lotus + wordmark shift gold → gold-hover together, matching the
   nav-link transition. Colour-only (no movement), per the calm motion policy. */
.site-logo:hover, .site-logo:focus-visible { color: var(--gold-hover); }
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--gold-hover); }

.nav-toggle { display: none; align-items: center; justify-content: center; color: var(--text-on-dark); padding: 0.6rem; margin: -0.35rem; }
/* hamburger that smoothly morphs to an X when open (driven by aria-expanded) */
.nav-toggle__bars { position: relative; display: block; width: 26px; height: 16px; }
.nav-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease), opacity 180ms var(--ease), top 300ms var(--ease); }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--moss-deep) 97%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
/* The inner <nav> is the flex child; make it a centered column so the links
   stack one-per-line and centre, instead of flowing inline. */
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--text-on-dark);
  padding: 0.5rem 1rem;
  text-align: center;
  transition: color var(--dur-fast) var(--ease);
}
.mobile-nav a.is-accent { color: var(--gold); }
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold-hover); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--moss-deep);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero--compact { min-height: 56svh; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 21%; }
/* Hero overlay: a single flat rgba(0,0,0,0.2) scrim for text legibility */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.2);
}
.hero .shell { width: 100%; max-width: none; margin-inline: 0; padding-left: max(1.5rem, calc((100% - 1200px) / 4 + 1.5rem)); padding-right: 1.5rem; padding-block: 7rem 7rem; }
.hero__inner { max-width: 640px; }
.hero h1 { margin-top: var(--space-xs); line-height: 1.05; }
.hero__lead { margin-top: var(--space-3); max-width: 30rem; color: var(--text-on-dark); opacity: 0.92; font-weight: 300; font-size: var(--t-lead); line-height: calc(var(--lh-lead) + 0.05); }
.hero__cta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Scroll-down chevron (centered, bottom) */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3.5vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(212, 162, 87, 0.5);
  background: rgba(30, 53, 39, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__scroll:hover, .hero__scroll:focus-visible { color: var(--gold-hover); border-color: var(--gold-hover); }

/* ---------- Trust bar (after hero) ---------- */
.trustbar { padding-block: clamp(1.15rem, 2.4vw, 1.65rem); position: relative; z-index: 2; }
.trustbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}
.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
}
.trustbar__icon { display: inline-flex; width: 22px; height: 22px; color: var(--gold); flex: none; }
.trustbar__icon .icon { width: 100%; height: 100%; }
@media (max-width: 560px) { .trustbar__row { flex-direction: column; gap: 0.85rem; } }

/* ---------- Section intro ---------- */
.section-intro { text-align: center; max-width: var(--measure); margin-inline: auto; }
.section-intro p { margin-inline: auto; }

/* ---------- Treatment cards ---------- */
.cards {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.card {
  background: var(--perlmutt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: 0 22px 50px -30px rgba(30, 53, 39, 0.6); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--perlmutt-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card h3 { font-size: var(--t-h3); margin: var(--space-4) var(--space-4) 0; }
.card p { color: var(--text-muted); flex: 1; margin: var(--space-xs) var(--space-4) 0; }
.card .link-underline { margin: var(--space-3) var(--space-4) var(--space-4); align-self: flex-start; }

/* ---------- Timeline (Ablauf) ---------- */
.timeline { max-width: 540px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; list-style: none; padding: 0; }
.timeline__step { position: relative; text-align: center; }
.timeline__head { display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 2vw, 1.4rem); }
/* side-pointing flanking lines removed (per design) */
.timeline__rule { display: none; }
.timeline__icon { color: var(--gold); width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.timeline__icon .icon { width: 100%; height: 100%; }
.timeline__name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-h3); color: var(--text-on-dark); margin-top: var(--space-2); }
.timeline__text { margin: var(--space-1) auto 0; max-width: 32ch; color: var(--text-muted-dark); }
/* vertical connector: solid line, softly faded at both ends, no node/dot */
.timeline__connector { display: block; width: 1px; height: clamp(56px, 9vw, 92px); margin: clamp(1.1rem, 2.4vw, 1.6rem) auto; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--gold) 60%, transparent) 20%, color-mix(in srgb, var(--gold) 60%, transparent) 80%, transparent 100%); }
.timeline__close { text-align: center; margin: var(--space-4) auto 0; max-width: 46ch; font-family: var(--font-display); font-style: italic; font-size: var(--t-lead); color: var(--text-muted-dark); }

/* Diamond divider (line — ◆ — line): longer than the icon rules, filled diamond, lines fade at the outer ends */
.diamond-divider { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin: var(--space-3) auto 0; }
.diamond-divider span { height: 1px; width: clamp(80px, 22vw, 180px); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 65%, transparent)); }
.diamond-divider span:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 65%, transparent), transparent); }
.diamond-divider i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); border: 0; flex: none; }
/* spacing after the last step before the closing line = the gap before the first step */
.timeline + .diamond-divider { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- Split media + text ---------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; object-fit: cover; }
.split__body { max-width: 40rem; }
.split__body .button, .split__body .link-underline { margin-top: var(--space-3); }

/* ---------- Quote band ---------- */
.quote { text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem);
  line-height: 1.3;
  max-width: 30ch;
  margin: 0 auto;
  color: var(--text-on-dark);
}
.quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-body); font-style: normal; font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
/* quote band: 5% less top/bottom padding (keeps the gradient-clearing space) */
.quote.section { padding-block: calc((var(--section-y) + var(--fadeH) * 0.62) * 0.95); }

/* ---------- Kontakt CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }

/* ---------- Sticky anchor sub-nav ---------- */
.anchor-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--perlmutt) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.anchor-nav ul {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.9rem;
}
.anchor-nav ul::-webkit-scrollbar { display: none; }
.anchor-nav a {
  white-space: nowrap;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.anchor-nav a:hover, .anchor-nav a.is-active { color: var(--moss); border-color: var(--gold); }

/* ---------- Treatment detail sections ---------- */
.treatment { scroll-margin-top: 5rem; }
.treatment__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.indications { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-xs); }
.indications li { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--text-muted); }
.section--moss .indications li, .section--deep .indications li { color: var(--text-muted-dark); }
.indications li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--gold); }
.infobox {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--perlmutt) 60%, transparent);
}
.section--moss .infobox, .section--deep .infobox { border-color: var(--line-dark); background: rgba(245, 241, 232, 0.04); }
.infobox dl { display: grid; gap: var(--space-xs); }
.infobox dt { font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.section--moss .infobox dt, .section--deep .infobox dt { color: var(--gold); }
.infobox dd { margin: 0.15rem 0 0; }

/* Reimbursement callout */
.callout {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--perlmutt);
  box-shadow: var(--shadow-card);
}

/* ---------- FAQ accordion ---------- */
.faq { max-width: 760px; margin: var(--space-5) auto 0; }
.faq__item { border-top: 1px solid var(--gold); }
.faq__item:last-child { border-bottom: 1px solid var(--gold); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  padding: 1.4rem 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}
/* Hover/focus: question deepens toward Moss; the plus-icon follows in the same
   Moss tone (branding: FAQ plus-icon is Moss, never gold). Colour-only. */
.faq__q:hover, .faq__q:focus-visible { color: var(--moss-deep); }
.faq__q:hover .faq__icon, .faq__q:focus-visible .faq__icon { color: var(--moss-deep); }
.faq__icon { flex: none; position: relative; width: 18px; height: 18px; color: var(--moss); transition: color var(--dur-fast) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq__a-inner { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 64ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.contact-actions .button { width: auto; }
.contact-meta { display: grid; gap: var(--space-3); }
/* Micro-labels on light — Text-Secondary, never gold (gold-on-light fails
   contrast). Matches every other eyebrow/label on light. */
.contact-meta .label { font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; }
.phone-quiet { font-size: 0.95rem; color: var(--text-muted); }
/* Quiet phone link on light: underline appears + text deepens to Moss on hover. */
.phone-quiet a { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
.phone-quiet a:hover, .phone-quiet a:focus-visible { color: var(--moss); text-decoration-color: var(--gold); }

/* Static map locator card */
.map-card {
  margin-top: var(--space-4);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--moss-deep);
}
.map-card__visual { position: relative; aspect-ratio: 16 / 8; }
.map-card__visual svg { width: 100%; height: 100%; }
.map-card__bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--moss-deep); color: var(--text-on-dark); }
.map-card__bar p { color: var(--text-muted-dark); font-size: 0.95rem; margin: 0; }
/* Centered Anfahrt note beneath the map card */
.map-note { margin-top: var(--space-5); }

/* ---------- Footer ---------- */
.site-footer { background: transparent; color: var(--text-on-dark); padding-block: calc(var(--fadeH) + 1rem) 2rem; position: relative; }
/* Last section (light, textured) → footer (moss): the page texture fades into moss. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--moss-deep-rgb), 0)     0,
    rgba(var(--moss-deep-rgb), 0.038) calc(var(--fadeH) * 0.125),
    rgba(var(--moss-deep-rgb), 0.146) calc(var(--fadeH) * 0.25),
    rgba(var(--moss-deep-rgb), 0.309) calc(var(--fadeH) * 0.375),
    rgba(var(--moss-deep-rgb), 0.5)   calc(var(--fadeH) * 0.5),
    rgba(var(--moss-deep-rgb), 0.691) calc(var(--fadeH) * 0.625),
    rgba(var(--moss-deep-rgb), 0.854) calc(var(--fadeH) * 0.75),
    rgba(var(--moss-deep-rgb), 0.962) calc(var(--fadeH) * 0.875),
    rgba(var(--moss-deep-rgb), 1)     var(--fadeH),
    rgba(var(--moss-deep-rgb), 1)     100%);
}
.site-footer > .shell { position: relative; z-index: 1; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); }
/* footer brand reuses the nav .site-logo (lotus + wordmark) 1:1 */
.site-footer__brand .site-logo { margin-bottom: 0.6rem; }
.site-footer__brand p { color: var(--text-muted-dark); margin-top: 0.5rem; font-size: 0.95rem; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: var(--space-2); }
.site-footer__col li + li { margin-top: 0.6rem; }
.site-footer__col a, .site-footer__col address { color: var(--text-muted-dark); font-style: normal; transition: color var(--dur-fast) var(--ease); }
.site-footer__col a:hover, .site-footer__col a:focus-visible, .site-footer__col a[aria-current="page"] { color: var(--gold-hover); }
/* all footer column links share one size (phone no longer smaller) */
.site-footer__col a, .site-footer__col address { font-size: 0.95rem; }
.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.site-footer__bottom p, .site-footer__legal a { color: var(--text-muted-dark); font-size: 0.85rem; }
.site-footer__legal { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__legal a { transition: color var(--dur-fast) var(--ease); }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--gold-hover); }

/* ---------- KSWD badge (copied 1:1 from malerei-weidmann-kswd; do not restyle) ---------- */
.site-footer__badge {
  --badge-orbit-duration: 6.8s;
  --badge-orbit-thickness: 1px;
  --badge-trace-length: 8;
  --badge-trace-opacity: 0.67;
  --badge-rail: color-mix(in srgb, var(--perlmutt) 90%, var(--text) 10%);
  --color-badge-accent-soft: rgba(124, 58, 237, 0.64);
  position: relative;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 0.24rem;
  border: 0;
  border-radius: calc(0.52rem - 3px);
  background: transparent;
  box-shadow: 0 0.45rem 1.3rem -0.65rem rgba(0, 0, 0, 0.22);
  isolation: isolate;
  overflow: visible;
  transition: transform var(--dur-fast) var(--ease);
}
.site-footer__badge-orbit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.site-footer__badge-orbit-fill { fill: var(--perlmutt); }
.site-footer__badge-orbit-rail, .site-footer__badge-orbit-trace { fill: none; vector-effect: non-scaling-stroke; }
.site-footer__badge-orbit-rail { stroke: var(--badge-rail); stroke-width: 1; }
.site-footer__badge-orbit-trace { stroke: rgb(124, 58, 237); stroke-width: var(--badge-orbit-thickness); stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 1px var(--color-badge-accent-soft)); }
.site-footer__badge-orbit.is-ready .site-footer__badge-orbit-trace { opacity: var(--badge-trace-opacity); }
.site-footer__badge-core {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.24em;
  min-height: 1.32rem; padding: 0.24rem 0.88rem; border-radius: max(1px, calc(0.28rem - 3px));
  background: transparent; color: #2a2533; font-size: 0.66rem; line-height: 1; letter-spacing: 0.035em;
  font-weight: 500; text-transform: none; white-space: nowrap;
}
.site-footer__badge-core strong { font-weight: 600; }
.site-footer__badge:hover, .site-footer__badge:focus-visible { transform: translateY(-2px); }

/* ---------- 404 ---------- */
.error-page { min-height: 80svh; display: flex; align-items: center; text-align: center; background: var(--moss-deep); color: var(--text-on-dark); }
.error-page__code { font-family: var(--font-display); font-weight: 500; line-height: 1; font-size: clamp(4rem, 10vw, 8rem); color: var(--gold); }
.error-page__title { font-family: var(--font-body); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* ---------- Reveal on scroll ----------
   Progressive enhancement: an element is hidden ONLY while it carries both `.js`
   (set inline in <head> the moment JS is confirmed) and `is-armed` (added by
   site.js to below-the-fold elements). The base `.js .reveal` resting state is
   fully visible, so before JS arms anything — and forever after, if JS fails —
   content renders visible and can never be stranded. Motion is opacity + a small
   translateY only (ease-out, --ease): no width/height/margin, no bounce/elastic.
   Revealing = removing `is-armed`, which animates back to the visible base state.

   Stagger: a group marked [data-reveal-stagger] has its direct children promoted
   to independent `.reveal`s by JS, each given a small, capped inline
   `transition-delay` so the group fades in one-by-one. Every child is tracked and
   force-revealed by the same backstops, so none can be left behind; the delay
   only offsets the *start* — the end state is identical and guaranteed. */
.js .reveal {
  /* Resting / revealed state. The transition lives on the base class so it is
     always present — revealing just removes `is-armed`, which animates back to
     this state smoothly. No specificity tie between hidden and visible (WebKit-
     safe): an element is hidden iff it also carries `is-armed`, full stop.
     The transition is fully static (no CSS custom property inside it — headless
     WebKit mis-evaluates a var() in a transition and strands opacity); the
     per-child stagger delay is applied as an inline `transition-delay` by JS. */
  opacity: 1;
  transform: none;
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.js .reveal.is-armed {
  /* Hidden / pre-reveal state: gentle fade + small rise only (ease-out). */
  opacity: 0;
  transform: translateY(22px);
}
/* Final-state guarantee (requirement D). A short grace after each reveal, JS adds
   `is-shown`, which hard-pins the element fully visible and cancels the
   transition. In a normal browser the fade has already finished by then, so this
   is invisible; in any engine where the transition stalls or never advances
   (observed in some headless WebKit builds), it snaps the element to visible so
   nothing can be left at opacity 0. */
.js .reveal.is-shown {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Legal / prose ---------- */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 { font-size: var(--t-h3); margin-top: var(--space-4); }
.prose h3 { font-size: 1.25rem; margin-top: var(--space-3); font-family: var(--font-body); font-weight: 600; }
.prose p, .prose ul { margin-top: var(--space-2); color: var(--text-muted); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose a { color: var(--moss); background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--dur-fast) var(--ease), background-size var(--dur-fast) var(--ease); }
.prose a:hover, .prose a:focus-visible { color: var(--moss-deep); background-image: linear-gradient(var(--gold-hover), var(--gold-hover)); background-size: 100% 2px; }
.page-hero { padding-top: 8rem; padding-bottom: var(--space-5); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .split, .treatment__grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero .shell { padding-block: 7rem 3rem; }
  /* Darker overlay on phones so the hero text stays cleanly readable */
  .hero::after { background: rgba(0, 0, 0, 0.35); }
  /* both hero CTAs the same size on phones */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .button { width: 100%; }

  /* Generous tap spacing on mobile: footer + contact + anchor links get a
     larger comfortable hit area (calm — padding only, no visual change).
     inline-block so the vertical padding is part of the tappable box; tighten
     the row margin a touch so the added padding doesn't double the rhythm. */
  .site-footer__col li + li { margin-top: 0.2rem; }
  .site-footer__col a { display: inline-block; padding-block: 0.4rem; }
  .contact-actions .link-underline,
  .phone-quiet a,
  .map-card__bar .link-underline { padding-block: 0.4rem; }
  .anchor-nav a { padding-block: 0.55rem; }
  .anchor-nav ul { padding-block: 0.4rem; }
}

/* Keep the nav wordmark on a single line on phones (≤480px). At 1.4rem the
   lotus + "Akupunktur Dietikon" otherwise wraps to two lines inside the pill;
   a small reduction + nowrap keeps it crisp. Scoped to small screens only —
   the desktop/tablet pill nav is unchanged. */
@media (max-width: 480px) {
  .nav-pill { padding-inline: 1.4rem; }
  .site-logo__word { font-size: 1.18rem; white-space: nowrap; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal, .js .reveal.is-armed, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}