/* Pagina principală (2026-10-07): hero cu fotografia în cabinet, viță și frunze. Provine din seria de variante N→T (vezi CLAUDE.md); concatenat ca atare, scoped pe clasele de body de mai jos. */
/* ===== _preview/hero-n.css ===== */
/* Seria N — primul ecran după macheta ChatGPT, cu fotografiile și textele clientei. */
.n{--n-next:#F4F9F6;--pr:max(0px,calc((100vw - 1360px) / 2 - 20px));--ph:clamp(440px,38vw,590px)}
/* ---------- scena ---------- */
.n-hero{position:relative;overflow:hidden;padding:56px 0 132px;
  background:linear-gradient(180deg,#fff 0%,#F8FCFA 100%);min-height:min(660px,calc(100vh - 74px - 200px))}
.n-hero > .wrap{position:relative;z-index:2;max-width:1120px}
.n-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:96px;fill:var(--n-next);z-index:3;display:block}
/* forma organică verde cu citat */
/* ---------- textul ---------- */
.n-copy{max-width:700px}
.n-cred{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:600 .8125rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.n-ok{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.n-ok svg{width:14px;height:14px}
.n h1{font-size:clamp(2.25rem,3.1vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:0}
.n h1 em{font-style:normal;color:var(--accent-dk)}
.n .n-lede{font-size:1.125rem;line-height:1.6;max-width:46ch;margin:20px 0 0}
.n .hero-cta{margin-top:28px;gap:12px}
.n .hero-cta .btn{padding:14px 26px}
.n .hero-cta .btn svg{width:18px;height:18px;flex:none}
.n .hero-cta .btn:not(.btn-ghost){background:var(--deco);border-color:var(--deco);color:#fff;font-weight:600}
.n .hero-cta .btn:not(.btn-ghost):hover{background:var(--deco-dk);border-color:var(--deco-dk)}
.n .hero-cta .btn-ghost{background:#fff}
/* rândul de date cu pictograme */
.n-facts{list-style:none;display:flex;flex-wrap:wrap;gap:20px 32px;margin:32px 0 0;padding:0}
.n-facts li{display:flex;align-items:center;gap:12px}
.n-facts svg{flex:none;width:28px;height:28px;color:var(--accent-dk)}
.n-facts span{font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.n-facts b{font:inherit;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.n-fade{animation:hvCard .9s cubic-bezier(.2,.8,.2,1) 1.4s backwards}
/* ---------- serviciile de sub valul ---------- */
.n #servicii{background:var(--n-next);padding:0 0 72px;position:relative}
.n #servicii .wrap{max-width:1120px;position:relative}
.n #servicii .sec-head{margin-bottom:28px}
.n #servicii .sec-head .eyebrow{display:none}
.n #servicii .sec-head h2{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.n-all{position:absolute;right:20px;top:6px;display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--deco-dk);text-decoration:none}
.n-all svg{width:18px;height:18px}
.n-all:hover{text-decoration:underline;text-underline-offset:3px}
.n .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.n .card{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 22px;background:#fff;border:1px solid var(--line);border-radius:18px}
.n .card h3{font-size:1.15rem}
.n .card p{font-size:.9rem;line-height:1.6}
.n-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dk)}
.n .card:nth-child(even) .n-ico{background:var(--lilac-2);color:var(--deco-dk)}
.n-ico svg{width:26px;height:26px}
.n-go{position:absolute;top:24px;right:20px;color:var(--deco-dk)}
.n-go svg{width:18px;height:18px}
/* ---------- variante ---------- */
/* N2: fereastra cu răsăritul, în spatele portretului */
/* N3: fotografia de pe canapea, paleta lila + mov închis */
/* N4: formă organică în spatele portretului, citat pe card alb, date într-o bară */
/* N5: portret mare, până în margine; text pe văl luminos; date cu separatoare */
/* ---------- telefon ---------- */
@media(max-width:860px){
.n-hero{padding:32px 0 108px;min-height:0;display:flex;flex-direction:column}
.n-copy{max-width:none}
.n-facts{gap:16px 24px}
.n-all{position:static;margin:0 20px 16px;display:flex}
.n .cards{grid-template-columns:1fr}
}
@media(min-width:861px) and (max-width:1180px){
.n .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ===== _preview/hero-o.css ===== */
/* Seria O — pe baza N1 (vezi hero-n.css), cu forma citatului ieșită din lateral, ornament complex și fotografia-scenă. */
.o{--o-leaf:var(--sage)}
.o .n-hero{overflow:visible;clip-path:inset(0 0 -150px 0);z-index:2;padding:56px 0 132px;
  background:linear-gradient(180deg,#fff 0%,#F8FCFA 100%)}
.o .n-hero > .wrap{z-index:5}
/* fotografia: scena, în dreapta, pe toată înălțimea, cu marginea stângă topită în fundal */
.o-photo{position:absolute;top:0;bottom:0;right:0;width:62%;height:100%;object-fit:cover;object-position:56% 36%;z-index:1;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%)}
/* ornamentul: o viță cu frunze din colțul stâng, pe sub text, ieșind jos în dreapta */
.o-vine{position:absolute;left:0;top:0;width:100%;height:760px;z-index:4;pointer-events:none;overflow:visible}
.o-stem{fill:none;stroke:var(--o-leaf);stroke-width:1.3;opacity:.7;stroke-linecap:round}
.o-leaves path{fill:rgba(152,195,173,.14);stroke:var(--o-leaf);stroke-width:1.1;opacity:.85;stroke-linejoin:round}
.o-leaves .vein{fill:none;opacity:.55;stroke-linecap:round}
.o-wash path{fill:var(--o-leaf);stroke:none;opacity:.14}
.o-wash g:nth-child(odd) path{opacity:.09}
/* forma verde cu citat: lipită de marginea de sus și din dreapta, nu o bulă plutitoare */
/* ---------- variante ---------- */
/* O2 și O5: marginea fotografiei, în val */
/* O3: paleta ei, mov și lila */
.o3{--o-leaf:var(--deco);--n-next:#F6F2F7}
.o3 .n-hero{background:linear-gradient(90deg,var(--lilac-2) 0,#fff 30%,#fff 100%)}
.o3 .o-leaves path{fill:rgba(166,130,176,.12)}
.o3 .n-facts svg{color:var(--deco-dk)}
/* O4: fotografie mai mare, formă mai mică, ornament discret */
/* O5: forma deschisă */
/* ---------- telefon ---------- */
@media(max-width:860px){
.o .n-hero{clip-path:none;display:block;padding:0 0 108px}
.o-photo{position:relative;display:block;width:100%;height:300px;right:auto;margin:0 0 20px;object-position:56% 12%;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);
    -webkit-mask-size:auto;mask-size:auto;-webkit-mask-composite:source-over;mask-composite:add}
.o-vine{display:none}
.o .n-hero > .wrap{position:relative}
}
/* ===== _preview/hero-p.css ===== */
/* Seria P — pe baza O3 (vezi hero-n.css și hero-o.css).
   Ordinea straturilor (de jos în sus): val → viță → fotografie → forme semitransparente → text.
   Valul nu mai acoperă fotografia; în loc de asta, fotografia e tăiată după curba valului printr-o mască,
   ca vița să poată trece pe SUB ea și totuși să rămână vizibilă pe val. */
.p .n-wave{z-index:0}
.p .o-vine{z-index:1}
.p-photo{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0 52C140 14 280 8 430 34s290 52 460 30 330-62 550-36V0H0z' fill='black'/></svg>");
  -webkit-mask-size:100% calc(100% - 95px),100% 96px;
  -webkit-mask-position:0 0,0 calc(100% + 1px);
  -webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0 52C140 14 280 8 430 34s290 52 460 30 330-62 550-36V0H0z' fill='black'/></svg>");
  mask-size:100% calc(100% - 95px),100% 96px;
  mask-position:0 0,0 calc(100% + 1px);
  mask-repeat:no-repeat}
/* ---------- formele din dreapta ---------- */
/* ---------- variante ---------- */
/* P2: mai transparent, fundal încețoșat mai tare, cerc mic lila */
/* P3: degrade; spatele în gri-lila din paleta ei */
/* P4: arcade */
/* P5: forma din față deschisă */
/* ---------- telefon ---------- */
@media(max-width:860px){
.p-photo{position:relative;inset:auto;height:300px;margin-bottom:20px;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);
    -webkit-mask-size:auto;mask-size:auto;-webkit-mask-position:0 0;mask-position:0 0}
.p-photo .o-photo{height:100%;object-position:46% 14%}
}
/* ===== _preview/hero-q.css ===== */
/* Seria Q — pe baza P4 (arcade). Se încarcă după hero-p.css. */
/* ramura din formă: în alb, același stil de frunză ca vița */
/* ---------- variante ---------- */
/* Q2: și mai compactă, ramura arcuită sub text */
/* Q3: ramura iese peste marginea formei, spre fotografie */
/* Q4: text mare, ramură diagonală în colț */
/* Q5: arcade egale, în trepte */
/* ---------- telefon ---------- */
/* ===== _preview/hero-s.css ===== */
/* Seria S — pe baza R5. Se încarcă după hero-q.css. Straturi (jos → sus): val → frunze pline (tăiate pe val) → viță → fotografie → forme → text. */
.s .n-wave{z-index:0}
/* formele ies puțin din ecran în dreapta: tăiem pe orizontală (pe verticală vița trebuie să poată coborî sub hero) */
.s .n-hero{overflow-x:clip}
.s #servicii{padding-top:30px}
/* frunzele pline din colț: strat propriu, cu aceeași mască (curba valului) ca fotografia, ca să nu coboare sub val;
   poziția urmează marja coloanei, ca vița (la 1920px e exact ca în R5) */
.s-washes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0 52C140 14 280 8 430 34s290 52 460 30 330-62 550-36V0H0z' fill='black'/></svg>");
  -webkit-mask-size:100% calc(100% - 95px),100% 96px;-webkit-mask-position:0 0,0 calc(100% + 1px);-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0 52C140 14 280 8 430 34s290 52 460 30 330-62 550-36V0H0z' fill='black'/></svg>");
  mask-size:100% calc(100% - 95px),100% 96px;mask-position:0 0,0 calc(100% + 1px);mask-repeat:no-repeat}
.s-washes svg{position:absolute;top:0;left:calc(max(20px,calc((100% - 1080px) / 2)) - 420px);width:1920px;height:760px;overflow:visible}
.s-washes .o-wash path{fill:var(--o-leaf);stroke:none;opacity:.14}
.s-washes .o-wash g:nth-child(odd) path{opacity:.09}
.s .o-vine{z-index:2}
.s .p-photo{z-index:3}
/* ---------- formele din dreapta ---------- */
/* ---------- telefon ---------- */
@media(max-width:860px){
.s-washes{display:none}
}
/* ===== _preview/hero-t.css ===== */
/* Seria T — baza comună: R5/S fără elementul din dreapta; fotografia se topește în fundal pe marginea dreaptă. */
.t .o-photo{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%,#000 74%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40%,#000 74%,transparent 100%)}

/* Secțiunea servicii de pe prima pagină (2026-10-07, varianta A3 fără frunză): carduri cu pictogramă mov; tot cardul e link */
.n #servicii .cards{gap:22px}
.n #servicii .card{overflow:hidden;gap:12px;padding:30px 24px 56px;background:#fff;border:1px solid #E9E3EC;border-radius:20px;cursor:pointer;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.n #servicii .card:hover,.n #servicii .card:focus-within{transform:translateY(-4px);box-shadow:0 14px 30px rgba(111,76,118,.14);border-color:#D0C7D1}
.n #servicii .card>*:not(.n-go){position:relative}
.n #servicii .n-ico,.n #servicii .card:nth-child(even) .n-ico{width:auto;height:auto;background:none;border-radius:0;color:#6F4C76;display:block}
.n #servicii .n-ico svg{width:38px;height:38px;stroke-width:1.5}
.n #servicii .card h3{font-size:1.38rem;line-height:1.2;margin-top:6px}
.n #servicii .card h3 a{color:#1E3B36}
/* link întins: ::after-ul linkului din titlu acoperă tot cardul (position:relative e pe .card; .n-cb și h3 rămân statice) */
.n #servicii .card>.n-cb{display:flex;flex-direction:column;flex:1;position:static}
.n #servicii .card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
.n #servicii .card h3 a:focus-visible{outline:none}
.n #servicii .card h3 a:focus-visible::after{outline:2px solid #6F4C76;outline-offset:2px}
.n #servicii .tag{align-self:flex-start;margin-top:auto;background:#F4F0F5;color:#6F4C76}
.n #servicii .n-cb p{margin-bottom:18px}
.n #servicii .n-go{position:absolute;top:auto;bottom:22px;right:22px;color:#6F4C76;transition:transform .3s}
.n #servicii .card:hover .n-go{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.n #servicii .card,.n-go{transition:none!important}.n #servicii .card:hover{transform:none}}

/* Telefon: paragraful de prezentare (.n-lede) trece după rândul cu date (.n-facts). Ordinea din HTML rămâne cea de pe desktop. */
@media(max-width:860px){
  .n-copy{display:flex;flex-direction:column}
  .n-copy > .n-lede{order:5;margin-top:28px}
  .n-copy > .n-facts{order:4}
}


/* ===== Prima pagină: încadrare finală (2026-10-16) = varianta A2: U2 + frunze/fundal simetric în dreapta (X2) + Z1 (fade, titlu) + A2 (titlu pe 3 rânduri, date 2×2, apariție întârziată a secțiunii de servicii). Provine din _preview/hero-{u,w,x,z,a}.css; clasele de pe <body>: hu u2 hw x2 z1 a2. ===== */
@media(min-width:1181px){
  .u2 .o-photo{left:calc(50% + -230px);right:auto;width:830px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 80%,transparent 100%)}
  .u2 .o-vine{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 540px + -200px),transparent calc(50% + 540px + -40px));
    mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 540px + -200px),transparent calc(50% + 540px + -40px))}
}
@media(min-width:1181px){
  .hw .o-vine{-webkit-mask-image:none;mask-image:none}
  .hw .s-washes-r svg{left:auto;right:calc(max(20px,calc((100% - 1080px) / 2)) - 420px)}
  .hw .s-washes-r{z-index:4}
}
@media(max-width:1180px){
  .s-washes-r{display:none}
}
@media(min-width:1181px){
  .x2 .n-hero{background:linear-gradient(90deg,var(--lilac-2) 0,#fff 42%,#fff 58%,var(--lilac-2) 100%)}
  .x2 .s-washes-r svg{transform:scaleX(-1);}
}
@media(min-width:1181px){
  .z1 .o-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 50%,rgba(0,0,0,.93) 57%,rgba(0,0,0,.78) 65%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.3) 85%,rgba(0,0,0,.12) 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 50%,rgba(0,0,0,.93) 57%,rgba(0,0,0,.78) 65%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.3) 85%,rgba(0,0,0,.12) 93%,transparent 100%)}
  .z1 .n-facts{gap:12px 14px;flex-wrap:nowrap}
  .z1 .n-facts li{gap:6px}
  .z1 .n-facts svg{width:22px;height:22px}
  .z1 .n-facts span{font-size:.72rem;line-height:1.28}
  .z1 .n-copy h1{text-shadow:0 0 22px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.9),0 0 2px #fff}
}
@media(min-width:1181px){
  .a2 .o-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 64%,rgba(0,0,0,.93) 69.04%,rgba(0,0,0,.78) 74.8%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.3) 89.2%,rgba(0,0,0,.12) 94.96000000000001%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 64%,rgba(0,0,0,.93) 69.04%,rgba(0,0,0,.78) 74.8%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.3) 89.2%,rgba(0,0,0,.12) 94.96000000000001%,transparent 100%)}
  .a2 .n-copy h1{max-width:17ch}
  .a2 .n-facts{display:grid;grid-template-columns:auto auto;gap:14px 38px;width:max-content}
  .a2 .n-facts li{gap:10px}
  .a2 .n-facts svg{width:30px;height:30px}
  .a2 .n-facts span{font-size:0.9rem;line-height:1.3}
  .a2 .n-hero{padding:24px 0 68px}
  .a2 .n-copy .n-lede{margin-top:12px}
  .a2 .n-copy .hero-cta{margin-top:18px}
  .a2 .n-facts{margin-top:18px}
}
.a2 #servicii .sec-head h2,.a2 #servicii .sec-head p:not(.eyebrow),.a2 #servicii .n-all{opacity:0;transform:translateY(14px);animation:hvRise .9s ease forwards}
.a2 #servicii .sec-head h2{animation-delay:1.5s}
.a2 #servicii .sec-head p:not(.eyebrow){animation-delay:1.62s}
.a2 #servicii .n-all{animation-delay:1.74s}
@media(prefers-reduced-motion:reduce){
  .a2 #servicii .sec-head h2,.a2 #servicii .sec-head p:not(.eyebrow),.a2 #servicii .n-all{animation:none;opacity:1;transform:none}
}


/* ===== Prima pagină: fade-ul drept al fotografiei urmează silueta scaunului (2026-10-16) = varianta CU5 din _preview/hero-cu.html (scripts/build-hero-cu.mjs).
   Poza e complet vizibilă până la linia desenată de clientă (spătarul la marginea reală, fade fix pe linie pe rândurile cu scaun), apoi se stinge până la marginea imaginii.
   Masca e un PNG generat pixel cu pixel, aliniat cu fotografia (object-fit:cover → mask-size:auto 100%, mask-position:56% 36%). Clasa de pe <body>: cu5. Doar ≥1181px. ===== */
@media(min-width:1181px){
  .cu5 .o-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),url("/assets/img/hero-fade-scaun.64354c35.png");mask-image:linear-gradient(90deg,transparent 0,#000 34%),url("/assets/img/hero-fade-scaun.64354c35.png");
    -webkit-mask-size:100% 100%,auto 100%;mask-size:100% 100%,auto 100%;-webkit-mask-position:0 0,56% 36%;mask-position:0 0,56% 36%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
  .cu5 .n-hero{background:linear-gradient(90deg,var(--lilac-2) 0,#fff 42%,#fff calc(50% + 280px),var(--lilac-2) calc(50% + 390px),var(--lilac-2) 100%)}
}