@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("assets/fonts/archivo-variable.woff2") format("woff2");
}
:root{
  --navy:#1B447D; --navy-deep:#122F58; --navy-ink:#0E2444; --signal:#F2B705; --steel:#5E6E7C;
  --paper:#F1F3F6; --paper-2:#E3E8EE; --ink:#13213A; --muted:#4E5D70; --rule:#C4CDD8; --card:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#0D1A2C; --paper-2:#12233A; --ink:#E4EAF2; --muted:#9DADC2; --rule:#26395290; --card:#162A44; --steel:#8FA1B6}
}
:root[data-theme="dark"]{--paper:#0D1A2C; --paper-2:#12233A; --ink:#E4EAF2; --muted:#9DADC2; --rule:#26395290; --card:#162A44; --steel:#8FA1B6}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:2px}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--navy-deep); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; line-height:1.05}
.brand img{width:46px; height:46px; border-radius:50%; background:#fff}
.brand b{display:block; font-stretch:115%; font-weight:800; font-size:1.12rem; letter-spacing:.04em}
.brand small{display:block; font-size:.74rem; color:#B9CBE3; letter-spacing:.02em}
.nav{display:flex; gap:1.8rem; align-items:center}
.nav a{text-decoration:none; font-size:.95rem; opacity:.85}
.nav a:hover{opacity:1}
.nav .cta{opacity:1; background:var(--signal); color:#1a1400; font-weight:700; padding:.6rem 1.05rem; border-radius:3px}
.burger{display:none; background:none; border:0; color:#fff; padding:.5rem; cursor:pointer}
@media (max-width:820px){
  .burger{display:block}
  .nav{position:absolute; top:68px; left:0; right:0; background:var(--navy-deep); flex-direction:column; align-items:stretch; gap:0; padding:.4rem 1.25rem 1.25rem; display:none}
  .nav.open{display:flex}
  .nav a{padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .cta{margin-top:.9rem; text-align:center; border:0}
}

/* hero */
.hero{position:relative; min-height:min(92svh,860px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--navy-ink)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50%; transform:scale(1.08); animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,36,68,.94) 0%,rgba(14,36,68,.78) 38%,rgba(14,36,68,.15) 72%,rgba(14,36,68,0) 100%)}
@media (max-width:820px){.hero::after{background:linear-gradient(0deg,rgba(14,36,68,.96) 0%,rgba(14,36,68,.82) 45%,rgba(14,36,68,.2) 80%)}}
.hero .wrap{position:relative; z-index:2; padding:6rem 0 3.2rem}
.hero h1{font-stretch:74%; font-weight:800; font-size:clamp(2.7rem,7.6vw,5.8rem); line-height:.94; letter-spacing:-.01em; margin:0; max-width:12ch}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:44ch; color:#D6E2F1; margin:1.3rem 0 2rem}
.hero .reveal{opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .reveal:nth-child(2){animation-delay:.18s}.hero .reveal:nth-child(3){animation-delay:.32s}
.hero-foot{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.18); margin-top:2.6rem; padding-top:1rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem 2rem; font-size:.9rem; color:#B9CBE3}
.hero-foot b{color:#fff; font-weight:600}
@keyframes settle{to{transform:scale(1)}}
@keyframes rise{to{opacity:1; transform:none}}
.btns{display:flex; flex-wrap:wrap; gap:.8rem}
.btn{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:700; padding:.95rem 1.35rem; border-radius:3px; font-size:1rem}
.btn-signal{background:var(--signal); color:#1a1400}
.btn-signal:hover{background:#ffc823}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5); color:#fff}
.btn-ghost:hover{border-color:#fff}

/* track divider */
.track{height:22px; background:
  linear-gradient(var(--steel),var(--steel)) 0 4px/100% 2px no-repeat,
  linear-gradient(var(--steel),var(--steel)) 0 16px/100% 2px no-repeat,
  repeating-linear-gradient(90deg,var(--rule) 0 10px,transparent 10px 34px)}
.band-track{background-color:var(--navy-deep); height:22px; background-image:
  linear-gradient(#6F8FBA,#6F8FBA),linear-gradient(#6F8FBA,#6F8FBA),repeating-linear-gradient(90deg,rgba(111,143,186,.45) 0 10px,transparent 10px 34px);
  background-size:100% 2px,100% 2px,auto; background-position:0 4px,0 16px,0 0; background-repeat:no-repeat,no-repeat,repeat}

section{padding:clamp(4rem,9vw,7rem) 0}
h2{font-stretch:76%; font-weight:800; font-size:clamp(2.1rem,4.8vw,3.5rem); line-height:1; margin:0 0 1.2rem}
h3{font-stretch:88%; font-weight:750; font-size:clamp(1.45rem,2.4vw,1.95rem); line-height:1.1; margin:0 0 .7rem}
p{margin:0 0 1rem}
.muted{color:var(--muted)}

/* about */
.about{display:grid; gap:3rem; align-items:start}
@media (min-width:920px){.about{grid-template-columns:5fr 6fr; gap:4.5rem}}
.about .big{font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.45; font-stretch:95%}
.facts{border-top:2px solid var(--ink); margin-top:2rem}
.fact{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--rule)}
.fact strong{font-stretch:68%; font-weight:800; font-size:clamp(2.1rem,4vw,2.9rem); line-height:1; color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fact strong{color:#8FB3E6}}
.fact span{color:var(--muted); text-align:right; max-width:24ch; font-size:.95rem}
figure{margin:0}
figcaption{font-size:.86rem; color:var(--muted); padding-top:.7rem; border-top:1px solid var(--rule); margin-top:.8rem}
.photo{border-radius:4px; overflow:hidden; background:var(--paper-2)}
.photo img{width:100%; height:100%; object-fit:cover}

/* services */
.services{background:var(--paper-2)}
.svc-head{display:flex; justify-content:space-between; align-items:end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:2.4rem}
.svc-head p{max-width:42ch; margin:0}
.svc{display:grid; gap:1.6rem; padding:2.6rem 0; align-items:center}
@media (min-width:920px){
  .svc{grid-template-columns:5fr 6fr; gap:4rem}
  .svc.flip .svc-text{order:2}
}
.svc .photo{aspect-ratio:16/10}
.tags{margin:.9rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
.tags li{font-size:.85rem; border:1px solid var(--rule); padding:.25rem .65rem; border-radius:2px; color:var(--muted); background:var(--card)}
.eng-media{display:grid; grid-template-columns:3fr 2fr; gap:.8rem; align-items:stretch}
.eng-media figure{display:flex; flex-direction:column}
.eng-media .photo{aspect-ratio:auto; flex:1; min-height:0}
.eng-media .sheet{flex:1; background:#fff; border:1px solid var(--rule); border-radius:4px; padding:.5rem; display:flex; align-items:center}
.eng-media .sheet img{width:100%; height:100%; object-fit:contain}
.eng-media figcaption{font-size:.8rem; margin-top:.55rem; padding-top:.5rem}
@media (min-width:920px){.eng-media{height:380px}}
@media (max-width:919px){.eng-media{height:clamp(230px,62vw,360px)}}

/* before/after */
.ba{position:relative; aspect-ratio:1/1; max-height:620px; width:100%; border-radius:4px; overflow:hidden; user-select:none; touch-action:pan-y; background:#222; --p:50%}
@media (min-width:920px){.ba{aspect-ratio:4/3.4}}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .handle{position:absolute; top:0; bottom:0; left:var(--p); width:3px; margin-left:-1.5px; background:var(--signal); pointer-events:none}
.ba .knob{position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--signal); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ba .knob svg{width:22px; height:22px; stroke:#1a1400; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.ba .tag{position:absolute; top:.8rem; padding:.3rem .7rem; font-size:.82rem; font-weight:700; border-radius:2px; pointer-events:none}
.ba .tag.b{left:.8rem; background:rgba(14,36,68,.85); color:#fff}
.ba .tag.a{right:.8rem; background:var(--signal); color:#1a1400}
.ba input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.ba:has(input:focus-visible){outline:3px solid var(--signal); outline-offset:3px}
@property --p{syntax:'<percentage>'; inherits:true; initial-value:50%}
.ba.hint{animation:nudge 1.8s ease-in-out 1}
@keyframes nudge{0%,100%{--p:50%}35%{--p:28%}70%{--p:70%}}

/* contact */
.contact{display:grid; gap:3rem}
@media (min-width:920px){.contact{grid-template-columns:5fr 6fr; gap:5rem}}
.clist{border-top:2px solid var(--ink); margin:0}
.crow{display:grid; grid-template-columns:110px 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--rule)}
.crow dt{color:var(--muted); font-size:.92rem}
.crow dd{margin:0; font-weight:500}
.crow a{text-decoration-color:var(--signal); text-underline-offset:4px; text-decoration-thickness:2px}

/* truque explodido */
.ex{padding:0; background:var(--paper)}
.ex-wrap{height:250vh; position:relative}
.ex-sticky{position:sticky; top:calc(env(safe-area-inset-top,0px) + 68px); height:calc(100svh - 68px); display:flex; align-items:center; overflow:hidden}
.ex-grid{display:grid; gap:1rem 3.5rem; align-items:center}
@media (min-width:920px){.ex-grid{grid-template-columns:4fr 7fr}}
.ex-grid h2{margin-bottom:.8rem}
.ex-grid .muted{max-width:40ch}
.ex-hint{font-size:.88rem; color:var(--muted); display:flex; align-items:center; gap:.5rem}
.ex-hint svg{width:16px; height:16px; stroke:var(--signal); fill:none; stroke-width:2.4; animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.ex-svg{width:100%; height:auto; max-height:min(56svh,520px)}
@media (max-width:919px){.ex-svg{max-height:40svh}.ex-grid .muted{display:none}.ex-grid h2{font-size:clamp(1.8rem,7vw,2.4rem)}}
.ex .pt{fill:var(--card); stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round}
.ex .pt-2{fill:var(--paper-2)}
.ex .coil{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round}
.ex .rail{fill:var(--steel)}
.ex .mk circle{fill:var(--signal)}
.ex .mk text{fill:#1a1400; font:700 17px "Archivo",sans-serif; text-anchor:middle; dominant-baseline:central}
.ex .mk{opacity:0; transition:opacity .35s}
.ex .mk.on{opacity:1}
.ex-legend{list-style:none; margin:.4rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.2rem; counter-reset:n}
.ex-legend li{display:flex; align-items:center; gap:.55rem; font-size:.92rem; opacity:.28; transition:opacity .35s}
.ex-legend li.on{opacity:1}
.ex-legend b{flex:none; width:22px; height:22px; border-radius:50%; background:var(--signal); color:#1a1400; display:grid; place-items:center; font-size:.75rem}
@media (max-width:919px){.ex-legend{font-size:.85rem}.ex-legend li{font-size:.84rem}}
.ex-note{font-size:.8rem; color:var(--muted); margin-top:.8rem}

/* clientes */
.clients{padding:clamp(2.6rem,6vw,4rem) 0; background:var(--paper); border-top:1px solid var(--rule)}
.cl-title{font-size:.95rem; font-stretch:100%; font-weight:700; letter-spacing:.02em; color:var(--muted); margin:0 0 1rem}
.cl-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 2.2rem; align-items:baseline}
.cl-list li{font-stretch:78%; font-weight:800; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.15; color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cl-list li{color:#8FB3E6}}
.cl-note{margin:1.2rem 0 0; color:var(--muted); font-size:.98rem}
.cl-note b{color:var(--ink); font-weight:600}
/* diferenciais */
.why{background:var(--paper-2)}
.why-grid{display:grid; gap:0 3rem; margin-top:1rem}
@media (min-width:760px){.why-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.why-grid{grid-template-columns:1fr 1fr 1fr}}
.why-item{border-top:2px solid var(--ink); padding:1.1rem 0 1.4rem; position:relative}
.why-item::before{content:""; position:absolute; top:-2px; left:0; width:48px; height:2px; background:var(--signal)}
.why-item h3{font-size:clamp(1.2rem,1.8vw,1.4rem); margin-bottom:.4rem}
.why-item p{margin:0}
/* equipe */
.team{display:grid; gap:.9rem; margin:0 0 1.8rem}
.team div{display:flex; flex-direction:column; border-left:3px solid var(--signal); padding-left:.9rem}
.team b{font-size:1.05rem}
.team span{color:var(--muted); font-size:.92rem}

.eng-media.even{grid-template-columns:1fr 1fr}
.eng-media img.contain{object-fit:contain; background:#1B2B40}

/* galeria */
.gal{background:var(--navy-deep); color:#EAF0F8; overflow:hidden}
.gal-head{display:flex; justify-content:space-between; align-items:end; gap:1rem 3rem; flex-wrap:wrap; margin-bottom:2.2rem}
.gal-head h2{margin:0}
.gal-head p{color:#B9CBE3; max-width:46ch; margin:0}
.gal-rows{display:grid; gap:.8rem}
.gal-row{overflow:hidden}
.gal-track{list-style:none; margin:0; padding:0; display:flex; gap:.8rem; width:max-content; animation:gal 70s linear infinite}
.gal-row.rev .gal-track{animation-direction:reverse; animation-duration:80s}
.gal-rows:hover .gal-track{animation-play-state:paused}
.gal-track li{flex:none; height:clamp(150px,20vw,250px); border-radius:4px; overflow:hidden; background:#0E2444}
.gal-track img{height:100%; width:auto; display:block}
@keyframes gal{to{transform:translateX(calc(-50% - .4rem))}}
@media (prefers-reduced-motion:reduce){
  .gal-row{overflow-x:auto}
  .gal-track{animation:none !important}
  .gal-track li[aria-hidden]{display:none}
}
.why-close{margin:2.2rem 0 0; font-stretch:78%; font-weight:800; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.05; color:var(--navy)}
.why-close b{color:var(--ink); font-weight:800; box-shadow:inset 0 -.28em 0 var(--signal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .why-close{color:#8FB3E6}}

/* topo v2: foto limpa + texto sobre o azul */
.hero{display:grid; min-height:0; align-items:stretch; background:var(--navy-deep)}
.hero::after{display:none}
.hero-media{position:relative; overflow:hidden; aspect-ratio:16/11; background:var(--navy-ink); align-self:start}
.hero-media .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 55%}
.hero-tag{position:absolute; left:1rem; bottom:1rem; z-index:2; background:rgba(14,36,68,.82); color:#fff; font-size:.8rem; font-weight:600; padding:.35rem .7rem; border-radius:2px; border-left:3px solid var(--signal)}
.hero .hero-copy{position:relative; z-index:2; padding:2.2rem 0 2.4rem}
.hero .hero-copy h1{max-width:13ch}
.hero-foot{margin-top:2rem}
@media (min-width:920px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:min(86svh,800px)}
  .hero-media{order:2; aspect-ratio:auto; align-self:stretch}
  .hero .hero-copy{order:1; width:auto; margin:0; align-self:center; padding:2.6rem 3rem 2.4rem max(1.25rem, calc((100vw - 1180px) / 2))}
  .hero .hero-copy h1{font-size:clamp(2.4rem,3.7vw,3.7rem); max-width:12ch}
  .hero .hero-copy .lede{font-size:1.05rem; margin:1rem 0 1.6rem}
  .hero .hero-copy .hero-foot{margin-top:1.8rem}
  .hero-media .hero-img{object-position:28% 55%}
  .hero-tag{left:1.4rem; bottom:1.4rem}
}

/* transformação antes → depois no topo */
.hero-before,.hero-sweep{display:none}
.js .hero-before{display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 55%; z-index:1; clip-path:inset(0 0 0 0); transform:scale(1.08); animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero-sweep{display:block; position:absolute; top:0; bottom:0; left:0; width:4px; margin-left:-2px; z-index:2; background:var(--signal); box-shadow:0 0 18px 4px rgba(242,183,5,.55); opacity:0}
.hero-media.go .hero-before{clip-path:inset(0 0 0 100%); transition:clip-path 1.9s cubic-bezier(.65,0,.35,1)}
.hero-media.go .hero-sweep{left:100%; opacity:1; transition:left 1.9s cubic-bezier(.65,0,.35,1), opacity .2s}
.hero-media.done .hero-sweep{opacity:0; transition:opacity .4s}
.hero-media.done .hero-before{clip-path:inset(0 0 0 100%)}
.hero-media.reset .hero-before,.hero-media.reset .hero-sweep{transition:none !important}
.hero-replay{position:absolute; right:1rem; bottom:1rem; z-index:3; background:rgba(14,36,68,.82); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:2px; font:600 .8rem "Archivo",sans-serif; padding:.35rem .7rem; cursor:pointer}
.hero-replay:hover{border-color:var(--signal)}
@media (max-width:480px){.hero-replay{top:1rem; right:1rem; bottom:auto}}
@media (min-width:920px){
  .js .hero-before{object-position:28% 55%}
  .hero-replay{right:1.4rem; bottom:1.4rem}
}
@media (prefers-reduced-motion:reduce){.js .hero-before,.js .hero-sweep{display:none}}

/* topo v3: no PC, a foto mostra o vagão inteiro e o texto respira */
@media (min-width:920px){
  .hero{min-height:36.5vw}
  .hero-media{aspect-ratio:auto; min-width:0}
  .hero-media .hero-img,.js .hero-before{object-position:40% 55%}
  .hero .hero-copy h1{max-width:14ch}
}
@media (min-width:1240px){
  .hero{grid-template-columns:calc((100vw - 1180px) / 2 + 500px) minmax(0,1fr); min-height:calc((50vw + 90px) / 1.6)}
  .hero .hero-copy{padding-right:3.5rem}
}
/* contato direto (substitui o formulário) */
.direct{background:var(--card); border:1px solid var(--rule); border-top:4px solid var(--signal); border-radius:4px; padding:clamp(1.3rem,3vw,2rem); align-self:start}
.direct-eyebrow{display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:.3rem}
.direct h3{margin-bottom:.3rem}
.direct .sub{color:var(--muted); font-size:.95rem; margin-bottom:1.3rem}
.d-btn{display:flex; align-items:center; gap:.9rem; text-decoration:none; padding:.9rem 1rem; border:1.5px solid var(--rule); border-radius:4px; margin-top:.6rem; transition:border-color .15s, background .15s}
.d-btn:hover{border-color:var(--navy); background:var(--paper)}
.d-btn svg{flex:none; width:24px; height:24px; fill:var(--navy)}
.d-btn span{display:flex; flex-direction:column; min-width:0}
.d-btn b{font-size:1.02rem; overflow-wrap:anywhere}
.d-btn small{color:var(--muted); font-size:.85rem}
.d-btn.d-wa{background:#25D366; border-color:#25D366; color:#0b2b17}
.d-btn.d-wa svg{fill:#0b2b17}
.d-btn.d-wa small{color:#0b3d20}
.d-btn.d-wa:hover{background:#22c55e; border-color:#22c55e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .d-btn svg{fill:#8FB3E6} :root:not([data-theme="light"]) .d-btn.d-wa svg{fill:#0b2b17}}


/* animações de rolagem */
.js .rv-type .ch{display:inline-block; opacity:0; transform:translateY(.35em); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--c) * 22ms)}
.js .rv-type .w{display:inline-block; white-space:nowrap}
.js .rv-type.in .ch{opacity:1; transform:none}
.js .rv-wipe{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.25,1)}
.js .rv-wipe img{transform:scale(1.12); transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.js .rv-wipe.in{clip-path:inset(0 0 0 0)}
.js .rv-wipe.in img{transform:scale(1)}
.js .rv-fade{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms)}
.js .rv-fade.in{opacity:1; transform:none}
.js .rv-rail{transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.65,0,.25,1)}
.js .rv-rail.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .js .rv-type .ch{transition:opacity .4s ease}
  .js .rv-wipe{opacity:0; clip-path:none; transition:opacity .4s ease}
  .js .rv-wipe.in{opacity:1}
  .js .rv-wipe img{transition:none}
  .js .rv-fade{transition:opacity .4s ease}
  .js .rv-rail{opacity:0; transform:none; transition:opacity .4s ease}
  .js .rv-rail.in{opacity:1}
}

footer{background:var(--navy-ink); color:#A9BFDB; padding:2.4rem 0 calc(2.4rem + env(safe-area-inset-bottom,0px)); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap}
footer .fb{display:flex; align-items:center; gap:.9rem}
footer img{width:56px; height:56px; border-radius:50%; background:#fff}
footer a{color:#fff; text-decoration:none}

.wa{position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:30; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa svg{width:28px; height:28px; fill:#fff}

@media (prefers-reduced-motion:reduce){
  @keyframes fadeIn{to{opacity:1}}
  .hero-img{transform:none; opacity:0; animation:fadeIn .4s ease forwards}
  .hero .reveal{transform:none; animation:fadeIn .4s ease forwards}
  .ba.hint{animation:none}
  .ex-hint svg{animation:none}
}