/* ══════════════════════════════════════════════════════════════
   CHRONOS ADS · site
   Sistema de 3 cores + branco. Regras herdadas da identidade:
   · #EFEEE9 off-white é o chão principal
   · #0000FF azul só funciona sobre claro (7,40) — nunca sobre preto (2,03)
   · sobre preto e sobre azul o logotipo vira sólido, nunca bicolor
   ══════════════════════════════════════════════════════════════ */

:root{
  --preto:#1A1A1A;
  --azul:#0000FF;
  --off:#EFEEE9;
  --branco:#FFFFFF;
  /* dois passos derivados, e só. Todo cinza do site sai daqui —
     antes havia treze alfas diferentes, ou seja, treze cinzas. */
  --fio-claro:rgba(26,26,26,.16);      --mut-claro:rgba(26,26,26,.55);
  --fio-escuro:rgba(239,238,233,.20);  --mut-escuro:rgba(239,238,233,.55);
  --veu:rgba(26,26,26,.78);
  --m:clamp(20px,4.4vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── temas de seção · a tipografia inverte junto com o fundo ── */
.s--off{    --bg:var(--off);    --ink:var(--preto); --acc:var(--azul);  --logo-acc:var(--azul);
            --fio:var(--fio-claro);     --mut:var(--mut-claro); --inv:var(--off) }
.s--branco{ --bg:var(--branco); --ink:var(--preto); --acc:var(--azul);  --logo-acc:var(--azul);
            --fio:var(--fio-claro);     --mut:var(--mut-claro); --inv:var(--branco) }
.s--preto{  --bg:var(--preto);        --ink:var(--off);   --acc:var(--off);   --logo-acc:currentColor;
            --fio:var(--fio-escuro);    --mut:var(--mut-escuro);--inv:var(--preto) }
.s--azul{   --bg:var(--azul);   --ink:var(--off);   --acc:var(--off);   --logo-acc:currentColor;
            --fio:var(--fio-escuro);    --mut:var(--mut-escuro);--inv:var(--azul) }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--preto);color:var(--off);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
::selection{background:var(--azul);color:var(--off)}

/* ── tokens tipográficos ── */
.micro{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5;color:var(--acc);margin:0;
}
.micro.num{margin-bottom:clamp(18px,2.4vw,34px)}
.h-xl{
  font-size:clamp(50px,10.6vw,186px);font-weight:800;line-height:.84;
  letter-spacing:-.042em;text-transform:uppercase;
}
.lead{font-size:clamp(16px,1.35vw,21px);line-height:1.5;max-width:46ch;color:var(--ink)}
.serv__head .h-xl{font-size:clamp(46px,7.6vw,132px)}
p{color:var(--ink)}

/* ── seção base ── */
.sec{
  position:relative;z-index:1;background:var(--bg);color:var(--ink);
  padding:clamp(76px,10vw,168px) var(--m);
}

/* ══ LOADER ══════════════════════════════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--preto);color:var(--off);
  display:grid;place-content:center;gap:26px;justify-items:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.off{opacity:0;visibility:hidden}
.loader__mark .lg{width:min(46vw,340px);color:var(--off);--logo-acc:currentColor}
.hero__lg,.ft__lg{--logo-acc:currentColor}
.loader__bar{width:min(46vw,340px);height:1px;background:var(--fio-escuro)}
.loader__bar i{display:block;height:100%;width:0;background:var(--off);transition:width .2s linear}
.loader__pct{color:var(--mut-escuro)}

/* ══ LOGOTIPO ════════════════════════════════════════════════ */
.lg{width:100%;height:auto;color:var(--ink);--logo-ink:currentColor}

/* ══ HEADER ══════════════════════════════════════════════════ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:clamp(20px,3vw,52px);
  padding:20px var(--m);color:var(--ink);
  transition:color .45s var(--ease),transform .5s var(--ease),opacity .5s var(--ease);
  mix-blend-mode:normal;
}
.hd.up{transform:translateY(-110%)}
body.escuro .hd{opacity:0;pointer-events:none}
.hd__logo{flex:0 0 auto}
.hd__logo .lg{width:clamp(122px,12vw,168px)}
.hd__nav{display:flex;gap:clamp(16px,2vw,34px);margin-left:auto}
.hd__nav a{
  font-size:12px;font-weight:600;letter-spacing:.02em;position:relative;padding:4px 0;
}
.hd__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:999px;overflow:hidden;position:relative;
  padding:11px 22px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:none;cursor:pointer;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--ink)}
.btn span{transition:color .5s var(--ease);position:relative}
.btn:hover span{color:var(--inv)}
.btn--big{padding:17px 38px;font-size:12px}

.burger{display:none;border:0;background:none;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* menu mobile */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--preto);color:var(--off);
  padding:calc(var(--m) + 60px) var(--m) var(--m);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  --acc:var(--off);
}
.menu.on{clip-path:inset(0 0 0 0)}
.menu__nav{display:flex;flex-direction:column;gap:2px}
.menu__nav a{
  display:flex;align-items:baseline;gap:16px;padding:10px 0;
  font-size:clamp(34px,10vw,64px);font-weight:800;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1;border-bottom:1px solid var(--fio-escuro);
}
.menu__nav em{font-size:10px;font-weight:600;letter-spacing:.16em;font-style:normal;opacity:.5}
.menu__mail{font-size:clamp(17px,4.6vw,24px);font-weight:600;letter-spacing:-.02em;margin-top:6px;display:inline-block}

/* ══ 01 · HERO ═══════════════════════════════════════════════
   480vh de pista, e nada além do relógio dentro dela. As três
   imagens vivem na mesma célula de grade, empilhadas e centradas —
   assim o JS mexe só no transform, sem desfazer a centralização.
   ═══════════════════════════════════════════════════════════ */
.hero{min-height:0;height:260vh;padding:0;background:var(--preto)}
.hero__pin{position:sticky;top:0;height:100svh;overflow:hidden}

/* cada imagem se centraliza sozinha, em absoluto. Em grade, a maior
   delas esticava a célula e empurrava as outras para fora do quadro. */
.palco{position:absolute;inset:0}
.palco > *{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  will-change:transform,opacity;
}

/* a explodida: quatro recortes da mesma imagem, cada um com seu
   deslocamento. Uma requisição só, quatro camadas. */
.ex{position:relative;height:100svh;aspect-ratio:1400/2087}
.ex__p{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ex__p[data-p]{will-change:transform}

.montado{height:150svh;object-fit:contain;opacity:0}
.macro{width:132vw;max-height:none;object-fit:cover;opacity:0}

.scroll{position:absolute;right:var(--m);bottom:var(--m);z-index:3;
  display:flex;align-items:center;gap:12px;color:var(--off)}
.scroll i{
  display:block;width:1px;height:44px;background:currentColor;opacity:.4;
  transform-origin:top;animation:sc 2.4s var(--ease) infinite;
}
@keyframes sc{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* a cena escura: pergunta e resposta ocupam a mesma célula e se
   revezam, então não há salto de layout na troca */
.cena{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;padding:var(--m);
  background:var(--preto);opacity:0;text-align:center;
}
.cena__q,.cena__r{grid-area:1/1;margin:0;opacity:0;will-change:opacity,transform}
.cena__r{text-decoration:none;display:block}
.cena__r span{transition:opacity .35s var(--ease)}
.cena__r:hover span{opacity:.72}
.cena__q,.cena__r span,.cena__r em{
  display:block;font-style:normal;
  font-size:clamp(26px,4.2vw,68px);font-weight:700;line-height:1.12;
  letter-spacing:-.032em;color:var(--off);
}
.cena__q{max-width:26ch}
/* sem animação a cena não roda — as frases viram texto fixo embaixo */
body.calmo .cena{background:none;align-content:end;gap:26px;padding-bottom:11vh;opacity:1}
body.calmo .cena__q,body.calmo .cena__r{grid-area:auto;opacity:1}
body.calmo .cena__q,body.calmo .cena__r span,body.calmo .cena__r em{font-size:clamp(20px,2.6vw,38px)}
body.calmo .scroll{visibility:hidden}
body.calmo .ex,body.calmo .macro{opacity:0}
body.calmo .montado{opacity:1}

/* ══ 02 · MANIFESTO ══════════════════════════════════════════ */
.man__h{
  font-size:clamp(30px,5.1vw,88px);font-weight:700;line-height:1.03;letter-spacing:-.034em;
  max-width:19ch;margin-bottom:clamp(56px,8vw,130px);
}
.man__h .w{display:inline-block;opacity:.14;transition:opacity .5s var(--ease)}
.man__h .w.on{opacity:1}
.man__grid{
  display:grid;gap:22px;padding-top:clamp(28px,3.6vw,54px);border-top:1px solid var(--fio);
}
.man__txt{display:grid;gap:1.1em;align-content:start;max-width:62ch}
.pilares{
  display:flex;flex-wrap:wrap;gap:0 .42em;margin-top:clamp(60px,9vw,140px);
  font-size:clamp(40px,8.4vw,142px);font-weight:800;line-height:.94;letter-spacing:-.042em;
  text-transform:uppercase;
}
.pilares span:nth-child(even){color:var(--acc)}

/* ══ 03 · FAIXA / MARQUEE ════════════════════════════════════ */
.faixa{display:block;padding:clamp(26px,3.6vw,52px) 0;overflow:hidden}
.marq{display:flex;width:max-content;animation:mv 26s linear infinite}
.faixa:hover .marq{animation-play-state:paused}
.marq__t{display:flex;width:max-content}
.marq span{
  display:flex;align-items:center;white-space:nowrap;
  font-size:clamp(34px,6.6vw,110px);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;
}
.marq i{
  display:inline-block;width:clamp(18px,2.2vw,38px);height:clamp(18px,2.2vw,38px);
  background:currentColor;margin:0 clamp(20px,2.6vw,44px);
  clip-path:polygon(30% 0,100% 0,100% 70%,70% 100%,0 100%,0 30%);
}
@keyframes mv{to{transform:translateX(-50%)}}

/* ══ 04 · SERVIÇOS ═══════════════════════════════════════════ */
.serv__head{
  display:grid;gap:clamp(26px,3vw,48px);margin-bottom:clamp(46px,6vw,92px);
}
.serv__list li{
  position:relative;display:flex;align-items:baseline;gap:clamp(14px,2.4vw,44px);
  padding:clamp(13px,1.5vw,22px) clamp(12px,2vw,28px);
  border-top:1px solid var(--fio);isolation:isolate;cursor:default;
  transition:color .5s var(--ease);
}
.serv__list li:last-child{border-bottom:1px solid var(--fio)}
.serv__list li::before{
  content:"";position:absolute;inset:0;background:var(--acc);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.serv__list li:hover::before{transform:scaleY(1);transform-origin:top}
.serv__list li:hover{color:var(--inv)}
.serv__list em{
  font-size:10px;font-weight:600;letter-spacing:.16em;font-style:normal;
  font-variant-numeric:tabular-nums;opacity:.55;flex:0 0 auto;
}
.serv__list span{
  font-size:clamp(21px,3.5vw,54px);font-weight:700;line-height:1.02;letter-spacing:-.035em;
  text-transform:uppercase;
}

/* ══ 05 · MÉTODO ═════════════════════════════════════════════ */
.metodo__head{margin-bottom:clamp(46px,6vw,96px)}
.passos{display:grid;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.passo{
  padding:clamp(28px,3.2vw,48px) clamp(20px,2.4vw,38px);border-top:1px solid var(--fio);
  display:flex;flex-direction:column;gap:14px;transition:background .5s var(--ease),color .5s var(--ease);
}
.passo:first-child{border-top:0}
.passo h3{
  font-size:clamp(26px,2.9vw,44px);font-weight:800;letter-spacing:-.035em;
  line-height:1;text-transform:uppercase;
}
.passo__t{font-size:14.5px;line-height:1.62;color:var(--mut)}
.passo__d{margin-top:auto;padding-top:22px;opacity:.7}
.passo:hover .passo__t{color:var(--ink)}

/* ══ 06 · CASES ══════════════════════════════════════════════ */
.cases__head{display:grid;gap:clamp(26px,3vw,46px);margin-bottom:clamp(38px,4.6vw,74px)}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros button{
  border:1px solid var(--fio);background:none;border-radius:999px;cursor:pointer;
  padding:9px 17px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;transition:.4s var(--ease);
}
.filtros button i{font-style:normal;font-size:9px;opacity:.5;font-variant-numeric:tabular-nums}
.filtros button:hover{border-color:currentColor}
.filtros button.on{background:var(--acc);color:var(--inv);border-color:var(--acc)}
.cases__grid{display:grid;gap:clamp(18px,2.2vw,34px);grid-template-columns:repeat(2,1fr)}
.case{display:grid;gap:9px;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.case.hide{display:none}
.case__img{
  display:block;aspect-ratio:4/3;background:var(--fio);overflow:hidden;position:relative;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  transition:background .5s var(--ease);
}
.case:hover .case__img{background:var(--acc)}
.case__n{font-size:clamp(17px,1.6vw,25px);font-weight:700;letter-spacing:-.025em;text-transform:uppercase;line-height:1.1}

/* ══ 07 · CTA ════════════════════════════════════════════════ */
.cta{text-align:center;display:grid;justify-items:center;gap:clamp(20px,2.6vw,38px)}
.cta__h{
  font-size:clamp(38px,7.4vw,132px);font-weight:800;line-height:.88;
  letter-spacing:-.042em;text-transform:uppercase;
}

/* ══ 08 · AGÊNCIA ════════════════════════════════════════════ */
.ag__h{margin-bottom:clamp(46px,6vw,96px)}
.ag__grid{display:grid;gap:clamp(34px,4vw,72px);padding-top:clamp(28px,3.4vw,52px);border-top:1px solid var(--fio)}
.ag__txt{display:grid;gap:1.1em;align-content:start;max-width:60ch;font-size:clamp(15px,1.15vw,18px)}
.nums{display:grid;gap:1px;background:var(--fio);border:1px solid var(--fio)}
.nums div{background:var(--bg);padding:22px 20px;display:grid;gap:8px}
.nums dd{
  margin:0;font-size:clamp(26px,3vw,46px);font-weight:800;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;
}

/* ══ 08b · INTERLÚDIO ════════════════════════════════════════
   A foto em sangria, com um véu para o texto não brigar com ela.
   ═══════════════════════════════════════════════════════════ */
.interludio{
  min-height:min(84svh,760px);display:grid;align-content:space-between;
  gap:clamp(40px,8vw,120px);overflow:hidden;
}
.interludio__f{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;z-index:-1;
}
.interludio::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,var(--veu),transparent 45%,var(--veu));
}
.interludio__l{
  font-size:clamp(15px,1.4vw,20px);line-height:1.5;letter-spacing:-.015em;
  max-width:34ch;justify-self:end;text-align:right;
}

/* ══ 09 · SEGMENTOS ══════════════════════════════════════════ */
.segs__list{display:flex;flex-wrap:wrap;gap:0 .4em;
  font-size:clamp(30px,5.6vw,88px);font-weight:700;line-height:1.06;
  letter-spacing:-.038em;text-transform:uppercase;
}
.segs__list span{transition:color .35s var(--ease)}
.segs__list span:hover{color:var(--acc)}

/* ══ 10 · CONTATO ════════════════════════════════════════════
   Sem formulário: cada canal é uma linha que leva direto ao lugar.
   ═══════════════════════════════════════════════════════════ */
.contato__grid{display:grid;gap:clamp(44px,5vw,86px)}
.contato__l{margin-top:clamp(24px,2.6vw,40px)}
.canais{display:grid;gap:0;align-content:start;margin-top:clamp(28px,3.4vw,48px)}
.canal{
  display:grid;gap:6px;padding:clamp(16px,1.8vw,26px) 0;
  border-top:1px solid var(--fio);position:relative;
}
.canal:last-child{border-bottom:1px solid var(--fio)}
.canal__v{
  font-size:clamp(19px,2.4vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1;
  transition:transform .45s var(--ease);transform-origin:left;
}
.canal:hover .canal__v{transform:translateX(10px)}
.canal::after{
  content:"↗";position:absolute;right:2px;bottom:clamp(16px,1.8vw,26px);
  font-size:15px;opacity:.4;transition:opacity .4s var(--ease),transform .45s var(--ease);
}
.canal:hover::after{opacity:1;transform:translate(3px,-3px)}
.canal__v{font-size:clamp(17px,1.9vw,26px)}

/* formulário */
.form{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);align-content:start}
.form label{display:grid;gap:9px}
.form .w2{grid-column:1/-1}
.form input,.form select,.form textarea{
  background:none;border:0;border-bottom:1px solid var(--fio);
  padding:11px 0;font-size:16px;font-weight:500;color:var(--ink);
  border-radius:0;transition:border-color .4s var(--ease);resize:vertical;
}
.form select{appearance:none;cursor:pointer}
.form select option{background:var(--preto);color:var(--off)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--ink)}
.form input:user-invalid{border-bottom-width:2px;border-color:var(--ink)}
.form button[disabled]{opacity:.45;cursor:progress}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__aviso{font-size:13.5px;line-height:1.5;color:var(--mut);margin:0}
.form__aviso[data-erro]{color:var(--ink)}

/* ══ RODAPÉ ══════════════════════════════════════════════════ */
.ft{padding-top:clamp(52px,6vw,96px);display:grid;gap:clamp(48px,6vw,96px)}
.ft__cols{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);
  padding-top:clamp(24px,3vw,44px);border-top:1px solid var(--fio)}
.ft__cols p{font-size:14px;line-height:1.55}
.ft__cols .micro{margin-bottom:9px}
.ft__cols a{position:relative}
.ft__cols a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.ft__cols a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__soc{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ft__lg{color:var(--off)}
.ft__base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-top:22px;border-top:1px solid var(--fio)}

/* ══ BOTÃO FLUTUANTE ═════════════════════════════════════════
   Fundo = a tinta da seção, texto = o fundo dela. Inverte junto
   com o que passa por baixo, e nunca põe azul sobre preto.
   ═══════════════════════════════════════════════════════════ */
.zap{
  position:fixed;right:var(--m);bottom:var(--m);z-index:110;
  display:flex;align-items:center;gap:10px;
  padding:13px 19px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 6px 30px rgba(26,26,26,.4);
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .6s var(--ease),opacity .5s var(--ease),
             background .45s var(--ease),color .45s var(--ease);
}
.zap.on{transform:none;opacity:1;pointer-events:auto}
.zap:hover{transform:translateY(-3px)}
.zap svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
@media(max-width:699px){
  .zap{padding:15px;gap:0}
  .zap span{display:none}
  .zap svg{width:21px;height:21px}
}

/* ══ REVEAL ══════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}

/* ══ BREAKPOINTS ═════════════════════════════════════════════ */
@media(min-width:700px){
  .cases__grid{grid-template-columns:repeat(3,1fr)}
  .ft__cols{grid-template-columns:repeat(4,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .filtros{justify-content:flex-end}
  .man__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--m)}
  .serv__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .passos{grid-template-columns:repeat(2,1fr)}
  .passo:nth-child(-n+2){border-top:0}
  .passo:nth-child(even){border-left:1px solid var(--fio)}
  .ag__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .contato__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .cases__grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1200px){
  .passos{grid-template-columns:repeat(4,1fr)}
  .passo{border-top:0}
  .passo:not(:first-child){border-left:1px solid var(--fio)}
  .nums{grid-template-columns:1fr}
}
@media(max-width:899px){
  .hero{height:220vh}
}
@media(max-width:859px){
  .form{grid-template-columns:1fr}
  .hd__nav,.hd__cta{display:none}
  .burger{display:flex;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .man__h .w{opacity:1}
}