/* ============================================================
   LatoTherapy — styles.css
   Identitatea vizuala LatoTherapy: petrol pe bone, un singur
   accent de cupru, geometrie din familia 3U/5U/8U (U = 32).
   Regulile stau in DESIGN.md; sursa marcii in brand/.
   ============================================================ */

:root{
  /* ── paleta de marca ───────────────────────────────────── */
  --petrol:#0F3B39;
  --bone:#F3EEE7;
  --chalk:#FBFAF8;
  --sand:#DCCFC0;
  --copper:#B0724A;
  --ink-true:#1A1A18;

  /* hartie (registrul deschis) */
  --paper:var(--bone);
  --paper-hi:var(--chalk);
  --paper-2:var(--chalk);
  --rule:var(--sand);
  --rule-soft:color-mix(in oklab,var(--sand) 55%,var(--bone));
  /* tus = petrol (registrul inchis) */
  --ink:var(--ink-true);
  --ink-deep:var(--petrol);
  --ink-2:color-mix(in oklab,var(--petrol) 88%,var(--chalk));
  --ink-soft:color-mix(in oklab,var(--ink-true) 64%,var(--bone));
  /* 46% dadea 3,24:1 pe hartie — sub AA. 58% da 4,68:1 pe bone si 5,17:1 pe chalk,
     si ramane clar mai deschis decat --ink-soft (64%), deci treapta se pastreaza. */
  --ink-mute:color-mix(in oklab,var(--ink-true) 58%,var(--bone));
  --cream:var(--chalk);
  --cream-soft:color-mix(in oklab,var(--chalk) 76%,var(--petrol));
  /* 54% dadea 4,32:1 pe petrol — sub AA la limita. 60% da 5,02:1, cu marja, si
     ramane distinct de --cream-soft (76%). Se foloseste NUMAI pe petrol. */
  --cream-mute:color-mix(in oklab,var(--chalk) 60%,var(--petrol));
  --rule-ink:rgba(251,250,248,.22);
  /* singurul accent — maximum 5% din suprafata */
  --oxide:var(--copper);
  /* Cuprul de MARCA (#B0724A) da 3,4:1 pe hartie: destul pentru o linie sau un
     contur (AA cere 3:1 la componente), prea putin pentru text (cere 4,5:1).
     Deci accentul are doua trepte, aceeasi culoare, alta valoare:
       --oxide       linii, bare, contururi, outline de focus, selectie;
       --oxide-text  ORICE text de cupru si orice suprafata plina de cupru
                     pe care sta text (chip selectat, buton din dock, eticheta).
     80% cupru / 20% tus = #8F5F40: 4,69:1 pe bone, 5,19:1 pe chalk, si 4,7+:1
     pentru creta scrisa peste el. Nu e o culoare noua: e cuprul amestecat cu
     tusul, ca toate valorile derivate din paleta. */
  --oxide-text:color-mix(in oklab,var(--copper) 80%,var(--ink-true));
  --oxide-deep:color-mix(in oklab,var(--copper) 84%,var(--ink-true));
  --oxide-lite:color-mix(in oklab,var(--copper) 66%,var(--chalk));

  /* ── ADN geometric (brand/tokens.css) ──────────────────── */
  --u:32px;
  --r-3u:96px; --r-5u:160px; --r-8u:256px;
  --thick:40px; --thin:12px; --hairline:4.8px;
  --air:24px;                 /* 0.75U — singura distanta de separare */
  --btn-radius:999px;         /* buton = pastila: colturile sunt semicercuri */

  /* ritm: multipli ai golului de aer */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem; --s6:3rem; --s7:4rem; --s8:6rem;
  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --gutter:clamp(24px,3.4vw,48px);
  --fig-col:clamp(96px,11vw,152px);
  --ease:cubic-bezier(.16,1,.3,1);

  /* cursa heroului derulat de scroll — calibrata pe clipul de 5,04 s */
  --hero-h:290vh;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* atributul hidden bate orice display de mai jos: altfel un panou ascuns ramane
   agatat peste pagina si inghite click-urile */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper);
  scrollbar-color:var(--ink-deep) var(--paper-2);scrollbar-width:thin;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* suprafetele pe care nu le desenam noi, dar tot ale noastre sunt */
::selection{background:var(--oxide-text);color:var(--paper)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-2);border-left:1px solid var(--rule)}
::-webkit-scrollbar-thumb{background:var(--ink-deep);border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--oxide)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  margin:0;font-family:var(--f-display);font-weight:500;
  font-optical-sizing:auto;font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
  letter-spacing:.012em;word-spacing:.08em;line-height:1.02;text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
.hero :focus-visible,.section--ink :focus-visible{outline-color:var(--oxide-lite)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);position:relative}

/* Linkul de sarit peste navigatie e mobilier de accesibilitate, nu accent de
   marca: pe cupru dadea 3,4:1. Pe petrol da 11:1, si ramane in sistem. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-deep);color:var(--cream);padding:12px 18px}
.skip:focus{left:0}

/* ---------------- PRELOADER ---------------- */
.preloader{
  position:fixed;inset:0;z-index:120;background:var(--paper);
  display:grid;place-content:center;gap:20px;justify-items:center;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.preloader.is-done{opacity:0;visibility:hidden}
/* fara JS preloaderul n-are cine sa-l stinga: ar acoperi pagina la nesfarsit */
.no-js .preloader{display:none}
.preloader__mark{
  display:flex;align-items:center;gap:var(--air);color:var(--ink-deep);
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,3.6vw,28px);letter-spacing:.10em;
}
.preloader__mark .brand__mark{height:clamp(38px,7vw,58px)}
.preloader__bar{width:min(200px,46vw);height:1.5px;background:var(--rule);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:36%;background:var(--oxide);transform:translateX(-100%);animation:load 1.15s var(--ease) infinite}
@keyframes load{to{transform:translateX(320%)}}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;color:var(--cream);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .55s var(--ease);
}
.nav.is-stuck{background:rgba(243,238,231,.94);backdrop-filter:blur(10px);color:var(--ink);border-bottom-color:var(--rule)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:13px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
/* marca R1: raportul din cadrul de 16U, aliniata optic pe linia wordmark-ului */
.brand__mark{
  height:30px;width:auto;flex:none;color:currentColor;
  transition:transform .55s var(--ease);
}
.brand:hover .brand__mark{transform:translateY(-2px)}
.brand__txt{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:15px;letter-spacing:.10em;white-space:nowrap;
}
.brand__txt--lg{font-size:clamp(19px,2.2vw,26px);letter-spacing:.10em}
.foot__lockup{display:flex;align-items:center;gap:var(--air)}
.foot__lockup .brand__mark{height:clamp(46px,5vw,64px)}

.nav__links{display:flex;gap:24px}
.nav__links a{
  font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  position:relative;padding:6px 0;opacity:.7;transition:opacity .35s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--oxide);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{opacity:1}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)}

.nav__cta{display:flex;align-items:center;gap:8px}
.nav__progress{height:1.5px;background:transparent}
.nav.is-stuck .nav__progress{background:var(--rule-soft)}
.nav__progress i{display:block;height:100%;width:100%;background:var(--oxide);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{position:absolute;left:12px;width:20px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------------- DRAWER ---------------- */
.drawer{
  position:fixed;inset:0;z-index:85;background:var(--paper);color:var(--ink);
  padding:88px var(--pad) calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  opacity:0;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.drawer.is-open{opacity:1;transform:none}
.drawer__links{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.drawer__links a{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(24px,7.4vw,36px);
  display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);
  transition:color .4s var(--ease);
}
.drawer__links a:hover{color:var(--oxide-text)}
.drawer__links span{font-family:var(--f-mono);font-weight:500;font-size:9.5px;color:var(--oxide-text);letter-spacing:.08em}
.drawer__foot{display:grid;gap:14px}
.drawer__meta{
  display:flex;justify-content:space-between;font-family:var(--f-mono);font-weight:500;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}

/* ---------------- BUTOANE ---------------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border:1.5px solid var(--bd);border-radius:var(--btn-radius);
  background:var(--bg);color:var(--fg);
  font-family:var(--f-mono);font-weight:500;font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-deep);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--paper);border-color:var(--ink-deep)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* plinul e petrol; cuprul ramane accent, nu suprafata (max 5%) */
.btn--solid{--bg:var(--ink-deep);--fg:var(--chalk);--bd:var(--ink-deep)}
.btn--solid::before{background:var(--oxide-text)}
.btn--solid:hover{color:var(--chalk);border-color:var(--oxide-text)}
.btn--sm{padding:10px 14px;font-size:10px}
.btn--lg{padding:17px 26px;font-size:11.5px}
.btn--block{display:flex;width:100%}
/* un singur accent: si butonul de WhatsApp e tot petrol, cu cupru pe hover */
.btn--wa{--bg:var(--ink-deep);--fg:var(--chalk);--bd:var(--ink-deep)}
.btn--wa::before{background:var(--oxide-text)}
.btn--wa:hover{color:var(--chalk);border-color:var(--oxide-text)}
.nav:not(.is-stuck) .btn--ghost,
.section--ink .btn--ghost,
.hero .btn--ghost{--fg:var(--cream);--bd:rgba(243,238,231,.5)}
/* pe registrul inchis plinul se inverseaza: creta pe petrol */
.nav:not(.is-stuck) .btn--solid,
.section--ink .btn--solid,
.price--feat .btn--solid,
.place--feat .btn--solid,
.hero .btn--solid{--bg:var(--chalk);--fg:var(--ink-deep);--bd:var(--chalk)}
.nav:not(.is-stuck) .btn--solid:hover,
.section--ink .btn--solid:hover,
.price--feat .btn--solid:hover,
.place--feat .btn--solid:hover,
.hero .btn--solid:hover{color:var(--chalk);border-color:var(--oxide-text)}
/* si butoanele fantoma din cardurile de petrol au nevoie de contur vizibil */
.price--feat .btn--ghost,
.place--feat .btn--ghost{--fg:var(--cream);--bd:rgba(251,250,248,.5)}

/* ---------------- HERO derulat de scroll ---------------- */
.hero{position:relative;height:var(--hero-h);background:var(--ink-deep)}
.hero__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  padding:120px 0 clamp(36px,6vh,68px);color:var(--cream);
}
/* posterul e fundal CSS, nu atribut: asa fiecare latime cere DOAR poza ei,
   iar clipul nu mai are nimic de pictat pana la primul cadru decodat */
.hero__media{
  position:absolute;inset:0;z-index:0;
  background:var(--ink-deep) url("media/hero-poster.jpg") 50% 42%/cover no-repeat;
  contain:paint;
}
/* NICIUN `filter` pe clip: gradul (saturate .9 / contrast 1.05 / brightness .94)
   e copt in fisierul mp4. Un filtru CSS peste un video care se schimba cadru cu
   cadru se recalculeaza la fiecare cadru, pe tot ecranul. */
.hero__video{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:translateZ(0);backface-visibility:hidden;
}
/* clipul e luminos: textul primeste un bloc de tus, nu un voal */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(15,59,57,.97) 0%,rgba(15,59,57,.94) 26%,rgba(15,59,57,.72) 44%,rgba(15,59,57,.26) 62%,rgba(15,59,57,.06) 76%,rgba(15,59,57,.3) 100%),
    linear-gradient(to top,var(--ink-deep) 0%,rgba(15,59,57,.86) 18%,rgba(15,59,57,.3) 48%,rgba(15,59,57,.1) 66%,rgba(15,59,57,.42) 100%);
}
/* fara `mix-blend-mode` aici: peste un video care se deruleaza, blend-ul cere
   citirea fundalului la fiecare cadru si injumatateste cadrele pe telefoanele
   slabe (masurat: 8,8 -> 24 fps la 20x throttling). Peste petrol, granulatia
   simpla la .09 arata la fel. */
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__body{position:relative;z-index:2;width:100%}
.hero__title{
  font-size:clamp(40px,7vw,88px);text-transform:uppercase;line-height:.98;
  letter-spacing:.008em;max-width:13ch;margin-bottom:22px;
}
.hero__title em{font-style:normal;color:var(--oxide-lite)}
.hero__title .line{display:block;overflow:hidden;padding-top:.16em;margin-top:-.16em}
.hero__title .line>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
/* la fel: fara JS nu vine `is-ready`, iar titlul ar ramane tras sub linie */
.no-js .hero__title .line>span{transform:none}
.is-ready .hero__title .line>span{transform:none}
.is-ready .hero__title .line:nth-child(2)>span{transition-delay:.08s}
.is-ready .hero__title .line:nth-child(3)>span{transition-delay:.16s}
.hero__sub{max-width:50ch;color:var(--cream-soft);font-size:clamp(14.5px,1.25vw,16.5px);margin-bottom:var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,4.5vh,44px)}
/* legenda de plansa */
.hero__facts{display:flex;flex-wrap:wrap;margin:0;border-top:1px solid var(--rule-ink)}
.hero__facts>div{padding:16px clamp(20px,3vw,42px) 0;border-left:1px solid var(--rule-ink)}
.hero__facts>div:first-child{padding-left:0;border-left:0}
.hero__facts dt{
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-mute);margin-bottom:8px;
}
.hero__facts dd{
  margin:0;font-family:var(--f-display);font-weight:500;letter-spacing:.008em;
  font-variant-numeric:tabular-nums;font-size:clamp(24px,2.9vw,36px);line-height:1;
}
.hero__facts dd span{
  font-family:var(--f-mono);font-weight:500;font-size:.26em;font-weight:400;
  color:var(--cream-mute);letter-spacing:.1em;margin-left:.2em;
}
.hero__facts .dd--sm{
  font-family:var(--f-body);font-weight:500;font-size:clamp(13.5px,1.3vw,15.5px);
  line-height:1.35;color:var(--cream-soft);max-width:15ch;letter-spacing:0;
}
.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(36px,6vh,68px);z-index:2;
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-mute);display:flex;align-items:center;gap:12px;
}
.hero__scroll span{width:64px;height:1px;background:var(--rule-ink);position:relative;overflow:hidden}
.hero__scroll i{
  position:absolute;inset:0;background:var(--oxide-lite);
  transform:scaleX(0);transform-origin:left;
}

/* ---------------- MARQUEE ---------------- */
.marquee{
  position:relative;z-index:2;
  border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink);
  overflow:hidden;padding:12px 0;
}
.marquee__track{display:flex;align-items:center;gap:22px;width:max-content;animation:slide 46s linear infinite}
.marquee__track span{
  font-family:var(--f-mono);font-weight:500;font-size:clamp(10.5px,1.1vw,12px);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.marquee__track i{color:var(--oxide-text);font-style:normal}
@keyframes slide{to{transform:translateX(-33.333%)}}

/* ---------------- SECTIUNI ---------------- */
.section{padding:clamp(64px,9.5vw,124px) 0;position:relative;z-index:2}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper2{background:var(--paper-2);color:var(--ink);border-block:1px solid var(--rule)}
.section--ink{background:var(--ink-deep);color:var(--cream)}
.section--paper::after,.section--paper2::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section>.wrap{z-index:1}
/* riglele verticale ale plansei */
.section--paper>.wrap::before,.section--paper>.wrap::after,
.section--paper2>.wrap::before,.section--paper2>.wrap::after{
  content:"";position:absolute;top:calc(var(--s6) * -1);bottom:calc(var(--s6) * -1);
  width:1px;background:var(--rule);opacity:.7;
}
.section--paper>.wrap::before,.section--paper2>.wrap::before{left:calc(var(--pad) - 24px)}
.section--paper>.wrap::after,.section--paper2>.wrap::after{right:calc(var(--pad) - 24px)}

/* capul de sectiune: notatia sta in marginea plansei */
.shead{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
  padding-top:clamp(28px,3.4vw,44px);position:relative;margin-bottom:clamp(36px,5vw,64px);
}
.shead::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease);
}
.shead.is-in::before,.no-js .shead::before{transform:scaleX(1)}
.section--ink .shead::before{background:var(--cream)}
/* toate capetele de sectiune sunt centrate, la fel pe desktop si pe mobil.
   Sectiunile nu mai poarta eticheta cu numele lor deasupra titlului — titlul o spune. */
.shead .stitle{margin-inline:auto}
.shead .slead{margin-top:var(--s4);margin-inline:auto}
.shead--split,.shead--stack{grid-template-columns:minmax(0,1fr)}
.shead--split>div{display:contents}
.shead--split .slead{margin-top:var(--s4);align-self:auto}
.stitle{
  font-size:clamp(27px,3.9vw,52px);text-transform:uppercase;letter-spacing:.008em;
  line-height:1.02;max-width:20ch;text-wrap:balance;
}
.slead{color:var(--ink-soft);max-width:52ch;font-size:clamp(14.5px,1.15vw,16px);text-wrap:pretty}
.section--ink .slead{color:var(--cream-soft)}

/* ---------------- CARDURI SERVICII ---------------- */
/* Fara cutii: coloane direct pe hartie, separate doar de gap si de o linie sus. */
.cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.6vw,38px);
  background:none;border:0;
}
.card{
  position:relative;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid rgba(15,59,57,.18);   /* 18% din tusul temei: la 18% din --rule linia nu se vede pe hartie */
  padding:28px 0 0;
  display:flex;flex-direction:column;
}
.card__no{
  font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--oxide-text);
  display:block;margin-bottom:var(--s5);font-variant-numeric:tabular-nums;text-transform:uppercase;
}
.card h3{font-size:clamp(18px,1.9vw,22px);text-transform:uppercase;margin-bottom:var(--s2);line-height:1.04}
.card h3 em{font-style:italic;color:var(--ink-mute);font-size:.8em}
.card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:var(--s4)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.chips li{
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:5px 11px;
  background:transparent;border:1px solid rgba(220,207,192,.25);border-radius:100px;
}

/* ---------------- TEHNICI ---------------- */
.tech{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,56px);align-items:start}
.tech__list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.tech__tab{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:17px 6px;border-bottom:1px solid var(--rule);color:var(--ink-soft);
  position:relative;transition:color .4s var(--ease);
}
.tech__i,.tech__n{transition:transform .4s var(--ease)}
.tech__tab:hover .tech__i,.tech__tab:hover .tech__n{transform:translateX(10px)}
.tech__tab::before{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--oxide);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.tech__tab:hover{color:var(--ink)}
.tech__tab.is-active{color:var(--ink)}
.tech__tab.is-active::before{transform:scaleX(1)}
.tech__i{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.1em;color:var(--oxide-text);font-variant-numeric:tabular-nums}
.tech__n{font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(16px,1.9vw,23px);flex:1}
.tech__tab svg{width:17px;height:17px;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease);color:var(--oxide)}
.tech__tab.is-active svg,.tech__tab:hover svg{opacity:1;transform:none}

.tech__panels{display:grid;gap:22px}
/* passe-partout */
.tech__frame{
  position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--ink-2);
  border:1px solid var(--rule);outline:10px solid var(--paper);outline-offset:-10px;
}
.section--paper2 .tech__frame{outline-color:var(--paper-2)}
.tech__frame img{width:100%;height:100%;object-fit:cover;clip-path:inset(0);transition:clip-path .6s var(--ease)}
.tech__frame.is-swapping img{clip-path:inset(0 0 0 100%)}
.tech__frameScrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,59,57,.55),transparent 48%)}
.tech__panel h3{font-size:clamp(18px,2.1vw,25px);text-transform:uppercase;margin-bottom:var(--s2)}
.tech__panel p{color:var(--ink-soft);max-width:58ch}
.tech__panel[hidden]{display:none}
.tech__panel{animation:fadeUp .55s var(--ease) both}
.tech__note{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.07em;color:var(--oxide-text);line-height:1.7;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- PROCES ---------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--paper);padding:26px 24px 30px;transition:background .45s var(--ease)}
.step:hover{background:var(--paper-hi)}
.step__n{
  display:grid;place-content:center;width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--oxide);color:var(--oxide-text);
  font-family:var(--f-mono);font-weight:500;font-size:10.5px;margin-bottom:var(--s5);
}
.step h3{font-size:17px;text-transform:uppercase;margin-bottom:var(--s1)}
.step p{color:var(--ink-soft);font-size:14.5px}

/* ---------------- LOCATIE ---------------- */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.place{padding:30px 28px;background:var(--paper);transition:background .45s var(--ease)}
.place:hover{background:var(--paper-hi)}
.place--feat{background:var(--ink-deep);color:var(--cream)}
.place--feat:hover{background:var(--ink-2)}
.place__ico{
  width:40px;height:40px;display:grid;place-content:center;
  border:1.5px solid var(--oxide);color:var(--oxide);margin-bottom:var(--s5);
}
.place__ico svg{width:20px;height:20px}
.place h3{font-size:clamp(19px,2.1vw,25px);text-transform:uppercase;margin-bottom:var(--s2)}
.place p{color:var(--ink-soft);font-size:14.5px;margin-bottom:var(--s4)}
/* Cardul de petrol se scrie DUPA cardul de hartie. `.place--feat p` si `.place p`
   au aceeasi specificitate (o clasa + un tip), deci decide ordinea: cat timp
   statea deasupra, paragraful din „Cu deplasare la tine" primea tusul de hartie
   peste petrol, adica 1,9:1 contrast. */
.place--feat p{color:var(--cream-soft)}
.place--feat .ticks li{color:var(--cream-soft)}

/* ---------------- TARIFE ---------------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.price{position:relative;padding:34px 30px 30px;background:var(--paper);display:flex;flex-direction:column}
.price--feat{background:var(--ink-deep);color:var(--cream)}
.price--feat .price__desc{color:var(--cream-soft)}
.price--feat .ticks li{color:var(--cream-soft)}
.price__tag{
  position:absolute;top:0;left:0;background:var(--oxide-text);color:var(--paper);
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;
}
.price h3{font-size:clamp(19px,2.1vw,25px);text-transform:uppercase;margin-bottom:2px}
.price__val{
  font-family:var(--f-display);font-weight:500;letter-spacing:.006em;
  font-variant-numeric:tabular-nums;
  font-size:clamp(54px,6.6vw,86px);line-height:.92;margin-bottom:var(--s3);
  display:flex;align-items:baseline;gap:.14em;
}
.price__val span{font-family:var(--f-mono);font-weight:500;font-size:.16em;font-weight:400;letter-spacing:.12em;color:var(--ink-mute)}
.price--feat .price__val span{color:var(--cream-mute)}
.price__desc{color:var(--ink-soft);font-size:14.5px;margin-bottom:var(--s4)}
.ticks{display:grid;gap:10px;margin-bottom:var(--s5)}
.ticks li{position:relative;padding-left:24px;font-size:14px;color:var(--ink-soft)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:8px;width:9px;height:5px;
  border-left:1.5px solid var(--oxide);border-bottom:1.5px solid var(--oxide);transform:rotate(-45deg);
}
.price .btn{margin-top:auto}
.price--feat .btn--ghost{--fg:var(--cream);--bd:rgba(243,238,231,.5)}
.prices__note{
  margin-top:var(--s4);font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.06em;
  color:var(--ink-mute);text-align:center;line-height:1.8;
}

/* ---------------- DESPRE (registru tus) ---------------- */
.about{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,5vw,72px);align-items:center}
.about__media{
  position:relative;overflow:hidden;aspect-ratio:2/3;background:var(--ink-2);
  border:1px solid var(--rule-ink);outline:10px solid var(--ink-deep);outline-offset:-10px;
}
.about__media img{width:100%;height:100%;object-fit:cover;object-position:50% 23%}
/* eticheta sta sus: jos ar acoperi mainile, care sunt subiectul fotografiei */
.about__badge{
  position:absolute;left:16px;top:16px;padding:7px 12px;background:var(--ink-deep);
  font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--oxide-lite);
}
.about__badge span{color:var(--cream)}
.about__copy .shead{margin-bottom:var(--s5)}
.about__copy>p{color:var(--cream-soft);margin-bottom:var(--s3);max-width:54ch}
.quote{
  margin:var(--s5) 0;padding:16px 0 16px 22px;border-left:2px solid var(--oxide);
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(17px,2vw,24px);line-height:1.1;color:var(--cream);max-width:24ch;
}
.about__cta{display:flex;flex-wrap:wrap;gap:10px}



/* ---------------- PATTERN DE AMPLITUDINE (R2) ---------------- */
/* placa de 8U cu inele de 3U in colturi: muchiile se racordeaza, deci nu se vede cusatura */
.section--book{position:relative;isolation:isolate}
.section--book::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'><g fill='none' stroke='%23DCCFC0' stroke-width='12'><circle cx='0' cy='0' r='96'/><circle cx='256' cy='0' r='96'/><circle cx='0' cy='256' r='96'/><circle cx='256' cy='256' r='96'/></g></svg>") 0 0/152px 152px repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);
}

/* ---------------- SEMNATURA (R3) ---------------- */
/* Linia de recuperare: intra cu 4 oscilatii neregulate, iese cu 3 calme.
   Se deseneaza o singura data, la intrarea in ecran. */
.sig{
  background:var(--paper);padding:clamp(28px,5vw,56px) var(--pad) clamp(12px,2vw,24px);
  display:flex;justify-content:center;
}
.sig__svg{width:min(100%,var(--wrap));height:auto;color:var(--ink-deep);display:block}
.sig__line{
  fill:none;stroke:currentColor;stroke-width:19.2;stroke-linecap:butt;
  stroke-dasharray:1335;stroke-dashoffset:1335;
}
.js .sig.is-in .sig__line{animation:sig-draw 1.4s var(--ease) 1 forwards}
.no-js .sig__line{stroke-dashoffset:0}
@keyframes sig-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .sig__line{stroke-dashoffset:0}
  .js .sig.is-in .sig__line{animation:none}
}

/* ---------------- SEPARATOR CU ARCE (R2) ---------------- */
.rule-arc{
  background:var(--paper);display:flex;justify-content:center;
  padding:clamp(20px,3.4vw,40px) var(--pad);
}
.rule-arc svg{width:min(100%,760px);height:auto;color:var(--rule);display:block}

/* ---------------- FAQ ---------------- */
.faq .shead{margin-bottom:clamp(28px,4vw,48px)}
.acc{border-top:1.5px solid var(--ink);max-width:940px;margin-left:auto}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__item summary{
  list-style:none;cursor:pointer;padding:19px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(15px,1.7vw,20px);line-height:1.18;color:var(--ink);
  transition:color .35s var(--ease);
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:var(--oxide-text)}
.acc__item summary i{position:relative;width:14px;height:14px;flex:none}
.acc__item summary i::before,.acc__item summary i::after{
  content:"";position:absolute;background:var(--oxide);transition:transform .45s var(--ease),opacity .3s;
}
.acc__item summary i::before{left:0;top:6.5px;width:14px;height:1.5px}
.acc__item summary i::after{left:6.25px;top:0;width:1.5px;height:14px}
.acc__item[open] summary i::after{transform:scaleY(0);opacity:0}
.acc__body p{color:var(--ink-soft);padding:0 4px 22px;max-width:62ch;font-size:14.5px}
.acc__body a{color:var(--oxide-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.acc__item[open] .acc__body{animation:accOpen .5s var(--ease)}
@keyframes accOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------------- PROGRAMARE ---------------- */
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:start}
.book__copy .shead{margin-bottom:var(--s5)}
.contacts{display:grid;border-top:1.5px solid var(--ink)}
.contact{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 4px;border-bottom:1px solid var(--rule);
  transition:color .4s var(--ease);
}
.contact__k,.contact__v{transition:transform .4s var(--ease)}
.contact:hover{color:var(--oxide-text)}
.contact:hover .contact__k,.contact:hover .contact__v{transform:translateX(8px)}
.contact__k{font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.contact__v{font-family:var(--f-display);font-weight:500;letter-spacing:.012em;font-size:clamp(16px,1.9vw,22px);font-variant-numeric:tabular-nums}

.form{background:var(--paper);border:1px solid var(--ink);padding:clamp(20px,2.6vw,30px);display:grid;gap:var(--s4)}
.field{display:grid;gap:9px;border:0;padding:0;margin:0;min-width:0}
.field>label,.field legend{
  font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);padding:0;
}
/* fara opacity: `(optional)` are deja 7,9px, iar un .72 peste --ink-mute il duce
   inapoi la 2,79:1. Diferenta fata de eticheta o face tracking-ul si marimea. */
.field>label small,.field legend small{letter-spacing:.06em}
.field input[type="text"],.field textarea{
  width:100%;background:var(--paper-hi);border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;color:var(--ink);font-family:var(--f-body);font-size:15px;
  caret-color:var(--oxide);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--oxide);box-shadow:inset 0 -2px 0 var(--oxide)}
.field textarea{resize:vertical;min-height:82px;line-height:1.55}
.field input[aria-invalid="true"]{border-color:var(--oxide);background:color-mix(in oklab,var(--oxide) 8%,var(--paper))}
.err{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.05em;color:var(--oxide-text);line-height:1.6}
.err:empty{display:none}
.hint{font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.08em;color:var(--oxide-text);line-height:1.7}

.radios{display:flex;flex-wrap:wrap;gap:6px}
.radios label,.seg label{position:relative;cursor:pointer}
.radios input,.seg input{position:absolute;opacity:0;width:0;height:0}
.radios span,.seg span{
  display:inline-block;border:1px solid var(--rule);background:var(--paper-hi);
  border-radius:var(--btn-radius);
  font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.radios span{padding:9px 13px}
.radios label:hover span,.seg label:hover span{border-color:var(--ink)}
.radios input:checked+span{background:var(--oxide-text);border-color:var(--oxide-text);color:var(--paper)}
.radios input:focus-visible+span,.seg input:focus-visible+span{outline:2px solid var(--oxide);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg span{display:block;text-align:center;padding:13px 8px}
.seg input:checked+span{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--paper)}

.form__preview{border:1px dashed var(--rule);padding:14px 15px;background:var(--paper-hi)}
.form__previewK{
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oxide-text);display:block;margin-bottom:9px;
}
.form__preview p{font-size:13.5px;color:var(--ink-soft);white-space:pre-line;line-height:1.6}
.form__legal{font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.06em;color:var(--ink-mute);text-align:center;line-height:1.8}

/* ---------------- FOOTER (registru tus) ---------------- */
.foot{background:var(--ink-deep);color:var(--cream);padding-top:clamp(44px,6.5vw,72px);position:relative;z-index:2}
.foot__inner{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:34px;padding-bottom:44px}
.foot__brand p{color:var(--cream-mute);font-size:13.5px;max-width:40ch;margin-top:var(--s3)}
.foot__nav,.foot__contact{
  display:grid;gap:10px;align-content:start;
  font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-mute);
}
.foot__nav a,.foot__contact a{transition:color .35s var(--ease)}
.foot__nav a:hover,.foot__contact a:hover{color:var(--oxide-lite)}
.foot__seal{
  height:34px;width:34px;flex:none;color:var(--cream-mute);
  transition:color .5s var(--ease);
}
.foot__bar:hover .foot__seal{color:var(--oxide-lite)}
.foot__bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:18px;border-top:1px solid var(--rule-ink);
  font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-mute);
}

/* ---------------- DOCK MOBIL ---------------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;
  background:var(--ink-deep);border-top:1px solid var(--ink-deep);
  transform:translateY(120%);transition:transform .5s var(--ease);
  padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.dock.is-visible{transform:none}
.dock__btn{
  flex:1;text-align:center;padding:14px 6px;background:var(--paper);color:var(--ink);
  border-radius:var(--btn-radius);
  font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
}
.dock__btn--wa{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(251,250,248,.45);color:var(--cream)}
.dock__btn--solid{background:var(--oxide-text);color:var(--chalk)}

/* ---------------- TO TOP + LIGHTBOX ---------------- */
.totop{
  position:fixed;right:20px;bottom:24px;z-index:70;width:44px;height:44px;
  border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-content:center;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,color .3s,border-color .3s;
}
.totop.is-visible{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--oxide-text);border-color:var(--oxide-text);color:var(--paper)}
.totop svg{width:17px;height:17px}


/* ---------------- CURSOR ---------------- */
.cursor{
  position:fixed;top:0;left:0;z-index:130;pointer-events:none;display:none;
  width:28px;height:28px;margin:-14px 0 0 -14px;
}
.cursor i{
  display:block;width:100%;height:100%;border:1.5px solid var(--oxide);border-radius:50%;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.cursor.is-hot i{transform:scale(1.45);background:rgba(176,114,74,.14)}

/* ---------------- REVEAL ---------------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
/* titlul se descopera din capul de sectiune, nu din propriul observer:
   clip-path pe elementul observat il scoate din calculul IntersectionObserver */
.js .stitle{clip-path:inset(-.2em 0 105% 0);transition:clip-path 1s var(--ease) .12s}
.js .shead.is-in .stitle{clip-path:inset(-.2em 0 -.34em 0)}
.js .stitle.reveal,.js .shead.reveal{opacity:1;transform:none}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width:1025px){.cursor{display:block}}
@media (max-width:1100px){
  .stitle{max-width:16ch}
}
@media (max-width:1024px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .tech{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about__media{aspect-ratio:2/3;max-height:560px}
  .book{grid-template-columns:1fr}
  .acc{margin-left:0}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .section--paper>.wrap::before,.section--paper>.wrap::after,
  .section--paper2>.wrap::before,.section--paper2>.wrap::after{display:none}
}
@media (max-width:720px){
  body{padding-bottom:70px}
  :root{--hero-h:260vh}
  .dock{display:flex}
  .totop{bottom:82px;right:14px}
  .hero__sticky{height:100svh;padding:104px 0 clamp(28px,4vh,48px)}
  .hero__media{background-image:url("media/hero-poster-mobile.jpg");background-position:50% 38%}
  .hero__video{object-position:50% 38%}
  .hero__scrim{
    background:
      linear-gradient(to top,var(--ink-deep) 0%,rgba(15,59,57,.96) 30%,rgba(15,59,57,.86) 48%,rgba(15,59,57,.6) 68%,rgba(15,59,57,.42) 84%,rgba(15,59,57,.62) 100%);
  }
  .hero__title{font-size:clamp(34px,11.5vw,54px);max-width:none;margin-bottom:18px}
  .hero__sub{font-size:14.5px;margin-bottom:var(--s4)}
  .hero__actions{flex-direction:column;gap:8px;margin-bottom:var(--s4)}
  .hero__actions .btn{width:100%}
  .hero__scroll{display:none}
  .hero__facts{display:grid;grid-template-columns:1fr 1fr}
  .hero__facts>div{padding:14px 0 0;border-left:0}
  .hero__facts>div:last-child{grid-column:1/-1;border-top:1px solid var(--rule-ink);padding-top:12px}
  .steps,.places,.prices{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:0}
  .card{padding-top:24px;margin-top:24px}
  .card:first-child{margin-top:0}
  .seg{grid-template-columns:1fr}
  .foot__inner{grid-template-columns:1fr;gap:26px}
  /* Tinte de atins pe telefon: linkurile din subsol aveau 16px inaltime, iar
     printre ele stau tocmai WhatsApp-ul si telefonul. Le facem de 44px fara sa
     schimbam desenul: inaltimea vine din padding, iar `gap` scade la loc. */
  .foot__nav,.foot__contact{gap:2px}
  .foot__nav a,.foot__contact a{display:block;padding-block:14px}
  /* chipsurile de serviciu: 35 -> 44px */
  .radios span{min-height:44px;display:inline-flex;align-items:center}
  .foot__seal{
  height:34px;width:34px;flex:none;color:var(--cream-mute);
  transition:color .5s var(--ease);
}
.foot__bar:hover .foot__seal{color:var(--oxide-lite)}
.foot__bar{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .js .stitle{clip-path:none}
  .shead::before{transform:scaleX(1)}
  .hero__title .line>span{transform:none}
  .marquee__track{animation:none}
}