:root {
  /*
   * Typography scale — single source of truth.
   * `--lz-type-scale` is 1 for EN; fa/hy/ru override on `html` (`locale-fonts.css`: fa 0.75, hy 0.65, ru 0.75).
   * `html` stays at 100% so rem padding, card min-heights, and em-based layout match English in every locale.
   */
  --lz-type-scale: 1;
  --brand-red: #EA098D;
  /* Brand color alias used by feature CSS and authoring helpers (preloader, header, classes, footer, etc.). */
  --ladyzone-brand: var(--brand-red);
  --bg: #f8f9fc;
  --ink: #121326;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --radius: 10px;
  --btn-min-h: 44px;

  /*
   * Shared easings — consumed by page-root fade, preloader exit, hero/outline reveals,
   * marquee, footer social, back-to-top, hero JS animation. Add a new token before
   * authoring an inline cubic-bezier so the curve can be tuned in one place.
   */
  --lz-ease-out-quart: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lz-ease-page-reveal: cubic-bezier(0.19, 1, 0.22, 1);

  /* --- Core scale (chrome + utility) --- */
  --text-body: 14px;
  --text-xs: 12px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  --text-5xl: 28px;
  --text-locale-html-font-size: 100%;

  /*
   * LadyZone homepage — font-size tokens only; `home.css` uses var(--text-tpl-*).
   * All terms multiply by `--lz-type-scale` (layout rem/vw on the page is not scaled).
   */
  --text-tpl-rail-title: calc((1.5rem + 8vw) * var(--lz-type-scale, 1));
  --text-tpl-intro-title: calc((1.5rem + 7vw) * var(--lz-type-scale, 1));
  --text-tpl-intro-block-title: clamp(
    calc(1.25rem * var(--lz-type-scale, 1)),
    calc(2.5vw * var(--lz-type-scale, 1)),
    calc(1.75rem * var(--lz-type-scale, 1))
  );
  --text-tpl-menu-main: calc((1.25rem + 3vw) * var(--lz-type-scale, 1));
  --text-tpl-menu-main-lg: calc(3.5rem * var(--lz-type-scale, 1));
  --text-tpl-menu-sub: calc((1.075rem + 0.9vw) * var(--lz-type-scale, 1));
  --text-tpl-menu-sub-lg: calc(1.75rem * var(--lz-type-scale, 1));
  --text-tpl-marquee-item: clamp(
    calc(3rem * var(--lz-type-scale, 1)),
    calc(9vw * var(--lz-type-scale, 1)),
    calc(6rem * var(--lz-type-scale, 1))
  );
  --text-tpl-about-title: clamp(
    calc(2.25rem * var(--lz-type-scale, 1)),
    calc(6vw * var(--lz-type-scale, 1)),
    calc(4rem * var(--lz-type-scale, 1))
  );
  --text-tpl-services-heading: clamp(
    calc(1.1rem * var(--lz-type-scale, 1)),
    calc(2.25vw * var(--lz-type-scale, 1)),
    calc(1.5rem * var(--lz-type-scale, 1))
  );
  --text-tpl-body-md: calc(1.05rem * var(--lz-type-scale, 1));
  --text-tpl-eyebrow: calc(0.8rem * var(--lz-type-scale, 1));
  --text-tpl-services-link: clamp(
    calc(1.55rem * var(--lz-type-scale, 1)),
    calc(3.5vw * var(--lz-type-scale, 1)),
    calc(2.35rem * var(--lz-type-scale, 1))
  );
  --text-tpl-facts-title: clamp(
    calc(1.75rem * var(--lz-type-scale, 1)),
    calc(4vw * var(--lz-type-scale, 1)),
    calc(2.75rem * var(--lz-type-scale, 1))
  );
  --text-tpl-lead-title: clamp(
    calc(1.75rem * var(--lz-type-scale, 1)),
    calc(4vw * var(--lz-type-scale, 1)),
    calc(2.5rem * var(--lz-type-scale, 1))
  );
  --text-tpl-classes-heading: clamp(
    calc(2.5rem * var(--lz-type-scale, 1)),
    calc(6vw * var(--lz-type-scale, 1)),
    calc(4.5rem * var(--lz-type-scale, 1))
  );
  --text-tpl-class-card-meta: clamp(
    calc(1.35rem * var(--lz-type-scale, 1)),
    calc(3vw * var(--lz-type-scale, 1)),
    calc(2.25rem * var(--lz-type-scale, 1))
  );
  --text-tpl-class-card-name: clamp(
    calc(1.75rem * var(--lz-type-scale, 1)),
    calc(4vw * var(--lz-type-scale, 1)),
    calc(2.75rem * var(--lz-type-scale, 1))
  );
  --text-tpl-lead-submit: clamp(
    calc(1.85rem * var(--lz-type-scale, 1)),
    calc(4.25vw * var(--lz-type-scale, 1)),
    calc(2.65rem * var(--lz-type-scale, 1))
  );
  --text-tpl-locations-title: clamp(
    calc(1.5rem * var(--lz-type-scale, 1)),
    calc(3.5vw * var(--lz-type-scale, 1)),
    calc(2.25rem * var(--lz-type-scale, 1))
  );
  --text-tpl-header-nav: clamp(
    calc(1rem * var(--lz-type-scale, 1)),
    calc(1.45vw * var(--lz-type-scale, 1)),
    calc(1.75rem * var(--lz-type-scale, 1))
  );
  --text-tpl-header-nav-lg: clamp(
    calc(1.1rem * var(--lz-type-scale, 1)),
    calc(1.55vw * var(--lz-type-scale, 1)),
    calc(2rem * var(--lz-type-scale, 1))
  );
  /*
   * Language switcher: pinned to English size in every locale.
   * Each label uses its own destination-language font via `a:lang()` rules in
   * `locale-fonts.css`, so the labels must NOT shrink with the active page locale.
   */
  --text-tpl-header-lang: clamp(0.8125rem, 1.05vw, 1.0625rem);
  --text-tpl-header-lang-lg: clamp(0.875rem, 1.1vw, 1.125rem);

  /*
   * Footer typography.
   * `--text-footer-root-vw` is the unscaled em context (1vw) so layout em units (logo badge,
   * gaps, paddings) stay English-sized across locales. Per-element text uses `--text-footer-*-font`
   * tokens which would normally apply `--lz-type-scale`, but `footer.css` scopes
   * `--lz-type-scale: 1` on the footer to pin font sizes to English too.
   */
  --text-footer-root-vw: 1vw;
  --text-footer-root-max: 19.2px;
  --text-footer-body-em: 1em;
  --text-footer-nav-em: 1.1em;
  --text-footer-meta-em: 0.8em;
  --text-footer-class-name-em: 4.7em;
  --text-footer-mobile-nav-em: 4em;
  --text-footer-mobile-meta-em: 2.5em;
  --text-footer-mobile-heading-em: 11em;
  --text-footer-mobile-heading-footer-em: 14.1em;
  --text-footer-contact-em: var(--text-footer-meta-em);
  --text-footer-contact-mobile-em: var(--text-footer-mobile-meta-em);
  --text-footer-nav-font: calc(var(--text-footer-nav-em) * var(--lz-type-scale, 1));
  --text-footer-meta-font: calc(var(--text-footer-meta-em) * var(--lz-type-scale, 1));
  --text-footer-class-name-font: calc(var(--text-footer-class-name-em) * var(--lz-type-scale, 1));
  --text-footer-mobile-nav-font: calc(var(--text-footer-mobile-nav-em) * var(--lz-type-scale, 1));
  --text-footer-mobile-meta-font: calc(var(--text-footer-mobile-meta-em) * var(--lz-type-scale, 1));
  --text-footer-contact-font: calc(var(--text-footer-contact-em) * var(--lz-type-scale, 1));
  --text-footer-contact-mobile-font: calc(var(--text-footer-contact-mobile-em) * var(--lz-type-scale, 1));
  --text-footer-mobile-heading-font: calc(var(--text-footer-mobile-heading-em) * var(--lz-type-scale, 1));
  --text-footer-mobile-heading-footer-font: calc(var(--text-footer-mobile-heading-footer-em) * var(--lz-type-scale, 1));
}

/*
 * iOS / mobile overscroll & safe-area handling — cross-project convention
 * (matches NeoGym `fix: prevent mobile overscroll whitespace below footer`
 * and SahakyanLaw `fix: prevent mobile overscroll whitespace and horizontal bleed`):
 *   1. `overscroll-behavior: none` on html AND body disables the iOS
 *      rubber-band bounce, so end-of-page / pull-down can't reveal a
 *      white strip above the header or below the footer.
 *   2. `overflow-x: hidden` on both prevents horizontal bleed on devices
 *      where wide flex rows can still leak past the body box.
 *   3. The root element's background is painted into the iOS safe-area
 *      (notch / home-indicator) when paired with `viewport-fit=cover` in
 *      head.php, AND is the fallback paint for any overscroll bounce some
 *      engines still allow despite (1). `--lz-page-bg` tracks the active
 *      route's surface (homepage overrides to #000 below).
 */
html {
  font-size: var(--text-locale-html-font-size);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  background: var(--lz-page-bg, var(--bg));
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Sora", Inter, Arial, sans-serif;
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--lz-page-bg, var(--bg));
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

/* Marketing homepage: 1vw root + 130% line-height */
body.ladyzone-route-home {
  font-size: 1vw;
  line-height: 1.3;
  /* Homepage is full-bleed dark; promote the token to :root so html also
   * tracks the same surface and the iOS safe-area / overscroll matches. */
  --lz-page-bg: #000;
}

html:has(body.ladyzone-route-home) {
  --lz-page-bg: #000;
}

/* No transform on #page-root: translateY painted content off the layout top (wrong "scroll") and fights scroll anchoring. */
.page-root {
  max-width: 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.42s var(--lz-ease-page-reveal);
  will-change: opacity;
}
.page-root.is-page-visible {
  opacity: 1;
}
.page-root.is-page-leaving {
  opacity: 0;
  transition-duration: 0.28s;
}

.container { width: min(1040px, 92%); margin: 0 auto; }
h1 { font-size: var(--text-5xl); margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-1); }
h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-2); line-height: 1.5; }
a { color: inherit; }

/* Server-rendered flash after contact form POST (`partials/contact-flash.php`). */
.contact-flash {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-weight: 600;
}
.contact-flash--ok {
  background: #e8f5e9;
  color: #1b5e20;
}
.contact-flash--err {
  background: #ffebee;
  color: #b71c1c;
}

/*
 * Inline form-field validation primitives — used by `site-chrome.js`.
 * Markup contract: `<div class="lz-field"><input …><p class="lz-field-error" hidden>…</p></div>`.
 * The current `section-lead.php` form uses `.lz-lead__field` and is server-validated only;
 * these classes stay reserved so future forms (or a port of 's `.lz-field` markup) can plug in.
 */
.lz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
}
.lz-field-error {
  margin: 0;
  padding: 0;
  font-family: Sora, Inter, Arial, sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--brand-red);
}
.lz-field-error[hidden] {
  display: none !important;
}