/* =========================================================
   NOSSA LAVOURA · 45 ANOS — landing page única
   Consome os tokens de tokens.css (Nossa Lavoura 45 Anos Design System).

   Estrutura: página sem header, hero de tela cheia e o selo 3D como
   fundo fixo da página inteira — a rolagem monta o selo ao longo da
   leitura. O chão é terra para o render do selo aparecer; o creme
   volta nas superfícies de conteúdo (cards e painéis).
   ========================================================= */

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--surface-inverse-deep);
  color:var(--text-on-inverse);
  overflow-x:hidden;
}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}

.wrap{
  width:100%;max-width:var(--content-max);
  margin-inline:auto;padding-inline:var(--gutter-page);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--creme-500);color:var(--terra-900);
  padding:var(--space-3) var(--space-5);
  border-radius:0 0 var(--radius-control) 0;
  font-weight:var(--weight-bold);
}
.skip:focus{left:0}

/* ---------------------------------------------------------
   Bandas
   --------------------------------------------------------- */
/* Bandas chapadas, encostadas: a borda da banda é o divisor. */
.band{
  padding-block:var(--section-y);
  position:relative;overflow:hidden;
  background:var(--surface-inverse-deep);
}
.band--veil{background:var(--surface-inverse)}
.band--accent{background:var(--surface-accent);color:var(--text-on-accent)}

/* ---------------------------------------------------------
   Tipografia
   --------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);font-weight:var(--weight-bold);
  font-size:var(--text-label);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--lima-500);
  margin:0 0 var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{
  content:"";width:var(--space-6);height:var(--border-width-thick);
  background:currentColor;flex:none;
}
.eyebrow--center{justify-content:center}
.eyebrow--on-accent{color:var(--terra-900)}

.h2{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-display);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--creme-500);margin:0 0 var(--space-5);
  text-wrap:balance;
}
.h2--center{text-align:center}

.lead{
  font-size:var(--text-lead);font-weight:var(--weight-light);
  line-height:var(--leading-normal);
  color:var(--text-on-inverse-muted);
  max-width:var(--measure-prose);margin:0;
}
.lead--center{text-align:center;margin-inline:auto}
.lead--on-accent{color:var(--terra-700)}

.prose{display:flex;flex-direction:column;gap:var(--space-5)}
.prose p{
  max-width:var(--measure-prose);font-size:var(--text-body-lg);
  color:var(--text-on-inverse-muted);
}
.prose--center{align-items:center}
.prose--center p{text-align:center}
.prose__lead{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--creme-500);
  padding-left:var(--space-5);
  border-left:var(--border-width-slab) solid var(--border-accent);
}

/* ---------------------------------------------------------
   Botões (espelham components/core/Button.jsx)
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-body);font-weight:var(--weight-bold);
  font-size:var(--text-body-md);letter-spacing:0.06em;
  text-transform:uppercase;line-height:1;text-decoration:none;
  padding:14px 26px;border-radius:var(--radius-control);
  border:var(--border-width-thick) solid transparent;
  cursor:pointer;transition:var(--transition-control);
  min-height:48px; /* alvo de toque confortável */
}
.btn--lg{font-size:var(--text-body-lg);padding:18px 32px;border-radius:var(--radius-md)}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--lima-500);color:var(--text-on-accent);border-color:var(--lima-500)}
.btn--primary:hover{background:var(--lima-600);border-color:var(--lima-600)}
.btn--secondary{background:var(--terra-700);color:var(--creme-500);border-color:var(--terra-700)}
.btn--secondary:hover{background:var(--terra-900);border-color:var(--terra-900)}
.btn--on-dark{background:var(--creme-500);color:var(--terra-900);border-color:var(--creme-500)}
.btn--on-dark:hover{background:var(--lima-500);border-color:var(--lima-500)}

.btn__seta{width:18px;height:18px;fill:currentColor;flex:none}
.btn--lg .btn__seta{width:22px;height:22px}

/* ---------- Octógono: fragmento de canto, duas faces ---------- */
.oct{position:absolute;pointer-events:none;display:block}
.oct--tl{left:0;top:0;transform:rotate(90deg)}
.oct--br{right:0;bottom:0;transform:rotate(270deg)}

/* =========================================================
   01 · HERO — a foto cobre a tela inteira
   ========================================================= */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:var(--space-9) var(--space-10);
  overflow:hidden;
}
.hero__kv{position:absolute;inset:0;z-index:-2}
.hero__kv img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
/* Proteção do sistema: terra por cima, e o pé funde na cor do chão. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--terra-900) 82%,transparent) 0%,
    color-mix(in srgb,var(--terra-900) 34%,transparent) 34%,
    color-mix(in srgb,var(--terra-900) 64%,transparent) 68%,
    var(--terra-900) 100%);
}

.hero__in{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;gap:var(--space-8);
}
.hero__selo{
  width:100%;max-width:440px;margin-inline:auto;
  filter:drop-shadow(var(--shadow-lifted));
}
.hero__h1{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-hero);line-height:var(--leading-tight);
  letter-spacing:var(--tracking-hero);
  color:var(--creme-500);margin:0 0 var(--space-5);
  max-width:16ch;text-wrap:balance;
}
.hero__h1 em{font-style:normal;color:var(--lima-500)}
.hero__sub{
  font-size:var(--text-lead);font-weight:var(--weight-light);
  color:var(--creme-500);opacity:.94;
  max-width:52ch;margin:0 0 var(--space-6);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__cue{
  position:absolute;bottom:var(--space-6);left:0;right:0;
  text-align:center;
  font-family:var(--font-body);font-weight:var(--weight-bold);
  font-size:var(--text-label);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--creme-500);opacity:.66;
}

/* ---------- Tarja de campanha ---------- */
.tarja{
  position:sticky;bottom:0;z-index:90;
  background:var(--surface-accent);color:var(--text-on-accent);
  border-top:var(--border-width-thick) solid var(--terra-700);
}
.tarja__in{
  display:flex;align-items:center;gap:var(--space-4);
  padding-block:var(--space-3);flex-wrap:wrap;
}
.tarja p{margin:0;font-size:var(--text-body-md)}
.tarja b{font-weight:var(--weight-bold)}
.tarja a{
  margin-left:auto;font-weight:var(--weight-bold);
  font-size:var(--text-body-sm);letter-spacing:0.06em;
  text-transform:uppercase;white-space:nowrap;color:var(--terra-900);
}

/* =========================================================
   02 · NÚMEROS
   ========================================================= */
.nums{padding-block:var(--space-8)}
.nums__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.num{
  text-align:center;padding:var(--space-4);
  border-top:var(--border-width-slab) solid var(--border-accent);
}
.num__n{
  display:block;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-display);line-height:var(--leading-tight);
  letter-spacing:var(--tracking-hero);
  color:var(--lima-500);font-variant-numeric:tabular-nums;
}
.num__l{
  display:block;margin:var(--space-3) auto 0;
  font-size:var(--text-body-md);color:var(--text-on-inverse-muted);
  max-width:24ch;
}

/* =========================================================
   03 · MANIFESTO
   ========================================================= */
.manif__grid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:var(--space-8);align-items:center;
}
.manif__fig{margin:0}
.manif__fig img{
  width:100%;border-radius:var(--radius-surface);
  aspect-ratio:4/5;object-fit:cover;object-position:50% 78%;
}
.manif__fig figcaption{
  margin-top:var(--space-4);font-size:var(--text-body-sm);
  color:var(--text-on-inverse-muted);
  padding-left:var(--space-4);
  border-left:var(--border-width-thick) solid var(--border-accent);
}

/* =========================================================
   04 · LINHA DO TEMPO
   ========================================================= */
.tl__scroller{
  margin-top:var(--space-7);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline:var(--gutter-page);padding-bottom:var(--space-3);
  scrollbar-width:thin;scrollbar-color:var(--lima-600) transparent;
}
.tl__rail{
  list-style:none;margin:0 auto;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:240px;
  gap:var(--space-5);position:relative;width:max-content;
  padding-top:var(--space-7);
}
.tl__rail::before{
  content:"";position:absolute;left:0;right:0;top:15px;
  height:var(--border-width-slab);
  background:var(--border-on-inverse);
}
.tl__item{position:relative;scroll-snap-align:start}
.tl__dot{
  position:absolute;top:-34px;left:0;
  width:var(--space-5);height:var(--space-5);border-radius:var(--radius-pill);
  background:var(--lima-500);
  border:var(--border-width-slab) solid var(--terra-900);
  box-shadow:0 0 0 var(--border-width-thick) var(--lima-500);
}
.tl__item--now .tl__dot{background:var(--creme-500)}
.tl__y{
  display:block;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);color:var(--lima-500);
  line-height:1;margin-bottom:var(--space-2);
}
.tl__t{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);color:var(--creme-500);
  margin:0 0 var(--space-2);line-height:var(--leading-snug);
}
.tl__item p{margin:0;font-size:var(--text-body-md);color:var(--text-on-inverse-muted)}

/* =========================================================
   05 · VT
   ========================================================= */
.vt__player{
  margin:var(--space-7) auto 0;max-width:980px;position:relative;
  border-radius:var(--radius-surface);overflow:hidden;
  background:var(--terra-900);aspect-ratio:16/9;
}
.vt__poster{position:absolute;inset:0}
.vt__poster > img:first-child{width:100%;height:100%;object-fit:cover}
.vt__poster::after{content:"";position:absolute;inset:0;background:var(--overlay-protection)}
.vt__seal{
  position:absolute;left:50%;top:38%;translate:-50% -50%;
  width:min(30%,200px);z-index:1;
  filter:drop-shadow(var(--shadow-lifted));
}
.vt__play{position:absolute;left:50%;bottom:var(--space-5);translate:-50% 0;z-index:1}
.vt__play:active{transform:translate(-50%,1px)}
.vt video{width:100%;height:100%;object-fit:cover}
.vt__missing{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  margin:0;text-align:center;max-width:32ch;
  color:var(--creme-500);font-size:var(--text-body-md);
  background:var(--surface-scrim);
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-card);
}
.vt__txt{
  max-width:var(--measure-prose);margin:var(--space-7) auto 0;
  text-align:center;color:var(--text-on-inverse-muted);
  font-size:var(--text-lead);font-weight:var(--weight-light);
}
.vt__txt p{margin:0}

/* =========================================================
   06 · GRATIDÃO — cards creme sobre o fundo escuro
   ========================================================= */
.grat__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);margin-top:var(--space-7);
}
.gcard,.cat,.icard{
  background:var(--surface-card);
  border-radius:var(--radius-card);
  padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.gcard h3{font-size:var(--text-h3);color:var(--text-strong);text-wrap:balance}
.gcard p,.cat__d{margin:0;font-size:var(--text-body-md);color:var(--text-body)}
.grat__end{
  margin:var(--space-7) 0 0;text-align:center;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);letter-spacing:var(--tracking-display);
  color:var(--lima-500);
}

/* =========================================================
   07 · SEMANA — a faixa de campanha
   ========================================================= */
.semana__in{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:1;
}
.semana__h2{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-display);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--terra-900);margin:0 0 var(--space-5);
  max-width:20ch;text-wrap:balance;
}
.semana__lead{margin-bottom:var(--space-7)}
.semana__box{
  background:var(--terra-700);color:var(--creme-500);
  border-radius:var(--radius-card);
  padding:var(--space-6) var(--space-7);
  margin-bottom:var(--space-7);
  box-shadow:var(--shadow-slab-md);
  max-width:100%;
}
.semana__box strong{
  display:block;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
}
.cd{display:flex;gap:var(--space-5);justify-content:center;margin-top:var(--space-5)}
.cd > div{display:flex;flex-direction:column;align-items:center;min-width:52px}
.cd b{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);line-height:1;color:var(--lima-500);
  font-variant-numeric:tabular-nums;
}
.cd span{
  font-size:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-on-inverse-muted);
  margin-top:var(--space-2);
}

/* =========================================================
   08 · CATEGORIAS
   ========================================================= */
.cats__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);margin-top:var(--space-7);
}
.cat__k{
  margin:0;font-family:var(--font-body);font-weight:var(--weight-bold);
  font-size:var(--text-label);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-accent);
}
.cat__t{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--text-strong);margin:0;text-wrap:balance;
}
.cats__note{
  margin:var(--space-7) auto 0;text-align:center;
  font-size:var(--text-body-sm);color:var(--text-on-inverse-muted);
  max-width:70ch;
}

/* =========================================================
   09 · ACELERA
   ========================================================= */
.acel__h2{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-display);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--creme-500);margin:0 0 var(--space-5);
  max-width:22ch;text-wrap:balance;
}
.acel__mec{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);margin:var(--space-6) 0 var(--space-5);max-width:760px;
}
.mec{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--space-1) var(--space-4);
  background:var(--surface-card-inverse);
  border-radius:var(--radius-card);
  padding:var(--space-4) var(--space-5);
}
.mec__v{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);color:var(--lima-500);line-height:1;
}
.mec__l{font-size:var(--text-body-md);color:var(--text-on-inverse-muted)}
.mec__c{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-body-lg);color:var(--creme-500);white-space:nowrap;
}
.acel__vig{font-size:var(--text-body-sm);color:var(--text-on-inverse-muted);margin:0 0 var(--space-5)}

/* =========================================================
   10 · CAFÉ
   ========================================================= */
.cafe__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.cafe__call{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);
  color:var(--lima-500);margin:0 0 var(--space-4);max-width:26ch;
}
.cafe__cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);margin-top:var(--space-7);
  width:100%;max-width:720px;
}
.icard{align-items:center;gap:var(--space-2)}
.icard__k{
  margin:0;font-family:var(--font-body);font-weight:var(--weight-bold);
  font-size:var(--text-label);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-accent);
}
.icard__v{
  margin:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);color:var(--text-strong);
}
.cafe__end{
  margin:var(--space-7) 0 0;font-size:var(--text-lead);
  font-weight:var(--weight-light);max-width:46ch;
  color:var(--text-on-inverse-muted);
}

/* =========================================================
   11 · LOJAS
   ========================================================= */
.lojas__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.lojas__uf{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-5);margin:var(--space-7) 0;
}
.uf{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-1);width:clamp(112px,26vw,156px);aspect-ratio:1;
  background:var(--surface-card);color:var(--terra-900);
  border-radius:var(--radius-card);
}
.uf b{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);line-height:1;letter-spacing:var(--tracking-display);
}
.uf span{font-size:var(--text-body-md);color:var(--text-body)}

/* =========================================================
   12 · FECHAMENTO
   ========================================================= */
.fim{padding-block:var(--space-9) var(--space-10)}
.fim__in{display:flex;flex-direction:column;align-items:center}
.lockup{
  margin:var(--space-7) 0 var(--space-6);text-align:center;
  display:flex;flex-direction:column;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h2);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display);color:var(--creme-500);
}
.lockup__b{color:var(--lima-500)}

/* =========================================================
   13 · RODAPÉ
   ========================================================= */
.ft{background:var(--surface-inverse);color:var(--text-on-inverse-muted);padding-block:var(--space-8)}
.ft__in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(190px,auto) minmax(0,1.1fr);
  gap:var(--space-7);align-items:start;
}
.ft__brand{display:flex;align-items:center;gap:var(--space-4)}
.ft__brand img{width:72px;flex:none}
.ft__sig{margin:0;font-size:var(--text-body-md);line-height:var(--leading-snug)}
.ft__sig b{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--creme-500);font-size:var(--text-body-lg)}
.ft__nav{display:flex;flex-direction:column;gap:var(--space-3)}
.ft__nav a{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--text-body-md)}
.ft__nav a:hover{color:var(--lima-500)}
.ft__legal{font-size:var(--text-body-sm);line-height:var(--leading-normal);text-align:right}
.ft__legal p{margin:0 0 var(--space-1)}

/* =========================================================
   Entrada em cena: fade + translate de 8px
   ========================================================= */
[data-reveal]{
  opacity:0;translate:0 8px;
  transition:opacity var(--dur-slow) var(--ease-out-firm),
             translate var(--dur-slow) var(--ease-out-firm);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;translate:0 0}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:900px){
  .ft__in{grid-template-columns:1fr;gap:var(--space-6)}
  .ft__legal{text-align:left}
  .grat__grid{grid-template-columns:1fr}
  .cats__grid{grid-template-columns:repeat(2,1fr)}
  .manif__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .manif__fig{order:2}
  .manif__fig img{aspect-ratio:16/10}
}

@media(max-width:760px){
  :root{--section-y:var(--space-8)}

  .hero{padding-block:var(--space-8) var(--space-9)}
  .hero__in{grid-template-columns:1fr;gap:var(--space-5)}
  .hero__selo{order:-1;max-width:min(56vw,260px)}
  .hero__h1{max-width:none}
  .hero__sub{font-size:var(--text-body-lg)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}

  .nums__grid{grid-template-columns:1fr;gap:var(--space-4)}
  .num{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:var(--space-4);text-align:left;padding:var(--space-4) 0;
  }
  .num__l{margin:0;max-width:none}

  /* Trilho vertical */
  .tl__scroller{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .tl__rail{
    grid-auto-flow:row;grid-auto-columns:auto;width:auto;
    padding-top:0;padding-left:var(--space-6);gap:var(--space-6);
  }
  .tl__rail::before{
    left:10px;right:auto;top:var(--space-2);bottom:var(--space-2);
    width:var(--border-width-slab);height:auto;
  }
  .tl__dot{top:var(--space-1);left:calc(var(--space-6) * -1)}

  .cats__grid{grid-template-columns:1fr}
  .cafe__cards{grid-template-columns:1fr}
  .acel__mec{grid-template-columns:1fr}
  .mec{grid-template-columns:1fr auto}
  .mec__l{grid-column:1;grid-row:2}
  .mec__c{grid-column:2;grid-row:1/3;align-self:center}

  .semana__box{padding:var(--space-5)}
  .semana__in .btn,.lojas__in .btn,.fim__in .btn{width:100%}
  .cd{gap:var(--space-4)}

  /* Player: o botão sai de cima do selo e vai para o rodapé do pôster. */
  .vt__poster{display:flex;flex-direction:column;justify-content:flex-end}
  .vt__play{
    position:relative;left:auto;bottom:auto;translate:none;
    margin:auto var(--space-5) var(--space-5);
  }
  .vt__seal{top:34%}

  /* Três estados em uma linha só: quebrar 2+1 fica torto. */
  .lojas__uf{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--space-3);width:100%;
  }
  .uf{width:auto}
  .ft__brand{flex-direction:column;align-items:flex-start}
}

/* Telas baixas: comprime o hero para os botões caberem na dobra. */
@media(max-width:760px) and (max-height:720px){
  .hero{padding-block:var(--space-6) var(--space-7)}
  .hero__in{gap:var(--space-4)}
  .hero__selo{max-width:min(42vw,180px)}
  .hero__h1{font-size:var(--text-display)}
  .hero__sub{font-size:var(--text-body-md);margin-bottom:var(--space-5)}
}

@media(max-width:400px){
  .tl__rail{padding-left:var(--space-5)}
  .tl__dot{left:calc(var(--space-5) * -1)}
}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;translate:0 0}
}