/* ==========================================================================
   AURORA · site mobilă la comandă, Brașov
   Sistem de design preluat din reformcph.com (direcția 6 „Colecții"),
   cu valorile măsurate direct în DOM-ul lor:
     · un singur font, TOATE greutățile 400
     · titluri 26px, corp 18px, line-height 1.4
     · negru pur pe alb pur, zero colțuri rotunjite
     · pagina e o stivă de blocuri-imagine, fiecare cu o pereche de două
       rânduri dedesubt: o afirmație + un link subliniat
   Regula de aur a direcției inițiale: nicio greutate peste 400, niciun titlu
   peste 26px. Ierarhia vine din dimensiunea fotografiei, nu din tipografie.

   REDESIGNUL TIPOGRAFIC, 28 august 2026. Regula de mai sus a fost abandonată,
   la cerere: tot site-ul pe 400 cu pași de 1,15–1,3× citea plat, meniul avea
   exact literele textului de pagină, iar titlurile de peste fotografii aveau
   mărime de legendă. Se schimbă DOAR greutățile, scara și ritmul, nu textul,
   nu culorile, nu fontul: o singură greutate nouă pe titluri (600, familia o
   are), scara deschisă la ~1,33 (tokenii --fs-* de mai jos), tracking negativ
   pe titlurile mari și eticheta de secțiune (.kick) ca piesă nouă.
   ========================================================================== */

:root{
  --ink:#000;
  --ink-2:#4A4A4A;
  --ink-3:#6E6E6E;
  /* 3,41:1 pe alb, sub pragul de 4,5:1 pentru text. NUMAI linii, chenare
     și controale dezactivate; niciodată `color` pe text citibil. */
  --ink-4:#8B8B8B;
  --bg:#fff;
  --wash:#F1F0EC;
  --hair:#E4E4E4;
  /* Aurul din sigla AURORA, măsurat în PNG-ul clientului: #C2A980. Pe negru
     e citibil, pe alb are 1,9:1, deci textul primește o variantă închisă a
     aceleiași nuanțe (5,2:1), iar tonul original rămâne doar pe linii, care
     n-au prag de contrast. În afara mărcii, aurul apare în patru forme, ca
     accentul să nu fie de fiecare dată același lucru: bara de 84px care
     deschide secțiunile (`section.sep`), pastila campaniei (`.pr-tag`),
     supratitlul cu fir (`.ey`) și numerele celulelor din „Cum alegi"
     (`.picks .n`). Linie, suprafață, literă mică și cifră: patru registre,
     nu patru locuri unde am pus aceeași bară. Peste asta nu se mai adaugă. */
  --gold-ink:#7A5F30;
  --gold-line:#C2A980;
  --wa:#25D366;              /* verde WhatsApp, folosit doar pentru siglă */
  --err:#8C2019;             /* roșu de eroare, desaturat ca să stea lângă negru pur */
  --font:"Hanken Grotesk",Helvetica,Arial,sans-serif;

  /* Scara tipografică a redesignului din 28 august 2026. Raport de ~1,33
     între trepte; corpul de text rămâne neschimbat. Greutatea 600 e singura
     adăugare reală — restul sunt mărimi și tracking. */
  --fs-hero:clamp(38px,5.2vw,64px);
  --fs-h2:clamp(28px,3.4vw,40px);
  --fs-h3:24px;
  --fs-card:21px;
  --fs-lead:19px;
  --fs-small:16px;   /* textul din carduri; era 14px */
  --fs-kick:11px;
  --fs-nav:15px;
  --fw-title:600;
  --fw-body:400;
  --ls-hero:-.03em;
  --ls-h2:-.022em;
  --ls-kick:.16em;

  /* O SINGURĂ scară de spațiere verticală, cu O SINGURĂ valoare. Golurile
     dintre secțiuni erau întâi 56 / 24 / 0 / 56 / 56, apoi doi pași, unul
     întreg și o jumătate. Doi pași par mai bogați decât unul, dar orice
     pagină care îi amestecă are un bloc care stă între ei, cu un gol mic
     deasupra și unul dublu dedesubt. Clientul a găsit blocul ăla de trei
     ori la rând, în trei locuri diferite, ceea ce e chiar dovada.
     Valoarea păstrată e cea mică: la 104px secțiunile pluteau. */
  /* Runda a treia, 27 august 2026: clientul a reclamat golul alb de sub firul
     Ariadnei si de deasupra benzilor cu cifre, pe patru pagini diferite. De la
     52px la 34px pe ecran mare, adica o treime mai putin. Sectiunile tot nu se
     lipesc: la 34px raman de doua ori cat interlinia textului, deci pasul se
     citeste in continuare ca pas, nu ca respiratie intre paragrafe. */
  --sp:clamp(20px,1.9vw,27px);

  /* Toate cardurile de cameră au ACEEAȘI înălțime, indiferent câte sunt pe
     rând și fără excepții. Înainte, raportul fix dădea 554 / 423 / 277px,
     ultimul rând era jumătate din primul, ceea ce citea ca greșeală, nu ca
     ierarhie. Ierarhia vine din poziție și din numărul de proiecte. */
  --room-h:clamp(230px,25vw,360px);

  /* Măsura textului de corp. Era 52ch pe îndemn, 56ch pe deschideri, 64ch
     în serviciu, trei lățimi diferite pentru același fel de text, deci
     trei margini din dreapta care nu se aliniau între ele. */
  --text:70ch;

  --ease:cubic-bezier(.2,.6,.2,1);

  /* Forma, 27 august 2026. Site-ul avea si colturi rotunjite (cardurile de
     portofoliu, pastilele) si colturi drepte (butoanele, filtrele, cardurile
     de mostra), adica doua sisteme in aceeasi pagina. Clientul a cerut unul
     singur. Am ales rotunjit, cu scara masurata la referinta: 10px carduri,
     7px controale, 5px pastile si etichete, 3px patrate de culoare. */
  --r-card:10px;
  --r-ui:7px;
  --r-pill:5px;
  --r-sw:3px;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:18px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-weight:var(--fw-title);font-size:var(--fs-h2);line-height:1.12;margin:0;letter-spacing:var(--ls-h2)}
h3{font-size:20px;letter-spacing:-.012em}

.w{max-width:1440px;margin:0 auto;padding:0 24px}
.muted{color:var(--ink-3)}

/* Eticheta de secțiune: rândul mărunt cu majuscule care anunță ce urmează,
   înaintea titlului. E al cincilea registru al aurului, asumat de redesign:
   literă mică, în varianta închisă a nuanței, singura citibilă pe alb. */
.kick{
  display:block;font-size:var(--fs-kick);font-weight:var(--fw-title);
  letter-spacing:var(--ls-kick);text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px;
}

/* --- antet ----------------------------------------------------------------
   Linia de jos apare doar după ce pagina a fost derulată. Fără ea, conținutul
   aluneca sub antetul lipit fără nicio separare vizibilă. */
header{
  position:sticky;top:0;background:var(--bg);z-index:50;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
header.scrolled{border-bottom-color:var(--hair)}
.hrow{display:flex;align-items:center;gap:30px;height:64px}
/* Marca: monograma A/M decupată din sigla clientului, cu fundalul negru scos,
   deci aurul rămâne exact cum e în original. E singura pată de culoare din
   site; restul paginii rămâne negru pe alb. Numele stă lângă ea, cu
   descriptorul dedesubt, mic și spațiat, ca în siglă. */
.mark{display:inline-flex;align-items:center;gap:13px;flex:none}
/* 40px, nu 36: în redesign meniul se retrage (mai mic, mai gri), iar sigla
   urcă un pas, ca marca să rămână cel mai apăsat lucru din rând. */
.mark .sig{width:auto;height:40px;flex:none;display:block;object-fit:contain}
.mark .nm{display:flex;flex-direction:column;line-height:1}
/* Spațierea largă dintre litere e măsurată din sigla clientului: acolo
   „AURORA" e de 11,5 ori mai lat decât înalt, ceea ce iese la 0,72em între
   litere. Marja negativă din dreapta taie golul de după ultimul R, altfel
   linia de dedesubt ar depăși cuvântul cu o literă. */
.mark .n1{font-size:18px;letter-spacing:.72em;margin-right:-.72em}
/* Descriptorul stă între două linii care merg până la capetele cuvântului de
   deasupra, ca în siglă. Liniile sunt pseudo-elemente: rândul are lățimea
   dată de „AURORA", iar ele iau ce rămâne. */
.mark .n2{
  display:flex;align-items:center;gap:7px;
  margin-top:7px;font-size:7px;letter-spacing:.68em;
  text-transform:uppercase;color:var(--gold-ink);
}
.mark .n2::before,.mark .n2::after{
  content:"";flex:1 1 auto;height:1px;background:var(--gold-line);
}
/* Golul de după ultima literă ar împinge linia din dreapta cu 6px mai încolo
   decât pe cea din stânga; îl scoatem din calcul. */
.mark .n2::after{margin-left:-.68em}
header nav{display:flex;gap:24px}
/* Redesign: meniul devine cadru, nu conținut. Era scris cu exact literele
   textului de pagină (17px/400/negru) și citea ca o propoziție; la 15/500 în
   gri se retrage, iar titlurile câștigă contrast fără să se atingă de ele.
   Umplutura de 5px duce ținta la 15×1,4+10 = 31px. */
header nav a{
  font-size:var(--fs-nav);font-weight:500;color:var(--ink-2);padding:5px 0;
  transition:color .2s var(--ease);
}
header nav a:hover{color:var(--ink)}
/* Pagina în care ești: linie aurie de 2px sub cuvânt. Aurul primește astfel
   o treabă de sistem (indicator de stare), nu doar una decorativă. */
header nav a[aria-current="page"]{
  color:var(--ink);
  background-image:linear-gradient(var(--gold-line),var(--gold-line));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;
}
/* Telefonul lângă buton prinde publicul care oricum sună: la mobilă la
   comandă e jumătate din cereri. Butonul e singurul din rând, negru: motivul
   pentru care antetul e lipit sus e să țină acțiunea la îndemână. */
.hcta{margin-left:auto;display:flex;align-items:center;gap:18px}
.hcta .tel{
  font-size:var(--fs-nav);font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:color .2s var(--ease);
}
.hcta .tel:hover{color:var(--ink)}
.hcta .btn{font-size:var(--fs-nav);padding:10px 18px;white-space:nowrap}

/* --- mișcare -------------------------------------------------------------
   Reform lasă fotografia să se apropie ușor la hover; e singurul lucru care
   se mișcă pe tot site-ul lor. Copiem exact atât, nimic altceva nu animă. */
.fig{overflow:hidden}
/* `<picture>` e doar un ambalaj pentru `<source>`: browserul alege din el si
   deseneaza tot `<img>`-ul dinauntru. `display:contents` il scoate cu totul
   din asezare, ca fotografia sa ramana copilul direct al casetei si sa se
   aseze exact ca inainte sa existe ambalajul. */
picture{display:contents}
.fig img{transition:transform .7s var(--ease)}
a:hover .fig img,.room:hover .fig img{transform:scale(1.035)}

/* Linia de subliniere crește dinspre stânga, nu apare brusc. */
.u{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 1px;padding-bottom:3px;
  transition:background-size .3s var(--ease);
}
a:hover > .u,a.u:hover,.room:hover .u{background-size:100% 2px}

/* Prima oprire a tastaturii. Stă scoasă din pagină până primește focus,
   nu `display:none`, care ar scoate-o și din ordinea de tabulare. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bg);color:var(--ink);border:1px solid var(--ink);
  padding:12px 18px;font-size:16px;
}
.skip:focus{left:24px;top:12px}
/* Reperul primește focus programatic din skip link; conturul n-are ce
   spune acolo, pentru că nu e un control. */
#continut:focus{outline:0}

/* Antetul lipit are 64px și acoperă exact elementul spre care browserul
   derulează la Shift+Tab. Fără asta, omul are focusul pe un link pe care
   nu-l vede. (WCAG 2.2, 2.4.11 Focus Not Obscured) */
html{scroll-padding-top:80px}

/* Accesibilitate: navigarea din tastatură trebuie să fie vizibilă. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,label:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
/* Câmpurile de text au deja un indicator de focus, linia de jos se îngroașă
   și devine neagră. Conturul peste ea ar fi fost al doilea semnal pentru
   aceeași stare. Casetele de bifat îl păstrează, ele n-au altul. */
.field input[type="text"]:focus-visible,.field input[type="tel"]:focus-visible,
.field input[type="email"]:focus-visible{outline:0}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  a:hover .fig img,.room:hover .fig img,.pf-card:hover .fig img{transform:none}
  .gal .grid.strip{scroll-behavior:auto}
  .gal-open:hover img{transform:none}
}

/* --- bloc-imagine cu pereche de rânduri (tiparul Reform) ------------------ */
.block{margin-bottom:var(--sp)}
.block .fig.full{height:min(84vh,780px)}
.block .fig.sq{aspect-ratio:4/5}

/* --- ORDINEA DE PE PRIMA PAGINĂ -------------------------------------------
   `main` e o coloană flexibilă, deci ordinea de pe ecran se poate da de aici,
   fără să se mute nimic în HTML.

   A rămas deschiderea pusă înaintea tuturor și invitația imediat după ea.
   Banda de cifre nu mai apare pe listă: a intrat în fotografia de deschidere,
   ca ultim rând al ei, deci nu mai e o secțiune de ordonat.

   Numerele sunt rare (1, 3, apoi 4 pentru tot restul): celelalte secțiuni
   rămân toate pe 4 și își păstrează între ele ordinea din pagină. */
.home{display:flex;flex-direction:column}
.home > *{order:4}
.home > .block:first-of-type{order:1}
.home > .pitch{order:3}

/* --- fotografia de deschidere, singură pe primul ecran --------------------
   Poza pornește LIPITĂ de antet, la cerere (29 august 2026). A stat o vreme
   centrată în ecranul rămas sub antet, cu același aer deasupra și dedesubt;
   pe ecranele înalte, unde poza se oprește la plafonul de 780px, aerul acela
   creștea și rămânea un gol mare între bara de navigație și fotografie.

   Cele 65px sunt antetul: `.hrow` are 64 plus linia de un pixel de sub el,
   care există mereu, transparentă până la derulare. Cei 24 în plus lasă
   marginea de jos a pozei deasupra liniei de plutire, ca banda de cifre să
   nu se taie.

   `svh` și nu `vh`: pe telefon `vh` măsoară ecranul cu bara browserului
   ascunsă, deci poza ar fi ieșit mai înaltă decât ce se vede și banda de
   cifre s-ar fi ascuns sub bara de adrese. Plafonul de 780px rămâne: pe un
   ecran foarte înalt poza nu se întinde la nesfârșit, iar sub ea se vede
   începutul invitației, care e oricum un semn bun că pagina continuă. */
.home > .block:first-of-type{
  margin-bottom:var(--sp);
}
.home > .block:first-of-type .fig.full{
  width:100%;
  height:min(780px, calc(100svh - 65px - 24px));
  /* Cifrele stau ACUM pe fotografie, ca ultim rând al ei. Caseta devine o
     coloană lipită de bază, iar poza iese din flux și umple cadrul, ca banda
     să se poată așeza peste ea. E tiparul de la deschiderile paginilor
     interioare, unde titlul stă tot peste imagine; vezi `.phero .fig.full`. */
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.home > .block:first-of-type .fig.full img{position:absolute;inset:0}
/* Rândul de pe fotografie. Nu e titlul paginii, e o singură frază care spune
   ce vindem; h1-ul stă în invitație, dedesubt.

   AȘEZAREA. Stă jos-stânga, imediat deasupra benzii de cifre, pe axul din
   stânga al paginii. E tiparul deschiderilor interioare, unde titlul stă tot
   în colțul de jos (`.phero .fig.full h1`), iar pe prima pagină colțul ăla e
   singurul loc din cadru care nu are nimic de arătat: bucătăria e în stânga
   sus, masa în dreapta, jos e pardoseala.

   Fraza și cifrele fac împreună o singură coloană lipită de baza fotografiei:
   întâi ce vindem, apoi cu cine are de-a face omul.

   Mărimea urcă peste cei 26px ai titlurilor din pagină, dar rămâne în
   registrul direcției: aceeași greutate 400, fără majuscule. Aici fraza n-are
   text în jur care să-i dea scara, ci un cadru de 1200px.

   VARIANTA CENTRATĂ, încercată înainte, a rămas în foaie: se pune `centrat`
   pe casetă, `<div class="fig full centrat">`, și fraza trece la mijlocul
   cadrului, cu umbra ei cu tot. Regulile sunt mai jos. */
/* Eticheta, primul rând al colțului de jos. Aceleași litere rărite și
   scrise mare ca la zilele din programul atelierului (`.hours .d`), ca să se
   citească drept etichetă, nu drept al doilea rând de text.

   În capul fotografiei nu poate sta: acolo cadrul are tavanul alb, unde alb
   pe alb dă 2:1, și ar fi cerut un al doilea voal doar pentru un rând. */
/* Albă, nu aurie, pe ecranul lat: eticheta stă deasupra titlului, unde
   voalul abia începe, iar auriul #C2A980 se pierdea în marmura și lemnul
   din fotografie (reclamat pe 29 august 2026) — aceeași poveste ca la
   deschiderile interioare. Auriul rămâne pe telefon, unde eticheta coboară
   pe voalul plin de la baza pozei; vezi resetarea de la 640px. */
.home > .block:first-of-type .fig.full .et{
  position:relative;z-index:1;
  margin:0;padding:0 24px 16px;
  color:rgba(255,255,255,.92);
  font-size:var(--fs-kick);font-weight:var(--fw-title);
  letter-spacing:var(--ls-kick);text-transform:uppercase;
}
.home > .block:first-of-type .fig.full .say{
  position:relative;z-index:1;
  margin:0;padding:0 24px 24px;
  /* Redesign: 34px peste o fotografie de lățime completă era mărime de
     legendă de imagine, nu de titlu. Urcă la scara de hero (max 64px), cu
     greutatea 600 și tracking negativ. Măsura de 17ch rupe fraza pe trei
     rânduri scurte, ca un titlu, nu ca o legendă întinsă. */
  max-width:17ch;
  color:#fff;font-size:var(--fs-hero);font-weight:var(--fw-title);
  letter-spacing:var(--ls-hero);line-height:1.05;
}
/* Varianta centrată. `margin:auto` într-o coloană flexibilă lipită de bază:
   golul rămas se împarte egal deasupra și dedesubt, deci fraza stă la
   mijlocul fotografiei, iar banda de cifre rămâne unde era, pe ultimul rând.
   Măsura scade la 26ch, ca fraza să se rupă pe două rânduri scurte. */
.home > .block:first-of-type .fig.full.centrat .say{
  margin:auto;padding:0 24px;
  max-width:26ch;text-align:center;text-wrap:balance;
}
/* Umbra din spatele frazei, numai în varianta centrată. Nu e efect, e singura
   cale ca fraza să se citească la mijlocul cadrului: acolo poza prinde
   perdelele albe din dreapta, iar alb pe alb dă 1,1:1, adică nimic. Un voal
   uniform peste toată fotografia n-ajunge nici la 0,4 opacitate (3,1:1) și în
   schimb stinge poza cu totul, deci întunericul stă doar în jurul frazei și
   se pierde spre margini.

   Elipsa e mai lată și mai înaltă decât textul (de două ori lățimea, de
   patru ori înălțimea), ca marginea ei să cadă în afara literelor: în tot
   dreptunghiul frazei voalul rămâne peste 0,65, adică peste 7:1 chiar pe
   pixelul cel mai luminos, iar pierderea spre transparent se întâmplă pe
   fotografie, unde nu se citește ca o pată.

   Jos-stânga nu e nevoie de ea: acolo ajunge voalul de la baza pozei. */
.home > .block:first-of-type .fig.full.centrat .say::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:50%;width:200%;height:400%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(0,0,0,.74),rgba(0,0,0,.70) 50%,rgba(0,0,0,.34) 80%,rgba(0,0,0,0));
  pointer-events:none;
}
/* Voalul e necesar, nu decorativ: în dreapta jos fotografia are perdele albe
   și pardoseală deschisă, unde alb pe alb dispare. Ține acum trei lucruri,
   fraza, îndemnul și banda de cifre, deci urcă la 70%, ceva peste cel de pe
   paginile interioare; mai sus n-are rost, acolo stă subiectul pozei.

   Eticheta din colțul de sus n-are nevoie de el: acolo fotografia e corpul
   negru al bucătăriei, adică deja întuneric. */
.home > .block:first-of-type .fig.full::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70%;
  background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.74) 30%,rgba(0,0,0,.42) 62%,rgba(0,0,0,0));
  pointer-events:none;
}
/* Cartonul deschiderii. Pe ecran lat NU e un obiect: `display:contents` îl
   scoate din așezare, iar titlul și butoanele rămân copiii direcți ai
   coloanei fotografiei, exact ca înainte să existe. Devine carton numai pe
   telefon — varianta B din machetele din 29 august 2026 — vezi resetarea de
   la 640px. Rândul de susținere și cifrele scurte sunt piese de telefon și
   stau ascunse pe lat. */
.home > .block:first-of-type .fig.full .hcard{display:contents}
.home > .block:first-of-type .fig.full .spun,
.home > .block:first-of-type .fig.full .mini{display:none}

/* Acțiunile, sub frază. Redesign: primul ecran trebuie să conțină o acțiune
   care ARATĂ ca o acțiune, nu un link subliniat de 17px. Butonul plin alb e
   principala; al doilea, conturat, duce direct la telefon și nu concurează.

   Umplutura de jos, 30px, e golul dintre butoane și linia benzii de cifre. */
.home > .block:first-of-type .fig.full .act{
  position:relative;z-index:1;
  margin:0;padding:0 24px 30px;
  display:flex;flex-wrap:wrap;gap:12px;
}
.home > .block:first-of-type .fig.full .act .btn{font-size:17px;padding:15px 28px}
/* Banda de cifre, scrisă pe fotografie. Desenul rămâne cel de la `.facts`,
   patru celule egale despărțite de linii; se schimbă culorile, care trec în
   alb, și liniile de sus și de jos: cea de jos ar dubla marginea pozei, iar
   sus rămâne una subțire, care desparte cifrele de imagine.

   Celulele respiră mai puțin decât într-o bandă liberă, 18px în loc de 22:
   aici n-au o secțiune a lor, ci acoperă fotografia, iar fiecare pixel în plus
   e un pixel de poză mai puțin. */
.facts.over{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:0;
  margin-bottom:0;
}
.facts.over > div{
  border-right-color:rgba(255,255,255,.28);
  padding-top:18px;padding-bottom:18px;
}
/* Redesign: etichetele trec la 10px cu majuscule și spațiere, în auriul de
   brand. La 14px normale concurau cu cifrele pe care trebuie să le anunțe.
   Cifrele urcă la 22/600, tabulare, ca să se citească drept cifre. */
.facts.over .k{
  margin-bottom:7px;color:var(--gold-line);
  font-size:10px;font-weight:var(--fw-title);letter-spacing:.14em;text-transform:uppercase;
}
.facts.over .v{
  color:#fff;font-size:22px;font-weight:var(--fw-title);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.block .say{padding:16px 0 0}
.block .say .a{display:block}
.block .say .b{display:block;margin-top:4px;color:var(--ink-3)}
.block .say .b:hover{color:var(--ink)}

/* Titlul paginii. Reform își permite un hero fără niciun cuvânt pentru că
   toată lumea știe cine sunt; un atelier din Brașov nu-și permite. Rămâne
   însă în registrul direcției: 26px, greutate 400, fără majuscule. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Textul celor trei carduri sta PE fotografie, la cerere, nu sub ea.

   E acelasi obiect ca la cardurile de camera (`.room .over`), nu unul nou:
   acelasi degrade de jos in sus, aceeasi umplutura, acelasi alb plin pentru
   randul de sus si 82% alb pentru link. Cardurile de camera stau la 200px mai
   jos in aceeasi pagina, deci doua feluri de a scrie peste o poza s-ar fi vazut.

   Voalul urca pana la 100% din inaltimea lui, nu doar cat textul: fotografiile
   sunt in format inalt, 4:5, si au zone luminoase jos, unde albul s-ar pierde.

   `.fig` are deja `overflow:hidden`, deci degradeul nu iese din colturi. */
.three .fig.sq{position:relative}
.three .fig .say{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:44px 20px 16px;
  background:linear-gradient(to top,
    rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 40%,rgba(0,0,0,0) 100%);
}
.three .fig .say .a{color:var(--bg)}
.three .fig .say .b{color:rgba(255,255,255,.82)}
.three .fig .say .b:hover{color:var(--bg)}

/* --- camere ---------------------------------------------------------------
   Categorii, nu camere: bucătăria deschide, cât două carduri; depozitarea
   (dressing și dulapuri, la un loc) și "Altele" stau în dreapta, una peste
   alta. Ordinea e după câte proiecte am livrat, nu după prestigiu, iar
   singurul card mai mare e cel cu cele mai multe proiecte, ca ierarhia să nu
   fie arbitrară. Baia a ieșit din grilă cât timp n-are fotografii proprii. */
.rooms{margin-bottom:var(--sp)}
.rooms .hd{display:flex;align-items:baseline;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.rooms .hd a{font-size:17px;color:var(--ink-3)}
.rooms .hd a:hover{color:var(--ink)}
.rooms .row{margin-bottom:24px}
.rooms .row:last-child{margin-bottom:0}
.room{display:block}
/* aceeași înălțime pe toate cardurile */
.room .fig{height:var(--room-h)}
/* Decupaj spre partea de sus: fotografia de dormitor are dulapurile
   in treimea superioara, iar centrul cadrului e salteaua. Fara asta,
   cardul categoriei „Dressing si dulapuri" arata un pat. Lucreaza doar
   cand caseta e mai inalta decat raportul fotografiei; cand e mai lata,
   decupajul e pe orizontala si regula n-are ce taia. */
.fig.sus img{object-position:50% 20%}
/* Numele camerei stă PESTE fotografie, în colțul de jos, nu pe alb sub ea.
   Sub poză, numele și „Vezi portofoliul" erau două rânduri de text pe o bandă
   albă care creștea cardul cu ~60px și rupea șirul de fotografii în dreptunghi
   de poză, dreptunghi de alb, dreptunghi de poză.

   Nu e un tipar nou: e același strat ca la cardurile de lucrări
   (`.works.cards .over`) și ca la deschiderile de pagină (`.phero .fig.full`).
   Degradeul face textul lizibil, nu o bandă opacă: sus e transparent, deci nu
   taie fotografia în două, iar jos ajunge la 80% negru, unde albul are 12,6:1. */
.room .fig{position:relative}
/* Umplutura de sus e mai mică decât la cardurile de lucrări (60px pe un cadru
   4:3): în mozaic, cele două cartonașe din dreapta au doar 251px înălțime, iar
   acolo un strat de 135px acoperea 54% din fotografie. La 40px scade la ~41%,
   din care partea de sus e aproape transparentă. */
.room .over{
  position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;
  background:linear-gradient(to top,
    rgba(0,0,0,.80) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 100%);
}
.room .nm{display:block;margin-top:0;color:var(--bg)}
/* Numărul de proiecte, mai stins decât numele, dar tot alb: pe fotografie,
   griul de text (--ink-3) n-ar avea de ce să se agațe. 72% alb peste stratul
   închis dă 7,4:1, peste pragul de 4,5:1. */
.room .qt{color:rgba(255,255,255,.72)}
.room .go{display:block;margin-top:3px;font-size:17px;color:rgba(255,255,255,.82)}
.room:hover .go{color:var(--bg)}

/* Rândul de deschidere e un mozaic, nu o pereche: bucătăria (categoria cu
   cele mai multe proiecte) ocupă stânga pe toată înălțimea, iar depozitarea
   (dressing, dulapuri) stă în dreapta, un card peste altul. Restul camerelor
   rămân perechi egale dedesubt, ca înainte. */
.rooms .row.mosaic{
  /* Înălțimea întregului mozaic, legată de ecran: rândul trebuie să încapă
     într-un singur ecran, sub antet și sub titlul secțiunii. Lăsat pe auto,
     îl dicta poza bucătăriei, un cadru portret 2:3 care, la 596px lățime,
     cerea 895px înălțime și împingea dulapurile mult sub linia de plutire. */
  --mosaic-h:clamp(400px,78vh,700px);
  display:grid;
  grid-template-columns:1fr 1fr;
  /* Două rânduri egale: împreună cu gap-ul dau exact --mosaic-h. */
  grid-template-rows:repeat(2,calc((var(--mosaic-h) - 24px) / 2));
  gap:24px;
}
.rooms .row.mosaic .room{display:flex;flex-direction:column;min-height:0}
.rooms .row.mosaic .lead{grid-row:1 / span 2}
/* Rândurile sunt definite, deci fotografia doar absoarbe ce rămâne după
   numele camerei și linkul de dedesubt. Fără min-height: acela ar fi putut
   depăși rândul și ar fi umflat grila înapoi. */
.rooms .row.mosaic .room .fig{flex:1 1 auto;height:auto;min-height:0}

/* Categoria-umbrelă închide secțiunea singură, pe toată lățimea. E o bandă,
   nu un card: "Altele" nu e a patra cameră, ci tot ce n-a încăput în primele
   trei, iar o jumătate de rând ar fi lăsat un gol în dreapta. */
.rooms .row.full .fig{height:clamp(260px,30vw,420px)}

/* --- formular de contact --------------------------------------------------
   Aceleași reguli: fără colțuri rotunjite, fără umbre, o singură greutate.
   Câmpurile sunt linii, nu casete, chenarul complet ar fi introdus un
   vocabular vizual pe care restul paginii nu îl folosește nicăieri.

   Trei lucruri schimbate față de prima versiune, toate din același motiv,
   formularul era singurul loc din pagină care nu vorbea limba paginii:
     · casetele native de bifat sunt rotunjite și albastre, adică exact cele
       două lucruri care nu apar nicăieri altundeva. Desenăm pătrate proprii.
     · nouă câmpuri stivuite duceau formularul mult sub coloana din stânga.
       Perechile scurte (nume/telefon, email/localitate) stau acum pe un rând.
     · liniile de sub câmpurile goale erau negre, toate la fel de apăsate ca
       textul. Acum sunt gri și se înnegresc la focus, deci linia neagră chiar
       înseamnă ceva. */
/* --- pagina de contact ----------------------------------------------------
   Istoria, pe scurt, ca să nu se repete:
     · v1, bandă de contact pe toată lățimea, formular centrat la 660px sub
       ea: trei măsuri diferite în trei ecrane de derulare.
     · v2, o singură măsură de 1120px, formular la stânga, informații la
       dreapta, fără nimic între ele: cele două coloane citeau ca una singură.
     · v3, aceeași măsură ca restul site-ului și o linie verticală între
       coloane. Se despărțeau, dar rămânea tocmai tiparul pe care l-am scos din
       tot restul site-ului: conținutul într-o parte, restul în cealaltă. Iar
       ce scria în coloana îngustă (ce se întâmplă după ce trimiți) e exact
       lucrul de care omul are nevoie ca să apese butonul, deci n-avea ce căuta
       pe margine, la 16px.
     · v4, aceasta, NICIO coloană laterală. Pagina e o singură coloană de
       benzi pe toată lățimea, citite de sus în jos:
         1. titlul și invitația;
         2. cele trei căi directe (telefon, WhatsApp, email), pentru cine nu
            vrea să completeze nimic, sus, nu îngropate sub formular;
         3. formularul, ca trei întrebări numerotate, fiecare o bandă întreagă;
         4. ce se întâmplă după ce trimiți, în patru celule;
         5. atelierul, pentru cine vrea să treacă pe acolo.
   Aceleași obiecte ca peste tot: celule despărțite de linii și rânduri
   numerotate. Pagina de contact nu mai are componente proprii. */

/* Întrebările formularului. Același rând numerotat ca pașii de lucru, doar că
   sub titlu vin câmpuri, nu explicații. Numerele nu sunt decor: spun din
   prima că sunt trei lucruri de făcut, nu nouă câmpuri. */
/* Banda de dedesubt e secțiune nouă, nu al patrulea rând al formularului. */
/* Coloana formularului. E singura măsură îngustă din tot site-ul și are un
   motiv precis: restul paginilor sunt de citit, asta e de completat. Pe
   1217px, patru câmpuri pe un rând plus nouă căsuțe de bifat una lângă alta
   arătau ca un tablou de bord, ochiul nu avea un drum. La 760px drumul e
   singurul posibil: în jos. */
.form-col{max-width:760px;margin-left:auto;margin-right:auto}
/* Fără `scroll-margin-top` aici: <html> are deja `scroll-padding-top:80px`
   pentru antetul lipit, iar cele două se adună, panoul se oprea la 160px de
   marginea de sus, cu 80px de gol degeaba. */
#contact-form{margin-bottom:var(--sp)}
.form-intro{margin:0 0 30px;color:var(--ink-2)}

.qs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
/* Fiecare pas se deschide cu o linie neagră pe toată coloana. Liniile gri de
   un pixel nu mergeau: exact așa arată și câmpurile dinăuntru, deci pasul și
   conținutul lui se citeau la fel. Negrul e rezervat aici pentru începutul
   unui pas, nimic altceva din formular nu îl folosește. */
.q-row{border-top:1px solid var(--ink);padding:30px 0 6px}
.q-hd{display:flex;align-items:baseline;gap:0 16px;flex-wrap:wrap;margin-bottom:26px}
/* Numărul e la fel de apăsat ca titlul: e jumătate din informația rândului,
   „pasul 1 din 3". La 14px gri se citea ca o notă de subsol. */
.q-hd .n{font-size:20px;color:var(--ink);width:44px;flex:none}
.q-hd h2{font-size:20px}
/* Indicația trece pe rândul ei, aliniată sub titlu, nu în continuarea lui,
   unde se lipea de el și se citea ca o parte din titlu. */
.q-hd .hint{font-size:14px;color:var(--ink-3);width:100%;padding-left:60px;margin-top:5px}
/* Câmpurile pornesc de sub titlu, nu de sub număr: numărul e o șină, nu o
   coloană de conținut. */
.q-in{padding-left:60px}

/* Două câmpuri pe un rând, nu patru: în coloana de 760px, patru ar avea
   ~160px fiecare, sub cât trebuie unui număr de telefon. */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
/* Camerele și detaliile nu mai încap alături în coloana îngustă. Stivuite,
   fiecare își primește toată lățimea, cele nouă camere intră pe trei
   rânduri, nu pe cinci. */
.q-split{display:grid;grid-template-columns:1fr;gap:0;align-items:start}

/* --- modul wizard: un pas pe ecran ----------------------------------------
   Clasa `wz-on` o pune JavaScript-ul. Tot ce urmează e sub ea, deci fără JS
   formularul rămâne cele trei întrebări una sub alta, cu un singur buton.

   Panoul are înălțime fixă, nu una dictată de conținut: pasul 2 are nouă
   căsuțe de bifat și o casetă de text, pasul 3 are o bifă. Dacă înălțimea ar
   urma conținutul, butonul ar sări cu 200px între pași, iar omul l-ar căuta
   de fiecare dată. Măsura e `min()` cu înălțimea ecranului, ca panoul să nu
   depășească fereastra pe un laptop scund. */
.wz-on{
  display:flex;flex-direction:column;
  /* 290px = firul Ariadnei, titlul, îndemnul și golul de sub ele. Scăzute din
     înălțimea ferestrei, dau exact cât rămâne până la linia de plutire, deci
     panoul se termină acolo, nu sub ea. Plafonul de 560px oprește panoul să se
     întindă inutil pe un ecran de 4K, iar min-height (nu height) îl lasă să
     crească dacă un pas nu încape: mai bine derulezi decât să pierzi butonul
     sub margine. */
  min-height:min(560px,calc(100vh - 316px));
}
/* Îndemnul explica ce e obligatoriu și ce nu, când se vedeau nouă câmpuri
   deodată. În wizard sunt două-trei câmpuri pe ecran, fiecare cu „opțional"
   scris în etichetă, iar cele 80px pe care le ocupa sunt exact ce lipsea
   panoului ca să încapă sub linia de plutire. Rămâne pentru varianta fără
   JavaScript, unde formularul chiar se vede tot deodată. */
.wz-on .form-intro{display:none}
.wz-top{display:none}
.wz-on .wz-top{display:flex;align-items:center;gap:20px;margin-bottom:14px}
.wz-count{font-size:14px;color:var(--ink-3);flex:none}
/* Legenda steluței. Stă în rândul contorului, deci se vede la fiecare pas,
   nu o dată, sus, de unde ar dispărea de pe ecran după primul „Continuă". */
.wz-req{font-size:14px;color:var(--ink-3);flex:none}
/* Bara e singurul lucru din site desenat la 2px. Un pixel ar fi fost exact
   linia care desparte două câmpuri, un indicator de progres n-are voie să
   arate ca despărțitorul de deasupra lui. */
.wz-bar{flex:1 1 auto;height:2px;background:var(--hair);display:block}
.wz-bar i{display:block;height:2px;background:var(--ink);width:33.333%;
  transition:width .35s var(--ease)}

/* `flex:0 0 auto`, nu `1 1 auto`: lista nu se întinde ca să umple panoul.
   Întinsă, împingea bara de butoane în josul lui, iar pe primul pas rămâneau
   200px de gol între ultimul câmp și „Continuă". Înălțimea totală o ține
   panoul, din egalizeaza(), vezi main.js. */
.wz-on .qs{flex:0 0 auto;border-bottom:0}
.wz-on .q-row{display:none;border-top:0;padding:0}
.wz-on .q-row.on{display:block}
/* Numărul pasului iese: îl spune deja contorul de deasupra barei, iar aici ar
   fi fost al doilea „01" pe același ecran. Titlul urcă la 26px, pentru că e
   singurul titlu din panou. */
.wz-on .q-hd .n{display:none}
.wz-on .q-hd h2{font-size:26px}
.wz-on .q-hd .hint,.wz-on .q-in{padding-left:0}
.wz-on .q-hd{margin-bottom:30px}
/* Ultimul rând de câmpuri își cară marja de 26px până sub bara de butoane.
   Pe primul pas asta însemna 50px până la „Continuă", față de 24px pe pasul
   2, aceeași bară, la două distanțe. Grila are două coloane, deci ultimul
   rând sunt ultimele două elemente. */
.wz-on .fields > .field:nth-last-child(-n+2){margin-bottom:0}
/* Același motiv pentru acord, ultimul lucru de pe pasul 2: cu marja lui de
   26px, bara de butoane stătea la 50px de el, față de 24px pe pasul 1. */
.wz-on .q-in > .consent-wrap:last-child{margin-bottom:0}

.wz-nav{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--ink);padding-top:18px;margin-top:24px;
}
.wz-sp{flex:1 1 auto}
.wz-back{
  font-family:var(--font);font-size:18px;font-weight:400;
  background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-ui);
  padding:14px 26px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.wz-back:hover{background:var(--ink);color:var(--bg)}
.wz-next{
  font-family:var(--font);font-size:18px;font-weight:400;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--r-ui);
  padding:14px 26px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.wz-next:hover{background:var(--bg);color:var(--ink)}
/* Butonul de trimitere apare numai pe ultimul pas; până atunci locul lui e
   luat de „Continuă", în exact aceeași poziție. */
.wz-on .send{display:none}
.wz-on.at-end .send{display:inline-block}
.wz-on.at-end .wz-next{display:none}
/* După trimitere rămâne doar confirmarea: pașii, bara și butoanele n-au ce
   să mai facă acolo, iar panoul ar arăta ca un formular pe care mai poți
   apăsa ceva. */
.wz-on.sent .wz-top,.wz-on.sent .form-intro,
.wz-on.sent .qs,.wz-on.sent .wz-nav{display:none}
/* Panoul își ținea înălțimea rezervată pașilor și după ce aceștia dispăreau:
   o casetă de confirmare de 120px în capul unui gol de 480px. Înălțimea are
   sens cât timp e ceva de completat, după trimitere nu mai are ce ține pe
   loc, deci cade la cât ocupă mesajul. */
.wz-on.sent{min-height:0;justify-content:center}

/* Ce se întâmplă după ce trimiți: patru celule, ca banda de cifre, dar cu
   propoziții în loc de valori, de aceea `.v` coboară la 16px. */
.facts.words .v{font-size:16px;line-height:1.45}
.facts.words .k{margin-bottom:12px}

.field{margin-bottom:26px}
.field label,.grp-lbl{display:block;font-size:14px;color:var(--ink-3);margin-bottom:7px}
/* Steluța e neagră pe o etichetă gri: altfel s-ar pierde exact în culoarea
   textului pe care are rolul să-l marcheze. E `aria-hidden` în HTML, cine
   folosește un cititor de ecran primește informația din `required`, nu din
   simbol, și n-are de ce să audă „stea" la fiecare câmp. */
.req{color:var(--ink)}
/* Mesajele folosesc acum `hidden`, nu `style.display`: iese si din arborele
   de accesibilitate, nu doar de pe ecran. */
.msg[hidden]{display:none}
/* Confirmarea primeste focus programatic dupa trimitere. */
.form-ok:focus{outline:0}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--font);font-size:18px;font-weight:400;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink-4);
  border-radius:0;padding:8px 0;transition:border-color .2s var(--ease);
}
.field input::placeholder{color:var(--ink-3)}
.field input:hover{border-bottom-color:var(--ink-2)}

/* Caseta de detalii e singurul câmp cu chenar pe toate laturile. Restul sunt
   linii, pentru că într-un rând de nume sau de telefon linia spune destul:
   scrii de la stânga la dreapta și te oprești. Aici scrii mai multe rânduri,
   iar o linie de jos nu arată unde e spațiul disponibil, omul nu știe cât
   poate scrie. Chenarul nu e un vocabular nou: pastilele de camere din pasul
   2 au același contur de 1px. */
.field textarea{
  resize:vertical;min-height:96px;
  border:1px solid var(--ink-4);padding:12px 14px;
}
.field textarea:hover{border-color:var(--ink-2)}
/* Fără îngroșare la focus: pe o casetă, cei 2px ar muta textul cu un pixel.
   Conturul de focus al site-ului face treaba, de aceea textarea nu mai e în
   lista de excepții de sus. */
.field textarea:focus{border-color:var(--ink);padding:12px 14px}
.field.err textarea{border-color:var(--err)}

/* Nota de sub etichetă: exemple care rămân pe ecran cât se scrie. */
.field-hint{font-size:14px;line-height:1.45;color:var(--ink-3);margin:0 0 9px}
/* Un câmp cu text în el rămâne mai apăsat decât unul gol, și după ce pleci
   de pe el. Fără asta, un formular complet completat arăta tot gri. */
.field input:not(:placeholder-shown){border-bottom-color:var(--ink-2)}
.field input:focus,.field select:focus{
  outline:0;border-bottom-color:var(--ink);border-bottom-width:2px;padding-bottom:7px;
}
.field.err input,.field.err select{border-bottom-color:var(--err)}

/* Mesajul de eroare al acordului stă în afara oricărui .field, deci selectorul
   nu avea cum să-l prindă: apărea la 18px, negru, ca text obișnuit. */
.msg{display:none;font-size:14px;color:var(--err);margin-top:6px}
.field.err .msg{display:block}

/* Pătratul de bifat, desenat de noi. appearance:none scoate caseta sistemului
   cu tot cu colțurile ei rotunjite și cu albastrul lui. */
.rooms-pick input,.consent input{
  appearance:none;-webkit-appearance:none;
  width:13px;height:13px;flex:none;margin:0;padding:0;
  border:1px solid var(--ink-4);border-radius:var(--r-sw);background:transparent;
  cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease);
}
.rooms-pick input:checked,.consent input:checked{background:var(--ink);border-color:var(--ink)}
@media (forced-colors: active){
  .rooms-pick input,.consent input{border-color:CanvasText}
  .rooms-pick input:checked,.consent input:checked{
    background:CanvasText;border-color:CanvasText;forced-color-adjust:none;
  }
}

.rooms-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rooms-pick label{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  border:1px solid var(--ink-4);padding:8px 13px;font-size:16px;color:var(--ink-2);
  cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease);
}
.rooms-pick label:hover{border-color:var(--ink-4);color:var(--ink)}
.rooms-pick label:has(input:checked){border-color:var(--ink);color:var(--ink)}
.rooms-pick label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.rooms-pick label:has(input:focus-visible) input{outline:0}
.field.err .rooms-pick label{border-color:var(--err)}

/* Capcana pentru boți: scoasă din pagină, nu ascunsă cu display:none, pe
   aceea o parte din roboți o citesc și o sar. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent-wrap{margin-bottom:26px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-3);margin:0;cursor:pointer}
.consent input{margin-top:3px}
.consent:hover{color:var(--ink-2)}

/* Butonul de trimitere e același obiect ca `.btn` din restul site-ului:
   aceeași înălțime, aceeași umplutură, lățime dată de text. Pe toată lățimea
   coloanei era o bandă neagră de 624px, singurul element greu într-o pagină
   construită din linii de un pixel. Nota de sub el trece alături: e o
   promisiune despre ce urmează după apăsare, se citește lângă buton. */
.send{
  font-family:var(--font);font-size:18px;font-weight:400;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--r-ui);
  padding:14px 26px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.send:hover{background:var(--bg);color:var(--ink)}
/* Exceptat de 1.4.3: pe un control dezactivat, griul deschis e informația. */
.send:disabled{background:var(--bg);color:var(--ink-4);border-color:var(--hair);cursor:default}

/* Confirmarea e ultimul lucru care rămâne pe ecran, deci e singura casetă din
   formular care își permite să respire: umplutură mai mare și textul centrat.
   Aliniat la stânga, într-o casetă goală în rest, arăta ca un rând rămas din
   greșeală. */
.form-ok{
  display:none;border:1px solid var(--ink);
  padding:34px 26px;margin-top:0;text-align:center;
}
.form-ok.on{display:block}
/* Regula direcției e „nicio greutate peste 400". <strong> ar fi adus 700 în
   pagină, accentul se face prin culoare, nu prin grosime. */
.form-ok strong{font-weight:400;color:var(--ink)}
.form-ok{color:var(--ink-2)}

/* ==========================================================================
   CONTACT · banda densă, pe cartoane
   Singura pagină din site care iese din regula direcției. În rest fontul are
   o singură greutate, 400, titlurile se opresc la 26px și nimic n-are colț
   rotunjit; aici titlul e de 32px la 800, cartoanele au colț rotunjit și o
   umbră de 2px, iar distanțele scad de la 104px la 14. Motivul nu e gustul:
   restul paginilor sunt de citit, asta e de completat. Cu ritmul obișnuit,
   formularul, căile directe și pașii de după ocupau trei ecrane, iar omul
   vedea mereu o bucată din ce avea de făcut, niciodată tot.

   Ce NU se schimbă e paleta. Tokenii rămân cei din :root, iar singura
   suprafață colorată din pagină e aurul siglei, pe buton. Aurul are 2,26:1 pe
   alb, deci nu poate fi text; ca SUPRAFAȚĂ, cu negru peste, are 9,28:1.
   Varianta lui închisă, --gold-ink, are 5,99:1 și duce săgețile.

   Formularul dinăuntru e ACELAȘI: aceleași clase, aceleași mesaje, același
   main.js. Se schimbă numai pielea, prin selectorii de sub `.cz`. Wizardul nu
   pornește pe pielea asta: `.wz-top` și `.wz-nav` nu mai sunt în HTML, iar
   main.js verifică toate cele cinci piese înainte să pună clasa `wz-on`, deci
   se oprește singur, fără nicio ramură nouă.
   ========================================================================== */

/* Banda ține toată lățimea ecranului, iar conținutul ei stă pe grila paginii,
   într-un `.w` propriu. Varianta cu margini negative de 24px ținea până la
   1440px; peste, banda rămânea un dreptunghi de 1440 plutit în alb, cu 24px
   ieșiți în afara containerului. Aici nu mai există lățime la care așezarea
   să arate a accident. */
.cz{
  --acc:var(--gold-ink);      /* #7A5F30, aurul închis: numai text și săgeți */
  --acc-bg:var(--gold-line);  /* #C2A980, aurul siglei: numai ca suprafață */
  /* Griul referinței devine albul cald al site-ului: cartoanele albe se
     decupează pe el la fel de bine, iar tonul e deja în paletă. */
  background:var(--wash);color:var(--ink);
  padding:clamp(32px,3.6vw,52px) 0 clamp(36px,4vw,58px);
  margin-bottom:var(--sp);
}
/* Firul Ariadnei rămâne pe alb, deasupra benzii, și se apropie de ea: pasul
   întreg l-ar fi rupt de pagina pe care o descrie. */
.cz-top .crumb{margin-bottom:clamp(22px,2.4vw,34px)}

/* Eticheta măruntă cu majuscule, piesa care lipsește din restul sistemului.
   Acolo ierarhia vine din dimensiunea fotografiei; aici, dintr-un rând de
   10px care spune ce urmează. Pe fundalul cald, griul de --ink-3 ar avea
   4,47:1, cu trei sutimi sub prag pentru un text atât de mic. Urcă o treaptă,
   și rămâne la fel și pe cartoanele albe, ca să fie un singur ton. */
.cz-kicker{
  display:block;font-size:10px;line-height:1.4;text-transform:uppercase;
  letter-spacing:2.2px;font-weight:800;color:var(--ink-2);margin-bottom:10px;
}

.cz-head{margin-bottom:clamp(18px,2vw,26px)}
/* 32px la 800: încalcă amândouă regulile direcției, deliberat. Fără asta n-ar
   fi altă așezare, ar fi aceeași așezare cu alt fundal. */
.cz-head h1{
  font-size:clamp(26px,2.6vw,32px);font-weight:800;letter-spacing:-.01em;
  margin-bottom:8px;max-width:22ch;
}
.cz-head p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:64ch}

/* Gol de 14px, nu de 24 sau 30: e jumătate din ce folosește restul site-ului
   și e singurul lucru care ține cele două coloane citite ca un bloc. */
/* Fără `align-items:start`: cartonul formularului se întinde până la baza
   coloanei din dreapta, iar banda se închide pe o singură linie. Cu înălțimea
   lui naturală, sub el rămâneau 210px de fundal cald lângă ultima fișă, adică
   exact golul pe care așezarea asta îl elimină în rest. */
.cz-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:14px;
}
.cz-card{
  background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 2px 6px rgba(0,0,0,.12);padding:18px;
}
.cz-card-form{padding:clamp(20px,2.2vw,28px)}
.cz-side{display:grid;gap:14px;align-content:start}

/* --- formularul, în piele densă ------------------------------------------ */
/* Cele două întrebări stau UNA LÂNGĂ ALTA, cât ține cartonul de lat. Sub ele,
   pe rând întreg, caseta de detalii și acordul.

   Împărțirea asta nu e estetică, e singura care umple cartonul. Cartonul se
   întinde până la baza coloanei de fișe, adică 767px pe 1440, iar formularul
   are nevoie de vreo 500. Cine acoperă diferența? Nu întrebarea „Cine ești",
   patru câmpuri scurte care nu au cum să crească, și nici lista de tipuri de
   proiect, care are exact nouă pastile. Singurul element din formular care se
   poate întinde e caseta de detalii, iar ea nu poate umple decât rândul pe
   care stă. Cât timp stătea într-o coloană, cealaltă rămânea goală pe
   jumătate; scoasă pe rând întreg, ea umple ce rămâne din carton.

   De aceea `#mesaj` și acordul au ieșit din întrebarea a doua, în `.cz-more`,
   vezi comentariul din contact.html.

   Cele două întrebări se echilibrează singure: „Cine ești" are 198px (titlu și
   două rânduri de câte două câmpuri), „Ce ai de mobilat" are 176px (titlu și
   nouă pastile pe trei rânduri într-o coloană de 480). Diferența de 22px e
   singurul gol rămas în carton. */
.cz-form{max-width:none;margin:0}
/* `#contact-form` are un `margin-bottom` de --sp în regula de la 400; aici
   formularul e ultimul lucru din carton, golul îl dă umplutura cartonului. */
#contact-form.cz-form{margin-bottom:0}
.cz-card-form{display:flex;flex-direction:column}
#contact-form.cz-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.cz .form-intro{font-size:13px;line-height:1.5;color:var(--ink-3);margin:0 0 18px}
.cz .qs{display:grid;grid-template-columns:1fr;gap:22px;border:0}
.cz .q-row{border:0;padding:0}
.cz .q-in > .field:last-child{margin-bottom:0}
/* Stivuite, cele două întrebări și blocul de dedesubt au nevoie de o linie
   între ele, ca să nu se citească drept unul singur cu trei titluri. Una
   lângă alta, coloanele se despart singure și liniile ies. */
.cz .q-row + .q-row,.cz-more{border-top:1px solid var(--hair);padding-top:22px}
/* Lanțul care duce înălțimea rămasă din carton până la casetă. Fiecare verigă
   are nevoie de `min-height:0`: fără el, un element `flex` nu coboară sub
   înălțimea conținutului său și lanțul se rupe la prima. */
.cz-more{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-top:22px}
.cz-more .cz-detail{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0;
}
/* Pragul e pe CARTON, nu pe fereastră. E singura măsură care spune adevărul:
   pe 1000px cartonul are 620, pentru că lângă el mai stă coloana de 320; pe
   900px, unde coloana a coborât dedesubt, are 850. Un prag pe lățimea
   ferestrei ar fi strâns întrebările pe o coloană exact acolo unde cartonul
   tocmai se lățise. Fără suport pentru `@container`, rămân stivuite, ceea ce
   e corect. */
.cz-card-form{container-type:inline-size}
@container (min-width:620px){
  .cz .qs{grid-template-columns:1fr 1fr;gap:0 24px}
  .cz .q-row + .q-row,.cz-more{border-top:0;padding-top:0}
}
.cz .q-hd{display:block;margin-bottom:14px}
/* Numerele spuneau „ești la 1 din 3" într-un formular derulat. Aici se văd
   amândouă întrebările deodată, deci nu mai numără nimic. */
.cz .q-hd .n{display:none}
.cz .q-hd h2{font-size:15px;font-weight:800;letter-spacing:-.005em}
.cz .q-hd .hint{
  display:block;width:auto;padding:0;margin-top:3px;font-size:12px;color:var(--ink-3);
}
.cz .q-in{padding-left:0}

.cz .field{margin-bottom:14px}
.cz .field label,.cz .grp-lbl{
  font-size:10px;font-weight:800;letter-spacing:1.98px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;
}
/* Câmpuri pline, cu colț rotunjit: linia de dedesubt e vocabularul celuilalt
   sistem, pe un carton alb n-ar mai fi spus nimic.

   Chenarul e la --ink-4, nu la --hair: umplutura caldă are 1,04:1 față de
   cartonul de sub ea, adică nu se vede, deci chenarul e singurul lucru care
   spune unde e câmpul, iar un chenar cu rolul ăsta are nevoie de 3:1. --hair
   dă 1,26:1, --ink-4 dă 3,41:1. */
.cz .field input,.cz .field textarea{
  background:var(--wash);border:1px solid var(--ink-4);border-radius:var(--r-ui);
  padding:0 12px;height:40px;font-size:14px;
}
/* Regula de la 400 spune „un câmp completat rămâne mai apăsat", dar
   `:placeholder-shown` nu prinde decât inputurile care AU un placeholder, iar
   aici numai telefonul are unul: trei câmpuri din patru ar fi arătat
   completate de la început, iar chenarul de hover n-ar mai fi spus nimic. Pe
   pielea asta câmpul are oricum fundal și chenar pe toate laturile, deci se
   vede și gol. */
.cz .field input:not(:placeholder-shown){border-color:var(--ink-4)}
.cz .field input:hover,.cz .field textarea:hover{border-color:var(--ink-2)}
.cz .field input:focus,.cz .field textarea:focus{
  outline:0;border-color:var(--ink);border-bottom-width:1px;
  padding:0 12px;background:var(--bg);
}
/* `flex:1` ca să absoarbă înălțimea rămasă din carton, `min-height` ca podea
   pentru cazurile în care nu rămâne nimic de absorbit (telefon, sau cartonul
   pe toată lățimea, sub 1000px). */
.cz .field textarea{
  height:auto;flex:1 1 auto;min-height:76px;padding:10px 12px;line-height:1.5;
}
.cz .field textarea:focus{padding:10px 12px}
.cz .field.err input,.cz .field.err textarea{border-color:var(--err)}
.cz .field-hint{font-size:12px;line-height:1.5;margin-bottom:7px}
.cz .msg{font-size:12px}

/* Pastile fără căsuță desenată: starea o spune umplerea pastilei. Caseta
   rămâne în DOM, mutată din pagină, ca tastatura și cititoarele de ecran să
   lucreze cu un control real, nu cu un `div` care se aprinde. */
.cz .rooms-pick{gap:6px;margin-top:0}
.cz .rooms-pick input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.cz .rooms-pick label{
  gap:0;background:var(--wash);border:1px solid transparent;border-radius:var(--r-pill);
  padding:7px 11px;font-size:13px;font-weight:700;color:var(--ink-2);
}
.cz .rooms-pick label:hover{border-color:var(--ink-4);color:var(--ink)}
.cz .rooms-pick label:has(input:checked){
  background:var(--ink);border-color:var(--ink);color:var(--bg);
}
/* Roșul de eroare, nu aurul: restul formularului marchează greșeala cu --err,
   iar o singură greșeală în două culori nu se citește ca aceeași greșeală. */
.cz .field.err .rooms-pick label{border-color:var(--err)}

.cz .consent-wrap{margin:16px 0 0;border-top:1px solid var(--hair);padding-top:14px}
.cz .consent{font-size:12px;line-height:1.5}
.cz .consent input{border-radius:var(--r-sw);border-color:var(--ink-4)}
.cz .consent input:checked{background:var(--ink);border-color:var(--ink)}

/* Bara nu mai poartă decât butonul, de când nota de lângă el a fost scoasă.
   Rămâne `flex`, ca butonul să nu se lățească pe toată coloana. */
.cz .send-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
/* Aurul e singura suprafață colorată din pagină și marchează un singur lucru:
   unde se apasă. Negru peste el, 9,28:1. */
.cz .send{
  background:var(--acc-bg);border-color:var(--acc-bg);color:var(--ink);border-radius:var(--r-ui);
  font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  padding:13px 22px;
}
.cz .send:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* Exceptat de 1.4.3, ca și în regula de la 400: pe un control dezactivat,
   griul deschis e informația. Repetat aici pentru că `.cz .send` de deasupra
   are aceeași specificitate ca `.send:disabled` și vine după el. */
.cz .send:disabled{background:var(--bg);border-color:var(--hair);color:var(--ink-4)}
/* `.cz-more` intră și el în listă: de când detaliile și acordul au ieșit din
   întrebarea a doua, nu-i mai ascunde nimeni `.qs`, iar după trimitere caseta
   rămânea pe ecran și împingea confirmarea în josul cartonului. */
.cz-form.sent .form-intro,.cz-form.sent .qs,
.cz-form.sent .cz-more,.cz-form.sent .send-bar{display:none}
/* După trimitere nu mai rămâne în formular decât confirmarea, dar cartonul își
   păstrează înălțimea coloanei de alături. Fără asta, mesajul stătea lipit de
   marginea de sus, cu 600px de alb sub el. */
.cz-form.sent{justify-content:center}
.cz .form-ok{border:0;background:var(--wash);border-radius:var(--r-ui);padding:24px 20px}
.cz .form-ok strong{font-weight:800;color:var(--ink)}
/* Fără JS formularul nu are unde trimite nimic, deci nota stă PRIMA în
   carton, nu după cele nouă câmpuri pe care omul le-ar completa degeaba. */
.cz .wip{margin:0 0 18px;border-radius:var(--r-ui);font-size:14px;line-height:1.5}
.cz .wip strong{font-weight:800}

/* --- coloana din dreapta ------------------------------------------------- */
.cz-lane{position:relative;display:block;padding-right:44px}
/* Adresa de email a firmei e un singur cuvânt de 26 de caractere. În coloana
   de 320px încape; când fișele trec în bandă, pe trei pe rând, nu mai încape
   și ar fi ieșit din carton peste săgeată. */
.cz-lane .val{display:block;font-size:15px;font-weight:800;margin-bottom:5px;
  overflow-wrap:anywhere}
.cz-lane .note{display:block;font-size:12px;line-height:1.5;color:var(--ink-3)}
.cz-lane .arr{
  position:absolute;right:16px;top:16px;color:var(--acc);font-size:16px;
  transition:transform .25s var(--ease);
}
.cz-lane:hover{border-color:var(--ink-4)}
.cz-lane:hover .arr{transform:translateX(3px)}
.cz-steps ol{list-style:none;margin:0;padding:0}
.cz-steps li{padding:10px 0;border-top:1px solid var(--hair)}
.cz-steps li:first-child{border-top:0;padding-top:2px}
/* --ink-3, nu --ink-4: tokenul de 3,41:1 e pentru linii și chenare, nu pentru
   text citibil, oricât de mic ar fi rândul. */
.cz-steps .k{
  display:block;font-size:10px;font-weight:800;letter-spacing:1.98px;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;
}
.cz-steps .v{display:block;font-size:12px;line-height:1.5;color:var(--ink-2)}

/* --- cartonul de apel, cat timp formularul sta deoparte ------------------- */
/* Aceleasi piese ca la formular si in aceeasi ordine: eticheta marunta,
   titlul, un rand de explicatie, locul unde se apasa. Se schimba doar ca aici
   se apasa o singura data si gata.

   Cartonul NU se intinde pe inaltimea randului, si e singura exceptie de la
   regula benzii. Motivul: fara formular n-are cu ce umple cei 590px ai
   coloanei din dreapta, iar `align-self:start` il lasa la inaltimea lui, cot
   la cot cu cele trei fise de alaturi, care ies cam la fel. Cand formularul se
   intoarce, tot blocul asta poate fi sters. */
.cz-act{align-self:start;padding:clamp(20px,2.2vw,28px)}
.cz-act h2{font-size:19px;font-weight:800;letter-spacing:-.005em;margin:0 0 8px}
.cz-act > p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* Butonul poarta aurul, ca `.cz .send` in locul caruia sta: in toata pagina e
   o singura suprafata colorata si ea arata unde se apasa. Negru peste aur,
   9,28:1. Sigla ramane verde pe aur, ca peste tot in site: e o forma, nu text,
   si are eticheta scrisa langa ea, deci nu poarta singura nicio informatie. */
.cz-big{
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:20px;padding:15px 22px;
  background:var(--acc-bg);border:1px solid var(--acc-bg);border-radius:var(--r-ui);
  color:var(--ink);font-size:14px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
/* `currentColor`, nu verdele WhatsApp: butonul mare e acum apelul telefonic,
   iar receptorul se colorează ca textul de lângă el, inclusiv la hover. */
.cz-big svg{width:21px;height:21px;flex:none;fill:currentColor;transition:fill .25s var(--ease)}
.cz-big:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cz-big:hover svg{fill:var(--bg)}

/* Al doilea drum, scris, nu desenat. Cine n-are WhatsApp nu depinde de
   ghicitoarea din main.js ca sa ajunga la numar: il are aici, sub deget.
   Centrat sub buton, ca sa se citeasca a continuare a lui, nu a doua fapta. */
.cz-alt{
  display:block;margin-top:12px;text-align:center;
  font-size:14px;line-height:1.5;color:var(--ink-2);
}
.cz-alt strong{font-weight:800;color:var(--ink);white-space:nowrap}
.cz-alt:hover{color:var(--ink)}
.cz-alt:hover strong{text-decoration:underline;text-underline-offset:3px}

.cz-act-note{
  margin:16px 0 0;border-top:1px solid var(--hair);padding-top:14px;
  font-size:12px;line-height:1.5;color:var(--ink-3);
}

/* Pasii ies din coloana pe rand intreg, la orice latime, si lista li se
   desface in celule: aceeasi regula pe care banda o avea deja sub 1000px,
   ridicata aici pentru cazul fara formular. Specificitatea de 0,2,2 bate
   `.cz-steps li:first-child` de mai sus, care scoate chenarul de sus. */
.cz-grid-act > .cz-steps{grid-column:1/-1}
.cz-grid-act > .cz-steps ol{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 20px;
}
.cz-grid-act > .cz-steps li:first-child{border-top:1px solid var(--hair);padding-top:10px}


/* Sub 1000px coloana din dreapta trece sub formular: cu 320px luați de ea, ce
   rămâne pentru carton nu mai ține două întrebări una lângă alta, iar
   pastilele de camere ies pe cinci rânduri.

   Coloana nu se stivuiește însă, se întinde: pe 837px, trei fișe una sub alta
   ar fi fost trei cartoane cât ecranul, cu un rând de text în fiecare. Trec
   una lângă alta, iar pașii de după ocupă rândul întreg, cu lista lor
   desfăcută în celule, ca banda de cifre din restul site-ului. */
@media(max-width:1000px){
  .cz-grid{grid-template-columns:1fr}
  .cz-side{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cz-steps{grid-column:1/-1}
  /* auto-fit, nu un număr fix: aici toate cele patru celule sunt la fel și
     niciuna nu se întinde peste rând, deci pistele goale chiar se strâng.
     Ies patru celule pe 837px, trei pe 700 și două pe 520, fără încă trei
     praguri scrise de mână. */
  .cz-steps ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 20px}
  .cz-steps li:first-child{border-top:1px solid var(--hair);padding-top:10px}
}
/* Sub 780px, trei fișe pe rând lasă 137px de text sub etichetă. Se stivuiesc. */
@media(max-width:780px){
  .cz-side{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cz-card{padding:16px}
  .cz-card-form{padding:18px}
  .cz-head h1{max-width:none}
}

/* ==========================================================================
   PAGINI INTERIOARE
   Aceleași reguli ca prima pagină: 26px maxim la titluri, greutate 400 peste
   tot, colț drept, negru pe alb. Componentele de mai jos nu introduc niciun
   vocabular vizual nou, sunt tot linii de un pixel, fotografii și spațiu.
   ========================================================================== */

/* --- firul Ariadnei ------------------------------------------------------- */
.crumb{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;font-size:14px;
  color:var(--ink-3);padding:20px 0 0;margin-bottom:var(--sp)}
/* Pe contact, unde sub deschidere urmează un panou care trebuie să încapă
   într-o fereastră, până și golul de sub firul Ariadnei contează. */
.crumb:has(+ .lede-blk.tight){margin-bottom:24px}
/* 14px x 1,4 = 19,6px: linkul din firul Ariadnei ramanea sub tinta de
   atingere de 24px. Doua pixeli de umplutura sus si jos il duc la 24, fara
   sa mute nimic in pagina, pentru ca randul e oricum mai inalt. */
.crumb a{color:var(--ink-3);display:inline-block;padding:3px 0}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--ink-4)}
/* Deasupra unei deschideri FĂRĂ fotografie (lucrări, /camere/), firul stă
   aproape de titlul pe care-l anunță: pasul întreg de secțiune lăsa un gol
   reclamat pe 29 august 2026 — „spațiu cam mare sus". Deschiderile cu
   fotografie își păstrează pasul, acolo golul se sprijină pe imagine. */
.crumb:has(+ .lede-blk){margin-bottom:14px}

/* --- deschiderea unei pagini interioare ----------------------------------- */
.phero{margin-bottom:var(--sp)}
/* Banda de cifre primea un gol pe jumătate aici, ca să se lipească de foto și
   să se citească împreună cu ea. Clientul a cerut altceva, de trei ori și
   arătând cu degetul pe pagină: același gol deasupra și dedesubt, la fel
   peste tot. Cele două nu pot sta amândouă. Cu două mărimi de gol, mereu un
   bloc stă între ele și iese asimetric, deci a rămas un singur pas. */
/* Titlul stă în colțul de jos-stânga al fotografiei, nu sub ea. Sub poză,
   titlul și îndemnul erau două rânduri de aceeași mărime lipite unul de
   altul, nu se vedea care e titlu. Peste fotografie, titlul e ancorat de
   imaginea la care se referă și rămâne singurul lucru scris acolo. */
/* Fotografia e o coloană lipită de bază: titlul, apoi paragraful de
   deschidere, amândouă peste imagine. Poza iese din fluxul coloanei și
   umple caseta, ca textul să se poată stivui liber peste ea. */
.phero .fig.full{
  height:min(60vh,540px);position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px 20px;
}
.phero .fig.full img{position:absolute;inset:0}
/* Voalul e necesar, nu decorativ: fotografiile sunt luminoase în partea de
   jos și albul pe alb dispare. Ține două rânduri de text, nu unul, deci
   urcă la 62% din înălțime; mai sus n-are rost, acolo stă subiectul pozei. */
.phero .fig.full::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:66%;
  background:linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,.72) 38%,rgba(0,0,0,.32) 68%,rgba(0,0,0,0));
  pointer-events:none;
}
/* 26ch rupea in doua randuri titluri care aveau loc pe unul singur pe o
   fotografie de 1217px: „Hol, camara, mansarda si alte spatii” cere 407px,
   capul dadea 378. La 34ch incap si ele, iar titlul tot nu se intinde cat
   toata poza. */
/* Eticheta de deasupra titlului, când deschiderea are una: aceeași piesă ca
   pe prima pagină, doar că aici e ALBĂ, nu aurie. Pe prima pagină eticheta
   stă pe o bucătărie aproape neagră și auriul se citește; deschiderile
   interioare au fotografii diferite de la pagină la pagină, iar pe stejarul
   deschis de la materiale auriul #C2A980 dispărea complet — e fix culoarea
   lemnului. Albul cu voalul de dedesubt ține pe orice poză. */
.phero .fig.full .kick{
  position:relative;z-index:1;
  color:rgba(255,255,255,.92);margin-bottom:10px;
}
.phero .fig.full h1{
  position:relative;z-index:1;
  color:#fff;max-width:34ch;margin:0;
}
/* Paragraful de deschidere, acum sub titlu și pe fotografie. Scris mai mic
   decât în pagină (16px față de 22px): peste o imagine, un rând lung și
   gros se citește greu, iar aici e o explicație, nu un al doilea titlu. */
/* Fără plafon de măsură, la cerere, pe toate paginile: fraza ține rândul întreg
   al fotografiei. Cele 68ch de dinainte o rupeau pe trei rânduri și lăsau o
   treime din bandă goală în dreapta, iar aici nu e un text de citit lung, ci
   două propoziții peste o imagine. Regula asta exista deja, dar numai pentru
   paginile care cereau `.say.wide`; acum e purtarea implicită, iar clasa `wide`
   rămasă în `materiale.html` și `fronturi.html` nu mai face nimic. */
.phero .fig.full .say{
  position:relative;z-index:1;padding:10px 0 0;max-width:none;
}
/* Cand deschiderea are si program in colt, textul isi opreste randul inainte de
   el. Fara asta, al doilea rand al paragrafului trecea pe sub "luni - vineri",
   care ocupa 241px plus cei 24 de umplutura, deci se citeau unul peste altul.
   Rezervarea e ceva mai lata decat programul, ca sa ramana si un gol intre ele.

   `:has` in loc de o clasa noua in HTML: singura pagina cu program e atelierul,
   iar regula se leaga de ce e in cadru, nu de un marcaj tinut manual. Tiparul
   exista deja in foaia asta, la firul Ariadnei si la banda de cifre.

   Pe telefon programul iese din colt si urca deasupra titlului, deci nu mai are
   ce rezerva; vezi resetarea de la 640px. */
.phero .fig.full:has(.hours) .say{padding-right:280px}
/* Rândul întreg, la cerere, unde fraza de deschidere trebuie să stea pe o
   singură linie. Cele 68ch de mai sus o rup în trei degeaba; pe toată lățimea
   fotografiei încape într-una, atâta timp cât fraza rămâne sub ~170 de semne.
   Sub 1000px se rupe oricum, n-are cum altfel. */
.phero .fig.full .say.wide{max-width:none}
.phero .fig.full .say p{
  margin:0;color:rgba(255,255,255,.88);font-size:16px;line-height:1.45;
}
/* Un al doilea lucru scris peste fotografie, în dreapta, pe linia de bază a
   titlului: doar acolo unde e o informație scurtă și utilă (programul, pe
   atelier). Rândul întreg devine bara de jos a pozei (titlul la stânga,
   detaliul la dreapta), ca să nu se mai citească drept două titluri. */
.phero .fig.full .figbar{
  position:relative;z-index:1;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
}
/* Rândul rămâne text obișnuit, nu flex: doar așa are o linie de bază reală
   pe care s-o împartă cu titlul. Desenul e agățat de ea cu vertical-align.
   Zilele stau mai mici și cu spațiere între litere, ca o etichetă, iar orele
   la mărimea textului; amândouă în alb plin, ca să se citească la fel de ușor
   pe fotografie. Între ele o linie subțire, nu un punct: punctul le lipea. */
/* Programul stă în colțul de jos-dreapta al fotografiei, nu pe linia titlului.
   Pe linia titlului împărțea rândul cu el și cobora odată cu el; în colț e
   ancorat de imagine și cade în dreptul ultimului rând al paragrafului, adică
   în singurul loc gol rămas din cadru.
   `right` și `bottom` repetă umplutura casetei (24 și 20), ca să stea pe
   aceleași margini cu titlul și cu textul. Se întoarce în rând sub 640px,
   unde nu mai e loc lateral, vezi resetarea de acolo. */
.phero .fig.full .hours{
  position:absolute;right:24px;bottom:20px;z-index:1;
  margin:0;flex:none;line-height:1.2;white-space:nowrap;color:#fff;
}
/* Ceasul stă în interiorul etichetei, nu lângă ea, ca să se măsoare în em-ii
   ei: la 1em, cercul desenat iese exact cât înălțimea unei majuscule, iar
   coborât cu .125em (jumătate din diferența dintre cutie și majusculă) are
   centrul fix pe mijlocul lor. Înainte avea 14px agățați de linia de bază:
   se potrivea ca mărime cu orele, nu cu zilele, și atârna sub rând. Scris
   în em, rămâne aliniat oricât ar scădea eticheta pe ecrane mici. */
.phero .fig.full .hours svg{
  width:1em;height:1em;margin-right:.75em;vertical-align:-.125em;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Cu un pas mai mari decat inainte (12 si 15), la cerere: in colt, unde nu mai
   sta nimic langa ele, cifrele suportau marimea si o cereau. */
.phero .fig.full .hours .d{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;
}
.phero .fig.full .hours .t{
  margin-left:14px;padding-left:15px;font-size:17px;
  border-left:1px solid rgba(255,255,255,.42);
}
/* Banda de cifre, scrisă pe fotografia unei deschideri interioare: același
   obiect ca pe prima pagină. Marginile negative anulează umplutura casetei
   (24 lateral, 20 jos), ca banda să atingă marginile pozei; golul de 18px de
   deasupra o desparte de paragraf. */
.phero .fig.full .facts.over{margin:18px -24px -20px}

/* Paragraful a stat o vreme sub fotografie, la 22px, singurul rând de acolo.
   A urcat pe imagine, sub titlu; regulile lui sunt mai sus, lângă `.fig.full`.
   Rămâne aici doar cazul în care o pagină ar avea `.say` în afara pozei. */
.phero .say{padding:20px 0 0}
.phero .say p{margin:0;color:var(--ink-2);max-width:none;font-size:22px;line-height:1.35}

/* Deschidere fără fotografie, pentru paginile de listă. */
.lede-blk{padding:0 0 var(--sp)}
/* Pe contact, deschiderea e cât mai scurtă cu putință: sub ea urmează panoul
   formularului, care trebuie să încapă întreg într-o fereastră. Fiecare pixel
   luat de aici e un pixel dat panoului. */
.lede-blk.tight{padding-bottom:30px}
.lede-blk.tight h1{margin-bottom:10px}
.lede-blk h1{max-width:26ch;margin-bottom:14px}
/* Cei 14px sunt golul dintre titlu și paragraful de sub el. Când blocul n-are
   paragraf, ca pe `/camere/`, marja rămânea atârnată și se aduna peste cei
   24px ai blocului: ieșeau 38px deasupra benzii de cifre față de 24 sub ea,
   adică o bandă cu aer inegal de o parte și de alta. */
.lede-blk h1:last-child{margin-bottom:0}
.lede-blk p{margin:0;color:var(--ink-2);max-width:var(--text)}

/* --- banda de cifre ------------------------------------------------------- */
/* Banda stă la același gol ca orice altă secțiune, deasupra și dedesubt. A
   trecut prin trei reglaje: întâi un gol pe jumătate în ambele părți ca să
   respire egal, apoi jumătate sus și pas întreg jos, ca blocul de sub ea să nu
   iasă strâmb. Nici una nu ținea, pentru că orice pagină cu două mărimi de
   gol are un bloc care stă între ele. Acum e un singur pas peste tot, iar
   legătura dintre bandă și fotografia de deasupra o face poziția, nu
   apropierea. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  margin-bottom:var(--sp)}
/* Un singur pas, 22px, peste tot în celulă: deasupra etichetei, între
   etichetă și cifră, sub cifră. Erau 20 / 22 / 24, trei valori prea apropiate
   ca să se citească drept intenție și destul de diferite cât să se vadă că
   nu se leagă. */
.facts > div{border-right:1px solid var(--hair);padding:22px}
/* Cei 22px sunt pe TOATE cele patru celule, inclusiv pe cele de la capete.

   A fost o vreme invers: capetele rămâneau fără umplutură, ca banda să se
   alinieze cu titlul și cu textul de deasupra. Argumentul era bun pe hârtie și
   n-a ținut pe ecran. Cu prima celulă lipită de ax, textele cădeau la 24, 350,
   654, 959: primul cu 22px înaintea celorlalte trei, care merg din 304 în 304.
   Clientul l-a reclamat în două locuri diferite, „prea la stânga", ceea ce e
   chiar dovada. Într-un rând de celule egale despărțite de linii, ochiul
   citește ritmul dintre ele, nu axul paginii.

   Ultima celulă își pierde doar linia, nu și umplutura: n-are pe cine
   despărți la dreapta. */
.facts > div:last-child{border-right:0}
/* Prima celulă are dublu, 44px, la cerere. Celelalte trei își măsoară cei 22px
   de la linia care le stă în stânga; prima n-are linie, deci aceeași valoare se
   citea acolo ca prea puțină. Ritmul se rupe cu 22px la prima trecere (282,
   apoi 305, 304), asumat: alternativa era ca textul să pară lipit de margine.
   Se întoarce la 22 sub 1000px, unde banda trece pe două coloane și prima
   celulă capătă o vecină exact sub ea, vezi resetarea de acolo. */
.facts > div:first-child{padding-left:44px}
.facts .k{display:block;font-size:14px;color:var(--ink-3);margin-bottom:22px}
.facts .v{display:block;font-size:20px}

/* --- titlu, apoi conținut sub el ------------------------------------------
   Titlul a stat o vreme într-o coloană și textul în cealaltă. Arăta ordonat
   într-o captură de ecran, dar la citit rupea în două o singură idee: ochiul
   citea titlul, sărea 48px la dreapta, cobora, se întorcea. Sub titlu rămânea
   un gol cât un paragraf. Acum totul curge pe aceeași margine din stânga, iar
   măsura textului ține de max-width, nu de o coloană de grilă. */
.duo{margin-bottom:var(--sp)}
/* Aici stătea apropierea dintre două blocuri de același fel, ca „Esențe /
   Blaturi / Plăci" să se citească drept o singură pagină. A plecat din
   același motiv ca la bandă: gruparea prin apropiere cere un al doilea gol,
   iar al doilea gol strică simetria blocurilor de la capetele grupului. */
.duo > h2{margin-bottom:14px}
/* Masura de 70ch e buna pentru proza care curge pe coloana intreaga a paginii.
   Inauntrul unui chenar insa taia textul la jumatate din latimea cutiei si
   lasa gol tot ce ramanea in dreapta, adica exact ce se vede intai: un
   dreptunghi pe jumatate plin. Aici cutia da masura. Blocurile sunt scurte,
   cel mai lung din tot site-ul are 452 de caractere, deci trei randuri. */
.duo p{margin:0 0 12px;color:var(--ink-2)}
.duo p:last-child{margin-bottom:0}
.duo .lk{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px}
/* Chenar auriu, cu o dungă groasă sus, pe toate secțiunile de tipul ăsta:
   „Materiale și fronturi" de pe camere, „Culorile mate", „Ce e inclus", „Ce nu
   e inclus", „Garanție", „Înainte să ne scrii", „Condiții". Sunt aceeași
   specie, un titlu și un bloc de lămuriri lângă restul paginii, deci primesc
   același obiect. Titlul rămâne negru: aurul e al chenarului, iar un titlu
   colorat înăuntrul unui chenar colorat ar fi de două ori același accent.
   Dunga de sus e de 3px, aceeași grosime cu bara care deschide secțiunile pe
   prima pagină, doar că merge pe toată lățimea. Aurul deschis n-are prag de
   contrast pe linii și suprafețe, deci aici e la locul lui. */
.duo{
  border:1px solid var(--gold-line);border-top:3px solid var(--gold-line);
  padding:30px 32px 32px;
}
/* Textul la stânga, paletarul la dreapta. Paletarul e un caroiaj de mostre
   reale din gamă (aceleași fișiere ca pe fronturi), tăiate pătrat, cu colțul
   de mostră al sistemului. Tot caroiajul e un singur link spre gamă. */
.duo-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,52%);gap:26px 48px;align-items:center}
.pal{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.pal i{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sw)}
.pal img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pal:hover img{transform:scale(1.06)}
@media(max-width:1000px){
  .duo-cols{grid-template-columns:1fr}
  .pal{grid-template-columns:repeat(6,1fr)}
}

/* --- două blocuri de comparat, pe același rând --------------------------- */
/* „Ce e inclus" și „Ce nu e inclus" sunt aceeași întrebare din două părți.
   Una sub alta, cititorul ținea minte prima ca să o compare cu a doua. */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-bottom:var(--sp)}
.pair > .duo{margin-bottom:0}
/* Termenii din stânga listei iau aurul închis, singura variantă care are voie
   pe litere: 5,99:1 pe alb. Erau gri, adică aceeași greutate cu explicația de
   alături, și nu se vedea care e termenul și care e lămurirea. */
.pair .spec dt{color:var(--gold-ink)}

/* Oprit la 70ch, textul lăsa jumătatea dreaptă goală lângă secțiuni care merg
   pe toată lățimea. Unde textul e scurt, două-trei fraze, rândul întreg nu
   obosește ochiul la întoarcere, deci măsura poate să cadă.

   Regula n-are prefix de secțiune înadins: o poartă și „Materiale și fronturi"
   de pe camere, și blocul de deschidere de pe pagina „Camere", al cărui text
   încape pe un rând și se rupea în două degeaba. */
.wide p{max-width:none}

/* Lista de caracteristici: termen la stânga, explicație la dreapta, despărțite
   de aceleași linii de un pixel ca banda de proces. */
.spec{display:grid;grid-template-columns:minmax(120px,26%) 1fr;margin:0;
  max-width:calc(var(--text) + 26ch);border-top:1px solid var(--hair)}
/* Înăuntrul unui card măsura o dă cutia, nu textul: altfel lista se oprea la
   jumătatea coloanei și lăsa gol restul. Aceeași lămurire ca la `.duo p`. */
.duo .spec{max-width:none}
/* Coloana termenilor e mai lată în perechea de carduri decât pe pagina
   întreagă: la 26% dintr-o jumătate de rând, „Chiuveta și bateria" se rupea
   pe două rânduri și trăgea după el toată linia. */
.pair .spec{grid-template-columns:minmax(120px,36%) 1fr}
/* Fotografia de material stă în coloana termenului, sub eticheta lui, nu în
   dreptul textului. Coloana aia are 250px pe ecran lat și era goală pe toată
   înălțimea rândului, în timp ce poza îngusta descrierea de alături. Acum
   umple golul care exista deja, iar textul primește rândul întreg.

   Colț de 10px, ca la toate celelalte carduri din site. */
/* Lista de materiale de pe fronturi ține rândul întreg. `.spec` are din
   construcție o măsură de 96ch, care pe pagina de proces e corectă: acolo stă
   în carton, lângă alt carton. Aici stă singură pe rând, iar plafonul oprea
   liniile despărțitoare la 968px dintr-un rând de 1392. */
.svc > .spec{max-width:none}

/* Trei lucruri pe rând: numele materialului în stânga, descrierea la mijloc,
   fotografia lipită de marginea din dreapta. Golul care rămânea acolo era
   singurul loc din pagină unde se oprea totul la două treimi de rând.

   `margin-left:auto` o împinge la capăt, iar textul își păstrează măsura de
   70ch, deci golul se închide fără ca rândul de text să crească la 135 de
   semne. Poza a stat un timp sub etichetă, în stânga: umplea alt gol, dar nu
   pe cel care se vedea.

   Aliniate la mijloc, nu la început: textul are trei rânduri, poza 105px, iar
   lipite de marginea de sus rămânea un ciot de fotografie atârnând sub ultimul
   rând. Pe centru, cele două se citesc ca o pereche. */
/* Numele materialului se centrează și el, altfel stătea lipit de marginea de
   sus în timp ce textul și poza de lângă erau la mijloc: singurul lucru din
   rând aliniat altfel decât restul.

   Centrat din `flex`, nu din `align-self`: cutia trebuie să rămână întinsă pe
   toată înălțimea rândului, ca linia ei de jos să cadă la aceeași înălțime cu
   a descrierii. Cu `align-self:center` cutia se strânge cât textul și linia
   urca la mijlocul rândului. */
.svc > .spec dt{display:flex;align-items:center}
.svc > .spec dd{display:flex;align-items:center;gap:32px}
.svc > .spec dd p{margin:0;max-width:var(--text)}
.svc > .spec dd .fig{
  flex:none;margin-left:auto;width:140px;
  aspect-ratio:4/3;border-radius:var(--r-card);background:var(--wash);
}
.svc > .spec dd .fig img{width:100%;height:100%;object-fit:cover;display:block}
.spec dt{padding:13px 16px 13px 0;color:var(--ink-3);font-size:16px;border-bottom:1px solid var(--hair)}
.spec dd{padding:13px 0;margin:0;font-size:16px;border-bottom:1px solid var(--hair)}

/* --- garanție: desen la stânga, restul pe același rând --------------------
   Blocul avea titlul pe un rând și textul pe următorul, adică un bloc cât
   pagina pentru trei propoziții. Pe un singur rând, desenul ține locul
   titlului ca semnal și textul începe imediat. Desenul e din aceeași familie
   cu cele de la „Ce se întâmplă aici": 48px, linii de 1,25px, fără umplere,
   moștenesc culoarea textului. Aurul rămâne doar pe dunga de sus. */
/* Linia de deasupra e neagră și de un pixel, la cerere. Era aurie și de 3px,
   adică singurul loc din pagină cu altă grosime decât un pixel; aurul rămâne
   pe separatoarele de secțiune, unde e accentul, iar blocul de garanție se
   închide ca orice alt bloc din site. */
.guar{
  display:flex;align-items:flex-start;gap:26px;
  border-top:1px solid var(--ink);padding-top:22px;margin-bottom:var(--sp);
}
.guar svg{
  display:block;width:48px;height:48px;flex:none;margin-top:2px;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:square;stroke-linejoin:miter;
}
.guar > div{min-width:0;flex:1 1 auto}
.guar h2{margin-bottom:12px}
/* Fără măsura de 70ch, la cerere: textul e o singură frază și încape pe rândul
   întreg, iar oprit la 70ch se rupea în două degeaba. Aceeași lămurire ca la
   `.wide p`, unde regula asta există deja pentru blocuri scurte. */
.guar p{margin:0 0 12px;color:var(--ink-2);max-width:none}
.guar p:last-child{margin-bottom:0}

/* --- galerie -------------------------------------------------------------- */
.gal{margin-bottom:var(--sp)}
.gal .hd{display:flex;align-items:baseline;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.gal .hd .note{font-size:14px}
/* Butonul din capul galeriei, folosit deocamdată doar pe /promotie.html, unde
   cele trei fotografii sunt o mostră și trebuie un drum spre portofoliul
   întreg. Stă în același rând cu titlul, împins la capăt.

   `align-self:center`, nu linia de bază moștenită de la `.hd`: alinierea aia
   e corectă pentru `.note`, care e text, dar un buton cu 10px de padding
   atârnă sub titlu dacă i se aliniază propria linie de bază.

   Mai mic decât butoanele de acțiune ale paginii (18px, padding 14/26): aici
   e un drum lateral, nu îndemnul care închide pagina, și n-are voie să
   concureze cu „Spune-ne ce ai de montat" de deasupra.

   Pe telefon rămâne tot pe un rând: la 375px titlul ține 117px, butonul 147,
   plus 18 de gap, adică 282 dintr-un rând de 323. `flex-wrap` de pe `.hd` e
   plasa de siguranță dacă vreodată titlul sau eticheta butonului cresc; atunci
   butonul cade sub titlu, la stânga, ceea ce e în regulă acolo. */
.gal .hd .btn{margin-left:auto;align-self:center;font-size:16px;padding:10px 20px}
.gal .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gal .grid .fig{height:clamp(190px,21vw,300px)}
/* Galeria atelierului e o bandă, nu o grilă: cinci fotografii care se citesc
   în ordinea operațiilor, patru vizibile deodată, a cincea la un pas. Dalele
   sunt mai scunde decât cele de pe trei coloane, altfel un cadru lat de
   atelier ar ajunge tăiat aproape pătrat.

   Derularea e nativă, cu scroll-snap: fără JavaScript banda rămâne folosibilă
   cu degetul sau cu bara de derulare. Săgețile de deasupra și butoanele care
   măresc fotografia le adaugă scriptul. */
.gal .grid.strip{
  grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 24px) / 4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gal .grid.strip::-webkit-scrollbar{display:none}
.gal .grid.strip .fig{height:clamp(170px,17vw,250px);scroll-snap-align:start}

/* Butonul se pune peste fotografie abia din JS. Are nevoie de propriile
   reguli fiindcă un <button> vine cu chenar, fundal și îndesare proprii.
   Fără prefixul `.gal .grid.strip` de dinainte: același buton îl folosesc
   acum și mostrele din gama de culori, prin galeria de pagină. */
.gal-open{
  display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:zoom-in;
}
.gal-open:hover img{transform:scale(1.035)}

/* Săgețile stau în rândul titlului, nu peste fotografii: acolo nu acoperă
   nimic și se văd de la început, fără să treacă mausul peste bandă. */
.gal .hd .strip-nav{margin-left:auto;align-self:center;display:flex;gap:8px}
.gal .strip-arrow{
  width:40px;height:40px;display:grid;place-items:center;padding:0;
  color:var(--ink);background:transparent;border:1px solid var(--ink);
  border-radius:var(--r-ui);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.gal .strip-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:square}
.gal .strip-arrow:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.gal .strip-arrow:disabled{border-color:var(--hair);color:var(--ink-3);cursor:default}

/* --- portofoliu ----------------------------------------------------------- */
.works{margin-bottom:var(--sp)}
/* Grilele de pe materiale și fronturi stăteau mai aproape una de alta, ca să
   se citească drept o singură pagină. Vezi lămurirea de la `.duo`: acum toate
   secțiunile stau la un singur pas, iar legătura dintre ele o face titlul, nu
   distanța. */
.works > h2{margin-bottom:22px}
.works .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px}
.works .work{margin:0}
/* Cardurile arătau exact ca cele apăsabile din portofoliu, dar nu duceau
   nicăieri: „Lucrări" e a treia intrare din meniu și una din cele trei plăci
   de pe prima pagină, două drumuri importante se înfundau. Acum fiecare duce
   la camera din care face parte. */
.works .work a{display:block}
.works .work a:hover .nm{background-size:100% 1px}
.works .work .fig{height:var(--room-h)}
/* Colțul rotunjit al fotografiei, ca la celelalte grile de carduri: lucrările
   (`.works.cards`), evantaiul de blaturi (`.works.evantai`) și mostrele
   (`.decor .m`) au toate 10px, iar „Materiale în lucrări" și cele două grile
   de pe fronturi rămăseseră singurele cu colț drept.

   Numai fotografia, nu tot cardul: aici cardul n-are nici chenar, nici fundal,
   e o fotografie cu un rând de text dedesubt. Un chenar pus acum doar ca să
   aibă ce rotunji ar fi adăugat un obiect nou în pagină, nu ar fi aliniat-o.

   `:not(.cards):not(.evantai)`: acolo colțul e pe carton, care taie deja
   fotografia cu `overflow:hidden`. Rotunjită și ea, i s-ar fi rotunjit și
   colțurile de jos, care stau în mijlocul cardului. */
.works:not(.cards):not(.evantai) .work .fig{border-radius:var(--r-card)}
.works figcaption{padding-top:12px}
.works .nm{display:block}
.works .qt{display:block;font-size:16px;color:var(--ink-3);margin-top:2px}

/* --- portofoliu: carduri, varianta densă ----------------------------------
   Cerută pe 27 august 2026, cu o captură de la referință în față: „vreau mai
   în stilul ăsta cardurile". E aceeași anatomie ca acolo, dar cu piesele
   noastre. Ce s-a împrumutat e forma și densitatea, nu culorile: paleta
   rămâne negru, griuri, albul cald și aurul siglei.

   Vocabularul nu e nou pe site. Eticheta măruntă de 10px, 800, majuscule cu
   spațiere de 2,2px, pastilele de 13px pe --wash cu rază de 5px și rândul de
   acțiune de 13px, 800, majuscule există deja în zona de contact (`.cz`).
   Aici sunt aceleași valori, ca să nu apară un al doilea sistem.

   Ce am lăsat afară din referință și de ce: insigna cu marca din stânga sus
   (n-avem mărci de afișat) și rândul „finisaje disponibile" (n-avem datele
   per lucrare, iar finisajul nu se poate stabili din fotografie). În locul
   mărcii stă camera, iar în dreapta prețul, care e singura altă dată sigură.
   Lucrările fără preț în surse n-au pastila din dreapta, nu una goală. */
.works.cards .grid{gap:18px}
.works.cards .work[hidden]{display:none}
/* Bara de filtre stă lipită de grilă, nu la distanță de secțiune: e unealta
   grilei de dedesubt, nu un bloc de sine stătător. Aceeași apropiere ca pe
   paginile de cameră. */
.works.cards.pf .filters{margin-bottom:18px}
.works.cards .work{
  background:var(--bg);border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.works.cards .work > a{display:flex;flex-direction:column;height:100%}
/* 4:3, ca la referință, în loc de înălțimea fixă a grilelor obișnuite: numele
   stă acum PESTE fotografie, deci cadrul trebuie să aibă loc și pentru el. */
.works.cards .work .fig{position:relative;height:auto;aspect-ratio:4/3}
.works.cards .work .fig img{width:100%;height:100%;object-fit:cover;display:block}

/* Numele, alb, peste colțul de jos al fotografiei. Degradeul e cel care face
   textul lizibil, nu o bandă opacă: sus e transparent, deci nu taie poza în
   două, iar jos ajunge la 78% negru, unde albul are 12,6:1. */
.works.cards .over{
  position:absolute;left:0;right:0;bottom:0;padding:60px 16px 15px;
  background:linear-gradient(to top,
    rgba(0,0,0,.80) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 100%);
}
/* 20px la 800: titlurile site-ului sunt 26px la 400, deci ăsta e mai mic și
   mai greu. Așa se citește ca numele lucrării, nu ca un al doilea titlu de
   secțiune peste fotografie. */
.works.cards .nm{
  display:block;color:var(--bg);font-size:20px;font-weight:800;
  line-height:1.2;letter-spacing:-.01em;
}

/* Cele două pastile de peste fotografie. Aceleași măsuri la amândouă, doar
   fundalul le desparte: camera pe alb, prețul pe negru la 85%. */
.works.cards .badge,.works.cards .price{
  position:absolute;top:12px;z-index:1;
  padding:7px 10px;border-radius:var(--r-pill);line-height:1;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2.2px;
}
.works.cards .badge{
  left:12px;background:var(--bg);color:var(--ink);
  display:flex;align-items:center;gap:7px;
}
/* Bulina e singurul loc din card unde intră aurul siglei ca suprafață. Nu
   poartă informație, deci n-are prag de contrast de trecut. */
.works.cards .badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold-line);flex:none;
}
.works.cards .price{
  right:12px;background:rgba(0,0,0,.85);color:var(--bg);
  font-variant-numeric:tabular-nums;
}

/* Rândul de acțiune, sub o linie de un pixel. `margin-top:auto` îl ține lipit
   de baza cardului, deci toate cardurile de pe un rând se termină la aceeași
   linie chiar dacă un nume se rupe pe două rânduri. Săgeata ia aurul închis,
   singura variantă cu contrast pe litere și linii (5,99:1 pe alb). */
.works.cards .go,.works.cards .pf-open{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink);
}
.works.cards .go svg,.works.cards .pf-open svg{
  width:20px;height:20px;flex:none;fill:none;stroke:var(--gold-ink);
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;
  transition:transform .25s var(--ease);
}
.works.cards .work a:hover .go svg,.works.cards .pf-card:hover .pf-open svg{transform:translateX(5px)}
/* --- randul de finisaje de pe carduri -------------------------------------
   Cerut pe 27 august 2026, cu aceeasi captura de referinta ca restul cardului:
   randul „finisaje disponibile", cu pastile colorate. Lipsea din amandoua
   felurile de card, si nu din scapare: comentariul de mai sus spune ca n-aveam
   datele per lucrare. Le aveam totusi, doar ca in proza: numele si descrierea
   fiecarei lucrari numesc culorile („salvie cu stejar", „grafit cu stejar"),
   iar textele alea sunt scrise si confirmate de client.

   Bulina poarta culoarea NUMELUI, nu a fotografiei. „Stejar" e acelasi stejar
   pe toate cardurile, chiar daca sub lumina calda se vede altfel de la o poza
   la alta: e o legenda, nu o masuratoare, si de-aia sunt valori fixe si nu
   esantioane luate din imagine. Unde descrierea nu numeste nicio culoare,
   cardul ramane fara rand, nu cu unul gol, la fel ca pastila de pret.

   Acelasi obiect pe amandoua felurile de card, ca sa nu apara doua sisteme:
   difera doar unde e prins in card. */
/* Eticheta pe randul ei, cu linia care umple restul, iar pastilele dedesubt.
   Asa cere referinta si asa se citeste ca un cap de rand, nu ca inca o pastila
   la inceputul sirului. */
.fins{display:block}
.fins .t{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2.2px;
  color:var(--ink-3);
}
.fins .t::after{content:"";flex:1;height:1px;background:var(--hair)}
.fins .row{display:flex;flex-wrap:wrap;gap:8px}
.fins .fin{
  display:inline-flex;align-items:center;gap:7px;line-height:1.2;
  padding:5px 10px 5px 6px;border:1px solid var(--hair);border-radius:var(--r-pill);
  background:var(--wash);font-size:13px;color:var(--ink-2);
}
/* Chenarul bulinei e --ink-4, nu --hair: jumatate din culori sunt deschise, iar
   „Alb" pe --wash fara chenar n-ar avea unde sa se termine. Aceeasi socoteala
   ca la mostrele de pe paginile de blat. */
.fins .sw{width:14px;height:14px;flex:none;border-radius:var(--r-sw);
  border:1px solid var(--ink-4)}
.fins .sw.salvie{background:#7C8B72}
.fins .sw.grafit{background:#3E4245}
.fins .sw.antracit{background:#2B2E30}
.fins .sw.cappuccino{background:#A98F76}
.fins .sw.crem{background:#DED3C0}
.fins .sw.gri{background:#9B9C99}
.fins .sw.alb{background:#F4F3EF}
.fins .sw.negru{background:#1B1B1B}
.fins .sw.stejar{background:#C49A63}
.fins .sw.nuc{background:#6A4630}
.fins .sw.lemn{background:#B98A55}
.fins .sw.marmura{background:#E9E7E3}

/* Blocul de jos al cardului se citeste ca o coloana cu un singur pas: 16px de
   la fotografie la eticheta, 16 de la pastile la linie, 16 de la linie la
   randul de actiune, 16 pana la baza cardului. Singurul spatiu mai mic e cel
   dintre eticheta si pastilele ei, 10px, pentru ca alea doua sunt acelasi
   lucru si trebuie sa stea impreuna.

   Linia e desenata cu un pseudo-element, nu cu `border-top`: chenarul ar
   merge de la o margine a cardului la cealalta, iar tot restul continutului e
   retras cu 16px. Asa incepe si se termina acolo unde incep si se termina
   pastilele de deasupra si textul de dedesubt. Sta pe `.go`, nu pe `.fins`,
   ca sa apara si pe cardul lucrarii care n-are rand de finisaje. */
.works.cards .fins{padding:16px}
.works.cards .go,.works.cards .pf-open{padding:16px;border-top:0;position:relative}
.works.cards .go::before,.works.cards .pf-open::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:var(--hair);
}
/* Pe paginile de camera cardul n-are chenar: randul sta sub etichete, la
   aceeasi distanta la care stau si ele de textul de deasupra. */
.pf-card .fins{margin-top:10px}

/* Numarul de fotografii, langa sageata. „5 FOTO" din referinta. Numarul si
   sageata stau impreuna la dreapta, deci merg intr-un singur invelis: fara el,
   `space-between` le-ar imprastia pe tot randul. */
.works.cards .go .end,.works.cards .pf-open .end{display:flex;align-items:center;gap:12px}
.works.cards .go .ct,.works.cards .pf-open .ct{
  font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}


/* --- grila de mostre de la paginile de blat -------------------------------
   O mostra e o bucata de suprafata, nu o fotografie cu subiect: nu are ce sa
   castige din inaltimea cardurilor de camera. Sta mai mica si mai deasa, ca
   sa se poata compara doua modele dintr-o privire, fara sa se deruleze. */
.decor .grid{grid-template-columns:repeat(4,1fr);gap:26px 20px}
.decor .m{margin:0}
/* Fiecare model e un card inchis, ca o mostra de vopsea din evantai: suprafata
   sus, placuta cu numele si codul jos, totul intr-un singur chenar.

   Inainte, imaginea si textul pluteau separat pe fundalul paginii. La un decor
   deschis asta se rupea de tot: "Alb alpin" W1101 masoara rgb(255,254,250),
   adica 1,01:1 fata de pagina, deci mostra si pagina erau acelasi alb si nu se
   vedea unde se termina una si incepe cealalta.

   Placuta e pe --wash, nu pe alb: asta desparte suprafata de eticheta prin
   umplere, nu printr-o a doua linie, si merge si cand mostra e alba. Chenarul
   e --ink-4, singurul token cu contrast destul (3,41:1) ca sa inchida o
   suprafata deschisa; --hair da 1,27:1, prea putin aici. */
.decor .m{margin:0;border:1px solid var(--ink-4);background:var(--wash);
  border-radius:var(--r-card);overflow:hidden}
.decor .m .fig{height:clamp(110px,12vw,160px)}
/* Placuta poarta datele dupa care se comanda blatul, deci are aer in
   jur cat sa se citeasca dintr-o privire, nu cat sa domine cardul. O singura
   valoare pe toate laturile: era 12 sus si 14 jos, adica 15 si 17 dupa ce pui
   la socoteala jumatatea de interlinie, si se vedea ca textul sta prea sus. */
.decor figcaption{padding:14px}

/* Fotografiile de produs ale blaturilor, pe pagina de materiale: aceeasi
   problema, aceeasi linie. Nu primesc card, doar chenar, ca sa ramana
   cardurile de acolo la fel intre ele. Outline, nu box-shadow inset: regula
   generala da imaginii 100% si object-fit:cover, iar umbra interioara se
   deseneaza SUB continut, deci ar fi acoperita complet de fotografie. */
.works:not(.evantai) .work .fig:has(img[src*="/blat-"]){
  outline:1px solid var(--ink-4);outline-offset:-1px}
/* --- cardurile de blat, pe pagina de materiale ----------------------------
   Croite ca o mostra din evantaiul de vopsea, cerute asa pe 27 august 2026:
   suprafata sus, placuta cu datele jos, totul intr-un singur chenar. E acelasi
   obiect ca `.decor .m` de pe paginile de blat, la scara de card, deci nu
   intra o forma noua in pagina.

   Chenarul e --ink-4 din acelasi motiv ca acolo: fotografiile de blat sunt pe
   fundal deschis, iar --hair da 1,27:1 fata de pagina, adica nu s-ar vedea
   unde se termina cardul. Placuta e pe --wash, deci desparte suprafata de text
   prin umplere, nu printr-o a doua linie. */
/* Cardul e coloana, nu linkul: la blaturi cardul e apasabil si are un <a>
   inauntru, la placi nu duce nicaieri. Asa placuta se lipeste de baza in
   amandoua cazurile, deci cardurile de pe un rand se termina la aceeasi linie
   chiar daca descrierile au lungimi diferite. */
.works.evantai .work{
  border:1px solid var(--ink-4);background:var(--wash);
  border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
}
.works.evantai .work > a{display:flex;flex-direction:column;flex:1}
/* 4:3 in loc de inaltimea fixa a grilelor obisnuite: fotografiile de blat sunt
   taiate chiar pe 4:3, deci asa se vede toata suprafata, netaiata. */
.works.evantai .work .fig{
  height:auto;aspect-ratio:4/3;background:var(--bg);
  border-bottom:1px solid var(--ink-4);
}
.works.evantai figcaption{display:flex;flex-direction:column;flex:1;padding:16px}
.works.evantai .qt{margin-top:4px}

/* Banda de decoruri: patratelele si atat, fara nume si fara cod. La latimea
   cardului, codul ar trebui micsorat pana sub pragul la care se mai poate
   citi, iar codul e exact data pe care si-o noteaza omul ca sa comande. Sta
   intreg pe pagina blatului, unde are loc. Banda de aici spune doar „din
   astea alegi".

   `margin-top:auto` o tine lipita de baza placutei, deci benzile se aliniaza
   pe aceeasi linie la toate cardurile, chiar daca descrierile au lungimi
   diferite. */
.works.evantai .sws{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:16px}
.works.evantai .sw{display:block;width:26px;height:26px;flex:none;
  border:1px solid var(--ink-4);border-radius:var(--r-sw);overflow:hidden}
.works.evantai .sw img{display:block;width:100%;height:100%;object-fit:cover}
.works.evantai .mo{margin-top:10px}
.decor .nm{display:block;font-size:16px}
/* Codul e data dupa care se comanda blatul, nu proza. Cifre tabulare ca sa se
   alinieze pe coloana si un pic de spatiere, ca sa nu se citeasca H1145 drept
   H1I45 la telefon.

   Culoarea e --ink-2, nu --ink-3 ca la restul textului secundar: pe --wash,
   grilajul de --ink-3 pica la 4,47:1, sub pragul de 4,5:1. Fundalul cald al
   placutei costa exact diferenta. Codul e ce isi noteaza omul ca sa ceara
   blatul, deci e ultimul lucru pe care ne permitem sa-l lasam la limita.
   Ierarhia fata de nume ramane din marime, 14 fata de 16. */
.decor .cod{display:block;font-size:14px;color:var(--ink-2);margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Cate modele are blatul, pe cardul din pagina de materiale. Acelasi registru
   ca la codul de pe pagina de blat: cifra e data, nu proza, deci nu se
   amesteca in fraza de deasupra. */
.works .mo{display:block;font-size:14px;color:var(--ink-3);margin-top:6px;
  font-variant-numeric:tabular-nums}
/* Indemnul de sub grila: spune la ce foloseste codul de deasupra, deci sta
   lipit de grila, nu la distanta de sectiune. */
.decor .hint{font-size:15px;line-height:1.6;color:var(--ink-3);margin:26px 0 0}

/* --- banda de conversie de la finalul paginilor ---------------------------
   Runda 2. Inainte banda era trei celule egale sub o linie, adica exact
   obiectul din care e facut subsolul de dedesubt: coloane de legaturi sub o
   linie. De-aia se citea ca primul rand din subsol, nu ca un indemn. Si trei
   cai egale nu sunt un indemn, sunt un meniu: cand toate cantaresc la fel,
   niciuna nu cere nimic.
   Acum ramane o singura cale apasata, pe o fotografie cat toata latimea.
   Regula direcției spune ca ierarhia vine din marimea fotografiei, nu din
   tipografie, iar banda era pana acum singurul bloc important din pagina
   fara fotografie, adica singurul care nu putea cantari nimic.
   WhatsApp nu dispare din site: ramane butonul plutitor din coltul paginii.
   Costa o fotografie potrivita pe fiecare pagina care poarta banda. */
/* Banda are marginea ei si sus, nu doar jos. Cand era o linie neagra peste
   un bloc de text, se putea sprijini pe ce era deasupra; o fotografie inchisa
   lipita de grila #auroramobdesign citeste ca o greseala de decupaj. Unde
   sectiunea de deasupra are deja marginea ei, cele doua se contopesc si
   ritmul ramane acelasi. */
.cta{margin-top:var(--sp);margin-bottom:var(--sp)}
/* Când îndemnul e ultimul lucru din pagină, se lipește de subsol: e o bandă
   pe toată lățimea, cu fotografie închisă la culoare, iar 90px de alb între
   ea și subsol o lăsau să plutească. Lipită, capătul paginii e un singur bloc
   întunecat care se termină în subsol. Linia subțire a subsolului iese și ea:
   n-are ce despărți când deasupra ei stă o fotografie, nu text.

   Pe paginile de cameră îndemnul nu e ultimul, după el vin celelalte camere,
   deci regula nu se aplică acolo și își păstrează respirația. */
/* Nu chiar lipită, dar nici largă: 28px între fotografie și dungă, aceiași
   28 între dungă și coloanele subsolului. Pasul de secțiune, cât era, dădea
   66px deasupra rândului „Camere", mai mult aer decât are subsolul conținut.

   Golul stă pe subsol, nu pe îndemn: `main.w > :last-child` de mai jos
   anulează marginea de jos a ultimei secțiuni, oricare ar fi ea, și are
   aceeași specificitate, deci orice aș pune pe îndemn ar pierde. Linia
   subțire a subsolului iese: deasupra ei stă dunga aurie a fotografiei, iar
   două linii la 45px una de alta se citesc ca un rând dublu. */
/* Umplutura de sus a subsolului se anulează aici: aerul de sub dungă e dat
   întreg de marginea asta, ca să fie exact cât cel de deasupra ei. Cu cele
   două adunate ieșeau 38px sub linie față de 28 deasupra, iar dunga părea
   lipită de fotografie. */
body:has(main > .cta:last-child) footer{margin-top:28px;padding-top:0;border-top:0}
/* Separatorul dintre fotografie și subsol. Prima dată l-am pus ca margine de
   jos pe bandă, dar acolo nu separa nimic: era muchia fotografiei, se citea ca
   o ramă a ei. Aici e o dungă de sine stătătoare, cu aer de o parte și de alta,
   deci desparte două lucruri în loc să închidă unul.

   Marginile negative de 24px sunt aceleași cu ale benzii: sar peste gutiera lui
   `main.w`, ca dunga să fie exact cât fotografia de deasupra. Pe subsol n-are ce
   căuta, el merge pe toată fereastra, iar banda se oprește la 1440px. */
main > .cta:last-child::after{
  content:"";display:block;height:3px;background:var(--gold-line);
  margin:28px -24px 0;
}
/* Marginile negative sar peste gutiera de 24px a lui `main.w`, ca fotografia
   sa atinga marginile casetei de continut, nu sa stea intr-un chenar alb. */
.cta .band{position:relative;margin:0 -24px;
  min-height:clamp(380px,44vw,560px);display:flex;align-items:flex-end}
.cta .ph{position:absolute;inset:0;overflow:hidden}
/* Stratul inchis nu e umbra si nu e decor: fara el, textul alb peste o
   bucatarie deschisa la culoare coboara sub pragul de contrast. */
.cta .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.70) 50%,rgba(0,0,0,.28) 100%)}
/* Cei 24px orizontali pun textul benzii pe aceeasi linie verticala cu restul
   paginii, desi banda a iesit din gutiera. */
.cta .over{position:relative;width:100%;padding:clamp(40px,5vw,72px) 24px;
  color:var(--bg)}
/* 20ch (291px) tăia în două rânduri titluri de 338 și 384px, cu 900px liberi
   în dreapta lor. La 28ch (407px) intră pe un rând toate întrebările de tip
   „Vrei o estimare pentru bucătărie?"; cele lungi se rup mai departe, dar
   pentru că sunt lungi, nu pentru că le strânge capul. */
.cta h2{max-width:28ch}
.cta p{margin:14px 0 0;color:rgba(255,255,255,.78);max-width:56ch}
/* Acelasi buton ca peste tot in site, doar inversat si cu mai multa
   umplutura: e singurul lucru apasabil din banda, deci poate fi si singurul
   lucru greu din ea. */
.cta .btn{margin-top:30px;font-size:20px;padding:17px 32px;
  background:var(--bg);color:var(--ink);border-color:var(--bg)}
.cta .btn:hover{background:transparent;color:var(--bg)}
.cta .alt{margin-top:24px;font-size:16px;color:rgba(255,255,255,.66)}
.cta .alt a{color:var(--bg)}

/* Cele trei căi de contact, în celule despărțite de linii, pe toată lățimea.
   Înainte erau un buton și două linkuri pe un rând, 56% din lățime sub o
   linie neagră care traversa tot. Celulele sunt același obiect ca banda de
   cifre și ca pașii, deci nu aduc vocabular nou; iar fiecare are loc să spună
   ce se întâmplă după apăsare, ceea ce un buton de 180px n-avea unde.
   Prima e plină cu negru: rămâne acțiunea principală, ca butonul dinainte. */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ink);margin-top:30px}
/* Pe pagina de contact celulele deschid o secțiune, nu închid una. */
.routes-wrap{margin-bottom:var(--sp)}
.routes-wrap .routes{margin-top:0}
.route{
  display:block;padding:20px 22px 26px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.route:last-child{border-right:0}
/* Adresa de email e un cuvant de 26 de caractere: pe 320px nu incape
   intreaga pe un rand, iar fara voie sa se rupa ar fi latit celula peste
   marginea paginii. Se rupe doar cand chiar nu incape. */
.route .t{display:block;font-size:20px;overflow-wrap:anywhere}
.route .m{display:block;font-size:14px;line-height:1.5;color:var(--ink-3);margin-top:9px}
/* Singura reacție la hover e linia de sub titlu care se îngroașă, aceeași ca
   peste tot în site. Fără schimbare de fundal: ar fi al doilea semnal pentru
   aceeași stare. */
.route:hover .t{background-size:100% 2px}
/* Prima celulă rămâne acțiunea principală, dar negrul stă doar sub titlu, nu
   pe toată celula. Umplută, avea 400×180px de negru plin, de departe cel mai
   greu obiect din pagină, mai greu decât fotografiile, într-un site construit
   din linii de un pixel. Acum e exact butonul din restul site-ului: aceeași
   umplutură, aceeași inversare la hover. */
.route.lead .t{
  display:inline-block;font-size:18px;
  background-color:var(--ink);color:var(--bg);
  /* .u desenează linia de subliniere cu un gradient de fundal; sub un buton
     plin n-are ce căuta. */
  background-image:none;
  border:1px solid var(--ink);padding:11px 18px;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.route.lead:hover .t{background-color:var(--bg);color:var(--ink)}
.btn{
  display:inline-block;font-size:18px;font-weight:var(--fw-title);
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);border-radius:var(--r-ui);padding:14px 26px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{background:var(--bg);color:var(--ink)}
/* Variantele de pe fotografie, folosite în deschiderea primei pagini:
   plin alb pentru acțiunea principală, contur pentru cea secundară, ca să
   nu concureze două dreptunghiuri albe în același cadru. */
.btn.inv{background:#fff;color:var(--ink);border-color:#fff}
.btn.inv:hover{background:transparent;color:#fff;border-color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* --- text lung (paginile legale) ------------------------------------------ */
.prose{max-width:68ch;padding:0 0 var(--sp)}
.prose h2{margin:38px 0 8px}
.prose p{margin:8px 0;color:var(--ink-2)}
.prose .upd{font-size:14px;color:var(--ink-3);margin:6px 0 26px}

/* --- documentele legale ---------------------------------------------------
   Erau o coloană de 685px într-un container de 1377, adică exact jumătate de
   pagină, iar sub ea zece secțiuni și 1380px de înălțime. Un om care caută un
   singur lucru, cât e garanția sau ce date se păstrează, trebuia să citească
   tot ca să dea de titlul potrivit.

   Aceleași rânduri despărțite de linii ca lista de caracteristici de pe
   proces: titlul secțiunii la stânga, textul ei la dreapta. Documentul se
   scanează pe verticală după titluri, ocupă lățimea pe care o ocupă și
   vecinele lui, iar textul rămâne la măsura lui de citit, nu se lățește.
   Nu se schimbă niciun cuvânt din conținut: e aceeași machetă, altfel
   așezată. */
.prose.doc{
  max-width:none;
  display:grid;grid-template-columns:minmax(180px,26%) minmax(0,1fr);
}
/* Antetul documentului ține rândul întreg: titlul, data și avertismentul de
   machetă nu sunt secțiuni ale lui, sunt despre el. */
.prose.doc > h1,.prose.doc > .upd,.prose.doc > .wip{grid-column:1 / -1}
/* Linia neagră deschide primul rând, nu tot blocul: deasupra ei stă antetul,
   care n-are ce căuta înăuntrul tabelului. */
.prose.doc > h2:first-of-type,
.prose.doc > h2:first-of-type + p{border-top:1px solid var(--ink)}
.prose.doc > h2{
  margin:0;font-size:20px;
  padding:22px 26px 26px 0;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
/* Textul rămâne la măsura lui de citit, dar caseta ține toată coloana: cu
   `max-width` se oprea și linia de sub rând acolo unde se oprea textul, iar
   rândurile ieșeau zdrențuite la dreapta. Umplutura din dreapta ia diferența
   și se face zero singură când coloana scade sub măsură. */
.prose.doc > h2 + p{
  margin:0;
  padding:22px 0 26px 26px;
  padding-right:max(0px, calc(100% - var(--text) - 26px));
  border-bottom:1px solid var(--hair);
}


/* --- semne de machetă -----------------------------------------------------
   Ce e scris aici e provizoriu și trebuie înlocuit înainte de lansare. Marcat
   în pagină, nu doar în README, ca să nu ajungă din greșeală la lansare. */
.todo{color:var(--ink-3)}
.wip{border:1px solid var(--ink);padding:16px 18px;margin:0 0 var(--sp);
  font-size:14px;line-height:1.5;color:var(--ink-2);max-width:68ch}
.wip strong{font-weight:400;color:var(--ink)}

/* --- grila UGC ------------------------------------------------------------ */
.ugc{padding:0}
/* Fara plafon de latime: randul de sub titlu se rupea in doua la 70ch, desi
   avea loc pe unul singur pe toata latimea paginii. Acelasi motiv ca la
   textul din chenare, masura fixa taia mai devreme decat cutia. */
.ugc .head{margin-bottom:22px}
.ugc .head p{margin:8px 0 0;font-size:17px;color:var(--ink-2)}
.ugc .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ugc .grid .fig{aspect-ratio:1;overflow:hidden}

/* --- buton WhatsApp plutitor ---------------------------------------------
   Era pastilă verde cu umbră: colț rotunjit, culoare de brand străin și umbră,
   adică toate cele trei lucruri pe care pagina nu le are nicăieri. Arăta lipit
   peste machetă, nu făcut pentru ea.
   Acum vorbește limba paginii (colț drept, chenar de un pixel, negru pe alb,
   aceeași inversare la hover ca butonul de trimitere) și păstrează verdele
   doar în siglă, cât să rămână recunoscut de la un metru ca fiind WhatsApp. */
/* Marginea din dreapta cade fix pe marginea de continut a paginii, nu la 24px
   de marginea ecranului. Cele doua coincid doar cat timp fereastra e sub 1440;
   peste, containerul se centreaza si ramane in urma, iar butonul plutea singur
   mai la dreapta decat tot ce e sub el.

   Formula repeta centrarea containerului: `(100% - 1440px) / 2 + 24px`, cu
   `max` ca sa nu coboare sub cei 24px pe ecrane inguste. Procent, nu `100vw`:
   la un element fixat procentul se raporteaza la blocul containator, care NU
   include bara de derulare, deci nu apare decalajul de vreo 15px.

   Coltul e drept, ca tot restul paginii. Comentariul de deasupra spunea deja
   „colt drept", dar regula avea `--r-ui`, care nu e zero: scria una si facea
   alta. Raza ramane neatinsa oriunde altundeva. */
.wa{
  position:fixed;bottom:12px;z-index:80;
  right:max(24px, calc((100% - 1440px) / 2 + 24px));
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  padding:12px 18px;font-size:16px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.wa:hover{background:var(--ink);color:var(--bg)}
/* Butonul plutitor stă peste conținut și nu pleacă de acolo. A avut o vreme
   o retragere pe derulare, ieșea din ecran cât coborai și se întorcea când te
   opreai; scoasă la cerere, fiindcă un buton care nu e acolo când te uiți
   după el nu e un buton. Singurul lucru care i se mai schimbă la derulare e
   mărimea, la capetele paginii, iar aia se vede mai jos. */
.wa svg{width:20px;height:20px;flex:none;fill:var(--wa);transition:fill .25s var(--ease)}
.wa:hover svg{fill:var(--bg)}
.wa .lbl{white-space:nowrap}
/* La capetele paginii, deschiderea si subsolul, butonul poarta forma de pe
   telefon: doar sigla. Intins, are 240px de dreptunghi alb si taie ori coltul
   din dreapta jos al fotografiei, adica singurul lucru pe care primul ecran
   il are de aratat, ori randurile subsolului. Intre ele e intins; clasa o
   pune `main.js`, vezi comentariul de acolo.

   Mic, butonul E sigla WhatsApp, la cerere (29 august 2026): bula alba pe
   discul verde al marcii, rotund, cum arata aplicatia. A fost o vreme sigla
   neagra pe patrat alb, pe motiv de contrast si de colturi drepte; pe alb,
   discul verde cu bula alba se recunoaste insa de la un metru si nu cere
   citit nimic, iar contrastul textului nu mai e o problema cand nu mai
   exista text. Rotundul e o exceptie asumata de la sistemul de colturi:
   sigla altcuiva se poarta in forma ei.

   Fara tranzitie pe latime: `display` nu se anima oricum, iar un buton care
   creste singur pe ecran ar fi a doua miscare din tot site-ul. */
body.wa-mic .wa{padding:13px;background:var(--wa);border-color:var(--wa);border-radius:50%}
body.wa-mic .wa .lbl{display:none}
body.wa-mic .wa svg{fill:#fff}
body.wa-mic .wa:hover{background:var(--ink);border-color:var(--ink)}
body.wa-mic .wa:hover svg{fill:var(--bg)}

/* Subsolul avea 403px, din care 110 erau padding gol jos, spatiu rezervat ca
   butonul plutitor de WhatsApp sa nu acopere ultimul rand. Rezervarea era
   calculata pentru butonul-pastila de dinainte si nu a fost redusa cand
   butonul s-a micsorat. Pe desktop nici nu e nevoie de ea: butonul sta in
   dreapta jos, iar acolo subsolul e gol oricum - randul de copyright e la
   stanga. Pe telefon patratul de 48px chiar ajunge peste text, deci acolo
   rezervarea ramane.
   In rest: randurile de linkuri erau la 30px inaltime pentru 22px de text. */
/* Ultima secțiune nu-și mai adaugă golul de jos, îl dă subsolul. Altfel
   pagina pare că se termină, mai vine un ecran de nimic, apoi subsolul. */
main.w > :last-child,main > .w:last-child > :last-child{margin-bottom:0}
main.w > .prose:last-child{padding-bottom:0}

/* Umplutura a scăzut de la 26/34 la 16/20, iar rândurile de linkuri de la 3
   la 2px fiecare. Subsolul ajunsese la 259px, adică un sfert de ecran pentru
   o listă de legături pe care nimeni nu vine să le citească. */
/* 74px jos, nu 20: de când creditul fastcodingagency stă în colțul din
   dreapta (29 august 2026), butonul plutitor de WhatsApp, care ocupă
   același colț, îi acoperea ultimele litere la capătul derulării. */
footer{margin-top:var(--sp);border-top:1px solid var(--hair);padding:10px 0 74px}
/* minmax(0,1fr), nu 1fr: o coloană de grilă nu se strânge, implicit, sub
   lățimea celui mai lung cuvânt din ea, iar adresa de email a firmei e un
   singur cuvânt de 26 de caractere. Cu 1fr, ea împingea toată pagina în
   derulare orizontală pe telefon. */
/* Coloanele erau lipite de marginea din stânga a celulei lor, iar ultima,
   „Legal", plutea singură în dreapta paginii. Centrate, cele patru se citesc
   ca un bloc, iar rândul de copyright de sub ele cade pe aceeași axă. */
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:14px;text-align:center}
footer a{display:block;font-size:16px;line-height:1.3;color:var(--ink-3);padding:2px 0;overflow-wrap:anywhere}
footer a:hover{color:var(--ink)}
footer .lbl{font-size:14px;color:var(--ink-3);margin-bottom:6px}
/* Doua randuri, la stanga, clientul deasupra si agentia dedesubt.

   Retrase cu un pas de 24px fata de marginea containerului, nu lipite de ea:
   coloanele de linkuri de deasupra sunt centrate in celulele lor, deci nu
   exista niciun ax la stanga cu care randurile astea sa se alinieze. Lipite de
   marginea exterioara arata ca si cum ar fi cazut din bloc; retrase cu un pas,
   se citesc ca facand parte din el. Pasul e cel al containerului, nu o valoare
   inventata pentru locul asta.

   Au fost si pe un singur rand, la capete opuse; apoi stivuite la stanga;
   pe 29 august 2026 creditul s-a intors in coltul din dreapta, la cerere,
   si a urcat un pas (15px, in gri de text, nu de linii). Copyright-ul
   ramane la stanga; pe ecran ingust randul se rupe si creditul coboara
   dedesubt. */
footer .src{
  font-size:13px;line-height:1.5;color:var(--ink-3);margin:0;
  text-align:left;padding-left:24px;padding-right:24px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:8px 24px;flex-wrap:wrap;
}
footer .src .co{display:block}
/* `margin-left:auto`, nu doar space-between: cand randul se rupe pe ecran
   ingust, creditul ramane tot la marginea din dreapta, nu cade la stanga. */
footer .src .by{display:block;font-size:15px;color:var(--ink-3);white-space:nowrap;margin-left:auto}
footer .src .by a{display:inline;padding:0;font-size:inherit;line-height:inherit;color:inherit}
footer .src .by a:hover{color:var(--ink-2)}

/* --- invitația de sub deschidere ------------------------------------------
   Deschiderea nu mai poartă o pereche de rânduri sub fotografie, ci o
   întrebare. Motivul e că o fotografie de interior, oricât de bună, nu spune
   ce vindem: jumătate din oamenii care ajung aici cred că suntem un magazin.
   Blocul ăsta răspunde la singura întrebare care contează în primele zece
   secunde („ce face AURORA diferit de un raft de mobilă gata făcută") și
   poartă h1-ul paginii, care înainte lipsea cu totul.
   Rămâne în registrul direcției: 26px, greutate 400, linii de un pixel. */
/* Blocul care poartă h1-ul primește vizibil mai mult aer decât celelalte
   benzi. E singura ierarhie permisă: titlurile au toate 26px. */
/* Primul rând ține titlul la stânga și îndemnul la dreapta, pe aceeași linie.
   Butonul a stat până acum sub coloana întâi de text, adică la 200px sub
   ultimul cuvânt pe care omul îl citea, în capătul celălalt al rândului. Sus,
   lângă h1, e vizibil din primul cadru al secțiunii și nu mai depinde de cât
   de lungi ies cele două paragrafe.

   Textul și cele trei motive iau rândul întreg dedesubt, deci coloana a doua
   există doar pentru buton și se strânge la lățimea lui. */
/* Golul dintre linia de sus si titlu era 60px, adica 73 pe ecran, fiindca
   titlul sta centrat intr-un rand pe care il inalta butonul de langa el. Sub
   titlu, pana la text, sunt 40. Doua goluri diferite in aceeasi sectiune, iar
   cel de sus, mai mare, o rupea de linia care o deschide. Acum sunt egale: 28
   scrisi aici dau 41 pe ecran, fata de 40 dedesubt. */
/* RESTRUCTURATĂ la redesignul din 28 august 2026. Cele două paragrafe stăteau
   în coloane egale de ziar, care ascundeau că stânga e PROBLEMA și dreapta e
   RĂSPUNSUL; secțiunea ținea 378px de pagină fără nicio imagine, imediat după
   un hero foto; iar cele trei argumente, motivele reale pentru care cineva ne
   alege, erau cel mai mic și mai palid text de pe pagină. Aceleași cuvinte,
   redistribuite: problemă → fotografie → răspuns pe fundal diferit → argumente
   promovate → cifrele scoase din propoziție, într-o bandă de specificații. */
.pitch{border-top:1px solid var(--ink);padding-top:28px;margin-bottom:var(--sp)}
.pitch .kick{margin-bottom:16px}
/* Problema la stânga, fotografia unui colț dificil rezolvat la dreapta:
   textul vorbește despre nișe și mansarde, iar poza e dovada că le rezolvăm.
   Poza e mai mică decât la prima variantă (coloană mai îngustă, cadru 3:2 în
   loc de 4:3), la cerere (29 august 2026): la 4:3 era mai înaltă decât
   textul de lângă ea și rămânea un gol mare dedesubtul lui. */
.pitch .p-top{display:grid;grid-template-columns:1.3fr .7fr;gap:0 48px;align-items:center}
.pitch h1{max-width:17ch;margin:0 0 22px}
.pitch .prob{margin:0;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:46ch}
.pitch .p-top .fig{aspect-ratio:3/2}
/* Răspunsul, argumentele și cifrele, ÎMPREUNĂ, într-un singur carton cald.
   Restructurat la cerere (29 august 2026): despărțite — răspunsul pe banda
   lui, argumentele pe alb cu liniuțe aurii, cifrele într-o bandă cu linii
   subțiri — cele trei zone se citeau ca trei rânduri de text fără legătură.
   Cartonul poartă chenarul auriu cu muchia de sus groasă al cardurilor de
   tip „duo" (vezi „Gama de culori" de pe materiale), deci nu e un obiect
   nou, iar înăuntru rândurile se despart cu linii aurii de un pixel, care pe
   fundalul cald se văd. */
.pitch .answer{
  margin-top:34px;background:var(--wash);
  border:1px solid var(--gold-line);border-top:3px solid var(--gold-line);
  padding:30px 32px 32px;
}
.pitch .a-top{display:flex;gap:24px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pitch .answer p{margin:0;font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
/* Argumentele, numerotate 01–03 cu cifre aurii din contor CSS: e registrul
   de cifră al aurului, același ca numerele celulelor din „Cum alegi" de pe
   fronturi. Erau, înainte de redesign, 14px gri — note de subsol pentru
   cele trei motive de cumpărare. */
.pitch .pts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  list-style:none;margin:30px 0 0;padding:26px 0 0;
  border-top:1px solid var(--gold-line);
  counter-reset:arg;
}
.pitch .pts li::before{
  counter-increment:arg;content:"0" counter(arg);
  display:block;font-size:24px;font-weight:var(--fw-title);line-height:1;
  color:var(--gold-ink);font-variant-numeric:tabular-nums;
  margin-bottom:12px;
}
.pitch .pts .t{display:block;font-size:var(--fs-card);font-weight:var(--fw-title);letter-spacing:-.012em}
.pitch .pts .m{display:block;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);margin-top:8px}
/* Cifrele, scoase din propoziție. „Șapte tipuri de blat cu patruzeci și două
   de modele" era scris în litere, îngropat în cel mai mic text al paginii;
   ca rând de închidere al cartonului vorbește limba unui atelier. `.specs`,
   nu `.spec`: numele scurt e luat de lista de caracteristici de pe proces. */
.pitch .specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;
  margin-top:30px;padding-top:24px;
  border-top:1px solid var(--gold-line);
}
.pitch .specs b{
  display:block;font-size:34px;font-weight:var(--fw-title);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.pitch .specs span{
  display:block;margin-top:8px;font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

/* --- serviciile, pas cu pas -----------------------------------------------
   Înlocuiește grila de cinci coloane egale. Aceea împărțea lățimea paginii la
   cinci și lăsa 14px pentru explicații, pașii citeau ca o listă de bifat, nu
   ca un proces în care intri. Aici fiecare pas e un rând: numărul la stânga,
   titlul și fraza care îl rezumă în mijloc, explicația alături, termenul la
   dreapta. Se citește pe orizontală, în ordinea în care se și întâmplă. */
/* Începutul unei secțiuni, cu accentul de aur.

   Pe prima pagină, „Cauți mobilă și nu găsești nimic fix pe gustul tău?" se
   termina cu trei celule, iar „Să dăm formă proiectului tău" începea din
   nimic, la 90px mai jos: două secțiuni diferite arătau ca una singură care
   continuă. Linia neagră de deasupra blocurilor mari era deja luată, așa că
   aici e o linie subțire cu un capăt auriu, de 84px: singurul loc din site,
   în afara mărcii și a campaniei, unde apare aurul, și numai ca linie, unde
   contrastul n-are prag. */
/* Numai pe `<section>`: în firul Ariadnei, separatorul dintre pagini e tot un
   `.sep`, iar regula asta îi punea fiecărui „/" bara aurie de 84px și 34px de
   umplutură deasupra. Pe prima pagină nu se vedea, acolo nu există fir. */
section.sep{border-top:1px solid var(--gold-line);padding-top:34px;position:relative}
section.sep::before{
  content:"";position:absolute;left:0;top:-2px;
  width:84px;height:3px;background:var(--gold-line);
}
/* Accentul auriu al marcii, pe marginea de sus a fiecarei sectiuni: un
   dreptunghi mic intr-un capat, din care iese linia. Dreptunghiul da prezenta
   pe care aurul deschis n-o are la un pixel; linia o duce pe toata latimea.
   Linia pare ca iese din dreptunghi fiindca dreptunghiul sta calare pe ea:
   3px inaltime la top:-2px, adica de la -2 la +1, cu linia de 1px la -1 prin
   mijlocul lui.

   Forma asta a venit dupa trei incercari picate, pe care le las scrise ca sa nu
   fie reluate: bara singura de 84x3px era singura grosime din site care nu era
   un pixel si citea ca un autocolant; segmentul de 120x1px a reparat grosimea
   si a disparut, fiindca aurul deschis are 2,26:1 pe alb; linia aurie pe toata
   latimea, la 1px si la 2px, s-a vazut, dar aurul intins pe 1217px inceteaza sa
   mai fie accent.

   Toate sectiunile arata la fel, cu o singura exceptie ceruta punctual: vezi
   mai jos, la SEPARAREA PE PRIMA PAGINA. */
/* --- SEPARAREA PE PRIMA PAGINA -------------------------------------------
   Sectiunile se despart cu accentul auriu descris mai sus, cu doua exceptii,
   amandoua cerute punctual, amandoua pe pagina asta.

   1. Sectiunea cu cei cinci pasi are linie NEAGRA de un pixel, fara accent.
      Restul raman aurii. Motivul e ca asa s-a cerut, uitandu-se la ea; nu e o
      regula din care se poate deduce ceva pentru alta sectiune.

   2. Indemnul final n-are separator deloc. Linia tine 1217px, iar banda lui de
      fotografie iese la 1265, deci ramanea atarnata in alb deasupra unei
      imagini mai late decat ea. O banda inchisa la culoare pe toata latimea e
      oricum cea mai apasata margine din pagina.

   Blocul care poarta h1-ul are si el linie neagra, dar aceea e marginea lui
   proprie, nu un separator: inchide totodata banda de cifre de deasupra.

   A existat aici, o vreme, si un sistem in trei trepte, cu aur numai pe doua
   sectiuni si gri pe restul, ca marginea sa spuna cat de mare e ce urmeaza. A
   fost scos la cerere: separatoarele care nu seamana intre ele s-au citit ca
   inconsecventa, nu ca ierarhie. */
.home > .svc.sep{border-top-color:var(--ink)}
.home > .svc.sep::before{content:none}

.svc{margin-bottom:var(--sp)}
.svc .hd{display:flex;align-items:baseline;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.svc .hd a{font-size:17px;color:var(--ink-3)}
.svc .hd a:hover{color:var(--ink)}
/* Redesign: lede-ul e fraza de deschidere a secțiunii, nu un rând oarecare.
   Urcă la mărimea de lead și se oprește la măsura de citit: întins pe 1440px
   ținea ~150 de semne pe rând. */
.svc .lede{margin:0 0 30px;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.55;max-width:var(--text)}
.svc .facts{margin-bottom:var(--sp)}
/* Cei cinci pași: două celule pe rând, nu cinci rânduri pe toată lățimea.
   Pe lat, un rând întreg pentru un titlu de 20px lăsa 900px de gol în dreapta
   lui, iar secțiunea ajungea la 1600px înălțime, cât trei ecrane. */
.svc-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink);
}

/* Varianta cu fotografii, numai pe prima pagină (`.photo`). Pagina de proces
   păstrează grila cu desene: acolo desenele tehnice au loc să fie citite, iar
   pe prima pagină nu se citeau oricum cotele la 300px. Un pas pe rând, cu
   fotografia alternând stânga-dreapta: ritmul se simte ca o secvență, fără
   numere mari și fără JavaScript. 56% pentru fotografie, ca textul de alături
   să rămână la o măsură de citit, nu la o coloană îngustă. */
.svc-list.photo{display:block}
/* Fotografia ținea 56% din rând. Cu raportul 3/2, pe un ecran de 1440 ieșea
   771×514px lângă un text de 214px: 300px de gol, jumătate deasupra și
   jumătate sub text, pentru că rândul e centrat. Textul nu poate crește ca
   să-l umple, are măsura lui de 70ch și tot atâtea cuvinte.

   Coborâtă în trei pași, cu pagina în față la primii doi: 56% → 46% a lăsat
   încă 232px de gol pe 1440, adică tot o fotografie de peste două ori cât
   textul de lângă ea. La 38% iese 529×353 și golul ajunge la ~163px, iar pe
   1100px, unde pornise de la 149, rămâne 47. Rămâne fotografia cel mai mare
   obiect din rând, dar nu mai dictează ea singură înălțimea pasului.

   Al treilea pas, 38% → 32%, și al patrulea, 32% → 27%, amândoi la cerere: pe
   containerul de 1217px fotografia trece de la 462×308 la 389×260 și apoi la
   329×219. Pașii se micșorează singuri, 10, 8, 6, 5 puncte, ceea ce e semnul
   că se apropie de măsura bună. Sub 27% fotografia ar coborî sub înălțimea
   textului de lângă ea și n-ar mai conduce rândul. */
/* Redesign, la cerere (28 august 2026): fotografia nu mai e un dreptunghi 3:2
   centrat în rând, ci ține TOATĂ înălțimea pasului, de la linia de sus la cea
   de jos (marginile negative anulează umplutura rândului), e mai lată (36%)
   și se stinge gradual spre text, printr-o mască ce o pierde în albul
   paginii. Marginea dinspre text nu mai e o tăietură, e o trecere. */
.svc-list.photo .svc-item{
  display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);
  gap:0 48px;align-items:center;
  padding:30px 0 34px;
  border-right:0;border-bottom:1px solid var(--hair);
}
/* Pașii pari își mută fotografia în dreapta. Ordinea din cod rămâne aceeași,
   fotografia înaintea textului, ca un cititor de ecran să audă mereu la fel.
   Se întorc și lățimile, nu doar pozițiile: altfel fotografia pasului par
   ajungea în coloana îngustă și ieșea cu o treime mai mică decât a celui
   impar, ceea ce se citea ca o greșeală, nu ca o alternanță. */
.svc-list.photo .svc-item:nth-child(2n){
  grid-template-columns:minmax(0,1fr) minmax(0,36%);
}
.svc-list.photo .svc-item:nth-child(2n) .ph{grid-column:2;grid-row:1}
.svc-list.photo .svc-item:nth-child(2n) .txt{grid-column:1;grid-row:1}
/* `align-self:stretch` scoate fotografia din centrare și o întinde pe rând;
   marginile negative o duc până în liniile care despart pașii. Plafonul de
   înălțime nu mai vine din raportul 3:2, ci din text: rândul rămâne cât are
   de spus, iar poza îl umple. `min-height` ține pasul cu text puțin să nu
   strivească fotografia sub 300px. */
.svc-list.photo .ph{
  align-self:stretch;margin:-30px 0 -34px;min-height:300px;
  overflow:hidden;background:var(--wash);
  -webkit-mask-image:linear-gradient(to right,#000 66%,transparent);
  mask-image:linear-gradient(to right,#000 66%,transparent);
}
/* Pașii pari au textul la stânga, deci stingerea se întoarce. */
.svc-list.photo .svc-item:nth-child(2n) .ph{
  -webkit-mask-image:linear-gradient(to left,#000 66%,transparent);
  mask-image:linear-gradient(to left,#000 66%,transparent);
}
.svc-list.photo .ph img{display:block;width:100%;height:100%;object-fit:cover}
/* Redesign: numărul pasului trece în registrul etichetelor aurii, ca `.kick`.
   La 14px gri citea ca o notă de subsol, deși e jumătate din informația
   rândului: „pasul 2 din 5". */
.svc-list.photo .n{
  display:block;font-size:var(--fs-kick);font-weight:var(--fw-title);
  letter-spacing:var(--ls-kick);color:var(--gold-ink);margin-bottom:12px;
}
.svc-list.photo h3{font-size:var(--fs-h3)}
/* Fraza-teză a pasului, promovată: era identică vizual cu explicația de sub
   ea, deși e concluzia pe care explicația doar o susține. */
.svc-list.photo .q{margin:8px 0 0;font-size:var(--fs-lead);font-weight:500;color:var(--ink)}
/* Fără măsura obișnuită de 70ch aici. După ce fotografia a coborât la 38%,
   coloana de text a ajuns la 806px pe un ecran de 1440, iar paragraful se
   oprea la 602px: rămâneau 200px albi în dreapta lui, chiar lângă golul pe
   care tocmai îl închideam sub el. Acum rândul merge până la capătul coloanei.

   Se iese din regula de 70ch în cunoștință de cauză: paragraful ajunge pe la
   90 de semne pe linie, peste măsura comodă, dar sunt două rânduri scurte
   într-o celulă care are deasupra un titlu și o frază de o linie, nu un text
   lung de citit pe nerăsuflate. Dacă vreodată textul pasului crește la un
   paragraf adevărat, măsura trebuie pusă la loc.

   `max-width:none` scris explicit, nu declarația ștearsă: măsura vine și din
   `.svc-item .m`, de mai jos, care prinde și pașii cu fotografie. Ștearsă
   doar de aici, cealaltă regulă rămânea în picioare și paragraful se oprea
   tot la 627px din 806. */
.svc-list.photo .m{margin:14px 0 0;color:var(--ink-2);max-width:none}
/* Durata, ca etichetă spațiată cu majuscule: același registru ca etichetele
   din banda de specificații, doar că păstrează conturul de pastilă. */
.svc-list.photo .d{display:inline-block;margin-top:18px;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--hair);border-radius:var(--r-pill);padding:6px 12px}
/* Ultimul pas nu mai are linie sub el: sub secțiune vine oricum alta, cu linia
   ei de deschidere, și cele două se citeau ca un rând dublu. */
.svc-list.photo .svc-item:last-child{border-bottom:0}

/* Fiecare pas are desenul lui în a treia coloană a rândului. Un singur desen
   lipit lângă toată lista spunea un singur lucru, iar ceilalți patru pași
   treceau pe lângă el; și tot lui i-ar fi trebuit o legendă, care apărea din
   senin sub desen. Puse una sub alta, cele cinci se citesc ca o secvență (hârtie mâzgălită la
   început, mobilă pusă la perete la final) și nu mai au
   nevoie de nicio explicație scrisă.
   A treia coloană apare doar unde există desen: pașii uneltei CONTUR n-au. */
/* Desenul urcă deasupra textului. În cod stă la urmă, unde îi e locul: e
   decorativ (`aria-hidden`), deci ordinea văzută poate să difere de cea
   citită de un cititor de ecran. */
.svc-fig{order:-1;margin:0 0 20px;width:100%;max-width:300px;align-self:center}
.svc-fig svg{display:block;width:100%;height:auto;color:var(--ink)}
/* Cotele scrise pe desen. Trebuie declarate aici: <text> stă într-un <g> cu
   fill:none și stroke:currentColor, deci fără regula asta ar ieși litere
   conturate și goale pe dinăuntru. */
.svc-fig text{fill:currentColor;stroke:none;font-size:8px;letter-spacing:.04em}
.svc-item{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 28px 30px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
/* Celulele din capete pornesc din marginea textului, ca la banda de cifre. */
.svc-item:nth-child(2n+1){padding-left:0}
.svc-item:nth-child(2n){border-right:0;padding-right:0}
/* Cinci pași într-o grilă de doi: ultimul ia rândul întreg. E și pasul care
   încheie, montajul, deci lățimea lui se citește ca un final, nu ca un rest.
   Alături ar fi rămas o celulă goală, care arată ca o greșeală.
   Regula ține doar de lista cu desene. Fără `:not(.photo)`, ultimul pas din
   lista cu fotografii primea și el `grid-column:1` pe amândoi copiii, deci
   textul cădea sub fotografie în loc să stea lângă ea. */
.svc-list:not(.photo) .svc-item:last-child{
  grid-column:1 / -1;border-right:0;padding:26px 0 30px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:0 48px;align-items:center;
}
/* Pe rândul întreg, desenul are loc să stea lângă text, nu deasupra lui: un
   desen de 380px centrat peste un paragraf aliniat la stânga se citea ca o
   greșeală de aliniere. */
.svc-list:not(.photo) .svc-item:last-child > *{grid-column:1}
.svc-list:not(.photo) .svc-item:last-child .svc-fig{
  grid-column:2;grid-row:1 / span 4;margin:0;max-width:none;align-self:center;
}
.svc-item .n{font-size:14px;color:var(--ink-3);margin-bottom:10px}
.svc-item h2,.svc-item h3{font-size:20px}
.svc-item .q{margin:6px 0 0;font-size:16px;color:var(--ink-2);max-width:var(--text)}
.svc-item .m{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ink-3);max-width:var(--text)}
.svc-item .d{display:block;margin-top:12px;font-size:14px;color:var(--ink-3)}

/* --- portofoliu filtrabil -------------------------------------------------
   Pagina unei camere era o fișă tehnică cu o galerie de șase poze la final.
   Omul care dă clic pe „Bucătărie" nu caută grosimea PAL-ului, caută dovada:
   vrea să vadă bucătării făcute de noi și să le filtreze după cum arată.
   De aceea camera e acum, în primul rând, un portofoliu, fișa tehnică rămâne,
   dar sub el.
   Filtrele sunt butoane, nu casete de bifat: se apasă, nu se completează. */
.pf{margin-bottom:var(--sp)}
/* Secțiunea n-are titlu propriu: pagina a spus deja, în deschidere, ce
   cameră e. Un al doilea titlu cu o a doua descriere scurtă, la 40px sub
   prima, era același lucru spus de două ori. Începe direct cu filtrele,
   linia neagră de deasupra lor ține loc de despărțitor. */
/* Cele trei grupuri stăteau unul sub altul, fiecare cu eticheta lui într-o
   coloană de 74px: trei rânduri înalte, cu jumătate de bandă goală în dreapta
   fiecăruia. Acum stau alături, pe trei coloane egale, banda are o singură
   înălțime și se termină odată cu pagina. */
.filters{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);
  display:flex;margin-bottom:20px;
}
.frow{
  padding:18px 24px 20px;
  flex:1 1 0;min-width:0;
  border-right:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-content:start;gap:8px;
}
.frow:first-child{padding-left:0}
.frow:last-of-type{border-right:0;padding-right:0}
/* Pe pagina de lucrari antetul portofoliului ramasese cu un singur buton
   ascuns, adica o banda alba de 43px intre cifre si filtre. Butonul sta acum
   la capatul benzii de filtre, unde oricum ii era locul: rezerva spatiu pe un
   rand care exista deja, deci nu mai apare nicio banda goala si pagina tot nu
   sare cand butonul devine vizibil. */
.filters > .pf-reset{margin-left:auto;align-self:center;padding-left:24px}

/* --- filtrele strânse pe telefon ------------------------------------------
   Pe un ecran de 390px, pastilele ies pe patru rânduri și țin ~330px între
   titlu și prima lucrare: intri pe „Lucrări" și nu vezi nicio lucrare. Stau
   sub un buton care spune câte filtre sunt puse.

   Butonul se face din JS, ca butonul de meniu: fără el clasa `filtre-js`
   lipsește, regulile de mai jos nu prind și filtrele rămân la vedere, cum
   sunt și acum. Nimeni nu ajunge la un buton care nu deschide nimic. */
.ftog{display:none}

@media(max-width:640px){
  html.filtre-js .ftog{
    display:inline-flex;align-items:baseline;gap:8px;
    font-family:var(--font);font-size:16px;font-weight:400;color:var(--ink);
    background:transparent;border:1px solid var(--ink-4);
    border-radius:var(--r-pill);padding:10px 16px;cursor:pointer;
    margin-bottom:20px;
  }
  /* Deschis, butonul ia conturul negru al unei pastile apăsate: e același
     semnal ca la filtrul activ, nu un al doilea vocabular. */
  html.filtre-js .ftog[aria-expanded="true"]{border-color:var(--ink)}
  /* Câte filtre sunt puse. Fără cifră când nu e niciunul: „Filtre (0)" e o
     informație care nu spune nimic. */
  html.filtre-js .ftog .n{color:var(--ink-3)}
  html.filtre-js .filters{display:none}
  html.filtre-js .filters.on{display:flex}
}

/* Pe lucrari, sub banda de cifre vine direct banda de filtre, fara titlu intre
   ele: doua linii orizontale despartite de un pas intreg de ritm arata ca o
   gaura, nu ca o respiratie. Pe paginile de camera pasul ramane cat era, acolo
   sectiunea are titlu si contor, adica ceva de despartit. */
/* Banda de cifre se închide cu o linie neagră, iar bara de filtre se deschide
   cu alta: puse una sub alta ieșeau două linii negre la 26px distanță, cu o
   fâșie goală între ele. Rămâne una singură, cea care închide banda, iar
   filtrele se lipesc sub ea.

   Golul nu dispare, doar se mută înăuntru: banda are 22px de umplutură sub
   ultima cifră, iar blocul de dedesubt are umplutura lui deasupra (18px la
   filtre, 30px la lista de pași), deci linia rămâne cu aer de o parte și de
   alta.

   Aceeași poveste pe /proces.html, unde sub bandă vine lista de pași, care se
   deschidea și ea cu o linie neagră. Lista de selectori se completează dacă
   banda ajunge vreodată deasupra altui bloc care începe cu linie. Pe /camere/
   nu e cazul: acolo urmează secțiunea de camere, fără linie de sus. */
.facts:has(+ .works.pf),
.facts:has(+ .svc-list.photo){margin-bottom:0}
.facts + .works.pf .filters,
.facts + .svc-list.photo{border-top:0}
.frow .lbl{width:100%;font-size:14px;color:var(--ink-3);margin-bottom:2px}
.chip{
  font-family:var(--font);font-size:16px;font-weight:400;color:var(--ink-2);
  background:transparent;border:1px solid var(--ink-4);border-radius:var(--r-pill);
  padding:7px 12px;cursor:pointer;
  display:inline-flex;align-items:baseline;gap:7px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.chip:hover{border-color:var(--ink-4);color:var(--ink)}
/* Al doilea semnal, pe lângă culoare: linia groasă de dedesubt. Rămâne în
   registrul machetei, tot o linie dreaptă, tot neagră. */
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--ink)}
/* Câte lucrări rămân dacă apeși. Se calculează ținând cont de celelalte două
   filtre, deci un buton pe zero chiar înseamnă „aici nu e nimic", nu te mai
   trimite într-o grilă goală. */
/* Câte culori are grupul, lângă titlul lui. Mic și stins: e o informație de
   orientare într-o pagină cu peste două sute de mostre, nu a doua jumătate a
   titlului. Aceeași cifră discretă ca pe pastilele de filtrare. */
.decor h2 .cnt,.decor h3 .cnt{font-size:16px;color:var(--ink-3);font-weight:400}

/* --- bara de căutare a culorilor ------------------------------------------
   Peste două sute de mostre nu se parcurg cu degetul. Bara stă lipită sub
   antet cât derulezi prin ele, altfel ca să schimbi familia trebuia să urci
   înapoi optsprezece mii de pixeli.

   `top` e înălțimea antetului lipit: 64px pe ecran lat, 56 pe telefon, unde
   antetul are doar sigla și butonul de meniu. */
/* Un singur rand: cautarea la stanga, pastilele de familie langa ea,
   numaratoarea impinsa in capatul din dreapta.

   Erau trei randuri stivuite: campul de cautare tinea 360px si lasa 857 goi
   in dreapta lui, pastilele veneau dedesubt, numaratoarea si mai jos. Bara
   ocupa 152px inaltime pentru trei comenzi care incap pe 44.

   Se rupe singura pe randuri cand nu mai incape, sub ~940px de container:
   atunci pastilele coboara sub cautare, ca inainte. */
.cbar{
  position:sticky;top:64px;z-index:20;
  background:var(--bg);padding:16px 0 14px;margin-bottom:8px;
  border-bottom:1px solid var(--hair);
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;
}
/* Cautarea sta in capatul din DREAPTA al barei, la cerere, iar filtrele preiau
   inceputul randului. Ordinea se da din `order`, nu din HTML: in cod ramane
   intai campul de cautare, fiindca acolo e ordinea in care le ia tastatura, si
   e cea buna (scrii, apoi rafinezi cu pastile). `margin-left:auto` il impinge
   la marginea din dreapta indiferent cat de late ies pastilele.

   `flex:1 1 240px` in loc de latime fixa: pe rand lat se opreste la 360, iar
   pe telefon, unde coboara oricum sub pastile, se intinde pe tot randul. */
.ccauta{
  order:3;margin-left:auto;
  flex:1 1 240px;max-width:360px;display:block;
  font-family:var(--font);font-size:16px;color:var(--ink);
  background:var(--wash);border:1px solid var(--ink-4);border-radius:var(--r-ui);
  padding:0 12px;height:44px;
}
.ccauta::placeholder{color:var(--ink-3)}
.ccauta:hover{border-color:var(--ink-2)}
.ccauta:focus{outline:0;border-color:var(--ink)}
.cfam{order:1;display:flex;flex-wrap:wrap;gap:8px;margin:0;flex:0 1 auto}
/* Numărul de rezultate. Fără el, o căutare fără potriviri arată ca o pagină
   goală și pare că s-a rupt ceva. Ocupă rândul chiar și gol, ca grila să nu
   salte cu 24px la prima literă tastată. */
.ccont{order:4;flex:0 0 100%;margin:0;font-size:14px;color:var(--ink-3);min-height:1.4em}
.decor .grup[hidden]{display:none}
.decor .m[hidden]{display:none}
.decor .grup + .grup{margin-top:var(--sp)}
.decor .grup h3{margin-bottom:18px}

@media(max-width:1000px){
  .cbar{top:56px}
  /* Cand cautarea coboara sub pastile, `margin-left:auto` nu mai are ce impinge
     si ii lasa golul de rand ca retragere: pornea de la 42 in loc de 24. */
  .ccauta{margin-left:0}
}
.chip .cnt{font-size:13px;color:var(--ink-3)}
.chip[aria-pressed="true"] .cnt{color:var(--ink-3)}
.chip[disabled]{color:var(--ink-4);border-color:var(--hair);cursor:default}
.chip[disabled] .cnt{color:var(--ink-4)}
.chip[disabled]:hover{border-color:var(--hair);color:var(--ink-4)}
/* Apare doar când e ceva de resetat. */
.pf-reset{
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.4;
  background-color:transparent;border:0;padding:0 0 3px;
  cursor:pointer;color:var(--ink-3);
}
.pf-reset:hover{color:var(--ink);background-size:100% 2px}
/* Își păstrează locul: `hidden` l-ar scoate din rând și ar împinge nota de
   alături tocmai când omul se uită la grilă. `visibility` îl ține în plan. */
.pf-reset[hidden]{display:inline;visibility:hidden}
/* Titlul secțiunii, numărul de proiecte și nota de machetă, pe un rând.
   Numărul stă lângă titlu pentru că se schimbă odată cu filtrele, e parte din
   titlu, nu o informație separată. */
.pf-hd{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;margin-bottom:18px}
.pf-hd .note{font-size:14px}
.pf-count{font-size:16px;color:var(--ink-3)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}
.pf-card{margin:0}
.pf-card[hidden]{display:none}
/* 3:2 în loc de o înălțime fixă: cardurile se așază pe orice lățime de
   coloană fără să taie altfel fotografia de la un ecran la altul. */
.pf-card .fig{aspect-ratio:3/2;cursor:pointer}
.pf-card:hover .fig img{transform:scale(1.035)}
.pf-card figcaption{padding-top:12px}
.pf-card .meta{display:block;font-size:14px;color:var(--ink-3)}
.pf-card .nm{display:block;margin-top:4px}
/* Prețul e conținut, nu etichetă: stă la culoarea textului, nu la cenușiul
   metadatelor de deasupra. Îl au doar lucrările care au venit cu un preț în
   numele fișierului; restul rămân în portofoliu fără cifră, iar spațiul de
   sub nume se strânge de la sine, fără o linie goală în locul ei. */
.pf-card .pret{display:block;margin-top:6px;font-size:16px;color:var(--ink-2)}
.pf-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pf-card .tag{font-size:14px;color:var(--ink-3);border:1px solid var(--hair);padding:3px 8px}
/* Butonul „Vezi proiectul" arată ca un link, pentru că asta face, deschide
   fotografia mare. E buton, nu ancoră, fiindcă nu duce la o altă adresă. */
.pf-open{
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.4;
  /* background-color, nu background: forma scurtă ar șterge și gradientul cu
     care clasa .u desenează linia de subliniere. */
  background-color:transparent;border:0;border-radius:0;padding:0 0 3px;
  margin-top:12px;cursor:pointer;color:var(--ink-3);
}
/* Sublinierea era purtarea de legatura a butonului, cand statea singur sub
   card. Acum e randul de actiune al cardului, cu sageata lui: o linie sub
   text, peste linia care desparte randul, sunt doua linii care spun acelasi
   lucru. Ramane doar sageata care se misca. */
.pf-card:hover .pf-open{color:var(--ink)}
.works.cards .pf-open{background-image:none;padding-bottom:16px}
/* --- cardurile de pe paginile de camera ----------------------------------
   Cerute pe 27 august 2026: „vreau si cand intru pe o camera sa am carduri".
   E acelasi card ca in portofoliu, deci figurile primesc si clasa `work` si
   sectiunea primesc `works cards`: asa mostenesc regulile de mai sus in loc sa
   apara un al doilea set cu aceleasi valori.

   `pf-card` ramane pe ele pentru ca de ea atarna filtrarea si galeria din JS.
   Randul de jos ramane `<button class="pf-open">`, tot din acelasi motiv: el
   deschide galeria si el primeste focusul inapoi la inchidere. Doar arata
   acum ca randul de actiune, nu ca o legatura subliniata. */
.works.cards .pf-grid{gap:18px}
/* Cardul e coloana, ca butonul sa se lipeasca de baza prin `margin-top:auto`:
   pe un rand, cardurile se intind pana la cel mai inalt, iar unul are trei
   etichete si altul una. */
.works.cards .pf-card{display:flex;flex-direction:column}
.works.cards .pf-card figcaption{flex:1;padding:0}
/* Etichetele si randul de finisaje isi iau marginile laterale de la card.
   Finisajele au deja 16px imprejur, deci etichetele nu mai pun jos. */
.works.cards .pf-card .tags{padding:16px 16px 0;margin-top:0}
/* Numele s-a mutat peste fotografie, unde regulile de card ii dau alb pe
   degradeu; marginea de sub el era buna cand statea in placuta. */
.works.cards .pf-card .nm{margin-top:0}
.pf-empty{font-size:16px;color:var(--ink-3);margin:0;padding:22px 0 0}

/* „Cum alegi" era o listă de patru rânduri numerotate: fiecare rând ținea
   toată lățimea, dar textul se oprea la 70 de caractere, deci jumătate din
   bandă rămânea albă, de patru ori la rând. Patru puncte scurte se citesc
   oricum mai bine alături decât unul sub altul. */
.picks{margin-bottom:var(--sp)}
.picks h2{margin-bottom:20px}
.picks .grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
/* Umplutura laterala a scazut de la 22 la 16px: cu 22, un titlu de 268px
   nu incapea intr-o celula care lasa 260px pentru text si se rupea in doua.
   Marginile din capete se duc la zero, ca la banda de cifre: prima celula
   porneste din marginea textului, ultima se opreste in ea. */
.picks .pick{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:20px 16px 26px;
}
.picks .pick:first-child{padding-left:0}
.picks .pick:last-child{border-right:0;padding-right:0}
/* Numerele celulelor iau aurul închis: e singurul loc din secțiune unde un
   accent nu concurează cu nimic, fiindcă un „01" nu se citește ca text, se
   citește ca reper. Griul de dinainte le făcea invizibile. */
.picks .n{display:block;font-size:14px;color:var(--gold-ink);margin-bottom:20px}
.picks h3{font-size:18px}
.picks .q{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.picks .m{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}

/* Fotografia mare. Fără fundal negru și fără colțuri rotunjite: e tot pagina,
   doar că ocupă tot ecranul. Se construiește din JS, ca să nu repetăm același
   bloc de markup în opt pagini de cameră. */
.lb{position:fixed;inset:0;z-index:100;background:var(--bg);display:none}
.lb.on{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb-bar{display:flex;align-items:baseline;gap:16px;padding:16px 24px;
  border-bottom:1px solid var(--hair)}
.lb-bar .nm{font-size:18px}
.lb-bar .meta{font-size:14px;color:var(--ink-3)}
.lb-fig{min-height:0;padding:24px;overflow:hidden}
.lb-fig img{width:100%;height:100%;object-fit:contain}
.lb-nav{display:flex;align-items:center;gap:12px;padding:0 24px 20px}
.lb-nav .of{font-size:14px;color:var(--ink-3);margin-left:8px}
.lb button{
  font-family:var(--font);font-size:16px;font-weight:400;color:var(--ink);
  background:transparent;border:1px solid var(--ink);border-radius:var(--r-ui);
  padding:9px 16px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lb button:hover{background:var(--ink);color:var(--bg)}
.lb button:disabled{border-color:var(--hair);color:var(--ink-3);
  background:transparent;cursor:default}
.lb-x{margin-left:auto}
body.lb-on{overflow:hidden}

/* --- fotografia mărită din bandă ------------------------------------------
   Nu refolosim .lb de mai sus: acolo e un panou alb pe tot ecranul, cu bară
   de titlu și datele proiectului, potrivit pentru portofoliu. Aici se vede o
   singură fotografie de atelier, deci fundalul e închis, ca poza să rămână
   singurul lucru luminos, iar comenzile sunt trei: închide, înapoi, înainte.

   Închiderea e un X în colț, nu un cuvânt: peste fotografie, un chenar cu
   „Închide" ar fi al doilea lucru care cere citit. */
.lbx{position:fixed;inset:0;z-index:110;display:none;background:rgba(0,0,0,.94)}
.lbx.on{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lbx-fig{min-height:0;display:grid;place-items:center;padding:72px 80px 12px}
.lbx-fig img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;transition:none}
.lbx-foot{display:flex;align-items:baseline;gap:16px;padding:0 80px 24px}
.lbx-cap{font-size:15px;line-height:1.4;color:rgba(255,255,255,.74);
  max-width:var(--text);margin:0}
.lbx-of{margin-left:auto;font-size:14px;color:rgba(255,255,255,.74);
  white-space:nowrap}
.lbx button{
  position:absolute;width:44px;height:44px;display:grid;place-items:center;
  padding:0;color:#fff;background:transparent;border-radius:0;
  border:1px solid rgba(255,255,255,.45);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.lbx button svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:square}
.lbx button:hover:not(:disabled){background:#fff;color:#000;border-color:#fff}
.lbx button:disabled{border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.32);cursor:default}
.lbx-x{top:20px;right:20px}
.lbx-prev,.lbx-next{top:50%;transform:translateY(-50%)}
.lbx-prev{left:20px}
.lbx-next{right:20px}
body.lbx-on{overflow:hidden}

/* --- pagina 404 -----------------------------------------------------------
   Singura pagină din site care nu e o stivă de blocuri: un desen, trei
   rânduri și o ieșire, centrate pe verticală. Antetul rămâne doar cu marca,
   dacă i-am pune meniul înapoi, pagina ar redeveni o listă de opțiuni, adică
   exact ce n-are omul nevoie când a nimerit greșit. */
header.bare{position:static;border-bottom:0}
.nf{
  min-height:calc(100vh - 64px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Fără scara obișnuită de secțiune aici: 104px sus și jos ar împinge
     ieșirea sub marginea ecranului pe un laptop de 720px înălțime. */
  text-align:center;padding:48px 24px 76px;
}
.nf-art{width:210px;height:auto;color:var(--ink);margin-bottom:44px}
.nf h1{margin-bottom:12px}
.nf p{margin:0 0 34px;color:var(--ink-2);max-width:46ch}

@media (max-width:640px){
  .nf-art{width:164px;margin-bottom:36px}
}

/* --- bandă de cifre cu un singur rând --------------------------------------
   Când din bandă rămâne o singură pereche, grila de patru coloane lasă trei
   sferturi gol și pare că s-a rupt ceva. Aici perechea se așază pe orizontală
   și ține linia de sus până la capăt. */
.facts.one{grid-template-columns:1fr}
.facts.one > div{display:flex;align-items:baseline;gap:26px;border-right:0}
.facts.one .k{margin-bottom:0}

/* --- pași cu desen --------------------------------------------------------
   Aceleași celule despărțite de linii ca `.facts`, cu un desen de 48px
   deasupra. Desenele n-au umplere și moștenesc culoarea textului: sunt
   linii, la fel ca tot ce e desenat pe site. */
.steps{margin-bottom:var(--sp)}
.steps > h2{margin-bottom:24px}
.steps ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);
}
.steps li{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:26px 24px 28px;
}
.steps li:nth-child(3n){border-right:0}
.steps svg{
  display:block;width:48px;height:48px;margin-bottom:22px;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:square;stroke-linejoin:miter;
}
.steps h3{margin-bottom:6px}
.steps p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-2)}

/* --- „De aici încolo": trei drumuri cu fotografie --------------------------
   Linia neagră de sus e aceeași cu a benzii de cifre și a îndemnului: e
   semnalul că începe o secțiune nouă. Celulele au despărțitori de 1px, ca să
   se citească drept trei lucruri, nu ca un rând de trei poze. */
.nextup{border-top:1px solid var(--ink);padding-top:32px;margin-bottom:var(--sp)}
.nextup .hd{margin-bottom:26px}
/* Fără plafonul de măsură, la cerere: fraza cere 845px, iar `--text` îi dădea
   706, deci se rupea pe două rânduri pentru 139px. Pe rândul întreg de 1217
   intră pe unul singur și îi mai rămân 372. Nu e un paragraf de citit lung, e
   o legendă de două propoziții deasupra a trei carduri, deci măsura de corp
   n-are ce apăra aici. Sub ~910px de fereastră se rupe singură, cum trebuie. */
.nextup .hd p{margin:10px 0 0;color:var(--ink-2);max-width:none}
.nextup .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.nx{
  display:block;padding:0 26px 0 0;
  border-right:1px solid var(--hair);
}
.nx + .nx{padding-left:26px}
.nx:last-child{border-right:0;padding-right:0}
.nextup .fig{height:clamp(190px,20vw,280px);margin-bottom:16px}
.nx .t{display:block;font-size:20px}
.nx .m{display:block;margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink-2)}


/* --- responsive ----------------------------------------------------------- */
@media(max-width:1000px){
  .two,.three{grid-template-columns:1fr}
  /* Mozaicul n-are sens pe o coloană. Bucătăria coboară în stivă, dar rămâne
     mai înaltă decât celelalte, altfel ierarhia se pierde complet pe telefon.
     Înălțimea e fixată explicit: lăsată pe `auto`, poza (portret 2:3) ajungea
     la 491px lângă carduri de 230px, adică de peste două ori cât ele. */
  .rooms .row.mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .rooms .row.mosaic .lead{grid-row:auto}
  .rooms .row.mosaic .room .fig{flex:none;height:var(--room-h)}
  .rooms .row.mosaic .lead .fig{height:clamp(300px,60vw,430px)}
  .facts{grid-template-columns:1fr 1fr}
  /* Pe două coloane se schimbă cine e la capăt: doar linia cade, umplutura
     rămâne pe toate celulele, ca ambele rânduri să pornească din același loc. */
  .facts > div:nth-child(2n){border-right:0}
  /* Cei 44px ai primei celule sunt buni cât timp banda e un singur rând. Pe
     două rânduri, celula 1 ar porni la 68 și celula 3 la 46, adică rândurile
     aceleiași benzi ar fi decalate între ele. */
  .facts > div:first-child{padding-left:22px}
  .gal .grid,.works .grid{grid-template-columns:repeat(2,1fr)}
  .works.cards .nm{font-size:17px}
  .works.cards .over{padding:48px 13px 13px}
  .works.cards .go,.works.cards .pf-open{padding:12px 13px;font-size:12px}
  /* Sub 1000px încap două fotografii deodată, deci banda are trei pași. */
  .gal .grid.strip{grid-auto-columns:calc((100% - 24px) / 2)}
  .gal .grid.strip .fig{height:clamp(190px,21vw,300px)}
  /* Mostrele sunt mai mici decat cardurile, deci incape inca o coloana. */
  .decor .grid{grid-template-columns:repeat(3,1fr)}
  .ugc .grid{grid-template-columns:repeat(3,1fr)}
  .steps ol{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(3n){border-right:1px solid var(--hair)}
  .steps li:nth-child(2n){border-right:0}
  .nextup .grid{grid-template-columns:1fr 1fr}
  .nx:nth-child(2n){border-right:0;padding-right:0}
  .nx:nth-child(2n+1){padding-left:0}
  .nx:nth-child(n+3){margin-top:30px}
  /* Doar pe verticala: prescurtarea padding ar anula si cei 24px
     orizontali pe care ii da .w, iar antetul ar lipi de marginea ecranului. */
  .hrow{flex-wrap:wrap;height:auto;gap:12px 24px;padding-top:12px;padding-bottom:10px}
  /* Cinci intrari nu incap pe un rand la 375px. Banda derulabila le-ar fi
     ascuns pe ultimele: din "Atelier" ramaneau doi pixeli vizibili, ceea ce
     citeste ca "nu mai e nimic", nu ca "deruleaza". Trec pe doua randuri. */
  header nav{order:3;width:100%;flex-wrap:wrap;gap:8px 22px}
  header nav a{white-space:nowrap}
  /* Trei celule de 200px n-au loc pentru un titlu de 20px: trec în stivă. */
  .routes{grid-template-columns:1fr}
  .route{border-right:0}
  /* Pe lat, stratul închis se subțiază spre dreapta pentru că acolo nu ajunge
     text. Pe îngust, textul ajunge la ambele margini, deci gradientul se
     întoarce pe verticală: greu jos, unde stă tot conținutul benzii. */
  .cta .scrim{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.72) 46%,rgba(0,0,0,.84) 100%)}
  /* Între 561 și 1000px butonul își păstrează eticheta (216×46px), dar
     subsolul rezerva doar 34px: rămâneau 6px până la ultimul link. */
  footer{padding-bottom:84px}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Linkurile din subsol aveau 25px pe înălțime: 16px de text și 2px de
     umplutură. Cu degetul, între „Termeni și condiții" și „Confidențialitate"
     sunt 25px de la centru la centru, deci se nimerea des greșit. Umplutura
     le duce la 45px, adică ținta obișnuită de pe telefon. Subsolul crește,
     dar e ultimul lucru din pagină și oricum se derulează.

     Numai pe ecran mic: pe desktop se dă clic cu mausul, iar 16 rânduri de
     45px ar face din subsol o coloană inutil de lungă. */
  /* 8px, nu 12: cele 18 linkuri din subsol tineau cate 45px bucata, adica peste
     800px numai ele. La 8 raman 37px, iar subsolul scade cu vreo 145.

     E un compromis asumat, nu o imbunatatire curata: 37px e sub pragul de 44
     recomandat pentru tinte de atingere. L-am acceptat doar aici, pe linkuri de
     subsol, care sunt navigatie secundara si stau unul sub altul, deci ratarea
     nimereste tot un link, nu alt fel de comanda. Nicaieri altundeva in site nu
     se coboara sub 44. */
  footer a{padding:8px 0}
  /* Golul dintre grupurile de coloane si aerul de sub bloc, si ele mai mici:
     pe doua coloane, cele patru grupuri fac patru randuri, deci golul se
     inmulteste cu patru. */
  footer .cols{gap:16px;margin-bottom:10px}
  /* 74, nu 14: creditul din dreapta are nevoie de aceeași gardă față de
     butonul plutitor de WhatsApp ca pe ecranul lat. */
  footer{padding-bottom:74px}
  /* Adresa de email are 26 de semne și nu încape într-o coloană de 152px.
     Prima reparație a fost să treacă toată coloana ei pe lățimea întreagă, și
     a ieșit mai rău: „Camere" și „Despre" rămâneau două coloane, „Contact" se
     întindea peste amândouă, iar „Legal" rămânea singur în stânga. Trei
     ritmuri diferite unul sub altul, adică exact ce se vedea ca stricat.

     Acum toate patru grupurile stau în aceleași două coloane, iar adresa se
     rupe la `@`, unde are un `<wbr>` scris în pagină. `break-word`, nu
     `anywhere`: cu `anywhere` browserul rupea la primul semn care nu încăpea,
     fără să-i pese de `<wbr>`, și ieșea „contact@auroramob / design.ro". */
  footer a{overflow-wrap:break-word}
  /* Invitația se strânge la o coloană: fotografia coboară sub problemă,
     argumentele se stivuiesc, banda de specificații trece pe două coloane. */
  .pitch .p-top{grid-template-columns:1fr;gap:26px}
  .pitch .pts{grid-template-columns:1fr;gap:24px}
  .pitch .specs{grid-template-columns:repeat(2,1fr);gap:20px 18px}
  /* Rândul de serviciu se pliază: numărul rămâne coloană proprie, restul
     coboară sub titlu. Termenul trece la stânga, aliniat la dreapta într-o
     coloană de o lățime întreagă ar fi plutit singur în celălalt capăt. */
  /* Desenele sunt decorative; pe telefon ar adăuga vreo 900px de derulare
     peste cei cinci pași, între explicații și pasul următor. */
  .svc-fig{display:none}
  /* Doi pași pe rând cer 600px de fiecare. Sub 1000px trec în stivă, fiecare
     pe toată lățimea, fără umplutură laterală. */
  .svc-list{grid-template-columns:1fr}
  .svc-item,.svc-list:not(.photo) .svc-item:last-child{
    border-right:0;padding:20px 0 24px;
  }
  /* Ultimul pas iese din grila lui de două coloane: coloana desenului
     rămânea rezervată chiar și cu desenul ascuns și strivea textul pe un
     sfert de lățime, într-o celulă de 1054px înălțime. */
  .svc-list:not(.photo) .svc-item:last-child{display:flex;flex-direction:column;align-items:flex-start}
  .svc-item .q{margin-top:6px}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  /* Trei grupuri de filtre alături n-au loc: trec în stivă, iar linia
     verticală dintre ele devine orizontală. */
  .filters{flex-direction:column}
  .frow{border-right:0;padding-left:0;padding-right:0}
  .frow{border-right:0;border-bottom:1px solid var(--hair);padding:16px 0}
  .frow:last-child{border-bottom:0}
  .picks .grid{grid-template-columns:repeat(2,1fr)}
  .picks .pick:nth-child(2n){border-right:0}
  .lb-fig{padding:16px}
}
@media(max-width:640px){
  /* 84vh dintr-un ecran lat e o fotografie întreagă; din 375×812 e o felie
     din care nu se înțelege ce se vede și împinge titlul sub linia de
     plutire. Pe telefon, poza lasă loc și primelor cuvinte. */
  .block .fig.full{height:min(56vh,430px)}
  .home > .block:first-of-type{
    min-height:0;padding:0;margin-bottom:var(--sp);display:block;
  }
  /* ============ DESCHIDEREA PE TELEFON: CARTONUL SUPRAPUS ============
     Varianta B din machetele din 29 august 2026, aleasă de client. Înainte,
     eticheta, titlul, două butoane și banda de cifre 2×2 stăteau toate PE
     fotografie și o acopereau de sus până jos: rămânea o cutie de text pe
     fond negru, nu o poză.

     Acum fotografia e un bloc scund (~320px) care rămâne curat — doar
     eticheta aurie stă pe el — iar titlul, rândul de susținere, butoanele
     și trei cifre scurte stau într-un carton alb cu chenar auriu, călare pe
     marginea de jos a pozei. Banda completă de cifre rămâne piesă de ecran
     lat și se ascunde aici. */
  .home > .block:first-of-type .fig.full{
    height:auto;display:block;padding:0;overflow:visible;
  }
  /* Poza stă într-un <picture> de la S-15 încoace (WebP cu rezervă JPG), deci
     regula nu mai poate cere „img, fiu direct": așa a stat cartonul o
     săptămână călare pe poza ieșită din flux. Se aleg amândouă, cutia și
     imaginea din ea. */
  .home > .block:first-of-type .fig.full > picture{display:block}
  .home > .block:first-of-type .fig.full > picture img{
    position:static;display:block;width:100%;height:320px;object-fit:cover;
    object-position:40% 50%;
  }
  /* Voalul acoperă doar fotografia, nu tot blocul crescut cu carton: ține
     lizibilă eticheta din colțul de jos al pozei. */
  .home > .block:first-of-type .fig.full::after{
    top:0;bottom:auto;height:320px;
    background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.28) 40%,rgba(0,0,0,0) 62%);
  }
  /* Eticheta, absolută pe poză: în flux ar fi coborât sub carton. 266, nu
     mai jos: cartonul urcă 26px peste marginea pozei (294), iar eticheta
     are nevoie de rândul ei întreg deasupra lui. Aici rămâne AURIE, ca în
     macheta aleasă: stă pe voalul plin de la baza pozei, unde se citește. */
  .home > .block:first-of-type .fig.full .et{
    position:absolute;left:0;right:0;top:266px;z-index:1;
    color:var(--gold-line);
  }
  /* Cartonul: alb, chenar auriu cu muchia de sus groasă (obiectul „duo"),
     urcat 26px peste marginea pozei, cu poza vizibilă pe lângă el. */
  .home > .block:first-of-type .fig.full .hcard{
    display:block;position:relative;z-index:1;
    margin:-26px 12px 0;
    background:var(--bg);
    border:1px solid var(--gold-line);border-top:3px solid var(--gold-line);
    padding:18px 16px 18px;
  }
  .home > .block:first-of-type .fig.full .hcard .say{
    color:var(--ink);font-size:26px;max-width:none;padding:0;margin:0 0 8px;
  }
  .home > .block:first-of-type .fig.full .hcard .spun{
    display:block;margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--ink-2);
  }
  /* Pe alb, butoanele își întorc culorile: plinul e negru, conturul e gri. */
  .home > .block:first-of-type .fig.full .hcard .act{padding:0;gap:8px}
  .home > .block:first-of-type .fig.full .hcard .btn.inv{
    background:var(--ink);color:var(--bg);border-color:var(--ink);
  }
  .home > .block:first-of-type .fig.full .hcard .btn.ghost{
    color:var(--ink);border-color:var(--ink-4);background:transparent;
  }
  /* Cele trei cifre scurte, sub o linie aurie: versiunea de buzunar a benzii
     de pe ecranul lat. */
  .home > .block:first-of-type .fig.full .hcard .mini{
    display:flex;gap:22px;margin-top:16px;padding-top:13px;
    border-top:1px solid var(--gold-line);
  }
  .home > .block:first-of-type .fig.full .hcard .mini b{
    display:block;font-size:17px;font-weight:var(--fw-title);line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .home > .block:first-of-type .fig.full .hcard .mini span{
    display:block;margin-top:4px;font-size:9px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  }
  /* Banda completă de cifre e piesă de ecran lat. */
  .home > .block:first-of-type .fig.full .facts.over{display:none}
  /* Poza crește față de cele 330px de dinainte: acum poartă și paragraful de
     deschidere, nu doar titlul. */
  .phero .fig.full{height:min(56vh,430px);padding:0 16px 14px}
  /* Pe telefon textul ocupă o treime din poză, nu o cincime: voalul urcă și
     ține alfa mare mai sus, altfel titlul cade pe partea luminoasă. */
  .phero .fig.full::after{
    height:82%;
    background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.76) 46%,rgba(0,0,0,.32) 76%,rgba(0,0,0,0));
  }
  /* Pe 375px, titlul și programul nu încap pe același rând fără să se
     strivească unul pe altul; programul trece deasupra titlului. */
  .phero .fig.full .figbar{
    flex-direction:column-reverse;align-items:flex-start;gap:8px;
  }
  /* Pe telefon programul se intoarce in randul titlului, deci iese din
     pozitionarea absoluta de mai sus; altfel ar sta peste paragraf. */
  .phero .fig.full .hours{position:static}
  .phero .fig.full:has(.hours) .say{padding-right:0}
  .phero .fig.full .hours .t{font-size:14px}
  .phero .fig.full .hours .d{font-size:12px}
  .phero .fig.full .say{padding-top:8px}
  .phero .fig.full .say p{font-size:14px;line-height:1.4}
  /* Umplutura casetei scade la 16/14 pe telefon, deci și marginile negative
     ale benzii de cifre. */
  .phero .fig.full .facts.over{margin:12px -16px -14px}
  .phero .say p{font-size:19px}
  .fields{grid-template-columns:1fr}
  /* Numărul rămâne pe rândul lui, iar câmpurile pornesc de la marginea
     paginii: 60px de retragere pe un ecran de 375px ar fi o șesime din el. */
  .q-in{padding-left:0}
  .q-hd .hint{padding-left:0}
  .q-row{padding-top:26px}
  /* Pe telefon, cele patru câmpuri ale primului pas se stivuiesc și panoul
     depășește ecranul oricum. Strângem ce se poate fără să înghesuim: un
     câmp completat rămâne la fel de ușor de atins, doar golul dintre ele
     scade. Un pas tot nu încape întreg pe 812px, dar e un pas, nu trei. */
  /* „Înapoi" + „Trimite solicitarea" nu încăpeau pe un rând de 327px cu
     umplutura de pe ecran mare, deci bara se rupea în două rânduri, iar numai
     la pasul 3. Panoul creștea cu 69px exact acolo, adică fix ce încercăm să
     evităm. Umplutura mai mică le ține pe un rând la toți trei pașii. */
  .wz-back,.wz-next,.send{padding:14px 16px;white-space:nowrap}
  .wz-nav{gap:12px}
  /* O coloană pe telefon: ultimul rând e un singur câmp, nu două. */
  .wz-on .fields > .field:nth-last-child(-n+2){margin-bottom:20px}
  .wz-on .fields > .field:last-child{margin-bottom:0}
  .wz-on .field{margin-bottom:20px}
  .wz-on .q-hd{margin-bottom:18px}
  /* Pasul 2 poartă acum și acordul, iar pe un ecran de 375px nu are cum să
     încapă întreg: nouă pastile de bifat ies pe patru rânduri, apoi urmează
     nota, caseta de text, acordul și promisiunea de sub el. Strângem tot ce
     se poate strânge fără să înghesuim ținte de atingere, pastilele își
     păstrează cei 24px minimi pe verticală. Rămâne o derulare scurtă. */
  .rooms-pick{gap:6px}
  .rooms-pick label{padding:7px 11px}
  .field textarea{min-height:76px}
  .field-hint{margin-bottom:7px}
  .consent-wrap{margin-bottom:0}
  .lede-blk.tight{padding-bottom:22px}
  /* Pe telefon capul paginii se strânge tot: firul mai aproape de antet și
     de titlu, deschiderea mai aproape de ce urmează. Pe un ecran de 812px,
     golurile de ecran lat țineau prima treime a paginii aproape goală. */
  .crumb{padding-top:12px;margin-bottom:12px}
  .lede-blk{padding-bottom:18px}
  .facts{grid-template-columns:1fr}
  /* O singură coloană: nu mai există linie verticală, deci nici umplutură
     laterală. Toate celulele pornesc din marginea textului. */
  .facts > div{border-right:0;padding-left:0;padding-right:0}
  /* Scris pe `:first-child`, nu lăsat pe rândul de deasupra: regula de la
     1000px care dă primei celule 22px are un `:first-child` în plus, deci bate
     `.facts > div` oricât de jos ar fi scrisă. Fără rândul ăsta, pe telefon
     prima celulă rămânea la 46 și celelalte trei la 24. */
  .facts > div:first-child{padding-left:0}
  /* Pasul de 22px e făcut pentru patru celule una lângă alta, unde golul
     desparte pe orizontală. Stivuite, aceleași 22px de trei ori în fiecare
     celulă (deasupra etichetei, sub ea, sub cifră) rupeau banda în patru
     insule cu aer între ele; cele patru cifre nu se mai citeau ca un singur
     lucru. Pe verticală ajung 12px între celule și 6px între etichetă și
     cifra ei, care oricum se citesc împreună. Banda scade cu ~130px. */
  .facts > div{padding-top:12px;padding-bottom:12px}
  .facts .k{margin-bottom:6px}
  /* Invitația urcă imediat după deschidere, ca primul ecran să aibă
     fotografia, titlul și începutul textului. */
  .home > .pitch{order:2}
  /* Peste fotografie banda rămâne pe două coloane și pe telefon. Stivuită pe
     patru rânduri, cum se așază oriunde altundeva sub 640px, ar fi mâncat
     jumătate din poză. Fără linii verticale, ca restul benzilor de aici, dar
     cu umplutură laterală: marginea pozei nu e marginea textului din pagină,
     iar cifrele lipite de ea s-ar citi ca ieșite din cadru.

     Scrisul scade cu un pas față de banda liberă (12 și 16). Aici nu mai e o
     secțiune cu tot rândul la dispoziție, ci ultimul sfert dintr-o fotografie
     de 430px, iar deasupra ei mai stă și titlul: la mărimea din pagină, cele
     patru celule luau 187px, adică 43% din poză. */
  .facts.over{grid-template-columns:1fr 1fr}
  .facts.over > div,.facts.over > div:first-child{padding:7px 16px}
  /* Eticheta coboară la 9px și stă pe un singur rând: pe două rânduri,
     banda urca la un sfert de fotografie. La 9px, și cea mai lungă
     („Confirmări pe parcurs") încape întreagă în celula de ~155px;
     elipsa e doar plasa de siguranță pentru texte viitoare mai lungi. */
  .facts.over .k{margin-bottom:2px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .facts.over .v{font-size:16px}
  /* Fraza scade și ea: pe 327px, la 26px se rupe pe trei rânduri, iar cu
     banda dedesubt fotografia rămâne fără niciun loc gol. */
  .home > .block:first-of-type .fig.full .et{font-size:10px;padding:0 16px 10px}
  .home > .block:first-of-type .fig.full .say{font-size:28px;padding:0 16px 14px}
  .home > .block:first-of-type .fig.full .act{padding:0 16px 16px;gap:8px}
  .home > .block:first-of-type .fig.full .act .btn{font-size:14px;padding:11px 16px}
  .home > .block:first-of-type .fig.full.centrat .say{padding:0 16px}
  /* Marginile celulelor de la capete se rezolvă în blocul de 1000px, care
     prinde și aici: de acolo în jos banda nu mai e un rând de patru. */
  .steps ol{grid-template-columns:1fr}
  .steps li,.steps li:nth-child(3n){border-right:0}
  .nextup .grid{grid-template-columns:1fr}
  .nx{border-right:0;border-bottom:1px solid var(--hair);padding:0 0 26px}
  .nx + .nx{padding-left:0;padding-top:26px}
  .nx:nth-child(n+3){margin-top:0}
  .nx:last-child{border-bottom:0;padding-bottom:0}
  .facts.one > div{display:block}
  .facts.one .k{margin-bottom:10px}
  .pair{grid-template-columns:1fr;gap:26px 0}
  .guar{flex-direction:column;gap:18px}
  .spec{grid-template-columns:1fr}
  .spec dt{padding-bottom:0;border-bottom:0}
  .spec dd{padding-top:4px}
  /* Pe telefon nu mai există dreapta: rândul are 327px, iar poza lângă text ar
     lăsa 115px de citit. Trece sub text, mică, cât să se vadă placa. */
  .svc > .spec dd{flex-direction:column;gap:12px}
  .svc > .spec dd .fig{margin-left:0;width:148px}
  /* Documentele legale, la fel: titlul peste text, fără despărțitoare
     verticală, care n-ar avea ce despărți pe o coloană. */
  .prose.doc{grid-template-columns:1fr}
  .prose.doc > h2{padding:20px 0 0;border-right:0;border-bottom:0}
  .prose.doc > h2 + p{padding:8px 0 22px}
  .prose.doc > h2:first-of-type + p{border-top:0}
  .gal .grid,.works .grid{grid-template-columns:1fr}
  /* Pe telefon se vede o fotografie, cu o felie din următoarea: felia aceea
     e singurul semn că banda mai continuă la dreapta. */
  .gal .grid.strip{grid-auto-columns:86%}
  /* Comenzile ies din marginile fotografiei, care pe telefon ocupă tot
     ecranul: săgețile coboară lângă contor, X-ul rămâne în colț. */
  .lbx-fig{padding:64px 16px 12px}
  /* Pe telefon comenzile ies din marginile fotografiei, care ocupă tot
     ecranul: X-ul sus-dreapta, săgețile jos-dreapta, una lângă alta, iar
     legenda și contorul rămân jos-stânga, cu loc rezervat până la săgeți.

     REPARAT (29 august 2026): varianta veche punea butoanele pe
     `position:static`, iar regula aceea (`.lbx button`) era mai specifică
     decât `.lbx-x` singură, deci și X-ul rămânea static: toate trei cădeau
     stivuite în coloana din stânga, fiecare pe rândul lui de grilă. Acum
     rămân absolute, doar mutate, cu selectori care încep tot cu `.lbx`. */
  .lbx-foot{padding:0 124px 24px 16px;gap:12px;flex-wrap:wrap;min-height:72px;align-items:flex-end}
  .lbx-of{margin-left:0}
  .lbx .lbx-x{top:14px;right:14px}
  .lbx .lbx-prev,.lbx .lbx-next{top:auto;bottom:16px;transform:none}
  .lbx .lbx-prev{left:auto;right:74px}
  .lbx .lbx-next{left:auto;right:16px}
  /* Pe telefon cardurile trec pe o coloana, mostrele raman doua: o mostra
     singura pe latimea ecranului nu se compara cu nimic. */
  .decor .grid{grid-template-columns:repeat(2,1fr)}
  .pf-grid{grid-template-columns:1fr}
  .picks .grid{grid-template-columns:1fr}
  .picks .pick{border-right:0}
  /* Un pas pe verticală: fotografia sus, textul sub ea, oricare ar fi rândul.
     Alternarea stânga-dreapta n-are ce alterna pe o coloană. Pașii pari cer
     selectorul lor și aici: `:nth-child` cântărește mai mult decât clasa
     singură, deci fără el regula de alternanță trecea peste asta chiar și în
     media query, și fotografia lor rămânea lată de 128px. */
  .svc-list.photo .svc-item,
  .svc-list.photo .svc-item:nth-child(2n){
    grid-template-columns:1fr;gap:16px;padding:22px 0 26px;
  }
  .svc-list.photo .svc-item:nth-child(2n) .ph,
  .svc-list.photo .svc-item:nth-child(2n) .txt{grid-column:1;grid-row:auto}
  /* Stivuit, fotografia nu mai are un rând pe care să se întindă: revine la
     raportul 3:2, fără marginile negative, iar stingerea coboară spre textul
     de sub ea. */
  .svc-list.photo .ph,
  .svc-list.photo .svc-item:nth-child(2n) .ph{
    align-self:auto;margin:0;min-height:0;aspect-ratio:3/2;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);
    mask-image:linear-gradient(to bottom,#000 72%,transparent);
  }
  /* Eticheta grupului de filtre nu mai încape pe același rând cu butoanele. */
  .frow{align-items:flex-start}
  .frow .lbl{width:100%}
  /* Pe telefon cartonul se strânge, iar rândul de sus se stivuiește:
     paragraful, apoi butonul pe toată lățimea lui. */
  .pitch .answer{padding:22px 18px}
  .pitch .a-top{flex-direction:column;align-items:stretch}
  .pitch .a-top .btn{text-align:center}
  .btn{display:block;text-align:center}
  /* Butonul pe toată lățimea e regula de pe telefon când sub el nu mai e
     nimic. În bandă, sub el stă rândul cu telefonul: la 100% ar fi un
     dreptunghi alb plin cât toată fotografia, cel mai greu obiect din pagină
     într-un site făcut din linii de un pixel. */
  .cta .btn{display:inline-block;width:auto}
  /* Aceeași cădere ca la `.cta .act`: pe telefon butonul ia toată lățimea. */
  /* Butonul pe toată lățimea era regula de pe telefon când sub el nu mai era
     nimic. În wizard, el stă pe același rând cu „Înapoi": la 100% le împinge
     pe două rânduri, iar bara crește cu 65px numai la pasul 3, adică exact
     inegalitatea de înălțime pe care o evităm. */
  .wz-on .send{width:auto}
}
@media(max-width:560px){
  /* Sigla și „Programează o discuție" cer împreună 350px, iar rândul are
     327px: îndemnul trecea pe rândul lui și antetul lipit ajungea la 173px
     pe un ecran de 812. Fără JS asta rămâne singura ieșire, deci îndemnul
     tot pleacă din antet și rămân butonul plutitor de WhatsApp și îndemnurile
     din pagină. Cu JS nu se mai pune problema: antetul are buton de meniu,
     iar îndemnul stă în panoul care se deschide, la vedere. */
  html:not(.nav-js) .hcta{display:none}
  /* Aici butonul plutitor chiar ajunge peste randul de copyright. */
  footer{padding-bottom:84px}
  /* Sub 560px eticheta dispare și rămâne doar sigla, în forma ei adevărată:
     bula albă pe discul verde WhatsApp, rotund, ca la starea `wa-mic`. */
  .wa .lbl{display:none}
  .wa{background:var(--wa);border-color:var(--wa);border-radius:50%}
  .wa svg{fill:#fff}
  .wa:hover{background:var(--ink);border-color:var(--ink)}
  /* 24, nu 16: containerul are 24px de umplutură și pe telefon, iar la 16 butonul
     ieșea cu 8px în afara marginii de conținut, adică singurul obiect din pagină
     care nu respecta axul. Umplutura lui rămâne mai mică, aia ține de mărimea
     țintei de atingere, nu de aliniere. */
  .wa{right:24px;bottom:16px;padding:13px}
}

/* ==========================================================================
   MENIUL DE PE TELEFON

   Sub 1000px cele șase intrări nu mai încap lângă siglă și treceau pe două
   rânduri sub ea. Ieșea un antet lipit de 135px, adică 20% dintr-un ecran de
   667 și 27% dintr-unul întors pe orizontală, pe fiecare pagină și la fiecare
   derulare. Acum rândul lipit are 56px și poartă doar sigla și un buton;
   restul se deschide peste pagină, cu ținte de atingere de 48px.

   Butonul e făcut din JS, nu scris în cele 25 de pagini: fără JS regula de
   mai jos nu se aplică deloc, meniul rămâne cele două rânduri de dinainte și
   toate linkurile sunt tot acolo, doar mai înghesuite. Clasa `nav-js` de pe
   <html> e comutatorul.
   ========================================================================== */

.mtog{display:none}
/* Pe ecran lat cutia panoului nu trebuie să existe: `display:contents` o
   scoate din calcul și lasă meniul și îndemnul să fie tot copii direcți ai
   rândului, așezați de aceeași grilă ca înainte. Fără ea, antetul de desktop
   ar fi avut un `div` în plus în mijloc și `margin-left:auto` al îndemnului
   ar fi împins cutia, nu îndemnul. */
.mpan{display:contents}

@media(max-width:1000px){
  html.nav-js .hrow{flex-wrap:nowrap;height:56px;padding-top:0;padding-bottom:0;gap:16px}
  /* Butonul: text plus trei linii. Numai pictograma ar fi fost mai mică, dar
     „Meniu" scris se citește din prima și nu cere ghicit, iar în rândul de
     56px încap amândouă fără să se atingă de siglă. */
  html.nav-js .mtog{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;flex:none;
    background:none;border:0;padding:8px 0;
    font:inherit;font-size:16px;color:var(--ink);cursor:pointer;
  }
  html.nav-js .mtog .bars{display:block;width:20px;height:14px;position:relative;flex:none}
  html.nav-js .mtog .bars::before,
  html.nav-js .mtog .bars::after,
  html.nav-js .mtog .bars i{
    content:"";position:absolute;left:0;right:0;height:1px;background:var(--ink);
    transition:transform .2s var(--ease),opacity .2s var(--ease);
  }
  html.nav-js .mtog .bars::before{top:0}
  html.nav-js .mtog .bars i{top:6.5px}
  html.nav-js .mtog .bars::after{top:13px}
  /* Deschis, cele trei linii devin un X: e aceeași suprafață de atins, deci
     omul nu caută alt buton ca să închidă. */
  html.nav-js header.menu-on .mtog .bars::before{transform:translateY(6.5px) rotate(45deg)}
  html.nav-js header.menu-on .mtog .bars::after{transform:translateY(-6.5px) rotate(-45deg)}
  html.nav-js header.menu-on .mtog .bars i{opacity:0}

  /* Panoul. Stă lipit sub rândul de 56px, nu peste tot ecranul: sigla rămâne
     vizibilă, deci se vede de unde a ieșit panoul și pe ce site ești.

     Meniul și îndemnul stau într-o singură cutie, nu în două lipite una de
     alta: la prima încercare erau două casete absolute, fiecare agățată de
     `top:56px`, iar îndemnul se așeza după propria lui înălțime, nu după a
     listei, și cădea peste „Materiale" și „Lucrări". Într-o cutie normală se
     așază unul sub altul singure, oricâte intrări ar avea meniul. */
  html.nav-js .mpan{
    display:none;
    position:absolute;top:56px;left:0;right:0;z-index:1;
    flex-direction:column;background:var(--bg);
    padding:6px 24px 18px;border-top:1px solid var(--hair);
    /* Panoul are 463px cu tot cu îndemn. Pe un telefon întors pe orizontală
       ecranul are 360, iar derularea paginii e oprită cât e meniul deschis:
       fără rândurile astea, „Promoție" și butonul rămâneau sub marginea de
       jos și nu se putea ajunge la ele în niciun fel. Acum se derulează
       panoul, nu pagina de sub el.

       `dvh` măsoară fereastra fără bara de adrese; `vh` de deasupra rămâne
       pentru browserele care nu-l știu, unde iese cu puțin mai mare. */
    max-height:calc(100vh - 56px);
    max-height:calc(100dvh - 56px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  html.nav-js header.menu-on .mpan{display:flex}
  /* `order:3` vine din regula de mai sus, care împingea meniul pe rândul lui
     sub siglă. În panou nu mai are ce ordona și, lăsat acolo, trimitea lista
     de linkuri sub îndemn: se deschidea meniul și primul lucru din el era
     butonul negru, nu paginile. */
  html.nav-js header nav{flex-direction:column;gap:0;width:auto;order:0}
  html.nav-js header .hcta{
    margin-left:0;margin-top:18px;order:1;
    flex-direction:column;align-items:stretch;gap:12px;
  }
  /* Fiecare intrare pe rândul ei, cu 48px de înălțime: pe telefon linkurile
     aveau 28px, sub pragul la care degetul nimerește din prima. În panou
     linkurile se întorc la negru plin: aici sunt conținutul, nu cadrul. */
  html.nav-js header nav a{
    display:block;padding:13px 0;font-size:18px;color:var(--ink);
    border-bottom:1px solid var(--hair);
  }
  html.nav-js header nav a:last-child{border-bottom:0}
  /* Pagina curentă: linia de sub text nu se mai vede într-o listă în care
     fiecare rând are oricum o linie dedesubt. Rămâne o bară aurie în stânga,
     singurul accent al mărcii, plus retragerea textului. */
  html.nav-js header nav a[aria-current="page"]{
    background-image:none;padding-left:13px;padding-bottom:13px;
    box-shadow:inset 3px 0 0 var(--gold-line);
  }
  /* În panou, telefonul e un rând centrat, iar butonul își recapătă forma:
     ultimul lucru de pe listă trebuie să se citească drept acțiune, nu drept
     a șaptea pagină. */
  html.nav-js header .hcta a{
    display:block;width:100%;text-align:center;
    font-size:17px;background-image:none;
  }
  html.nav-js header .hcta .tel{padding:4px 0;color:var(--ink)}
  html.nav-js header .hcta .btn{padding:14px 18px}
  /* Voalul peste pagină: fără el, panoul alb stă peste o fotografie albă și
     nu se vede unde se termină. Ține și rolul de „atinge oriunde ca să
     închizi". */
  html.nav-js .mfund{
    position:fixed;inset:56px 0 0;background:rgba(0,0,0,.45);
    z-index:0;border:0;padding:0;
  }
  /* Cât e meniul deschis, pagina de sub el nu se derulează. Aceeași regulă ca
     la fotografia mare din portofoliu și la fereastra de promoție. */
  body.menu-on{overflow:hidden}
  /* Butonul plutitor stă peste voal și peste listă, iar pe telefonul întors
     pe orizontală cădea fix peste „Atelier". Cât e meniul deschis se retrage:
     în panou există oricum „Programează o discuție", iar WhatsApp se întoarce
     la loc de îndată ce se închide. */
  body.menu-on .wa{display:none}
}

/* ==========================================================================
   CÂMPURI DE FORMULAR PE TELEFON

   Safari pe iPhone mărește pagina singur când atingi un câmp scris sub 16px,
   și nu o mai dă înapoi: omul rămâne cu site-ul mărit și trebuie să ciupească
   de ecran ca să iasă. Câmpurile de pe contact erau la 14px, adică exact
   formularul prin care vin cererile pățea asta. La 16px nu mai mărește nimic.
   ========================================================================== */

@media(max-width:1000px){
  .cz .field input,.cz .field textarea,.cz .field select{font-size:16px}
  /* 40px de înălțime cu text de 16px lasă câmpul strâmt, iar 44px e oricum
     ținta de atingere pe care o cer și celelalte butoane ale formularului. */
  .cz .field input{height:44px}
}

/* Banda de consimțământ pentru statistici, jos, pe toată lățimea.

   NU e fereastra cu oferta: aceea oprește pagina și cere un răspuns, asta
   stă pe o bandă de 60px și se lasă ignorată. Diferența e voită. Cine o
   ignoră citește site-ul mai departe, iar statisticile rămân oprite.

   Aceleași linii ca restul site-ului: fond de pagină, o linie neagră de un
   pixel deasupra, colțuri drepte, fără umbră. */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--bg);border-top:1px solid var(--ink);
}
.cc-in{
  max-width:1440px;margin:0 auto;padding:18px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
}
.cc-in p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.cc-act{display:flex;gap:10px;flex:none;margin-left:auto}
/* `.btn` e scris pentru `<a>`; pe `<button>` fontul și cursorul nu se
   moștenesc singure. Măsura scade și ea: 18px e mărimea unui îndemn din
   pagină, prea mare pentru o bandă care nu vrea atenția întreagă. */
.cc .btn{font-family:inherit;font-size:16px;line-height:1.2;padding:11px 20px;cursor:pointer}
/* Perechea de pe fond deschis. `.btn.ghost` există deja, dar e albă, făcută
   să stea peste fotografie, și pe fondul paginii ar fi invizibilă. */
.cc .btn.sec{background:transparent;color:var(--ink);border-color:var(--ink)}
.cc .btn.sec:hover{background:var(--ink);color:var(--bg)}
/* Butonul plutitor de WhatsApp stă tot în colțul de jos. Cât e banda acolo,
   urcă exact deasupra ei; înălțimea o măsoară scriptul, fiindcă fraza se
   rupe pe alt număr de rânduri la fiecare lățime de ecran. */
body.cc-on .wa{bottom:calc(var(--cc-h, 0px) + 12px)}
@media(max-width:640px){
  .cc-in{padding:16px}
  .cc-act{margin-left:0;width:100%}
  .cc-act .btn{flex:1;text-align:center}
}


/* ==========================================================================
   PROMOȚIE (campania de septembrie)

   Bloc de sine stătător, cu tot cu regulile lui de ecran mic: când campania
   se termină, se șterge de aici până la finalul fișierului și nu rămâne
   nimic agățat în restul foii.

   Două abateri de la sistem, asumate, nu strecurate:
   1. Cifra reducerii trece de 26px. Regula spune că ierarhia vine din
      dimensiunea fotografiei, nu din tipografie. Aici obiectul paginii ESTE
      un număr, nu o fotografie, și n-are cum să fie al doilea lucru pe care
      îl vede omul. Rămâne greutatea 400, ca tot restul site-ului.
   2. Aurul siglei iese din marcă, pe eticheta campaniei și pe cea din
      fereastra de pe prima pagină. Numai ca suprafață, cu negru peste
      (9,28:1); niciodată ca text, unde are 2,26:1 pe alb.
   ========================================================================== */

/* Fereastra cu oferta, pe prima pagină. A luat locul unei benzi aurii lipite
   sub antet: banda împingea fotografia de deschidere în jos la fiecare
   vizită, pentru toată lumea, în timp ce fereastra se arată o dată și pleacă.

   Construită din aceleași linii drepte ca restul site-ului: chenar negru de
   un pixel, colțuri drepte, fără umbră. Singura culoare e eticheta aurie. */
.pr-pop[hidden]{display:none}
/* Fără fade la deschidere, înadins: fereastra blochează derularea și
   tastatura sub ea, iar o tranziție de opacitate care nu apucă să pornească
   (filă în fundal, redare suspendată, mișcare redusă) ar lăsa-o invizibilă și
   pagina blocată. Apare dintr-odată, cum apare și fotografia mare din
   portofoliu. */
.pr-pop{
  position:fixed;inset:0;z-index:110;
  display:grid;place-items:center;padding:24px;
}
.pr-pop-fund{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.pr-pop-box{
  position:relative;width:min(470px,100%);
  background:var(--bg);border:1px solid var(--ink);
  padding:32px 30px 30px;
}
.pr-pop-k{
  display:inline-block;background:var(--gold-line);color:var(--ink);
  font-size:14px;line-height:1.2;padding:6px 11px;margin-bottom:18px;
}
.pr-pop h2{margin:0 0 10px;max-width:20ch;font-size:24px}
.pr-pop p{margin:0 0 26px;color:var(--ink-2);font-size:16px;line-height:1.5}
.pr-pop-x{
  position:absolute;top:6px;right:8px;
  background:none;border:0;padding:6px 10px;
  font:inherit;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;
}
.pr-pop-x:hover{color:var(--ink)}
/* Cât e fereastra deschisă, pagina de sub ea nu se mai derulează. Aceeași
   regulă ca la fotografia mare din portofoliu. */
body.pr-pop-on{overflow:hidden}
@media(max-width:640px){
  .pr-pop{padding:16px}
  .pr-pop-box{padding:26px 20px 24px}
  .pr-pop .btn{display:block;text-align:center}
}


/* Deschiderea paginii de campanie: aceeași bandă cu fotografie ca îndemnul
   din restul site-ului, doar că poartă h1-ul și un panou de cifre în dreapta.
   Stratul închis e mai greu decât cel obișnuit: acolo unde el se subția
   (dreapta) stau acum etichetele mărunte, care n-au contrast de irosit. */
.pr-hero{margin-top:0}
.pr-hero .band{min-height:clamp(440px,48vw,600px)}
/* Voalul era la 74-88% negru pe toata latimea si stingea fotografia aproape de
   tot: se vedea o bucatarie intunecata, nu una fotografiata. Coborat cu 12-20 de
   puncte, mai mult in dreapta, unde sta panoul si e putin text, si mai putin in
   stanga, sub titlu si sub paragraf. Contrastul textului alb ramane verificat
   peste pragul de 4,5:1, masurat prin compunerea pixelilor pozei cu voalul. */
.pr-hero .scrim{background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.54) 100%)}
.pr-hero .over{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);
  gap:clamp(26px,4vw,60px);align-items:end}
/* Titlul si randul cu telefonul merg pe toata coloana, nu pe o masura scurta.
   Capul de 20ch (291px) rupea „Ii lasam 25% din pretul montajului. Mai avem
   loc pentru doi clienti" in patru randuri, cu 530px liberi in dreapta lor;
   la fel patea si randul cu numarul de telefon, taiat la 56ch. Coloana e deja
   ingustata de panoul de cifre din dreapta, deci n-are nevoie de a doua
   ingustare. */
.pr-hero h1{max-width:none}
.pr-hero .alt{max-width:none}
.pr-hero p{margin-top:14px}
.pr-hero .btn{margin-top:26px}
.pr-tag{display:inline-block;background:var(--gold-line);color:var(--ink);
  font-size:15px;line-height:1.2;padding:7px 12px;margin-bottom:18px}

/* Panoul din dreapta: cifra, apoi toate cifrele campaniei sub ea, într-o
   grilă de două pe două. Erau două aici și încă patru într-o bandă de cifre
   sub fotografie, care le repeta la 90px distanță. Valorile coboară la 18px:
   la 20px, „1 – 30 septembrie" nu încăpea pe un rând într-o celulă de 163px
   și rupea grila în două înălțimi diferite. */
.pr-panel{border-top:1px solid rgba(255,255,255,.34)}
.pr-num{display:block;font-size:clamp(66px,8.4vw,124px);line-height:.84;
  letter-spacing:-.03em;padding:20px 0 0}
.pr-num-m{display:block;font-size:16px;color:rgba(255,255,255,.78);
  margin:12px 0 20px;max-width:26ch}
.pr-meters{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.34)}
.pr-meters > div{padding:14px 14px 14px 0}
.pr-meters > div:nth-child(2n){padding-right:0}
.pr-meters > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.24)}
.pr-meters .k{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-bottom:8px}
.pr-meters .v{display:block;font-size:18px}

/* Condițiile se întind pe tot rândul, nu pe măsura obișnuită de 70ch: sunt
   ultimul bloc dinaintea benzii de îndemn, iar oprite la jumătatea paginii
   lăsau o treime goală sub ele. */
.pr-terms p{max-width:none}

/* Textul mărunt al campaniei: condițiile care trebuie să fie scrise undeva,
   dar care nu au ce căuta în corpul paginii. */
.pr-fine{font-size:14px;line-height:1.5;color:var(--ink-3);margin:16px 0 0}
.pr-fine a{color:var(--ink-3)}
.pr-fine a:hover{color:var(--ink)}

/* Ce se vede după 30 septembrie, dacă pagina rămâne online din greșeală sau
   pentru cine ajunge la ea dintr-un link vechi. Cronometrul care se
   reîncarcă la loc de fiecare dată e o minciună; ăsta doar se oprește. */
.pr-gone{border:1px solid var(--ink);padding:16px 18px;margin:0 0 var(--sp);
  font-size:16px;line-height:1.5}

@media(max-width:1000px){
  .pr-hero .over{grid-template-columns:1fr;align-items:start}
  .pr-panel{max-width:420px}
  /* Trei pași într-o grilă de două coloane lasă al treilea singur pe rândul
     doi, cu un ciot de despărțitor în mijlocul paginii. Atelierul are șase
     pași, deci nu-l atinge. */
  .steps li:last-child{border-right:0}
}

@media(max-width:640px){
  /* Deschiderea are de dus, una sub alta, tot ce pe lat stătea în două
     coloane. Fără strângerea asta, banda trece de înălțimea ecranului și
     rândul cu telefonul rămâne mereu sub linia de plutire. */
  .pr-hero .band{min-height:0}
  .pr-hero .over{padding-top:32px;padding-bottom:32px;gap:22px}
  .pr-num{font-size:clamp(58px,17vw,84px);padding-top:14px}
  .pr-num-m{margin:10px 0 14px}
}