/* ============================================================
   IMPERIAL FORAJE OLTENIA — prima pagină

   Regulile sistemului, respectate aici fără excepție:
   · fără carduri, fără umbre, fără colțuri rotunjite
   · secțiunile se despart prin LINII, nu prin alternanță de fundal
   · cifra e element de design, nu conținut
   · culoarea vine în blocuri pline, nu în accente
   ============================================================ */

/* ══════════ 01 · HERO ══════════ */
.hero{
  border-bottom:var(--rule-strong);
  padding-block:clamp(40px,5vw,72px) clamp(44px,5.4vw,76px);
}
/* `minmax(0,1fr)`, nu `1fr`: pista implicită a unui grid are dimensiunea
   minimă `auto`, adică min-content-ul copilului. Tabela de preț are celule
   cu `white-space:nowrap`, deci min-content-ul ei era ~403 px — pista se
   lățea, `.wrap` cu ea, și TOATE paginile derulau orizontal pe telefon.
   `minmax(0,…)` taie exact acest lanț. */
.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px);
  align-items:start;
}
.hero__in > *{min-width:0}
@media (min-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,4.5vw,72px)}
}
.hero__eyebrow{margin-bottom:22px;display:inline-block}

/* Scara urcă față de sistemul anterior: 66 → 80 px, greutate 800.
   Într-o direcție construită pe „prețul bătut în cui", un titlu prudent
   contrazice tot restul paginii — dar prima încercare, la 80 px și 14ch,
   spărgea titlul în cinci rânduri și îl făcea ilizibil. 62 px la 17ch e
   pragul la care rămâne dominant fără să se destrame. */
.hero h1{
  font-size:clamp(34px,4.4vw,62px);font-weight:800;
  letter-spacing:-.034em;line-height:1.02;max-width:17ch;
}
/* Accentul din titlu e doar culoare. Prima variantă avea o subliniere
   groasă din `box-shadow`, care pe un titlu de cinci rânduri se rupea în
   cinci bare separate și arăta ca un text marcat cu evidențiatorul.
   Într-un slab greu, culoarea singură e destul de puternică. */
.hero h1 em{font-style:normal;color:var(--ocean-700)}
.hero__lead{
  margin-top:26px;font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.6;
  color:var(--ink-700);max-width:44ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Rândul de note: patru fapte, despărțite de linii verticale. */
.hero__note{
  display:flex;flex-wrap:wrap;gap:0;margin-top:34px;
  border-top:var(--rule);padding-top:18px;
}
.hero__note span{
  font-size:13px;color:var(--ink-600);
  padding:2px 18px 2px 0;margin-right:18px;
  border-right:var(--rule);
}
.hero__note span:last-child{border-right:0;margin-right:0;padding-right:0}
.hero__note b{
  font-family:var(--f-num);font-weight:700;color:var(--ink-950);
  display:block;margin-top:3px;font-size:15px;
}
.hero__tab .ptab{margin:0}

/* ══════════ 02 · CE INTRĂ / CE NU ══════════
   Numele au prefix `lst` pentru că `.tick` era deja luat de reperele
   coloanei de adâncime (`position:absolute; display:flex`). Lista moștenea
   acele reguli și se afișa pe orizontală, peste coloana vecină. Un nume
   generic într-un sistem existent e o coliziune care așteaptă să se
   întâmple. */
.cols2--split{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,52px);
  margin-top:clamp(30px,3.4vw,46px);
}
@media (min-width:840px){ .cols2--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

.col-in__t,.col-out__t{
  font-family:var(--f-display);font-weight:700;font-size:15px;
  letter-spacing:.02em;padding-bottom:12px;margin-bottom:20px;
  border-bottom:var(--rule-strong);
}
.col-in__t{color:var(--ocean-700);border-bottom-color:var(--ocean-700)}
.col-out__t{color:var(--signal);border-bottom-color:var(--signal)}
.col-in__t--dark{color:var(--ocean-300);border-bottom-color:var(--ocean-300)}
.col-out__t--dark{color:var(--signal-dark);border-bottom-color:var(--signal-dark)}

.lst{list-style:none;margin:0;padding:0}
.lst li{
  position:relative;padding:13px 0 13px 30px;
  border-bottom:var(--rule);
  font-size:15.5px;line-height:1.5;color:var(--ink-800);
}
.lst li:last-child{border-bottom:0}
.lst li::before{
  position:absolute;left:0;top:13px;
  font-family:var(--f-num);font-weight:700;font-size:15px;
}
.lst--in li::before{content:"+";color:var(--ocean-600)}
.lst--out li::before{content:"\2212";color:var(--signal)}
.lst--dark li{border-bottom-color:rgba(255,255,255,.14);color:var(--ink-200)}

/* ═══════════════════════════════════════════════════════════════════
   SPLIT3 — două liste cu obiectul în mijloc
   Trei coloane pe desktop: ce intră · obiectul · ce nu intră.
   Ilustrația nu e a treia informație, e axa în jurul căreia se citesc
   celelalte două. De aceea coloana din mijloc e mai îngustă și nu are
   chenar: nu concurează listele, le leagă.
   ═══════════════════════════════════════════════════════════════════ */
.split3{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,3.6vw,48px);
  margin-top:clamp(30px,3.4vw,46px);
}
@media (min-width:1000px){
  .split3{
    grid-template-columns:minmax(0,1fr) minmax(240px,320px) minmax(0,1fr);
    gap:clamp(32px,3.4vw,56px);
    align-items:start;
  }
}
.split3__fig{
  margin:0;
  display:flex;flex-direction:column;align-items:center;
}
/* Pe telefon ilustrația stă între liste, deci are nevoie de aer și de linii
   care să o separe — altfel pare rătăcită în mijlocul unei enumerări. */
@media (max-width:999px){
  .split3__fig{
    padding:clamp(26px,5vw,38px) 0;
    border-block:var(--rule);
  }
}
.split3__img{
  display:block;width:100%;height:auto;
  max-width:340px;
}
@media (max-width:999px){ .split3__img{max-width:min(340px,62vw)} }

.split3__cap{
  margin-top:20px;max-width:34ch;text-align:center;
  font-size:14px;line-height:1.55;color:var(--ink-600);
}
.split3__note{
  display:block;margin-top:8px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--label);
}

/* ═══════════════════════════════════════════════════════════════════
   UZURI — cele două destinații ale apei
   Nu carduri: două coloane despărțite de o linie verticală, cu prețul
   la bază, aliniat pe aceeași linie de bază la amândouă. Ilustrația stă
   pe fundalul paginii, fără ramă și fără fundal propriu — de asta au
   fost cerute cu fundal transparent.
   ═══════════════════════════════════════════════════════════════════ */
.uzuri{
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:var(--rule-strong);
}
@media (min-width:900px){
  .uzuri{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.uz{
  display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,44px) 0;
  border-bottom:var(--rule);
}
@media (min-width:900px){
  .uz{padding-inline:clamp(24px,3vw,46px);border-bottom:0}
  .uz:first-child{padding-left:0;border-right:var(--rule)}
  .uz:last-child{padding-right:0}
}

/* Cutie de înălțime FIXĂ, nu minimă. Cele două ilustrații au proporții
   foarte diferite — una înaltă (casa), una lată (câmpul) — iar cu `min-height`
   cea înaltă își împingea eticheta cu 200 px mai jos decât perechea ei.
   Cu înălțime fixă și `object-fit:contain`, ambele se așază pe aceeași linie
   de bază și textul pornește la același nivel. Lățimile ies diferite, și e în
   regulă: sunt obiecte diferite, nu două variante ale aceluiași. */
.uz__fig{
  display:flex;align-items:flex-end;justify-content:center;
  height:clamp(220px,24vw,320px);
  margin-bottom:clamp(22px,2.4vw,32px);
}
.uz__img{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;object-position:bottom center;
}

.uz__k{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--label);
  padding-bottom:12px;margin-bottom:16px;border-bottom:var(--rule);
}
.uz__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.4vw,29px);letter-spacing:-.02em;
  margin:0 0 12px;color:var(--ink-950);
}
.uz__p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-700);max-width:44ch}

/* Prețul se lipește de baza coloanei: pe două coloane de text de lungimi
   diferite, cifrele rămân aliniate între ele. */
.uz__pret{
  margin:auto 0 0;padding-top:clamp(20px,2.4vw,30px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
}
.uz__pret b{
  font-family:var(--f-num);font-weight:800;
  font-size:clamp(30px,3.4vw,40px);letter-spacing:-.03em;
  color:var(--ocean-600);font-variant-numeric:tabular-nums;
}
.uz__pret span{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--label);
  flex-basis:100%;
}
.lst--dark li::before{color:var(--signal-dark)}
.col-out__n{
  margin-top:18px;font-size:14px;line-height:1.6;color:var(--ink-600);
}
.col-out__n--dark{color:var(--label-dark)}

/* ══════════ 03 · COMPARAȚIA ══════════
   Singurul loc din tot site-ul unde apare culoarea de semnal. Dacă ar
   apărea în trei locuri, nu ar mai semnala nimic. */
.cmp{
  background:var(--ink-950);color:var(--white);
  padding-block:clamp(48px,6vw,84px);
  border-block:var(--rule-strong);
}
.cmp__in{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,60px);
  align-items:center;
}
@media (min-width:900px){ .cmp__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.cmp__k{color:var(--signal-dark)}
.cmp__t{
  margin-top:20px;font-size:clamp(28px,3.6vw,46px);font-weight:800;
  line-height:1.05;letter-spacing:-.03em;max-width:18ch;
}
.cmp__p{
  margin-top:20px;font-size:16.5px;line-height:1.65;
  color:var(--ink-200);max-width:50ch;
}
.cmp__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  color:var(--signal-dark);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:4px;
}
.cmp__go svg{width:17px;height:17px}
.cmp__go:hover{color:var(--white)}

.cmp__box{border-top:2px solid var(--signal-dark);padding-top:22px}
.cmp__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  font-size:15px;color:var(--ink-200);
}
.cmp__row b{
  font-family:var(--f-num);font-weight:800;font-size:clamp(26px,3vw,36px);
  letter-spacing:-.03em;color:var(--signal-dark);
  font-variant-numeric:tabular-nums;
}
.cmp__add{list-style:none;margin:16px 0 0;padding:0}
.cmp__add li{
  font-size:14.5px;color:var(--ink-400);padding:7px 0;
  border-bottom:1px dashed rgba(255,255,255,.15);
}
.cmp__rule{height:2px;background:var(--white);margin:20px 0}
.cmp__row--us b{color:var(--ocean-300)}
.cmp__row--us span{color:var(--white);font-weight:600}
.cmp__note{margin-top:14px;font-size:13.5px;color:var(--label-dark)}

/* ══════════ 04 · SELECTOR PE ADÂNCIME ══════════ */
.depths{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:0;margin-top:clamp(28px,3.2vw,42px);
  border-top:var(--rule-strong);border-bottom:var(--rule-strong);
}
.depth-chip{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 18px;text-decoration:none;
  border-right:var(--rule);
  transition:background .14s ease;
}
.depth-chip:last-child{border-right:0}
.depth-chip:hover{background:var(--ocean-600)}
.depth-chip__m{
  font-family:var(--f-num);font-weight:800;
  font-size:clamp(30px,3.4vw,42px);line-height:1;
  letter-spacing:-.035em;color:var(--ink-950);
}
.depth-chip__m i{
  font-style:normal;font-size:.42em;font-weight:600;
  margin-left:3px;color:var(--label);
}
.depth-chip__p{font-size:13.5px;color:var(--ink-600)}
.depth-chip:hover .depth-chip__m,
.depth-chip:hover .depth-chip__m i,
.depth-chip:hover .depth-chip__p{color:var(--white)}
@media (max-width:640px){
  .depths{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .depth-chip{border-bottom:var(--rule)}
  .depth-chip:nth-child(2n){border-right:0}
}

/* ══════════ 05 · CUM LUCRĂM ══════════
   Listă riglată, nu carduri. Numărul stă în afara coloanei de text, ca
   într-un cuprins tipărit. Sistemul anterior avea șase pași în carduri —
   ăsta era unul dintre elementele care făceau cele două site-uri să
   semene între ele. */
.pasi{list-style:none;margin:clamp(28px,3.2vw,42px) 0 0;padding:0}
.pasi li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 22px;
  padding:24px 0;border-top:var(--rule);align-items:start;
}
.pasi li:last-child{border-bottom:var(--rule)}
.pasi__n{
  font-family:var(--f-num);font-weight:800;font-size:15px;
  color:var(--ocean-600);letter-spacing:.04em;padding-top:4px;
}
.pasi h3{font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.02em}
.pasi p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ink-700);max-width:58ch}
.pasi__t{
  grid-column:2;
  font-family:var(--f-display);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);
}
@media (min-width:820px){
  .pasi li{grid-template-columns:auto minmax(0,1fr) auto}
  .pasi__t{grid-column:3;text-align:right;white-space:nowrap;padding-top:6px}
}

/* Aceiași pași, pe fundal închis.
   Componenta a fost scrisă pentru hârtie și folosită apoi și pe secțiunile
   întunecate (pagina „Despre noi", secțiunea cu regulile de plată). Acolo,
   textul de descriere rămânea pe `--ink-700`: 1,79:1 pe fundalul de cerneală,
   adică practic invizibil. Eticheta din dreapta și numărul aveau aceeași
   problemă, mai blândă.

   Nu schimbăm componenta, îi adăugăm contextul — pe hârtie rămâne cum era. */
:is(.sec--dark,.cmp) .pasi li{border-top-color:rgba(255,255,255,.14)}
:is(.sec--dark,.cmp) .pasi li:last-child{border-bottom-color:rgba(255,255,255,.14)}
:is(.sec--dark,.cmp) .pasi h3{color:var(--bone)}
:is(.sec--dark,.cmp) .pasi p{color:var(--ink-300)}
:is(.sec--dark,.cmp) .pasi__n{color:var(--ocean-300)}
:is(.sec--dark,.cmp) .pasi__t{color:var(--label-dark)}

/* ══════════ 06 · CE FACEM / CE NU ══════════ */
.srv{list-style:none;margin:0;padding:0}
.srv li{border-bottom:1px solid rgba(255,255,255,.14)}
.srv li:last-child{border-bottom:0}
.srv a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;text-decoration:none;
}
.srv b{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--white)}
.srv span{
  font-family:var(--f-display);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--label-dark);white-space:nowrap;
}
.srv a:hover b{color:var(--ocean-300)}

/* ══════════ 07 · UNDE LUCRĂM ══════════
   Tabel riglat cu cifrele reale, nu grilă de carduri. Numărul de lucrări e
   dovada; localitățile fac fiecare rând unic — și, pentru Google, fac cele
   trei pagini de județ să nu semene între ele. */
.zone{
  margin-top:clamp(28px,3.2vw,42px);
  border-top:var(--rule-strong);
}
.zona{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px 24px;align-items:center;
  padding:22px 0;border-bottom:var(--rule);text-decoration:none;
}
.zona:hover{background:var(--bone-2)}
.zona__n{
  font-family:var(--f-num);font-weight:800;
  font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.035em;
  color:var(--ocean-600);min-width:2.4em;grid-row:1/3;
}
.zona__n i{
  display:block;font-style:normal;font-size:.26em;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-top:5px;
}
.zona__j{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(19px,2.1vw,26px);letter-spacing:-.02em;color:var(--ink-950);
  align-self:end;
}
.zona__l{
  grid-column:2;grid-row:2;align-self:start;
  font-size:14px;color:var(--ink-600);line-height:1.5;
}
.zona__go{color:var(--ocean-600);grid-row:1/3;grid-column:3}
.zona__go svg{width:22px;height:22px;transition:transform .16s ease}
.zona:hover .zona__go svg{transform:translateX(4px)}
@media (max-width:620px){
  .zona{grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
  .zona__go{display:none}
  .zona__l{grid-column:1/3;grid-row:3}
}
.zone__mai{
  margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--ink-600);
}
.zone__mai a{
  color:var(--ocean-700);font-weight:600;text-decoration:none;
  border-bottom:1px solid currentColor;white-space:nowrap;
}
.zone__mai svg{width:14px;height:14px;vertical-align:-2px}