/* =========================================================
   INGA FLOREA — Hair Stylist & School
   Stylesheet principal
   Paleta: baza calda (espresso / maro / nisip / crem)
           + accent OLIVE (Panel Dark olive 017), culoarea
           peretilor din salon
   ========================================================= */

:root{
  /* --- baza calda --- */
  --espresso:      #35281f;
  --espresso-soft: #3a2d24;
  --brown:         #6b5344;
  --brown-dark:    #52402f;
  --sand:          #d9cec2;
  --sand-light:    #e8e1d8;
  --cream:         #f6f1ea;
  --cream-warm:    #faf7f3;
  --ink:           #342c25;
  --ink-soft:      #6e6259;
  --line:          rgba(52,44,37,.16);

  /* --- accent olive --- */
  --olive:         #6e7761;   /* accentul principal */
  --olive-dark:    #4f5745;   /* hover / carduri */
  --olive-deep:    #3b4234;   /* sectiunea Scoala */
  --olive-soft:    #9aa189;   /* text pe fundal inchis */
  --olive-mist:    #e6e6db;   /* banda deschisa */
  --olive-line:    rgba(110,119,97,.38);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  /* inaltimea barei de sus — imaginea din hero incepe exact sub ea;
     se recalculeaza la fiecare prag in care logo-ul sau burgerul isi
     schimba dimensiunea (vezi sectiunea RESPONSIVE) */
  --header-h: 92px;
  --radius: 2px;
  --slant: 58px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream-warm);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* ---------- Utilitare ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding-block:clamp(72px,10vw,140px); }

/* ancorele din meniu se opresc sub bara fixa, nu exact sub ea */
.section,.banner,.booking,.site-footer{ scroll-margin-top:var(--header-h); }
.section--sand{ background:var(--sand-light); }
.section--cream{ background:var(--cream); }
.section--mist{ background:var(--olive-mist); }
.section--dark{ background:var(--espresso); color:var(--cream); }

.eyebrow{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--olive); font-weight:400; margin:0 0 18px;
}
.section--dark .eyebrow,.banner .eyebrow{ color:var(--olive-soft); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:300; line-height:1.12; margin:0 0 .5em; }
h2{ font-size:clamp(30px,4.4vw,54px); letter-spacing:.01em; text-wrap:balance; }
h3{ font-size:clamp(21px,2.4vw,28px); }

/* titlu cu tracking larg, in spiritul machetei de referinta */
.h2--wide{ letter-spacing:.07em; font-weight:300; }

/* titlu-poveste: randuri deschise la culoare + un rand accentuat */
.h2--story{
  font-size:clamp(27px,3.5vw,42px); line-height:1.26;
  color:var(--ink-soft); font-weight:300; margin-bottom:.4em;
}
.h2--story span{ display:block; }
.h2--story b{ font-weight:500; color:var(--ink); }

p{ margin:0 0 1.1em; color:var(--ink-soft); }
.section--dark p,.banner p{ color:rgba(246,241,234,.74); }
.lead{ font-size:clamp(16px,1.5vw,18px); }

.divider{ width:52px; height:1px; background:var(--olive); opacity:.6; margin:26px 0; }
.divider--light{ background:var(--olive-soft); opacity:.8; }
.center{ text-align:center; }
.center .divider{ margin-inline:auto; }

/* ---------- Butoane ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-align:center;
  padding:15px 34px; border:1px solid var(--brown); background:var(--brown);
  color:var(--cream-warm); border-radius:100px; cursor:pointer;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:var(--brown-dark); border-color:var(--brown-dark); }
@media (hover:hover) and (pointer:fine){ .btn:hover{ transform:translateY(-2px); } }
.btn--sm{ padding:12px 26px; font-size:10.5px; letter-spacing:.2em; }
.btn--ghost{ background:transparent; color:var(--olive); border-color:var(--olive); }
.btn--ghost:hover{ background:var(--olive); color:var(--cream-warm); border-color:var(--olive); }
.btn--olive{ background:var(--olive); border-color:var(--olive); }
.btn--olive:hover{ background:var(--olive-dark); border-color:var(--olive-dark); }
.btn--light{ background:transparent; border-color:rgba(246,241,234,.55); color:var(--cream); }
.btn--light:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.btn--pill-light{ background:var(--cream); border-color:var(--cream); color:var(--espresso); }
.btn--pill-light:hover{ background:var(--olive); border-color:var(--olive); color:var(--cream-warm); }

/* =========================================================
   LOGO (vectorizat din logo-ul de brand — tools/vectorizeaza-logo.py)
   ========================================================= */
.logo{ display:block; width:auto; }

/* =========================================================
   HEADER — logo in stanga, nav + social + CTA in dreapta
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  padding:18px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck{
  padding-block:10px; box-shadow:0 1px 0 rgba(246,241,234,.08);
}
/* Fundalul barei „lipite" sta pe un pseudo-element, nu pe header.
   `backdrop-filter` aplicat direct pe header l-ar transforma in bloc
   continator pentru descendentii `position:fixed`, iar meniul mobil
   (.nav-panel, inset:0) s-ar strange la inaltimea barei in loc sa
   acopere ecranul. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(43,33,26,.94);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
/* blurul se aprinde doar cat timp bara e lipita, ca sa nu tinem un strat
   compus pe GPU in tot restul timpului */
.site-header.is-stuck::before{
  opacity:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* wrapper-ul de navigatie dispare din layout pe desktop */
.nav-panel{ display:contents; }

.brand{
  order:0; flex:0 0 auto; margin-right:clamp(18px,3vw,48px);
  display:flex; align-items:center; color:var(--cream);
}
.logo--inline{ height:56px; transition:height .4s var(--ease); }
.site-header.is-stuck .logo--inline{ height:44px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav--left{ order:1; margin-left:auto; }
.nav--right{ order:2; }
.nav a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream);
  opacity:.85; position:relative; padding-block:6px; transition:opacity .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--olive-soft); transition:width .35s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }
.nav .btn::after{ content:none; }

.header-cta{ order:3; display:flex; align-items:center; gap:16px; }
.nav-cta{ display:none; }
.socials{ display:flex; gap:12px; }
.socials a{ color:var(--cream); opacity:.7; transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.socials a:hover{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .socials a:hover{ transform:translateY(-2px); } }
.socials svg{ width:17px; height:17px; fill:currentColor; }
.socials--olive a{ color:var(--olive); opacity:.9; }
.socials--olive a:hover{ color:var(--olive-dark); }

.burger{
  order:0; display:none; position:relative; width:42px; height:42px; border:0;
  background:transparent; cursor:pointer; padding:0;
}
.burger span{
  position:absolute; left:50%; width:22px; height:1px; margin-left:-11px;
  background:var(--cream);
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — imagine de brand, margine inferioara oblica
   ========================================================= */
.hero{
  position:relative; z-index:1; min-height:94vh; min-height:94svh;
  display:flex; flex-direction:column;
  background:var(--espresso); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%);
}
.hero__media{ flex:1 1 auto; min-height:0; display:grid; place-items:center; padding-top:var(--header-h); }
.hero__media img{
  width:100%; height:100%; max-height:66vh; max-height:66svh;
  object-fit:contain; object-position:center center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
}
.hero__inner{
  flex:0 0 auto; text-align:center;
  /* spatiul de jos tine butoanele deasupra penei oblice; inainte era dublu,
     ca sa incapa si indicatorul „Scroll" care nu mai exista */
  padding:clamp(10px,2vw,24px) var(--gutter) calc(var(--slant) + clamp(26px,4vw,48px));
}
.hero__tag{
  font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--sand); margin:0 0 26px;
}
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* sectiunea de dupa hero urca sub pana oblica */
.hero + .section{
  margin-top:calc(var(--slant) * -1);
  padding-top:calc(clamp(72px,10vw,140px) + var(--slant));
}

/* tine un cuvant cu cratima pe acelasi rand (ex. „Scrie-ne" in butoane) */
.nowrap{ white-space:nowrap; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   SPLIT (Despre / Produse)
   ========================================================= */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center;
}
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; border-radius:var(--radius); }
.split__media--plain img{ aspect-ratio:1/1; }

/* portret: decupajul pastreaza fata in cadru, nu centrul pozei */
.split__media--portrait img{ object-position:50% 12%; }
/* pozele cu oameni (Inga in „Despre", Inga la Davines, echipa) au conturul
   usor ondulat pe toate laturile, ca o poza decupata de mana — ecou al
   valurilor de sub preturi. Masca se intinde pe cadru (preserveAspectRatio
   none), deci merge la orice proportie; fara suport de `mask` raman
   dreptunghiurile cu colturi rotunjite. */
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
  .split__media--portrait img,
  .split__media--davines img,
  .team__photo img{
    border-radius:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4%203%20C28%200%2054%205%2078%202%20C88%201%2096%202%2098%206%20C100%2030%2096%2054%2099%2078%20C100%2090%2098%2097%2093%2098%20C70%20100%2046%2095%2022%2099%20C10%20100%203%2098%202%2093%20C0%2070%204%2046%201%2022%20C0%2012%201%205%204%203Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4%203%20C28%200%2054%205%2078%202%20C88%201%2096%202%2098%206%20C100%2030%2096%2054%2099%2078%20C100%2090%2098%2097%2093%2098%20C70%20100%2046%2095%2022%2099%20C10%20100%203%2098%202%2093%20C0%2070%204%2046%201%2022%20C0%2012%201%205%204%203Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  }
}
/* „Shop" are doua copii: langa text pe desktop, deasupra pozei pe o coloana */
.eyebrow--stacked{ display:none; }
.split__media--plain.split__media--davines img{
  /* poza e portret: cadru patrat pe toate latimile, ca logo-ul Davines
     sa nu fie taiat, si un plus discret de lumina pe fundalul cream */
  aspect-ratio:1/1; object-position:50% 18%;
  filter:brightness(1.05) saturate(.97);
}

/* varianta in care imaginea umple toata inaltimea coloanei */
.split--fill{ align-items:stretch; }
.split--fill .split__media{ min-height:clamp(360px,42vw,620px); }
.split--fill .split__media img{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; object-fit:cover;
}

.signature{
  font-family:var(--font-display); font-size:26px; font-style:italic;
  color:var(--brown); margin-top:10px;
}
.signature small{ display:block; font-family:var(--font-body); font-style:normal;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* cele trei cifre stau mereu pe un singur rand; pe coloana ingusta se rupe
   doar eticheta de sub cifra, nu randul */
.stats{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
  gap:clamp(18px,4vw,56px); margin-top:34px;
}
.stats b{ display:block; font-family:var(--font-display); font-size:40px; font-weight:300; color:var(--olive); line-height:1; }
.stats span{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.2em; line-height:1.6; text-transform:uppercase; color:var(--ink-soft); }

/* =========================================================
   SERVICII & PRETURI — categoriile si intervalele de pret
   ========================================================= */
/* banda de 5 carduri pe orizontala; sub 1180px trece pe 2 coloane, iar
   ultimul card (fara pereche) se intinde pe toata latimea */
.prices{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:52px; }
.price-card{
  background:var(--cream-warm); padding:clamp(24px,2.4vw,30px);
  display:flex; flex-direction:column;
  /* `relative` = reper pentru masuratorile valului de mai jos */
  position:relative;
  transition:transform .4s var(--ease), opacity .9s var(--ease);
}

/* Cardurile au numar diferit de randuri de pret, iar fiind egale ca
   inaltime pe un rand, sub cele scurte ramanea un gol pana jos. Il taiem cu
   valuri in culoarea sectiunii, desenate in JS (vezi assets/js/main.js): pe
   fiecare rand de carduri (5 pe desktop, 2 pe tableta) din spatiul liber
   real, iar sub cardul care sta singur pe rand (ultimul pe tableta, fiecare
   pe telefon) un val decorativ de inaltime --deco-h. Fara JS banda ramane dreapta.
   Atentie: culoarea trebuie sa fie aceeasi cu fundalul sectiunii. */
.prices{ position:relative; --deco-h:56px; }
/* JS deseneaza valurile doar unde exista suport de `mask` — altfel un
   dreptunghi plin ar acoperi si randurile de pret */
.prices__wave{
  position:absolute; left:0; right:0; z-index:1; pointer-events:none;
  background:var(--olive-mist);
  -webkit-mask:var(--wave) no-repeat 50% 50%/100% 100%;
  mask:var(--wave) no-repeat 50% 50%/100% 100%;
}
/* spatiu in plus sub cardul singur pe rand, ca valul decorativ sa nu atinga textul */
.price-card.has-deco-wave{
  padding-bottom:calc(clamp(24px,2.4vw,30px) + var(--deco-h));
}
@media (hover:hover) and (pointer:fine){
  .price-card:hover{ transform:translateY(-4px); }
}
.price-card__num{ font-size:10.5px; letter-spacing:.24em; color:var(--olive); display:block; margin-bottom:16px; }
.price-card h3{ margin:0 0 6px; }
.price-card__sub{
  /* doua randuri rezervate, ca listele celor patru carduri sa porneasca
     de la aceeasi inaltime chiar daca subtitlul se rupe pe doua linii */
  margin:0; min-height:calc(2 * 1.75em);
  font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* descrierea serviciului, preluata din fostele carduri „Serviciile noastre";
   cele patru texte se tin la aceeasi lungime, ca sa se rupa pe acelasi numar
   de randuri si listele de preturi sa porneasca de la aceeasi inaltime */
.price-card__desc{
  margin:10px 0 0;
  font-size:14px; line-height:1.7; color:var(--ink-soft);
}
.price-list{ list-style:none; margin:20px 0 0; padding:0; }
.price-list li{
  /* pe coloana ingusta pretul coboara sub denumire, aliniat tot la dreapta */
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:12px; row-gap:2px;
  padding:13px 0; border-top:1px solid var(--line); font-size:14px;
}
.price-list li:last-child{ padding-bottom:0; }
.price-list li b{
  margin-left:auto; font-weight:400; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--olive); white-space:nowrap;
}
/* sub-titlu in interiorul unei liste (ex. „Vopsit": „În tehnică" / „O nuanță");
   selectorul lung bate si regula de padding din @media max-width:640px */
.price-card .price-list li.price-list__group{
  display:block; padding:16px 0 0;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--olive); font-weight:400;
}
.price-card .price-list li.price-list__group:first-child{ padding-top:13px; }
.price-card .price-list li.price-list__group + li{ border-top:0; padding-top:6px; }

/* butonul „+" care deschide lista de preturi — exista doar cu JS si se
   vede doar pe telefon (vezi @media max-width:640px) */
.price-card__toggle{ display:none; }

/* cercul cu „+" din butoanele care deschid o lista (preturi, echipa) —
   se intoarce in „−" plin cand butonul are aria-expanded="true" */
.plus-icon{
  position:relative; flex:0 0 auto; width:30px; height:30px;
  border:1px solid var(--olive-line); border-radius:50%;
  transition:background-color .3s var(--ease), transform .4s var(--ease);
}
.plus-icon::before,.plus-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:1px; margin:-.5px 0 0 -6px; background:var(--olive);
  transition:transform .4s var(--ease), background-color .3s var(--ease);
}
.plus-icon::after{ transform:rotate(90deg); }
[aria-expanded="true"] > .plus-icon{ background:var(--olive); transform:rotate(180deg); }
[aria-expanded="true"] > .plus-icon::before{ background:var(--cream-warm); }
[aria-expanded="true"] > .plus-icon::after{ transform:rotate(0); background:var(--cream-warm); }

.price-note{
  margin:26px auto 0; max-width:660px; text-align:center;
  font-size:13px; color:var(--ink-soft);
}

/* =========================================================
   GALERII (salon / lucrari)
   ========================================================= */
.grid-gallery{
  /* pasul cu care coboara coloanele pare in asezarea „de sah" */
  --sah: clamp(20px, 3.2vw, 46px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px); margin-top:52px;
}
.grid-gallery--salon > .shot:first-child{
  grid-column:span 2; grid-row:span 2; aspect-ratio:auto;
}
.grid-gallery--salon > .shot:first-child img{ position:absolute; inset:0; }

.shot{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--sand); cursor:zoom-in; aspect-ratio:4/3;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
/* lucrarile sunt taiate deja la 3/4, cu acelasi spatiu deasupra capului
   (tools/aliniaza-lucrari.py); daca o poza noua nu e aliniata, se taie doar
   de jos, iar zoom-ul de la hover porneste de sus, ca sa nu taie coafura */
.shot--work img{ object-position:50% 0; transform-origin:50% 0; }
@media (hover:hover) and (pointer:fine){ .shot:hover img{ transform:scale(1.06); } }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:22px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(41,46,36,.82));
  color:var(--cream); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.shot:hover figcaption{ opacity:1; transform:none; }

/* galeria de lucrari — asezare „tabla de sah": 4 coloane de cadre portret
   mai mici, cu coloanele pare coborate cu un pas, ca randurile sa se
   intrepatrunda in loc sa formeze o grila rigida. */
.grid-gallery--lucrari{
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
  max-width:1040px; margin-inline:auto;
}
.grid-gallery--lucrari > .shot{ aspect-ratio:3/4; }
/* decalajul propriu-zis: margin (nu transform), ca sa nu intre in conflict
   cu translateY-ul din .reveal */
.grid-gallery--lucrari > .shot:nth-child(2n){ margin-top:var(--sah); }
.shot--work img{ filter:saturate(.94) contrast(1.02) brightness(1.01); }
.shot--work::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(110,119,97,.10), rgba(53,40,31,.16)),
    rgba(217,206,194,.10);
  mix-blend-mode:multiply;
  transition:opacity .5s var(--ease);
}
.shot--work:hover::after{ opacity:.45; }

/* filtrul lucrarilor — aceleasi „chip"-uri ca la shop, centrate sub titlu */
.gallery__filters{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:36px;
}
.gallery__filters[hidden], .gallery__filters .chip[hidden]{ display:none; }
.gallery__filters + .grid-gallery{ margin-top:32px; }
/* cu filtrul activ decalajul „de sah" se calculeaza in JS doar pe pozele
   vizibile (clasa .is-low), altfel nth-child ar numara si pozele ascunse */
.grid-gallery--lucrari.is-filtered > .shot{ margin-top:0; }
.grid-gallery--lucrari.is-filtered > .shot.is-low{ margin-top:var(--sah); }
.grid-gallery--lucrari > .shot[hidden]{ display:none; }
/* la „Vezi mai puține" pagina urca inapoi la galerie, sub bara de sus */
.grid-gallery--lucrari{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* sub galerie: „Vezi mai multe" si „Vrei o transformare?", pe un rand */
.gallery__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px;
  margin-top:34px;
}
.gallery__actions .btn[hidden]{ display:none; }

.shot--soon{
  cursor:default; display:grid; place-items:center; aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg, rgba(110,119,97,.09) 0 14px, transparent 14px 28px),
    var(--olive-mist);
  border:1px solid var(--olive-line);
}
.shot--soon span{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--olive);
}

/* =========================================================
   PRODUSE / SHOP — Davines si Nashi, cate un bloc pe brand
   ========================================================= */
.shop{ margin-top:clamp(52px,6vw,88px); }

.shop__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,48px); flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.shop__intro{ min-width:0; }
.shop__head .eyebrow{ margin-bottom:10px; }
.shop__title{ font-size:clamp(24px,3vw,34px); margin:0; }

.shop__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:transparent; border-radius:100px;
  padding:9px 20px; cursor:pointer;
  font-family:var(--font-body); font-size:10.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip.is-active{ background:var(--olive); border-color:var(--olive); color:var(--cream-warm); }
@media (hover:hover) and (pointer:fine){
  .chip:hover{ color:var(--olive); border-color:var(--olive-line); }
  .chip.is-active:hover{ color:var(--cream-warm); border-color:var(--olive); }
}

/* fiecare brand: un titlu mic si un rand de 4 produse pe desktop */
.shop-brand{ margin-top:clamp(32px,4vw,48px); }
.shop-brand[hidden]{ display:none; }
.shop-brand + .shop-brand{ margin-top:clamp(44px,5vw,64px); }
.shop-brand__head{
  display:flex; align-items:baseline; gap:10px 18px; flex-wrap:wrap;
  margin-bottom:clamp(18px,2vw,24px);
}
.shop-brand__name{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(22px,2.4vw,28px); line-height:1.1; margin:0; color:var(--ink);
}
.shop-brand__desc{
  margin:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--olive);
}

.products{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
}

.product{
  background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
/* si aici scopat: altfel tranzitia de .9s din .reveal face ridicarea lenta */
.products .product{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .4s var(--ease), opacity .9s var(--ease);
}
.product[hidden]{ display:none; }
/* hover doar unde exista cursor real — pe touch :hover ramane „lipit"
   dupa tap si cardul ar sta ridicat pana la urmatorul tap */
@media (hover:hover) and (pointer:fine){
  /* scopat prin .products ca sa bata `.reveal.is-in{transform:none}`,
     care e definit mai jos in fisier si are aceeasi specificitate */
  .products .product:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -26px rgba(59,66,52,.6); border-color:var(--olive-line); }
  .product:hover .product__img img{ transform:scale(1.06); }
}

/* patrat: pozele sunt grupuri de produse, unele mai late decat inalte */
.product__img{
  position:relative; aspect-ratio:1; overflow:hidden;
  /* isolation tine mix-blend-mode-ul imaginii in interiorul cardului;
     fara el, Safari il poate amesteca cu fundalul paginii */
  isolation:isolate;
  background:linear-gradient(165deg,var(--olive-mist) 0%,var(--sand-light) 60%,var(--sand) 100%);
}
/* imaginea e pozitionata absolut: procentele nu se rezolva corect
   intr-un container dimensionat prin aspect-ratio */
.product__img img{
  position:absolute; inset:0; width:100%; height:100%;
  padding:22px 18px 18px;
  object-fit:contain; object-position:center center;
  mix-blend-mode:multiply;
  transition:transform .7s var(--ease);
}
/* valul dintre poza si text: crema cardului urca in poza ca un val, cu
   directia alternand de la un produs la altul — ecou al valurilor de la
   preturi. Pe telefon (poza in stanga) valul e vertical, pe marginea pozei. */
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
  .product__img::after{
    content:""; position:absolute; z-index:1; left:-1px; right:-1px; bottom:-1px;
    height:clamp(18px,8%,26px); background:var(--cream-warm); pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2011%20C14%203%2030%202%2046%209%20C62%2016%2080%2018%20100%206%20V20%20H0Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2011%20C14%203%2030%202%2046%209%20C62%2016%2080%2018%20100%206%20V20%20H0Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  }
  .product:nth-child(even) .product__img::after{ transform:scaleX(-1); }
}
.product__body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1; overflow-wrap:break-word; }
.product__cat{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--olive); }
.product__body h3{ font-size:19px; margin:0; line-height:1.2; }
.product__name{ font-size:12px; line-height:1.5; letter-spacing:.03em; color:var(--ink-soft); margin:0; }
.product__desc{ font-size:13.5px; line-height:1.6; margin:4px 0 0; }

/* butonul „+" care deschide descrierea — exista doar cu JS si se vede
   doar pe telefon (vezi @media max-width:640px) */
.product__toggle{ display:none; }

.shop__note{
  margin:clamp(28px,3vw,40px) 0 0; text-align:center;
  font-size:14px; color:var(--ink-soft);
}
.shop__note a{ color:var(--olive); border-bottom:1px solid var(--olive-line); padding-bottom:2px; }
@media (hover:hover) and (pointer:fine){
  .shop__note a:hover{ color:var(--olive-dark); border-color:var(--olive-dark); }
}

/* =========================================================
   SCOALA / BANNER — sectiunea olive
   ========================================================= */
.banner{
  position:relative; color:var(--cream); overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(110,119,97,.55), transparent 60%),
    var(--olive-deep);
}
.banner .wrap{ position:relative; z-index:2; padding-block:clamp(72px,9vw,120px); }
.banner__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,72px); align-items:center; }
.checklist{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:rgba(246,241,234,.8); }
.checklist li::before{ content:"—"; color:var(--olive-soft); flex:0 0 auto; }

/* =========================================================
   ECHIPA — fotografia de grup, langa lista de specialisti
   ========================================================= */
/* fotografia a fost facuta pe un fundal rosu de studio, care se batea cap in
   cap cu paleta calda a site-ului; perdeaua a fost recolorata in olive
   direct in fisier (vezi tools/recolor-fundal.py), oamenii au ramas
   in culorile lor */
.team{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(28px,4.5vw,64px); align-items:center; margin-top:52px;
}
/* poza vine deja decupata in jurul grupului (vezi tools/decupaj-echipa.py),
   asa ca aici doar fixam cadrul 4:3 al coloanei */
.team__photo img{
  /* `height:auto` anuleaza atributul height="" al imaginii, ca inaltimea
     sa vina din aspect-ratio, nu din dimensiunea reala a fisierului */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); background:var(--sand);
}

/* numele specialistilor, pe randuri separate de linii fine — acelasi
   ritm ca listele de preturi */
.team-names{ list-style:none; margin:0; padding:0; }
.team-names li{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:16px; row-gap:2px;
  padding:15px 0; border-top:1px solid var(--line);
}
.team-names li:first-child{ border-top:0; padding-top:0; }
.team-names b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(19px,1.8vw,23px); letter-spacing:.02em; color:var(--ink);
}
.team-names span{
  margin-left:auto;
  font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--olive);
}
/* butonul „+ Vezi toti specialistii" — exista doar cu JS si se vede doar
   cand echipa trece pe o coloana (vezi @media max-width:860px) */
.team-toggle{ display:none; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--espresso); color:rgba(246,241,234,.72);
  padding-block:clamp(56px,7vw,92px) 28px;
}
.footer-grid{
  /* coloana de contact e cea mai lata, ca adresa si programul sa stea
     fiecare pe un rand */
  display:grid; grid-template-columns:1.1fr .75fr .9fr 1.55fr;
  gap:clamp(30px,4vw,56px);
}
.f-col--brand{ max-width:320px; }
.f-logo-card{
  display:grid; place-items:center;
  width:clamp(150px,15vw,178px); aspect-ratio:1/1;
  background:var(--cream); color:var(--espresso);
  border-radius:14px; padding:14px;
}
.f-logo{ height:100%; width:auto; max-width:100%; margin:0; }
/* culoarea explicita: regula generala `p{color:var(--ink-soft)}` ar da
   maro pe maro, aproape invizibil pe fundalul espresso */
.f-about{ margin:22px 0 0; font-size:14.5px; line-height:1.85; color:rgba(246,241,234,.62); }

.site-footer h4{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--olive-soft); margin:0 0 18px; font-weight:400;
}
.f-links{ list-style:none; margin:0; padding:0; display:grid; gap:13px; font-size:14.5px; }
.f-links a{ transition:color .3s var(--ease); }
.site-footer a:hover{ color:var(--cream); }

/* contactul, compact: iconita mica in stanga, eticheta si valoarea
   strans una sub alta */
.f-contact{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.f-contact li{ display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; }
.f-ic{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(154,161,137,.45); color:var(--olive-soft);
}
.f-ic svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.f-item{ display:grid; gap:1px; font-size:14.5px; line-height:1.55; padding-top:1px; min-width:0; }
.f-label{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--olive-soft); }
.f-strong{ color:var(--cream); font-size:16px; }
.f-note{ font-size:12.5px; color:rgba(246,241,234,.5); }
.f-address{ font-style:normal; }
/* zilele si orele in doua coloane lipite, aliniate la stanga —
   „Închis" sta exact sub „09:00", nu impins la capatul randului */
.f-hours{ margin:0; display:grid; grid-template-columns:max-content max-content; gap:0 18px; font-size:14.5px; }
.f-hours dt,.f-hours dd{ white-space:nowrap; }
.f-hours dt{ color:var(--cream); }
.f-hours dd{ margin:0; }

.f-socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.f-social{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(246,241,234,.22); color:rgba(246,241,234,.75);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.f-social svg{ width:16px; height:16px; fill:currentColor; }
.f-social:hover{
  background:var(--olive); border-color:var(--olive); color:var(--cream);
}
@media (hover:hover) and (pointer:fine){ .f-social:hover{ transform:translateY(-2px); } }

.footer-bottom{
  margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid rgba(246,241,234,.12);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; font-size:12px;
}
.footer-bottom p{ margin:0; color:inherit; }
/* semnatura discreta a dezvoltatorului */
.f-credit{ font-size:11.5px; letter-spacing:.04em; opacity:.6; transition:opacity .3s var(--ease); }
.f-credit:hover{ opacity:1; }
.f-credit a{ border-bottom:1px solid rgba(246,241,234,.28); padding-bottom:1px; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:rgba(25,28,22,.985); padding:clamp(16px,5vw,56px);
}
.lightbox.is-open{ display:grid; }
.lightbox img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--radius); }
.lightbox__close,.lightbox__nav{
  position:absolute; background:transparent; border:1px solid rgba(246,241,234,.35);
  color:var(--cream); width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:20px; line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(154,161,137,.22); border-color:var(--cream); }
.lightbox__close{ top:22px; right:22px; }
.lightbox__nav--prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:18px; top:50%; transform:translateY(-50%); }
.lightbox__caption{ position:absolute; bottom:22px; left:0; right:0; text-align:center;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,241,234,.75); }

/* =========================================================
   ANIMATII LA SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* nav mai compact cat timp meniul e inca pe orizontala */
@media (max-width:1500px){
  :root{ --header-h:86px; }
  .site-header{ gap:18px; }
  .nav{ gap:18px; }
  .nav a{ font-size:10.5px; letter-spacing:.16em; }
  .header-cta{ gap:12px; }
  .header-cta .btn{ padding:11px 20px; letter-spacing:.16em; }
  .logo--inline{ height:50px; }
  .site-header.is-stuck .logo--inline{ height:42px; }
}

@media (max-width:1300px){
  .header-cta .socials{ display:none; }
}

@media (max-width:1100px){
  .footer-grid{ grid-template-columns:1.3fr 1fr 1.2fr; }
  .f-col--brand{ grid-column:1 / -1; max-width:none; }
  .f-col--brand{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
  .f-about{ margin:0; max-width:520px; }
}

@media (max-width:1100px){
  /* de aici inainte inaltimea barei o da burgerul (42px), nu logo-ul */
  :root{ --header-h:78px; }
  /* 4 produse pe brand: sub 1100px trec pe 2×2, nu 3 + 1 */
  .products{ grid-template-columns:repeat(2,1fr); }
  .burger{ display:grid; }
  .nav-panel{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px;
    position:fixed; inset:0; z-index:-1;
    background:var(--espresso);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .nav-panel.is-open{ opacity:1; pointer-events:auto; }
  .brand{
    order:2; position:absolute; left:50%; transform:translateX(-50%);
    margin-right:0;
  }
  .nav{ flex-direction:column; gap:22px; }
  .nav--left{ margin-left:0; }
  .nav a{ font-size:15px; letter-spacing:.24em; min-height:44px; display:inline-flex; align-items:center; }
  .nav-cta{ display:inline-flex; margin-top:10px; }
  .header-cta{ order:5; }
  .header-cta .btn{ display:none; }
}

@media (max-width:1180px){
  /* pe coloana de sub 1180px pretul nu mai incape langa denumire */
  .prices{ grid-template-columns:repeat(2,1fr); }
  .price-card:last-of-type:nth-of-type(odd){ grid-column:1 / -1; }
}

@media (max-width:1024px){
  .banner__grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .split__media--plain img{ aspect-ratio:4/3; }
  .eyebrow--stacked{ display:block; margin-bottom:calc(-1 * clamp(32px,6vw,88px) + 14px); }
  .eyebrow--side{ display:none; }
}

@media (max-width:980px){
  :root{ --slant:30px; }
  .grid-gallery{ grid-template-columns:repeat(2,1fr); }
  /* filtrele au cate 4 sau 8 poze, deci raman 4 pe rand (cu 3 ultimul
     rand ar ramane pe jumatate gol); sub 860px trec pe 2 */
  .grid-gallery--lucrari{ grid-template-columns:repeat(4,1fr); max-width:none; }
  /* placeholderul „In curand" (cand exista) ar ramane singur pe un rand */
  .grid-gallery--lucrari > .shot--soon{ display:none; }
  .grid-gallery--salon > .shot:first-child{ grid-column:span 2; grid-row:span 1; aspect-ratio:16/10; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .f-col--contact{ grid-column:1 / -1; }
  /* Pe telefon si tableta imaginea sta lipita de bara de sus, exact ca pe
     desktop: hero-ul isi ia inaltimea din continut, altfel `min-height`
     plus centrarea pe verticala lasau o banda goala intre bara si poza. */
  .hero{ min-height:0; justify-content:flex-start; }
  .hero__media{ flex:0 0 auto; padding-top:var(--header-h); }
  .hero__media img{
    width:168%; max-width:none; height:auto;
    /* pe ecrane scunde (telefon in landscape) poza se strange ca sa nu
       impinga butoanele mult sub prima pagina de scroll */
    max-height:58vh; max-height:58svh; object-fit:contain;
    margin-inline:-34%;
  }
  .hero__inner{ padding-top:26px; }
  .logo--inline{ height:46px; }
  .site-header.is-stuck .logo--inline{ height:40px; }
}

@media (max-width:860px){
  .grid-gallery--lucrari{ grid-template-columns:repeat(2,1fr); }
  /* sub 860px coloana cu nume devine prea ingusta: poza trece deasupra,
     dar ramane marginita, ca sa nu se intinda iar pe tot ecranul */
  .team{ grid-template-columns:1fr; gap:34px; }
  .team__photo img, .team-names{ max-width:560px; margin-inline:auto; }
  .team__names-wrap{ width:100%; max-width:560px; margin-inline:auto; }
  /* pe o coloana se vede doar Inga Florea; restul echipei se deschide cu „+" */
  .team--collapsible .team-names li:not(:first-child){ display:none; }
  .team--collapsible.is-open .team-names li:not(:first-child){
    display:flex; animation:priceListIn .45s var(--ease);
  }
  .team--collapsible .team-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:44px; margin:14px 0 0; padding:8px 0 0;
    background:none; border:0; border-top:1px solid var(--line);
    font:inherit; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--olive); text-align:left; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .shop__head{ align-items:flex-start; }
}

@media (max-width:640px){
  /* pe telefon footerul se strange: logo-ul mic sta langa textul de
     prezentare, „Salon" si „Servicii" stau alaturi pe doua coloane scurte,
     iar contactul ocupa tot randul */
  .site-footer{ padding-block:44px 22px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .f-col--brand,.f-col--contact{ grid-column:1 / -1; }
  .f-col--brand{ grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  .f-logo-card{ width:84px; padding:8px; border-radius:10px; }
  .f-about{ font-size:13px; line-height:1.6; }
  .site-footer h4{ margin-bottom:10px; }
  .f-links{ font-size:14px; }
  .f-contact{ gap:10px; }
  .f-socials{ margin-top:18px; }
  .footer-bottom{ margin-top:28px; padding-top:16px; }
  .prices{ grid-template-columns:1fr; margin-top:36px; }
  /* pe o coloana cardurile se strang: spatii mai mici, subtitlul nu mai
     rezerva doua randuri (nu mai e nimic de aliniat alaturi) */
  .price-card{ padding:18px 20px 14px; }
  .prices{ --deco-h:30px; }
  .price-card.has-deco-wave{ padding-bottom:calc(14px + var(--deco-h)); }
  .price-card__num{ margin-bottom:6px; }
  .price-card h3{ margin-bottom:2px; }
  .price-card__sub{ min-height:0; }
  .price-card__desc{ margin-top:6px; font-size:13.5px; line-height:1.6; }
  /* pe o coloana listele de preturi se strang sub un buton „+" */
  .prices--collapsible .price-card__toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:44px; margin:10px 0 0; padding:6px 0 0;
    background:none; border:0; border-top:1px solid var(--line);
    font:inherit; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--olive); text-align:left; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .prices--collapsible .price-list{ display:none; margin-top:4px; }
  .prices--collapsible .price-list li{ padding:10px 0; }
  .prices--collapsible .price-list li:last-child{ padding-bottom:0; }
  .prices--collapsible .price-card.is-open .price-list{
    display:block; animation:priceListIn .45s var(--ease);
  }
  /* pe telefon rolul nu mai incape langa nume, deci trece dedesubt */
  .team-names span{ margin-left:0; flex-basis:100%; }
  .grid-gallery--lucrari{ grid-template-columns:repeat(2,1fr); }
  .grid-gallery--lucrari > .shot--soon{ display:grid; }
  /* pe telefon butoanele se strang pe doua randuri, ca la shop */
  .gallery__filters{ gap:6px; margin-top:28px; }
  .gallery__filters .chip{ padding:8px 12px; letter-spacing:.12em; }
  .gallery__filters + .grid-gallery{ margin-top:24px; }
  /* produsele pe telefon: cate unul pe rand, poza mica in stanga si textul
     alaturi; descrierea se deschide cu „+", deci lista ramane scurta */
  .products{ grid-template-columns:1fr; gap:10px; }
  .product{ position:relative; flex-direction:row; align-items:stretch; }
  .product__img{ flex:0 0 clamp(96px,30vw,128px); aspect-ratio:auto; min-height:clamp(96px,30vw,128px); }
  .product__img img{ padding:8px; }
  .product__img::after{
    left:auto; top:-1px; bottom:-1px; right:-1px; width:14px; height:auto;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M11%200%20C3%2014%202%2030%209%2046%20C16%2062%2018%2080%206%20100%20H20%20V0Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M11%200%20C3%2014%202%2030%209%2046%20C16%2062%2018%2080%206%20100%20H20%20V0Z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E");
  }
  .product:nth-child(even) .product__img::after{ transform:scaleY(-1); }
  .product__body{ padding:12px 14px 12px; gap:2px; justify-content:center; min-width:0; }
  .product__cat{ font-size:9px; }
  .product__body h3{ font-size:17px; }
  .product__name{ font-size:11.5px; }
  .products--collapsible .product__body{ padding-right:54px; }
  .products--collapsible .product__desc{ display:none; font-size:13px; margin-top:6px; }
  .products--collapsible .product.is-open .product__desc{
    display:block; animation:priceListIn .45s var(--ease);
  }
  /* butonul acopera tot cardul (se poate atinge oriunde), iar cercul
     cu „+" sta in dreapta, centrat pe verticala */
  .products--collapsible .product__toggle{
    display:flex; align-items:center; justify-content:flex-end;
    position:absolute; inset:0; z-index:2; padding:0 14px 0 0;
    background:none; border:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
}

@media (max-width:520px){
  .chip{ padding:8px 15px; letter-spacing:.14em; }
  .grid-gallery{ grid-template-columns:1fr; }
  /* lucrarile sunt fotografii portret: raman pe 2 coloane,
     altfel galeria devine o coloana foarte lunga pe telefon */
  .grid-gallery--lucrari{ grid-template-columns:repeat(2,1fr); }
  /* si fotografiile din salon stau „in sah" pe telefon: doua coloane de
     cadre patrate, altfel sectiunea devine un sir foarte lung de imagini
     latime-intreaga */
  .grid-gallery--salon{ grid-template-columns:repeat(2,1fr); }
  .grid-gallery--salon > .shot{ aspect-ratio:1; }
  .grid-gallery--salon > .shot:first-child{ grid-column:span 1; grid-row:span 1; aspect-ratio:1; }
  .grid-gallery--salon > .shot:nth-child(2n){ margin-top:var(--sah); }
  /* pe telefon: trei coloane egale, cifre si etichete mai mici */
  .stats{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .stats b{ font-size:32px; }
  .stats span{ margin-top:6px; font-size:9.5px; letter-spacing:.14em; line-height:1.5; }
  .footer-bottom{ flex-direction:column; }
  .logo--inline{ height:40px; }
  .f-logo{ margin-left:-6px; }
}

/* =========================================================
   DISPOZITIVE TACTILE — tinte de atins de minim ~44px
   (recomandarea Apple HIG si Material Design)
   ========================================================= */
@media (pointer:coarse){
  .chip{ min-height:44px; }
  .btn--sm{ min-height:44px; }
  .booking__link{ display:inline-flex; align-items:center; min-height:44px; }
  .f-links{ gap:0; }
  .f-links a{ display:inline-block; padding-block:7px; }
  .f-item{ gap:0; }
  /* tinta de atins ramane ~40px, dar fara sa departeze randurile */
  .f-item a,.f-item .f-strong{ display:inline-block; padding-block:5px; }
  .f-social{ width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   REZERVARE — banda subtila dintre shop si footer
   ========================================================= */
.booking{
  position:relative; color:var(--cream);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(110,119,97,.55), transparent 60%),
    var(--olive-deep);
  padding-block:clamp(64px,8vw,104px); overflow:hidden;
}
.booking::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(110,119,97,.22), transparent 70%),
    radial-gradient(50% 100% at 50% 100%, rgba(154,161,137,.12), transparent 72%);
  pointer-events:none;
}
.booking__inner{
  position:relative; max-width:640px; margin-inline:auto; text-align:center;
}
.booking .eyebrow{ color:var(--olive-soft); }
.booking__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,4.4vw,52px); line-height:1.1; margin:0;
}
.booking__title .hy{
  font-family:var(--font-body); font-weight:inherit;
  display:inline-block; vertical-align:.08em;
}
.booking__divider{ display:block; margin:24px auto; }
.booking__text{
  color:rgba(246,241,234,.74); margin:0 auto; max-width:520px;
}
.booking__actions{
  margin-top:34px; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:14px 26px;
}
.booking__link{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--olive-soft); position:relative; padding-block:4px;
}
.booking__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; opacity:.5; transition:opacity .3s var(--ease);
}
.booking__link:hover::after{ opacity:1; }

@keyframes priceListIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   PROGRAMARE — fereastra „Alege cum ne scrii"
   ========================================================= */
/* containerul e flex + `margin:auto` pe panou (nu place-items:center),
   ca pe ecrane scunde panoul sa se poata derula si de sus, nu doar de jos */
.bm{
  position:fixed; inset:0; z-index:210;
  display:flex; padding:16px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.bm[hidden]{ display:none; }
.bm__backdrop{
  position:fixed; inset:0;
  background:rgba(35,27,21,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease);
}
.bm__panel{
  position:relative; width:100%; max-width:560px; margin:auto;
  padding:clamp(52px,7vw,62px) clamp(20px,5vw,44px) clamp(26px,5vw,40px);
  text-align:center; color:var(--ink);
  background:linear-gradient(180deg,var(--cream-warm) 0%,var(--cream) 100%);
  border:1px solid rgba(110,119,97,.18); border-radius:22px;
  box-shadow:0 30px 80px -30px rgba(35,27,21,.55);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.bm__panel:focus{ outline:none; }
.bm.is-open .bm__backdrop{ opacity:1; }
.bm.is-open .bm__panel{ opacity:1; transform:none; }

.bm__close{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--olive); border-radius:12px;
  color:var(--olive); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.bm__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.bm__close:hover{ background:var(--olive); color:var(--cream-warm); }

.bm__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0; font-size:11px; font-weight:500; letter-spacing:.32em;
  text-transform:uppercase; color:var(--olive);
}
.bm__eyebrow::before{ content:""; width:36px; height:1px; background:currentColor; opacity:.7; }
.bm__title{
  margin:18px 0 12px; font-size:clamp(32px,7vw,44px); font-weight:400;
  letter-spacing:.01em; line-height:1.1; color:var(--ink);
}
.bm__text{ max-width:380px; margin:0 auto; font-size:15px; line-height:1.7; color:var(--ink-soft); text-wrap:balance; }
.bm__phone{
  display:inline-block; margin-top:22px;
  font-family:var(--font-display); font-weight:400; line-height:1.1;
  font-size:clamp(42px,10vw,56px); letter-spacing:.03em; color:var(--ink);
  white-space:nowrap; transition:color .3s var(--ease);
}
.bm__phone:hover{ color:var(--olive-dark); }
.bm__note{ margin:6px 0 26px; font-size:13px; line-height:1.6; color:var(--ink-soft); text-wrap:balance; }

.bm__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bm__btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-width:0; min-height:54px; padding:12px 14px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:100px;
  font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.bm__btn[hidden]{ display:none; }
.bm__btn svg{
  flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--olive);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.bm__btn span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm__btn:hover{ background:#fff; border-color:var(--olive-line); color:var(--olive-dark); }
/* butonul ramas fara pereche pe ultimul rand ocupa tot randul */
.bm__btn--wide{ grid-column:1 / -1; }
.bm__btn--call{ grid-column:1 / -1; background:var(--brown); border-color:var(--brown); color:var(--cream-warm); }
.bm__btn--call svg{ stroke:var(--cream-warm); }
.bm__btn--call:hover{ background:var(--brown-dark); border-color:var(--brown-dark); color:var(--cream-warm); }

.bm__close:focus-visible,.bm__btn:focus-visible,.bm__phone:focus-visible{
  outline:2px solid var(--olive); outline-offset:3px;
}

/* telefoane inguste (iPhone SE / mini, Android 360px) */
@media (max-width:400px){
  .bm{ padding:12px; }
  .bm__panel{ padding-inline:16px; border-radius:18px; }
  .bm__close{ top:10px; right:10px; }
  .bm__grid{ gap:8px; }
  .bm__btn{ gap:8px; padding:10px; letter-spacing:.13em; font-size:11px; }
  .bm__btn svg{ width:18px; height:18px; }
  /* „Vrei o transformare? Scrie-ne" se rupe frumos pe doua randuri */
  .gallery__actions .btn{ padding-inline:24px; letter-spacing:.16em; }
}