/* ============================================================
   hyvinkaanautopalvelu.fi: design-tokenit
   Kaikki värit/spacing/fontit/motion täältä. Ei kovakoodattuja
   arvoja styles.css/renkaat.css:ään. Lähde: docs/brandi.md +
   docs/design-suunta.md ("Aamuvuoro"-valonarratiivi).
   ============================================================ */

:root {
  /* --- Brändisininen skaala (laskeutumissivun jatkumo) --- */
  --blue-950: #031225;
  --blue-900: #071d3a;
  --blue-850: #0d2b52;
  --blue-800: #123b70;
  --blue-700: #24528d;
  --blue-600: #2f66ad;
  --blue-100: #dbe7f5;
  --blue-50: #eff5fb;
  --link: #1d5fa8;

  /* --- Valoisat pinnat (aamuvuoro-portaat) --- */
  --paper: #ffffff;
  --surface: #f6f8fb;
  --surface-2: #eef2f7;
  --line: #dce4ec;
  --line-soft: #e7edf4;

  /* --- §20: Aamuvuoron lämmin päivänvalopääte --- */
  --surface-day: #f8f5ee;
  --paper-day: #fff9ed;

  /* --- Aamuvuoro-DNA: jatkuvat osiokentät, ei irrallisia taustalaattoja --- */
  --surface-offers-field:
    radial-gradient(78% 46% at 78% 4%, color-mix(in srgb, var(--amber) 8%, transparent), transparent 72%),
    linear-gradient(180deg, var(--blue-100) 0%, var(--blue-50) 100%);
  --surface-services-field:
    radial-gradient(62% 48% at 10% 88%, color-mix(in srgb, var(--blue-100) 48%, transparent), transparent 76%),
    linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%);
  --surface-tire-center-field:
    radial-gradient(58% 42% at 92% 14%, color-mix(in srgb, var(--blue-100) 35%, transparent), transparent 78%),
    linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  --surface-pricing-field: linear-gradient(180deg, var(--paper) 0%, var(--surface-day) 100%);
  --surface-hotel-field:
    radial-gradient(64% 52% at 8% 20%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-day) 0%, var(--paper-day) 100%);
  --surface-about-field: linear-gradient(180deg, var(--paper-day) 0%, var(--paper) 100%);
  --surface-contact-field:
    radial-gradient(54% 44% at 86% 12%, color-mix(in srgb, var(--blue-100) 30%, transparent), transparent 76%),
    linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper-day) 94%, var(--amber)) 100%);
  /* Yhteydenoton huoltopyyntö: tumma työmääräyspinta vaalean päivänvalokentän
     sisällä. Se on toiminnallinen vastapaino kartalle, ei irrallinen SaaS-kortti. */
  --surface-contact-form:
    radial-gradient(92% 96% at 100% 0%, color-mix(in srgb, var(--blue-700) 42%, transparent), transparent 68%),
    linear-gradient(145deg, var(--blue-850) 0%, var(--blue-900) 56%, var(--blue-950) 100%);
  --surface-footer-field:
    radial-gradient(48% 78% at 8% 8%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 72%),
    linear-gradient(145deg, var(--blue-850) 0%, var(--blue-900) 48%, var(--blue-950) 100%);

  /* --- Aksentit (yksi rooli per väri) --- */
  --amber: #ffa400;          /* hinnat + pää-CTA; teksti päällä AINA --ink */
  --amber-deep: #e08a00;     /* hover/borderit amberille */
  --red: #d71924;            /* tarjous-/sesonkileimat, virheet */
  --orange-hot: #f05a14;
  --orange-deep: #d94b10;
  --accent-solid: #f36a0b;
  --accent-flow: linear-gradient(105deg, var(--red) 0%, var(--orange-hot) 22%, var(--amber) 78%, #ffb31a 100%);
  --accent-flow-hover: linear-gradient(105deg, var(--orange-deep) 0%, var(--orange-hot) 26%, var(--amber-deep) 100%);
  /* Tekstipintojen puna on kapea reunasignaali: tumma teksti osuu AA-tasoiseen
     oranssi-meripihka-alueeseen, mutta koristeissa koko liuku saa näkyä. */
  --accent-surface: linear-gradient(105deg, var(--red) 0 5%, var(--orange-hot) 12%, var(--amber) 48%, #ffb31a 100%);
  --accent-surface-hover: linear-gradient(105deg, var(--orange-deep) 0 5%, var(--orange-hot) 14%, var(--amber-deep) 52%, var(--amber) 100%);
  --accent-warm-on-light: #c43d08;
  --accent-warm-on-dark: #ff7417;
  --accent-flow-on-dark: linear-gradient(105deg, var(--accent-solid) 0%, var(--accent-warm-on-dark) 34%, var(--amber) 78%, #ffb31a 100%);
  --accent-flow-soft: linear-gradient(105deg, color-mix(in srgb, var(--red) 22%, transparent), color-mix(in srgb, var(--orange-hot) 20%, transparent) 38%, color-mix(in srgb, var(--amber) 16%, transparent));
  --accent-shadow: color-mix(in srgb, var(--orange-hot) 28%, transparent);
  --accent-shadow-strong: color-mix(in srgb, var(--orange-hot) 38%, transparent);
  --ad-navy: #224980;        /* AD-ketjutiili: EI omaan UI:hin */
  --tile-black: #070809;     /* BestDrive-tiili + maskimusta */

  /* --- Teksti --- */
  --ink: #071d3a;
  --ink-soft: rgba(7, 29, 58, 0.74);
  --ink-faint: #51607a; /* 6.4:1 valkoisella: AA myös normaalitekstille */
  --snow: #ffffff;
  --snow-soft: rgba(255, 255, 255, 0.82);
  --snow-faint: rgba(255, 255, 255, 0.6);

  /* --- Typografia --- */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: Barlow, "Segoe UI", Arial, sans-serif;
  --fs-hero: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2: clamp(2.375rem, 4vw, 3.625rem); /* visu-spec-v2 §8: 38-58px */
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.02rem, 1.3vw, 1.18rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.78rem;
  --ls-label: 0.09em;
  --lh-tight: 1.04;
  --lh-body: 1.65;

  /* --- Layout --- */
  --container: min(1200px, calc(100vw - 44px));
  --section-pad: clamp(64px, 9vw, 128px);
  --gap-grid: clamp(16px, 2.2vw, 28px);

  /* --- Muodot ja syvyys --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-card: 0 1px 2px rgba(7, 29, 58, 0.05), 0 10px 30px rgba(7, 29, 58, 0.07);
  --shadow-lift: 0 4px 10px rgba(7, 29, 58, 0.08), 0 22px 48px rgba(7, 29, 58, 0.13);
  --shadow-navy: 0 24px 60px rgba(3, 18, 37, 0.45);
  --contact-form-shadow: 0 18px 42px rgba(3, 18, 37, 0.18), 0 2px 5px rgba(3, 18, 37, 0.12);
  --shadow-offer: 0 1px 2px rgba(7, 29, 58, 0.04), 0 14px 34px rgba(7, 29, 58, 0.07), 0 34px 70px rgba(7, 29, 58, 0.035);
  --shadow-offer-hover: 0 2px 4px rgba(7, 29, 58, 0.055), 0 18px 42px rgba(7, 29, 58, 0.095), 0 38px 76px rgba(7, 29, 58, 0.045);
  --shadow-offer-featured: 0 2px 5px rgba(7, 29, 58, 0.055), 0 20px 46px rgba(7, 29, 58, 0.105), 0 44px 84px rgba(7, 29, 58, 0.05);
  --shadow-service: 0 1px 2px rgba(7, 29, 58, 0.035), 0 16px 38px rgba(7, 29, 58, 0.055);
  --shadow-media: 0 2px 5px rgba(7, 29, 58, 0.06), 0 24px 58px rgba(7, 29, 58, 0.12);
  --shadow-hotel: 0 1px 3px rgba(7, 29, 58, 0.05), 0 18px 44px rgba(7, 29, 58, 0.09);

  /* --- Motion-tokenit (feel-iterointi näistä) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 160ms;
  --dur-base: 340ms;
  --dur-slow: 720ms;
  --reveal-rise: 14px;

  /* --- Huoltopyyntö: lomake näyttää työmääräykseltä, ei sovelluskortilta --- */
  --contact-grid-column-gap: clamp(28px, 4.5vw, 64px);
  --contact-grid-row-gap: clamp(28px, 3vw, 44px);
  --contact-form-pad: clamp(1.5rem, 3.2vw, 2.5rem);
  --contact-form-head-gap: 0.5rem;
  --contact-form-fields-gap: clamp(1rem, 1.8vw, 1.375rem);
  --contact-form-field-label-gap: 0.4rem;
  --contact-form-field-pad: 0.6rem 0 0.65rem;
  --contact-form-foot-gap: 1rem;
  --contact-form-foot-margin: clamp(1.5rem, 2.6vw, 2rem);
  --contact-form-textarea-min: 7.25rem;
  --contact-form-eyebrow-size: var(--fs-eyebrow);
  --contact-form-optional-size: 0.72rem;
  --contact-form-border: color-mix(in srgb, var(--snow) 16%, transparent);
  --contact-form-field-line: color-mix(in srgb, var(--snow) 28%, transparent);
  --contact-form-field-line-hover: color-mix(in srgb, var(--snow) 58%, transparent);
  --contact-form-label: color-mix(in srgb, var(--snow) 78%, transparent);
  --contact-form-label-muted: color-mix(in srgb, var(--snow) 54%, transparent);
  --contact-form-text: var(--snow);
  --contact-form-note: var(--snow-soft);
  --contact-form-placeholder: var(--snow-faint);
  --contact-form-focus: var(--accent-warm-on-dark);
  --contact-form-rule: var(--accent-flow-on-dark);
  --contact-form-rule-height: 3px;

  /* --- Visu-spec v2 -LISÄYKSET (etusivun taso ylös, 2026-07-10) --- */
  /* §1/§8: editoriaalinen display-typo (64-96px, lh 0.88, ls -0.045em) */
  --fs-display: clamp(3.75rem, 5.7vw, 5.65rem);
  --lh-display: 0.88;
  --ls-display: -0.045em;
  --lh-h2: 0.95;
  /* §8: eyebrow/pill 11px + 0.14em tracking */
  --fs-eyebrow: 0.6875rem;
  --ls-eyebrow: 0.14em;
  /* §8: leipärytmi 17px/1.55 + selitetekstin maksimimitta */
  --fs-body-lg: 1.0625rem;
  --lh-lead: 1.55;
  --measure-lead: 58ch;
  /* §8: sektiorytmi: hengittävä vs. tiivis kaupallinen */
  --section-pad-air: clamp(96px, 12vw, 160px);
  --section-pad-dense: clamp(56px, 8vw, 88px);
  /* §3: kärkitarjouksen jättihinta 40-64px */
  --fs-price-hero: clamp(2.5rem, 4vw, 4rem);
  /* §2: tread-signatuurin opasiteetti + kaistan leveys */
  --tread-opacity: 0.042;
  --tread-w: clamp(300px, 27vw, 420px);
  --tread-zone-mask: radial-gradient(ellipse at center, var(--tile-black) 22%, color-mix(in srgb, var(--tile-black) 72%, transparent) 56%, transparent 82%);
  --tread-travel: 14px;
  /* §9: mikrodetaljit */
  --dur-zoom: 180ms;
  --redline: var(--accent-flow);

  /* --- Kontaktikupla (saantokirja-premium-2026-08-29.md §15.4) --- */
  /* Suurin muu z-index sivustolla on 200 (mobiilivalikko). Kupla kelluu sen
     ylapuolella mutta ei ole modaali eika lukitse scrollia. */
  --z-kupla: 300;

  /* --- Verkostorailin ja tarjousten sauma: luottamusraili laskeutuu hieman
     herosta ennen kuin sen navy-pinta häipyy aamunvaloon. Sininen kantaa
     koko horisontin läpi; vaalea kenttä näkyy vasta viimeisessä häivytyksessä,
     ei irrallisena harmahtavana hehkukaistana. --- */
  --network-rail-top-inset: clamp(0.625rem, 1vw, 0.875rem);
  --section-offers-horizon: clamp(5rem, 6vw, 5.75rem);
  --section-offers-pad-top: clamp(1.25rem, 2vw, 1.75rem);
  --network-rail-fade:
    linear-gradient(
      180deg,
      var(--blue-950) 0%,
      var(--blue-900) 24%,
      color-mix(in srgb, var(--blue-850) 92%, var(--blue-100)) 50%,
      color-mix(in srgb, var(--blue-800) 82%, var(--blue-100)) 72%,
      color-mix(in srgb, var(--blue-800) 62%, var(--blue-100)) 88%,
      transparent 100%
    );

  /* --- Karkitarjouksen saumaleiman ylavara (Fable V3 2026-09-03) --- */
  --offer-seam-clear: clamp(48px, 4vw, 58px);
  --offer-card-border: color-mix(in srgb, var(--blue-800) 12%, var(--line-soft));
  --offer-card-border-hover: color-mix(in srgb, var(--blue-800) 24%, var(--line-soft));
  --offer-featured-inset: 2px;
  --offer-image-hover-scale: 1.018;
  --dur-offer-image: 650ms;
  --offer-note-size: 0.875rem;
  --offer-note-tracking: 0.012em;
  --offer-note-rule-width: 1.75rem;
  --service-tyres-image-filter: brightness(1.14) saturate(0.9) contrast(0.96);
  --service-image-hover-scale: 1.018;
  --tire-center-image-filter: brightness(1.11) saturate(0.9) contrast(0.97);
  --about-image-filter: brightness(1.06) saturate(0.94) contrast(0.98);
  --media-border: color-mix(in srgb, var(--blue-800) 16%, var(--line));
  --footer-rule: color-mix(in srgb, var(--snow) 14%, transparent);
  --footer-rule-accent: linear-gradient(90deg, var(--red) 0%, var(--orange-hot) 16%, var(--amber) 34%, transparent 82%);
  --bestdrive-tile-field: linear-gradient(135deg, var(--orange-deep) 0%, var(--orange-hot) 42%, var(--amber) 100%);

  /* --- Rengashaku: logon henkinen, pelkistetty rengasmerkki --- */
  --hint-tire-rubber: color-mix(in srgb, var(--blue-950) 90%, var(--blue-900));
  --hint-tire-outline: color-mix(in srgb, var(--blue-100) 58%, transparent);
  --hint-tire-sidewall: color-mix(in srgb, var(--blue-100) 36%, transparent);
  --hint-rim-fill: color-mix(in srgb, var(--blue-700) 76%, var(--blue-900));
  --hint-spoke: var(--blue-850);
  --hint-highlight: var(--amber);
  --hint-hub-core: var(--blue-950);

  /* --- Kontaktikuplan hallittu squircle --- */
  --kupla-toggle-size: 56px;
  --kupla-toggle-radius: 18px;
  --kupla-toggle-ring: color-mix(in srgb, var(--paper) 48%, transparent);

  /* Kaista jonka kelluva kupla varaa sivun oikeasta alalaidasta: napin
     leveys, sen oma reunavara ja hengitysrako. Footerin tekijätiedot
     väistävät tämän verran, jotta ne ovat luettavissa kuplan vieressä.
     Ilman varattua kaistaa krediittirivin loppu jaa napin alle. */
  --kupla-varattu-kaista: calc(
    var(--kupla-toggle-size) + clamp(16px, 3vw, 28px) + 30px);

  /* --- Hero v3: avainkuvan istutus ja mobiilirajaus (§30, §33) --- */
  --hero-image-position-desktop: 58% 50%;
  --hero-image-position-mobile: 50% 50%;
  --hero-mobile-image-height: clamp(14rem, 72vw, 27.5rem);
  --hero-mobile-title-size: clamp(3rem, 13vw, 4rem);
  --hero-copy-measure: 50ch;
  --hero-copy-scrim: linear-gradient(
    90deg,
    color-mix(in srgb, var(--blue-900) 92%, transparent) 0%,
    color-mix(in srgb, var(--blue-900) 84%, transparent) 54%,
    color-mix(in srgb, var(--blue-900) 48%, transparent) 78%,
    transparent 100%
  );
  --hero-frame-scrim-desktop:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue-950) 90%, transparent) 0%,
      color-mix(in srgb, var(--blue-900) 76%, transparent) 26%,
      color-mix(in srgb, var(--blue-900) 58%, transparent) 46%,
      color-mix(in srgb, var(--blue-900) 18%, transparent) 72%,
      color-mix(in srgb, var(--blue-950) 8%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      var(--blue-950) 0%,
      color-mix(in srgb, var(--blue-900) 82%, transparent) 12%,
      color-mix(in srgb, var(--blue-900) 18%, transparent) 30%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--blue-950) 36%, transparent) 0%,
      transparent 24%
    );
  --hero-frame-scrim-mobile: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue-900) 16%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, var(--blue-900) 78%, transparent) 88%,
    var(--blue-900) 100%
  );

  /* §31: valokoreografian suunta, läpinäkyvyys ja kestot */
  --hero-light-origin: 77% 36%;
  --hero-beam-field: radial-gradient(
    48% 64% at var(--hero-light-origin),
    color-mix(in srgb, var(--amber) 24%, transparent),
    transparent 72%
  );
  --hero-rays-field: conic-gradient(
    from 202deg at var(--hero-light-origin),
    transparent 0deg,
    color-mix(in srgb, var(--snow) 16%, transparent) 5deg,
    transparent 13deg,
    color-mix(in srgb, var(--amber) 14%, transparent) 21deg,
    transparent 31deg
  );
  --hero-rays-opacity: 0.24;
  --dur-hero-beam: 1900ms;
  --dur-hero-rays: 1200ms;
  /* §33: hero-copyn rytmi ja vähintään 44 px kosketuskohteet */
  --hero-title-indent: 0;
  --hero-title-margin: clamp(1.25rem, 2vw, 1.5rem);
  --hero-lead-margin: 1.25rem;
  --hero-action-gap: 0.75rem;
  --hero-action-margin: 1.75rem;
  --hero-cta-min-height: 3.5rem;
  --hero-cta-inline: 1.75rem;
  --hero-cta-primary-min-width: 12.5rem;
  --hero-cta-secondary-min-width: 11rem;
  --hero-focus-outline-width: 0.1875rem;
  --hero-focus-outline-offset: 0.1875rem;
  --hero-chip-gap: 0.625rem;
  --hero-chip-margin: clamp(1.5rem, 3vw, 2.25rem);

  /* §33: hero päättyy omaan kuva-alaan; verkostot ovat sen jälkeinen
     selkeä luottamusraili, eivät heron sisäinen pseudo-footer. */
  --surface-network-field: linear-gradient(90deg, var(--blue-950) 0%, var(--blue-900) 48%, var(--blue-950) 100%);
  --network-rail-columns: repeat(2, minmax(0, 1fr));
  --network-rail-min-height: clamp(5.25rem, 7vw, 6rem);
  --network-rail-mark-width: clamp(6.5rem, 9vw, 8rem);
  --network-rail-mark-padding: 0.75rem;
  --network-rail-copy-padding: clamp(1rem, 2vw, 1.5rem);
  --network-rail-logo-ad: 3rem;
  --network-rail-logo-bestdrive: 2rem;
  --network-rail-rule: 3px;
  --network-rail-divider: color-mix(in srgb, var(--snow) 18%, transparent);

  /* §31, §33: toisen lukeman tread-hiusviiva ilman uutta komponenttia */
  --hero-tread-stitch-width: 5.25rem;
  --hero-tread-stitch-height: 0.1875rem;
  --hero-tread-stitch-offset: -0.875rem;
  --hero-tread-stitch-opacity: 0.68;
  --hero-tread-stitch: repeating-linear-gradient(
    112deg,
    var(--amber) 0 0.4rem,
    transparent 0.4rem 0.75rem
  );

  /* §33: hero-layoutin viimeistelyarvot */
  --hero-header-clearance: 4.75rem;
  --hero-pad-top-fluid: clamp(2.75rem, 6.5vw, 5.5rem);
  --hero-pad-bottom: clamp(1.75rem, 4vw, 2.75rem);
  --hero-copy-padding-block: clamp(1.25rem, 3vw, 2.5rem);
  --hero-copy-scrim-inset: -6% -22% -6% -14%;
  --hero-chip-inner-gap: 0.5625rem;
  --hero-chip-padding: 0.5625rem 0.9375rem;
  --hero-chip-radius: 999px;
  --hero-chip-dot-size: 0.375rem;
  --hero-visual-min-height: clamp(27.5rem, 46vw, 42.5rem);
  /* Lattia kun nakyma on matala: kuva-alue ei kutistu tata pienemmaksi. */
  --hero-visual-floor: 24rem;
  /* Tehosterivin gradienttimaalaus tarvitsee varan myös alareunaan ja
     oikealle: Barlow Condensedin piste voi yltää advance-laatikon yli.
     Varat kumotaan marginaalilla, joten otsikon rytmi ja CLS eivät muutu. */
  --hero-title-accent-bleed: 0.18em;
  --hero-title-accent-bleed-bottom: 0.14em;
  --hero-title-accent-bleed-inline: 0.12em;
  /* Tehosterivin hengitysrako ylarivista. */
  --hero-title-accent-gap: 0.1em;

  /* --- Heron ambient-kerrokset: lasikiilto ja aamun poly ---
     Kaikki kerroksia kuvan paalla, vain transform ja opacity. Pöly elää
     kaikissa normaalin liikeasetuksen näkymissä kahdella tiheydellä;
     reduced-motion pysyy täysin staattisena. */
  /* Arvot Codex-konsultaatiosta (run 6d09a0ace522451a): kapea 8 %:n
     kaista 34 asteessa, #FFF2CC, kerran pyyhkaisty oikealta vasemmalle
     oven valon alueella, ei jatkuvaa liiketta. Lepotila lahes nakymaton. */
  --hero-sheen-angle: 124deg;
  --hero-sheen-color: color-mix(in srgb, #fff2cc 34%, transparent);
  --hero-sheen-field: linear-gradient(
    var(--hero-sheen-angle),
    transparent 0 46%,
    var(--hero-sheen-color) 50%,
    transparent 54%
  );
  --hero-sheen-rest-opacity: 0.06;
  --hero-sheen-peak-opacity: 0.3;
  --hero-sheen-sweep-from: 38%;
  --hero-sheen-sweep-to: -34%;
  /* Kiilto vain oven valon alueella, ei otsikon takana eika auton kyljessa. */
  --hero-sheen-mask: linear-gradient(90deg, transparent 0 52%, var(--tile-black) 60% 90%, transparent 96%);
  --dur-hero-sheen: 1100ms;
  --at-hero-sheen: 580ms;
  --hero-dust-color-amber: #ffa400;
  --hero-dust-color-warm: #fff4d6;
  /* Pöly on lämmin sisähallin partikkeli, ei kipinä eikä oviaukon ulkolumi.
     Desktopilla määrä on lukukelpoinen, kompaktissa näkymässä vain kevyt
     toinen lukema. */
  --hero-dust-count-desktop: 32;
  --hero-dust-count-compact: 10;
  --hero-dust-size-min: 1.25;
  --hero-dust-size-max: 5;
  --hero-dust-opacity-min: 0.28;
  --hero-dust-opacity-max: 0.58;
  --hero-dust-rest-factor: 0.48;
  /* Alue prosentteina kuvakehyksesta: sisähallin lämpimästä ovivalosta,
     ei otsikon tai CTA:iden päältä. */
  --hero-dust-area-left: 60;
  --hero-dust-area-top: 24;
  --hero-dust-area-width: 19;
  --hero-dust-area-height: 42;
  --hero-dust-rise-min: 12;
  --hero-dust-rise-max: 22;
  --hero-dust-sway-min: 6;
  --hero-dust-sway-max: 14;
  --hero-dust-dur-min: 6.5;
  --hero-dust-dur-max: 10;
  --hero-dust-twinkle-min: 1.9;
  --hero-dust-twinkle-max: 4;
  --dur-hero-dust-entry: 560ms;
  --at-hero-dust: 620ms;
  /* Yksi hidas hengitys kertoo valosta hallissa, ei kuva-parallaksista. */
  --hero-beam-breathe-opacity: 0.78;
  --hero-beam-breathe-scale: 1.015;
  --dur-hero-beam-breathe: 4600ms;
  --hero-mobile-copy-padding-top: clamp(1.5rem, 5vw, 2.5rem);

  /* §31: hero-load-timelinen kestot ja aloitushetket */
  --dur-hero-redline: 1100ms;
  --dur-hero-title: 720ms;
  --dur-hero-title-accent: 680ms;
  --dur-hero-copy: 520ms;
  --dur-hero-visual: 1200ms;
  --dur-hero-chips: 420ms;
  --dur-hero-chains: 480ms;
  --stagger-hero-title: 72ms;
  --stagger-hero-copy: 45ms;
  --stagger-hero-chips: 36ms;
  --stagger-hero-chains: 40ms;
  --at-hero-title: 320ms;
  --at-hero-title-accent: 500ms;
  --at-hero-copy: 500ms;
  --at-hero-visual: 350ms;
  --at-hero-beam: 220ms;
  --at-hero-rays: 420ms;
  --at-hero-chips: 740ms;
  --at-hero-chains: 880ms;
}

/* Matalilla desktop-nakymilla heron pystyrytmi tiivistyy tokeneista, ei
   rakenteesta: sama sisalto, pienemmat valit ja tarvittaessa otsikko. */
@media (min-width: 961px) and (max-height: 980px) {
  :root {
    --hero-pad-top-fluid: clamp(1.25rem, 2.6vw, 2.25rem);
    --hero-copy-padding-block: 0.5rem;
    --hero-title-margin: 0.9rem;
    --hero-lead-margin: 1rem;
    --hero-action-margin: 1.25rem;
    --hero-chip-margin: 1.25rem;
  }
}

@media (min-width: 961px) and (max-height: 840px) {
  :root {
    --fs-display: clamp(3.1rem, 4.6vw, 4.4rem);
    --hero-pad-top-fluid: 0.75rem;
    --hero-copy-padding-block: 0.25rem;
    --hero-chip-margin: 1rem;
  }
}