/* ============================================================
   STUDIO_NAME — shared stylesheet  (v2 art direction)
   Warm-cream canvas · deep ink · indigo highlighter · coral spark.
   Bold display type, mono labels, pill buttons with a hard offset
   shadow, playful marks. Inspired by the energy of confident local
   brands — not a copy of any. Vanilla, zero-dependency.
   Cascade ordered with @layer. Brand lives in :root tokens.
   ============================================================ */
@layer reset, tokens, base, layout, components, utilities;

/* ---------- display webfont (self-hosted, OFL) ----------
   Archivo Black is single-weight; declaring a 100..900 range lets any
   requested weight match this one face (no synthetic bold), while the
   system fallback stays heavy at the weight the element asks for. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg, picture { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3 { line-height: 1; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; }
  :target { scroll-margin-top: 6rem; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* palette — warm canvas, deep ink, indigo primary, coral spark */
    --paper:    #F7F2E9;   /* page canvas (warm porcelain) */
    --paper-2:  #FFFFFF;   /* cards pop against the cream */
    --ink:      #17151F;   /* near-black, faint indigo warmth */
    --ink-soft: #55505F;
    --indigo:   #4F46E5;   /* primary + highlighter */
    --indigo-deep:#3A32B8;
    --spark:    #FF6B44;   /* coral pop — tags, marks, accents */
    --lime:     #D6F24A;   /* rare third pop for small tags */
    --line:     #E7DDCB;   /* warm hairline */

    /* type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* fluid type scale */
    --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
    --step-0:  clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
    --step-2:  clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem);
    --display: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem);   /* hero — sized to sit above the fold */
    --display-2: clamp(2rem, 1.5rem + 3vw, 3.6rem); /* section titles */

    /* spacing */
    --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
    --sp-5:2rem; --sp-6:3rem; --sp-7:4.5rem; --sp-8:6.5rem;

    --container: 78rem;
    --radius: 16px;
    --radius-lg: 28px;
    --pill: 999px;
    --shadow-hard: 4px 4px 0 var(--ink);
    --shadow-soft: 0 18px 40px -20px rgba(23,21,31,.35);
    --ring: 0 0 0 3px rgba(79,70,229,.4);
    --transition: .6s cubic-bezier(.16,1,.3,1);
  }
}

/* ---------- base ---------- */
@layer base {
  html { scroll-behavior: smooth; overflow-x: clip; } /* clip (not hidden) keeps overflow-y visible → no broken scroll/sticky; stops sliver horizontal-scroll on mobile */
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--font);
    font-size: var(--step-0);
    color: var(--ink);
    background: var(--paper);
  }

  h1, h2 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-synthesis: none; /* never fake-bold the fallback */
  }
  h1 { font-size: var(--display); }
  h2 { font-size: var(--display-2); }
  h3 { font-size: var(--step-1); font-weight: 750; letter-spacing: -0.01em; }

  /* mono label — eyebrows, nav, buttons, tags */
  .label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--step--1);
    font-weight: 500;
  }

  :where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: none; box-shadow: var(--ring); border-radius: 6px;
  }

  .skip {
    position: absolute; left: 8px; top: -60px;
    background: var(--ink); color: var(--paper); padding: .6rem 1rem;
    border-radius: 10px; z-index: 100; transition: top .2s;
  }
  .skip:focus { top: 8px; }
}

/* ---------- layout ---------- */
@layer layout {
  .container {
    width: 100%; max-width: var(--container);
    margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem);
  }
  .section { padding-block: clamp(3.5rem, 8vw, var(--sp-8)); position: relative; }
  .stack > * + * { margin-top: var(--flow, 1rem); }
  .grid-auto {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

/* ---------- components ---------- */
@layer components {

  /* highlighter — the signature move: a word on a coloured bar */
  .mark {
    display: inline-block; padding: 0 .28em .06em;
    border-radius: 12px; color: var(--paper);
    transform: rotate(-1.4deg);
  }
  .mark--indigo { background: var(--indigo); }
  .mark--spark  { background: var(--spark); color: var(--ink); }

  /* sparkle / decorative marks */
  .spark-mark { position: absolute; pointer-events: none; z-index: 0; }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 52px; padding: .85rem 1.5rem;
    border-radius: var(--pill); border: 2px solid var(--ink);
    background: var(--paper-2); color: var(--ink);
    font-family: var(--mono); text-transform: uppercase;
    letter-spacing: .08em; font-size: var(--step--1); font-weight: 600;
    text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow-hard);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  }
  .btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
  .btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
  .btn--primary { background: var(--indigo); color: var(--paper); }
  .btn--spark   { background: var(--spark); color: var(--ink); }
  .btn--lg { min-height: 58px; padding: 1rem 1.8rem; font-size: var(--step-0); }

  /* tag — small mono chip */
  .tag {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
    font-size: var(--step--1); font-weight: 600;
    padding: .45rem .8rem; border-radius: var(--pill);
    border: 2px solid var(--ink);
  }
  .tag--lime  { background: var(--lime); color: var(--ink); }
  .tag--spark { background: var(--spark); color: var(--ink); }
  .tag--paper { background: var(--paper-2); color: var(--ink); }

  /* header / nav */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 2px solid var(--ink);
  }
  .nav { display: flex; align-items: center; justify-content: space-between;
    min-height: 70px; gap: 1rem; }
  .brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
    font-size: 1.15rem; text-transform: uppercase; text-decoration: none; color: var(--ink);
  }
  .brand__mark { width: 34px; height: 34px; flex: none; }
  .nav__menu { display: flex; align-items: center; gap: .3rem; }
  .nav__links { display: flex; align-items: center; gap: .15rem; }
  .nav__links a {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
    font-size: var(--step--1); font-weight: 500;
    padding: .55rem .7rem; border-radius: 10px; text-decoration: none;
    color: var(--ink-soft);
  }
  .nav__links a:hover { color: var(--ink); }
  .nav__links a[aria-current="page"] {
    color: var(--ink); text-decoration: underline; text-decoration-color: var(--spark);
    text-decoration-thickness: 3px; text-underline-offset: 5px;
  }
  .nav__cta { margin-left: .5rem; min-height: 44px; padding: .55rem 1.1rem; box-shadow: 3px 3px 0 var(--ink); }
  .nav__toggle {
    display: none; width: 50px; height: 50px; align-items: center; justify-content: center;
    background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px;
    box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  }
  .nav__toggle svg { width: 22px; height: 22px; }

  @media (max-width: 52rem) {
    .nav__toggle { display: inline-flex; }
    .nav__menu {
      position: absolute; inset: 70px 0 auto 0; display: grid; gap: .3rem;
      padding: 1rem clamp(1.1rem,4vw,2.5rem) 1.4rem;
      background: var(--paper); border-bottom: 2px solid var(--ink);
      clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
      transition: clip-path .3s ease, opacity .2s ease;
    }
    .nav__menu[data-open="true"] { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
    .nav__links { flex-direction: column; align-items: stretch; }
    .nav__links a { padding: .8rem .7rem; font-size: var(--step-0); }
    .nav__cta { margin: .4rem 0 0; justify-content: center; }
  }

  /* hero */
  .hero { padding-block: clamp(1.6rem, 3.5vw, 2.8rem) clamp(2.5rem,6vw,4rem); overflow: hidden; }
  .hero__grid { display: grid; gap: clamp(1.6rem,4vw,3rem); align-items: center;
    grid-template-columns: 1fr; }
  @media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
  .hero__eyebrow { color: var(--ink-soft); margin-bottom: 1rem; display: inline-block; }
  .hero h1 { position: relative; z-index: 1; line-height: .95; }
  .hero h1 .line { display: block; }
  .hero__lead { margin-top: 1.2rem; font-size: var(--step-1); color: var(--ink-soft);
    max-width: 38ch; text-transform: none; font-weight: 400; letter-spacing: normal; }
  .hero__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

  /* hero visual panel */
  .hero__panel {
    position: relative; border-radius: var(--radius-lg);
    border: 2px solid var(--ink); background: var(--paper-2);
    box-shadow: var(--shadow-hard); padding: clamp(1.3rem,2.5vw,1.8rem);
    display: grid; gap: .8rem; min-height: 0; align-content: center;
  }
  .hero__panel .big-num { font-family: var(--font-display); font-size: clamp(3rem,7vw,5rem);
    font-weight: 800; letter-spacing: -0.02em; line-height: .9; font-synthesis: none; }
  .stat-row { display: flex; flex-wrap: wrap; gap: .6rem; }

  /* generic section head */
  .section__head { max-width: 40ch; margin-bottom: clamp(1.8rem,4vw,2.8rem); }
  .section__head .label { color: var(--spark); font-weight: 600; }
  .section__head h2 { margin-top: .7rem; }
  .section__head p { margin-top: .9rem; color: var(--ink-soft); font-size: var(--step-1);
    text-transform: none; }
  .eyebrow { color: var(--spark); }

  /* cards / pillars */
  .card {
    background: var(--paper-2); border: 2px solid var(--ink);
    border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-hard);
  }
  /* pricing plans: equal-height cards with the CTA pinned to the bottom */
  .plans .card { display: flex; flex-direction: column; }
  .plans .card .btn { margin-top: auto; }
  /* pillars — B&S-style stat cards: pill tag + bold hook + one line */
  .pillar { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
  .pillar:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
  .pillar__tag {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
    font-size: var(--step--1); font-weight: 600;
    border: 2px solid var(--ink); border-radius: 999px; padding: .32rem .8rem;
  }
  .pillar__tag .star { color: var(--spark); }
  .pillar__stat {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1; margin: 1rem 0 .5rem;
  }
  .pillar p { color: var(--ink-soft); font-size: var(--step-0); }

  /* steps — the 4-step process */
  .steps { display: grid; gap: 1.1rem; counter-reset: step;
    grid-template-columns: 1fr; }
  @media (min-width: 40rem){ .steps { grid-template-columns: repeat(2,1fr); } }
  @media (min-width: 64rem){ .steps { grid-template-columns: repeat(4,1fr); } }
  .step {
    counter-increment: step; position: relative;
    background: var(--paper-2); border: 2px solid var(--ink);
    border-radius: var(--radius); padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-hard);
  }
  .step__num {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; border: 2px solid var(--ink); background: var(--lime);
    font-family: var(--mono); font-weight: 700; margin-bottom: 1rem;
  }
  .step:nth-child(2) .step__num { background: var(--spark); }
  .step:nth-child(3) .step__num { background: var(--indigo); color: var(--paper); }
  .step:nth-child(4) .step__num { background: var(--ink); color: var(--paper); }
  .step__num::before { content: counter(step); }
  .step h3 { margin-bottom: .35rem; text-transform: uppercase; }
  .step p { color: var(--ink-soft); font-size: var(--step--1); }

  /* pricing band */
  .price-band { display: grid; gap: 1.5rem; align-items: stretch; grid-template-columns: 1fr; }
  @media (min-width: 54rem){ .price-band { grid-template-columns: 1.1fr .9fr; } }
  .price-figure {
    background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
    border-radius: var(--radius-lg); padding: clamp(1.8rem,4vw,2.6rem);
    box-shadow: var(--shadow-hard);
  }
  .price-figure .big { font-family: var(--font-display); font-size: clamp(2.6rem,6vw,4rem);
    font-weight: 800; letter-spacing: -0.02em; font-synthesis: none; }
  .price-figure .sub { color: #C9C4D4; margin-top: .3rem; font-family: var(--mono);
    text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); }
  .price-figure ul { list-style: none; margin-top: 1.4rem; display: grid; gap: .7rem; }
  .price-figure li { display: flex; gap: .7rem; align-items: flex-start; color: #ECE9F2; }
  .price-figure li svg { width: 22px; height: 22px; flex: none; color: var(--lime); margin-top: .1rem; }

  /* closing CTA */
  .cta-panel {
    position: relative; overflow: hidden; text-align: center;
    border: 2px solid var(--ink); border-radius: var(--radius-lg);
    padding: clamp(2.5rem,7vw,4.5rem); background: var(--indigo);
    color: var(--paper); box-shadow: var(--shadow-hard);
  }
  .cta-panel h2 { color: var(--paper); }
  .cta-panel p { color: #E4E1FB; margin: 1rem auto 1.8rem; max-width: 42ch; text-transform: none; }
  .cta-panel .btn { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35); }

  /* contact layout + form */
  .contact-grid { display: grid; gap: clamp(1.6rem,4vw,3rem); grid-template-columns: 1fr; }
  @media (min-width: 56rem){ .contact-grid { grid-template-columns: .9fr 1.1fr; } }
  .form-card {
    background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hard); padding: clamp(1.5rem,3.5vw,2.4rem);
  }
  .field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
  .field > label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
    font-size: var(--step--1); font-weight: 600; }
  .field .opt { color: var(--ink-soft); text-transform: none; letter-spacing: normal; }
  .field input, .field textarea {
    width: 100%; padding: .8rem .9rem; border: 2px solid var(--ink);
    border-radius: 12px; background: var(--paper); font-size: var(--step-0);
  }
  .field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: var(--ring); }
  .field textarea { min-height: 140px; resize: vertical; }
  .form-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: .5rem; }
  .contact-aside .stack > * + * { margin-top: 1.3rem; }
  .next-list { list-style: none; display: grid; gap: .8rem; }
  .next-list li { display: flex; gap: .7rem; align-items: flex-start; }
  .next-list .n { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; border: 2px solid var(--ink); background: var(--lime);
    font-family: var(--mono); font-weight: 700; font-size: .85rem; }

  /* scroll progress bar (injected by JS) */
  .scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 100;
    transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--indigo), var(--spark));
    pointer-events: none;
  }

  /* marquee ribbon — replaces a wall of text with motion */
  .marquee { overflow: hidden; background: var(--ink); color: var(--paper);
    border-block: 2px solid var(--ink); padding-block: 1rem; }
  .marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
  .marquee__group { display: inline-flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
  .marquee__group span { font-family: var(--font-display); text-transform: uppercase;
    font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: -0.01em; }
  .marquee__group .star { color: var(--spark); }

  /* process line — compact 4-step visual (home teaser) */
  .process { position: relative; display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 48rem){ .process { grid-template-columns: repeat(4, 1fr); } }
  .process__step { position: relative; z-index: 1; text-align: center; }
  .process__node { width: 62px; height: 62px; margin: 0 auto .9rem; display: grid; place-items: center;
    border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-2);
    font-family: var(--mono); font-weight: 700; box-shadow: var(--shadow-hard); }
  .process__step:nth-child(1) .process__node { background: var(--lime); }
  .process__step:nth-child(2) .process__node { background: var(--spark); }
  .process__step:nth-child(3) .process__node { background: var(--indigo); color: var(--paper); }
  .process__step:nth-child(4) .process__node { background: var(--ink); color: var(--paper); }
  .process__step b { display: block; font-family: var(--font-display); text-transform: uppercase;
    font-size: var(--step-0); letter-spacing: -0.01em; }
  .process__line { display: none; }
  @media (min-width: 48rem){
    .process__line { display: block; position: absolute; top: 31px; left: 12.5%; right: 12.5%;
      height: 3px; background: var(--line); z-index: 0; overflow: hidden; }
    .process__line::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%;
      transform: scaleX(0); background: linear-gradient(90deg, var(--indigo), var(--spark)); }
  }

  /* count-up numbers */
  .count { font-variant-numeric: tabular-nums; }

  /* 'everything handled' — checklist band (replaces the loose card grid) */
  .handled { background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
    padding: clamp(1.6rem,4vw,2.6rem); display: grid; gap: 1.4rem 2.5rem; grid-template-columns: 1fr; }
  @media (min-width: 42rem){ .handled { grid-template-columns: 1fr 1fr; } }
  .handled__item { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: start; }
  .handled__item .tick { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); }
  .handled__item .tick svg { width: 18px; height: 18px; }
  .handled__item b { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-0);
    letter-spacing: -0.01em; grid-column: 2; }
  .handled__item span { color: #C9C4D4; font-size: var(--step--1); grid-column: 2; }

  /* page closers — a distinct one per page (not one repeated block) */
  .closer { text-align: center; padding-block: clamp(3rem, 7vw, 5rem); }
  .closer h2 { font-size: var(--display); }
  .closer p { color: var(--ink-soft); margin: 1rem auto 1.7rem; max-width: 40ch; text-transform: none; }
  .closer--ink { background: var(--ink); color: var(--paper); border-block: 2px solid var(--ink); }
  .closer--ink h2 { color: var(--paper); }
  .closer--ink p { color: #C9C4D4; }
  .closer--ink .btn { background: var(--lime); color: var(--ink); }
  .closer--spark { background: var(--spark); color: var(--ink); border-block: 2px solid var(--ink); }
  .closer--spark p { color: var(--ink); }
  .closer--spark .btn { background: var(--ink); color: var(--paper); }
  .closer__inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
    justify-content: center; }

  /* footer */
  .site-footer { background: var(--ink); color: #C9C4D4;
    padding-block: clamp(2.5rem,6vw,4rem); font-size: var(--step--1); }
  .site-footer a { color: var(--paper); text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; text-decoration-color: var(--spark); }
  .footer-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); }
  .footer-brand { color: var(--paper); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
  .footer-col .label { color: var(--spark); display: block; margin-bottom: .6rem; }
  .footer-bottom { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
    display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between; }
}

/* ---------- utilities ---------- */
@layer utilities {
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  .measure { max-width: 60ch; }
  .visually-hidden { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .section--alt { background:
      linear-gradient(0deg, transparent 0 1.6rem, var(--paper) 1.6rem),
      repeating-linear-gradient(45deg, transparent 0 10px, rgba(23,21,31,.02) 10px 20px); }
}

/* ---------- scroll reveals (progressive, GPU-only) ----------
   Gated on html.js so content is ALWAYS visible without JS. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity var(--transition), transform var(--transition);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  /* directional reveal variants — more dynamic than a uniform fade-up */
  html.js .reveal--left  { transform: translateX(-30px); }
  html.js .reveal--right { transform: translateX(30px); }
  html.js .reveal--scale { transform: scale(.93); }
  html.js .reveal--left.is-visible,
  html.js .reveal--right.is-visible,
  html.js .reveal--scale.is-visible { transform: none; }

  /* marquee motion (paused on hover) */
  .marquee__track { animation: marquee 34s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* scroll-driven effects where supported (zero JS) — parallax marks + the
     process line filling as it scrolls into view. Non-supporting browsers
     simply get the static state. */
  @supports (animation-timeline: view()) {
    .parallax { animation: parallax-rise linear both; animation-timeline: view();
      animation-range: entry 0% exit 100%; }
    .process__line::after { animation: fill-x linear both; animation-timeline: view();
      animation-range: cover 0% cover 55%; }
  }
}
@keyframes parallax-rise { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
@keyframes fill-x { to { transform: scaleX(1); } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Lenis smooth scroll (self-hosted; JS-activated) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }