/* ==========================================================================
   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 acestei direcții: nicio greutate peste 400, niciun titlu
   peste 26px. Ierarhia vine din dimensiunea fotografiei, nu din tipografie.
   ========================================================================== */

: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. Se folosesc NUMAI în marcă. */
  --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;

  /* O SINGURĂ scară de spațiere verticală. Înainte, golurile dintre secțiuni
     erau 56 / 24 / 0 / 56 / 56, iar zeroul lipea procesul de banda CONTUR.
     Ritmul inegal e primul lucru care face o pagină să pară neterminată. */
  --sp:clamp(56px,7vw,104px);
  --sp-half:clamp(28px,3.5vw,52px);

  /* 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);
}

*{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:400;font-size:26px;line-height:1.2;margin:0;letter-spacing:-.005em}
h3{font-size:18px}

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

/* --- 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}
.mark .sig{width:auto;height:36px;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:17px;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:26px}
/* 17px × 1,4 = 23,8px, cu 0,2px sub pragul de 24px pentru ținte de
   atingere. Trece prin excepția de spațiere, dar marja e iluzorie. */
header nav a{font-size:17px;padding:2px 0}
/* Pagina în care ești, subliniată în antet. Fără îngroșare (n-avem decât
   greutatea 400), deci singurul semnal disponibil e linia. */
header nav a[aria-current="page"]{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  padding-bottom:3px;
}
.hcta{margin-left:auto;display:flex;gap:22px}
.hcta a{font-size:17px}

/* --- 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}
.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}
}

/* --- 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}
/* Banda de cifre de sub fotografia de deschidere. Ambele linii sunt subțiri:
   una neagră ar arăta ca chenarul fotografiei, iar despărțirea de secțiunea
   următoare o face aerul, egal deasupra și dedesubt. */
.block .fig.full + .facts{
  border-top-color:var(--hair);
  margin-top:var(--sp-half);
  margin-bottom:var(--sp-half);
}
.block:has(> .facts){margin-bottom:var(--sp-half)}
.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}

/* --- camere ---------------------------------------------------------------
   Patru categorii, nu opt camere: bucătăria deschide, cât două carduri;
   depozitarea (dressing și dulapuri, la un loc) și baia stau alături, una
   peste alta; "Altele" închide, singură, pe toată lățimea. 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ă. */
.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 cele opt carduri */
.room .fig{height:var(--room-h)}
.room .nm{display:block;margin-top:12px}
.room .qt{color:var(--ink-3)}
.room .go{display:block;margin-top:2px;font-size:17px;color:var(--ink-3)}
.room:hover .go{color:var(--ink)}

/* 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:0;
  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:0;
  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:0;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:0;
  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: golul
   de --sp-half 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:10px;
  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:7px;
  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:5px;
  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:3px;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:7px;
  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:7px;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:7px;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)}

/* 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-half)}
/* 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)}

/* --- deschiderea unei pagini interioare ----------------------------------- */
.phero{margin-bottom:var(--sp)}
/* Când sub fotografie urmează banda de cifre, cele două se citesc împreună:
   titlul spune ce e camera, cifrele spun cât ține și cât durează. La 104px
   distanță arătau ca două secțiuni fără legătură. */
.phero:has(+ .facts){margin-bottom:var(--sp-half)}
/* 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. */
.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. */
.phero .fig.full .say{
  position:relative;z-index:1;padding:10px 0 0;max-width:68ch;
}
.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. */
.phero .fig.full .hours{
  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;
}
.phero .fig.full .hours .d{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;
}
.phero .fig.full .hours .t{
  margin-left:12px;padding-left:13px;font-size:15px;
  border-left:1px solid rgba(255,255,255,.42);
}
/* 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-half)}
/* 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}
.lede-blk p{margin:0;color:var(--ink-2);max-width:var(--text)}

/* --- banda de cifre ------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top: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);border-bottom:1px solid var(--hair);padding:22px}
/* Celulele de la capete n-au linie de care să se depărteze, deci n-au nici
   umplutură: prima pornește din marginea textului, ultima se oprește în ea.
   Așa banda se aliniază cu titlul, cu textul introductiv și cu lista de
   dedesubt, în loc să stea împinsă 22px spre interior față de toate. Între
   coloane rămân aceiași 22px de fiecare parte a liniei. Același tipar ca
   la `.nx`. */
.facts > div:first-child{padding-left:0}
.facts > div:last-child{border-right:0;padding-right:0}
/* Banda se deschide cu linie neagră: semnalul, pe tot site-ul, că începe o
   secțiune nouă. Când imediat sub ea urmează lista de pași, care se deschide
   cu aceeași linie neagră, gri-ul de închidere cade la 30px de ea și cele
   două se citesc ca un rând dublu. Acolo banda nu se mai închide singură: o
   închide linia care urmează. Pe restul paginilor, unde după bandă vine text
   fără linie proprie, închiderea rămâne. */
.facts:has(+ .svc-list) > div{border-bottom:0}
.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)}
/* Două blocuri din același subiect stau mai aproape decât două secțiuni:
   „Esențe / Blaturi / Plăci / Culori" e o singură pagină, nu patru. */
.duo:has(+ .duo){margin-bottom:var(--sp-half)}
.duo > h2{margin-bottom:14px}
.duo p{margin:0 0 12px;color:var(--ink-2);max-width:var(--text)}
.duo p:last-child{margin-bottom:0}
.duo .lk{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px}

/* 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)}
.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)}

/* --- 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}
.gal .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gal .grid .fig{height:clamp(190px,21vw,300px)}

/* --- portofoliu ----------------------------------------------------------- */
.works{margin-bottom:var(--sp)}
/* Materiale și fronturi folosesc aceleași carduri, iar acolo vin mai multe
   grile una după alta („Esențe / Blaturi / Plăci"). Sunt o singură pagină,
   nu trei secțiuni, deci stau mai aproape, ca blocurile `.duo`. */
.works:has(+ .works){margin-bottom:var(--sp-half)}
.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)}
.works figcaption{padding-top:12px}
.works .nm{display:block}
.works .qt{display:block;font-size:16px;color:var(--ink-3);margin-top:2px}

/* --- 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)}
/* 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;background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);padding:14px 26px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--bg);color:var(--ink)}

/* --- 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}

/* --- 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-half);
  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}
.ugc .head{max-width:var(--text);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. */
.wa{
  position:fixed;right:24px;bottom:24px;z-index:80;
  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)}
.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}

/* 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}

footer{margin-top:var(--sp);border-top:1px solid var(--hair);padding:26px 0 34px}
/* 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. */
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:20px}
footer a{display:block;font-size:16px;line-height:1.3;color:var(--ink-3);padding:3px 0;overflow-wrap:anywhere}
footer a:hover{color:var(--ink)}
footer .lbl{font-size:14px;color:var(--ink-3);margin-bottom:6px}
footer .src{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:84ch;margin:0}

/* --- 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. */
.pitch{border-top:1px solid var(--ink);padding-top:60px;margin-bottom:var(--sp)}
.pitch h1{max-width:38ch;margin-bottom:18px}
.pitch .body{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
/* Plafonul contează abia sub 1000px, când cele două coloane devin una:
   fără el, un paragraf ar fi ținut 90 de caractere pe rând. */
.pitch .body p{margin:0;color:var(--ink-2);max-width:var(--text)}
.pitch .act{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* Aceleași celule despărțite de linii ca `.facts`, trei motive
   pentru care merită mobilă la comandă, nu trei sloganuri. */
.pitch .pts{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;
  margin:38px 0 0;padding:0;border-top:1px solid var(--hair)}
.pitch .pts li{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:20px 22px 24px}
.pitch .pts li:last-child{border-right:0}
.pitch .pts .t{display:block;font-size:20px}
.pitch .pts .m{display:block;font-size:14px;color:var(--ink-3);margin-top:6px;max-width:var(--text)}

/* --- 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. */
.sep{border-top:1px solid var(--hair);padding-top:34px;position:relative}
.sep::before{
  content:"";position:absolute;left:0;top:-1px;
  width:84px;height:3px;background:var(--gold-line);
}

.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)}
.svc .lede{margin:0 0 30px;color:var(--ink-2);max-width:none}
.svc .facts{margin-bottom:30px}
/* 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);
}
/* 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ă. */
.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-item:last-child > *{grid-column:1}
.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:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:20px;
}
.frow{
  padding:18px 24px 20px;
  border-right:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-content:start;gap:8px;
}
.frow:first-child{padding-left:0}
.frow:last-child{border-right:0;padding-right: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:0;
  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ă. */
.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}
.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);
}
.pf-card:hover .pf-open{color:var(--ink);background-size:100% 2px}
.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}
.picks .n{display:block;font-size:14px;color:var(--ink-3);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:0;
  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}

/* --- 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}
.nextup .hd p{margin:10px 0 0;color:var(--ink-2);max-width:var(--text)}
.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: coloana din stânga e fiecare
     celulă impară, cea din dreapta fiecare celulă pară. */
  .facts > div:nth-child(2n){border-right:0;padding-right:0}
  .facts > div:nth-child(2n+1){padding-left:0}
  .gal .grid,.works .grid{grid-template-columns:repeat(2,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))}
  /* Trei motive una sub alta: la 1000px, o celulă de 20px text pe o treime
     de ecran rupe titlurile pe trei rânduri. */
  .pitch .body{grid-template-columns:1fr;gap:12px}
  .pitch .pts{grid-template-columns:1fr}
  .pitch .pts li{border-right:0}
  /* 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-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-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{grid-template-columns:1fr}
  .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)}
  /* 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;
  }
  .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}
  .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}
  .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}
  .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}
  .spec{grid-template-columns:1fr}
  .spec dt{padding-bottom:0;border-bottom:0}
  .spec dd{padding-top:4px}
  .gal .grid,.works .grid{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:1fr}
  .picks .grid{grid-template-columns:1fr}
  .picks .pick{border-right:0}
  /* Eticheta grupului de filtre nu mai încape pe același rând cu butoanele. */
  .frow{align-items:flex-start}
  .frow .lbl{width:100%}
  .pitch .act{flex-direction:column;align-items:stretch;gap:16px}
  .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. Pe telefon rămân sigla și meniul; pentru contact e
     butonul plutitor de WhatsApp, mereu la vedere, plus îndemnurile din
     pagină. */
  .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, care are 1,98:1 pe
     alb. Trece pe negru: forma bulei cu receptor se recunoaște și fără
     culoare, iar 21:1 se vede și în soare. */
  .wa .lbl{display:none}
  .wa svg{fill:var(--ink)}
  .wa{right:16px;bottom:16px;padding:13px}
}
/* ==========================================================================
   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}
.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)}
.pr-hero .scrim{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.80) 55%,rgba(0,0,0,.74) 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, la doua
   lucrari" in trei 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-half);
  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}
}