/* =========================================================
   Cabinet Individual de Psihologie Petriciac Andreea Oana
   Design: varianta A — cald & liniștitor
   ========================================================= */

:root{
  /* Declaram explicit schema de culori. Fara asta, Chrome pe Android aplica
     "Force dark mode" si inverseaza singur culorile paginii.
     "only" e semnalul mai tare din standard: nu doar ca pagina suporta light,
     ci ca browserul sa nu suprascrie nici sub o preferinta fortata. Samsung
     Internet il respecta doar din anumite versiuni. */
  color-scheme: only light;

  --bg:#FFFFFF;
  --surface:#F2F8F5;
  --surface-2:#E4F1EB;
  --white:#FFFFFF;
  --ink:#1E3B36;
  --ink-2:#3A5550;
  --muted:#506762;
  --accent:#347968;
  --accent-dk:#26594D;
  --accent-soft:#DCEEE6;
  --deco:#A682B0;      /* mov din paleta clientei: doar decorativ (linii, inel, accente). Nu trece AA, deci niciodată pentru text. */
  --deco-soft:#F4F0F5;
  --on-deco:#FFFFFF;   /* text pe butoanele mov, la cererea clientei: 3.3:1 pe #A682B0, sub AA (4.5) pentru text mic */
  --lilac:#F4F0F5;     /* tentă foarte deschisă din #D0C7D1: benzi și suprafețe */
  --lilac-2:#E9E3EC;   /* a doua treaptă: chipuri, gradiente */
  --deco-dk:#6F4C76;   /* mov închis, 7:1 pe alb: singurul mov care poate fi text (etichetele din căutare) */
  --line-strong:#D0C7D1;
  --brand:#4DA896;     /* turcoazul clientei, la valoarea exactă: doar suprafețe și decor, nu text sau butoane (alb pe el: 2.85) */
  --sage:#98C3AD;
  --warn-bg:#FFFFFF;
  --warn-line:#D0C7D1;
  --warn-dot:#6F4C76;
  --line:#E3DDE6;
  --line-2:#EFEBF1;
  --radius:20px;
  --radius-sm:12px;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px;
  --shadow:0 14px 34px -22px rgba(30,59,54,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:only light}
body{color-scheme:only light}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dk)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.16;letter-spacing:-.015em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deco-dk);font-weight:600;margin:0 0 14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Scos din cadru prin translate, nu prin left negativ: un element la
   left:-9999px umfla scrollWidth-ul si produce derulare orizontala. */
.skip{position:absolute;left:0;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none;
  transform:translateY(-120%);transition:transform .15s}
.skip:focus{transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.93rem;font-weight:500;
  padding:13px 24px;border-radius:999px;border:1.5px solid var(--accent);
  cursor:pointer;transition:background .18s,border-color .18s,transform .18s;
}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--accent-dk);border-color:var(--line)}
.btn-ghost:hover{background:var(--lilac);color:var(--ink);border-color:var(--deco)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:74px}
.brand{font-family:var(--serif);font-size:1.06rem;text-decoration:none;line-height:1.25;color:var(--ink);flex:none;
  display:flex;align-items:center;gap:12px}
.brand small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
/* Logo-ul, desenat de clientă: două profiluri față în față, cu un arbore-Ψ
   între ele, într-un cerc. E o marcă cu multe detalii, deci are nevoie de mai
   mult spațiu decât un semn simplu — 44px în antet, nu 34. Sub atât, profilurile
   și frunzele se amestecă. */
.brand-mark{width:58px;height:58px;flex:none;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.brand:hover .brand-mark{transform:scale(1.04)}
@media(max-width:520px){.brand-mark{width:46px;height:46px}.brand{gap:10px;font-size:1rem}}
@media(max-width:400px){.brand{gap:8px;font-size:.94rem;flex:0 1 auto;min-width:0}.brand small{font-size:.58rem;letter-spacing:.06em}.brand-mark{width:42px;height:42px}}
.nav{display:flex;gap:20px;align-items:center}
.nav a{text-decoration:none;font-size:.92rem;color:var(--ink-2);padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink);border-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.head-cta{flex:none;padding-inline:20px}   /* antetul trebuie sa incapa in cei 1080px ai paginii: cu butonul de cautare adaugat, depasea cu 51px spre dreapta */
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--ink)}
.nav-toggle svg{display:block}

/* ---------- hero ---------- */
.hero{padding:76px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.hero h1 em{font-style:normal;color:var(--accent-dk)}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:48ch;margin-top:22px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;list-style:none}
.creds li{font-size:.82rem;background:var(--lilac);border:1px solid var(--line-strong);color:var(--ink-2);padding:6px 13px;border-radius:999px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{margin-top:26px;font-size:.87rem;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.hero-fig{position:relative;margin:0}
.hero-fig::before{content:"";position:absolute;inset:14% -4% -3% 2%;background:linear-gradient(165deg,var(--surface-2),var(--lilac-2));border-radius:180px 180px 26px 26px}
/* Fotografia are fundal transparent, deci NU primește mască rotunjită: arcul
   e doar pe panoul din spate. O mască pe imagine tăia colțul din stânga-sus,
   adică partea de sus a monitorului. */
.hero-fig img{position:relative}

/* page header (subpagini) */
.page-head{padding:40px 0 34px;border-bottom:1px solid var(--line)}
/* 26ch, nu 20ch: la 20ch titlul de pe Despre mine ocupa trei randuri si mai lua
   54px, suficient cat portretul de sub el sa iasa taiat pe un ecran de 768px.
   Masurat: la 26ch si la 32ch rezultatul e identic, doua randuri. */
/* text-wrap:balance imparte titlul in randuri egale: la „Ce e bine sa stii inainte
   de prima sedinta" ultimul rand era un singur cuvant, „sedinta". */
.page-head h1{font-size:clamp(2rem,4vw,2.9rem);max-width:26ch;text-wrap:balance}
/* 82ch, nu 58ch: la 58ch paragraful de pe Servicii ocupa patru randuri, iar antetul
   paginii 388px — caseta laterala de sub el incepea abia la y=529 si iesea taiata
   pe un ecran de 768px. Masurat: la 82ch antetul are 346px. */
.page-head p{margin-top:14px;color:var(--ink-2);font-size:1.08rem;max-width:82ch;text-wrap:balance}

/* ---------- bands & sections ---------- */
.band{background:var(--surface);border-block:1px solid var(--line)}
.band blockquote{margin:0;padding:64px 0;max-width:62ch;font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.72rem);line-height:1.5}
.band cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

section{padding:84px 0}
.sec-head{max-width:62ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.75rem,3.2vw,2.35rem)}
.sec-head p{color:var(--ink-2);margin-top:16px}

/* =========================================================
   Ritmul paginilor interioare

   `.page-head ~ section` prinde exact secțiunile de pe paginile interioare:
   prima pagină nu are `.page-head`, are `.hero`. Deci prima pagină rămâne
   neatinsă — a fost validată și nu se mai modifică.

   Motivul reducerii: cu 84px sus și jos, două secțiuni vecine puneau 168px de
   gol între blocuri de text. Pe un ecran de 900px vedeai jumătate de secțiune
   și te opreai mereu la mijlocul unui paragraf. Valorile de mai jos sunt
   măsurate în browser, pe fiecare pagină, nu estimate.
   ========================================================= */
:is(.page-head ~ section, .svc-content section){padding-block:52px}
:is(.page-head ~ section, .svc-content section) .sec-head{margin-bottom:30px}

/* Primul articol dintr-o secțiune nu are linie de separare: ar veni la 45px
   sub chenarul de jos al lui .page-head si ar arata ca o linie dubla. */
:is(.page-head ~ section, .svc-content section) .wrap > .service:first-child,
:is(.page-head ~ section, .svc-content section) .wrap > .program:first-child{border-top:0;padding-top:0}

@media(max-width:860px){
  :is(.page-head ~ section, .svc-content section){padding-block:38px}
  :is(.page-head ~ section, .svc-content section) .sec-head{margin-bottom:24px}
}

/* ---------- carduri servicii ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;list-style:none}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--deco);box-shadow:var(--shadow);transform:translateY(-2px)}
.card h3{font-size:1.25rem;margin-bottom:10px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.card p{color:var(--ink-2);font-size:.96rem}
.tag{display:inline-block;margin-top:18px;font-size:.8rem;color:var(--deco-dk);background:var(--lilac-2);padding:5px 12px;border-radius:999px;font-weight:500}

/* serviciu detaliat */
.service{border-top:1px solid var(--line);padding:34px 0;display:grid;grid-template-columns:1fr 240px;gap:44px;align-items:start}
.service h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-bottom:14px}
.service p+p{margin-top:14px}
.service p{color:var(--ink-2)}
.service .meta{background:var(--lilac);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;font-size:.9rem}
.service .meta dt{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.service .meta dt:first-child{margin-top:0}
.service .meta dd{margin:3px 0 0;color:var(--ink)}
.bullets{list-style:none;margin-top:16px;margin-bottom:0}
/* Paragraful care urmeaza dupa o lista are nevoie de aer: fara asta se
   lipeste de ultimul punct si pare ca face parte din el. */
.bullets + p{margin-top:18px}
.bullets li{position:relative;padding-left:22px;color:var(--ink-2);margin-top:7px}
.bullets li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--deco)}

/* Blocul de servicii pentru studenti si psihologi: acelasi layout ca serviciile
   obisnuite, dar pe fundal diferit, ca sa se vada ca e alt public. */
.alt-band{background:var(--lilac);border-block:1px solid var(--line)}
.service h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.015em;margin-bottom:14px}
.alt-band .service{border-top-color:var(--line)}
.alt-band .meta{background:var(--white)}

/* Link catre site-ul oficial al unui program */
.card-link{margin-top:16px!important;font-size:.88rem}
.card-link a{color:var(--accent-dk);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.card-link a:hover{border-color:var(--accent)}

/* Placeholder pentru date neconfirmate. Galben tipator, intentionat:
   nu trebuie sa ajunga in productie fara sa observe cineva. */
.todo{background:#FFF6D6;color:#5B4A00;border-bottom:1px dashed #C8A83A;padding:0 4px;font-size:.92em}

/* Caseta cu detalii (durata, mod de lucru, tarif) e compacta. NU e sticky: la cererea clientei
   se deruleaza odata cu restul paginii (fusese sticky pana la 2026-09-30). */
:is(.page-head ~ section, .svc-content section) .service .meta{padding:16px 20px}
:is(.page-head ~ section, .svc-content section) .service .meta dt{margin-top:11px}
:is(.page-head ~ section, .svc-content section) .service .meta dt:first-child{margin-top:0}

/* `.wrap-narrow.prose` era centrat (760px, margin auto): pe Despre mine, blocul
   „Cum lucrez” incepea la x=626, iar restul paginii la x=420. Acum se aliniaza la
   aceeasi margine ca titlurile si imaginile; latimea de citire ramane 66ch pe
   fiecare element, nu pe container. */
.page-head ~ section > .wrap-narrow.prose{max-width:var(--wrap);width:100%}
.page-head ~ section > .wrap-narrow.prose > *{max-width:66ch}

/* Lista de intrebari incepea la x=600, centrata intr-un container de 760px, in
   timp ce titlul de deasupra era la x=420. Acum are aceeasi margine stanga.
   Scoped pe paginile interioare: .faq exista si pe prima pagina, neatinsa. */
.page-head ~ .faq > .wrap-narrow{max-width:var(--wrap);width:100%}
.page-head ~ .faq > .wrap-narrow > details{max-width:780px}

/* Doua coloane: titlul in stanga, textul in dreapta. Un bloc de text ingust,
   lipit de stanga, lasa jumatate din pagina goala pe un ecran lat. Titlul ramane
   fixat cat se citeste textul. Doar pe ecran lat; pe telefon se aseaza unul sub altul. */
.split{display:block}
.split-head{margin-bottom:22px}
.split-head h2{margin-top:0;font-size:clamp(1.7rem,3vw,2.35rem);max-width:16ch;text-wrap:balance}
@media(min-width:900px){
  .split{display:grid;grid-template-columns:minmax(230px,340px) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  .split-head{position:sticky;top:104px;margin-bottom:0}
}

/* Trei coloane pentru blocurile scurte de credentiale, in loc de trei blocuri
   unul sub altul intr-o coloana ingusta. */
.cols-3{display:grid;grid-template-columns:1fr;gap:36px}
.cols-3 .prose{border-top:1px solid var(--line);padding-top:22px}
.cols-3 .prose h2{margin-top:0;font-size:1.3rem}
@media(min-width:1000px){.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px)}}

/* Serviciu fara linia de separare de sus: folosit cand articolul e singur in
   sectiunea lui, sub un sec-head — linia ar dubla inutil separarea. */
.service-plain{border-top:0;padding-top:0}

/* ---------- despre ---------- */
.about{background:var(--surface);border-block:1px solid var(--line)}
/* `start`, nu `center`: daca o coloana e mult mai inalta decat cealalta,
   centrarea lasa fotografia plutind cu spatiu gol deasupra si dedesubt. */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
/* Varianta cu text la stanga si fotografie la dreapta */
.about-grid--flip{grid-template-columns:1.15fr .85fr;align-items:center}
.about-fig{border-radius:var(--radius);overflow:hidden;background:linear-gradient(170deg,var(--surface-2),var(--lilac-2));margin:0}
.about-fig figcaption{font-size:.85rem;color:var(--muted);padding:12px 16px;background:var(--surface)}
/* Portretul sursa e 2:3; langa doua paragrafe ar lasa un gol mare sub text.
   Il taiem la 4/5, centrat pe fata. */
.about .about-fig img{aspect-ratio:4/5;object-fit:cover;object-position:50% 26%}
.prose{max-width:66ch}
.prose p{color:var(--ink-2)}
.prose p+p{margin-top:17px}
.prose h2{font-size:clamp(1.5rem,2.8vw,1.95rem);margin-top:46px;margin-bottom:16px}
.prose h3{font-size:1.2rem;margin-top:32px;margin-bottom:10px}
.prose ul{list-style:none;margin-top:14px}
.prose ul li{position:relative;padding-left:22px;color:var(--ink-2);margin-top:7px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.prose ol{padding-left:22px;color:var(--ink-2);margin-top:14px}
.prose ol li{margin-top:8px}
.prose a{text-underline-offset:3px}

/* Fraza-cârlig de la începutul unui serviciu (ex. „Ai voie să nu mai duci totul singur.”) */
.service .lead{
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.35rem);
  color:var(--accent-dk);margin-bottom:18px;line-height:1.45;
}

/* Programele de pe pagina Despre: blocuri de text lung, separate prin linii. */
/* Pe ecran lat, doua coloane: patru programe de ~250 de cuvinte, puse unul sub altul,
   faceau o coloana de 2565px cu 40% din latime goala. Doua coloane o aduc la ~1930px
   si folosesc lățimea. Pe ecran ingust revin la o singura coloana. */
.programs{display:grid;gap:0;grid-template-columns:1fr 1fr;column-gap:64px}
.program{border-top:1px solid var(--line);padding:30px 0}
.program:nth-child(-n+2){border-top:0;padding-top:0}
@media(max-width:980px){
  .programs{grid-template-columns:1fr}
  .program{max-width:72ch}
  .program:nth-child(-n+2){border-top:1px solid var(--line);padding-top:30px}
  .program:first-child{border-top:0;padding-top:0}
}
.program h3{font-size:clamp(1.3rem,2.4vw,1.65rem);margin-bottom:16px}
.program p{color:var(--ink-2)}
.program p + p{margin-top:15px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq details summary{cursor:pointer;font-family:var(--serif);font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::after{content:"+";color:var(--deco-dk);font-family:var(--sans);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin-top:14px;max-width:68ch;font-size:.97rem}
.faq details p+p{margin-top:12px}

/* ---------- formular ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{margin-bottom:14px}
/* Doua campuri pe rand pe ecran lat: un formular cu cinci campuri unul sub altul
   avea 891px — mai mult decat un ecran de 903px. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.form-foot .hint{margin:0;flex:1 1 240px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
label{display:block;font-size:.85rem;font-weight:500;margin-bottom:7px;color:var(--ink-2)}
.req{color:var(--warn-dot)}
input,textarea,select{width:100%;font:inherit;font-size:.96rem;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--white);color:var(--ink)}
textarea{resize:vertical;min-height:96px}
::placeholder{color:var(--muted);opacity:1}
.hint{font-size:.82rem;color:var(--muted);margin-top:6px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);margin:4px 0 16px;font-weight:400}
.consent input{width:auto;margin-top:5px;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px}

.info-block{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
/* Datele in doua coloane: cinci randuri unul sub altul faceau caseta de 783px. */
.info-block dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.info-block dl > div{min-width:0}
.info-block dl > .wide{grid-column:1/-1}
.info-block dt{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.info-block dd{margin:4px 0 0;font-size:.98rem;overflow-wrap:anywhere}
@media(max-width:560px){.info-block dl{grid-template-columns:1fr}}
.info-block dd a{text-decoration:none;color:var(--ink)}
.info-block dd a:hover{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}

/* Harta cabinetului: imagine statică, generată din dale OpenStreetMap și
   servită de pe acest domeniu. Vezi scripts/build-map.mjs pentru motiv. */
.map{margin:20px 0 0}
.map > a img{aspect-ratio:16/6;object-fit:cover}
/* Doar linkul direct din figure e ramă de imagine; cele din legendă rămân text. */
.map > a{display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line)}
.map img{width:100%;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.map > a:hover img{transform:scale(1.04)}
.map figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.5}
.map figcaption a{color:var(--accent-dk);text-underline-offset:2px}

/* ---------- nota de urgență ---------- */
.urgent{background:var(--warn-bg);border:1px solid var(--warn-line);border-top:3px solid var(--deco);border-radius:var(--radius);padding:26px 28px;margin-top:56px}
.urgent h2,.urgent h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin-bottom:8px}
.urgent p{font-size:.93rem;color:var(--ink-2)}
.urgent p+p{margin-top:10px}
.helplines{list-style:none;margin-top:16px;display:grid;gap:10px}
/* Coloana numerelor are latime fixa, nu `auto`: fiecare <li> e o grila separata,
   asa ca `auto` ar dimensiona coloana dupa numarul din randul respectiv si
   descrierile ar porni de la pozitii diferite. Latimea acopera cel mai lung
   numar din lista ("0800 801 200"); cifrele tabulare o mentin stabila. */
.helplines li{display:grid;grid-template-columns:7.4em 1fr;gap:4px 14px;align-items:baseline;font-size:.92rem;padding-top:10px;border-top:1px solid var(--warn-line)}
.helplines b{font-family:var(--sans);white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.helplines b a{color:var(--ink);text-decoration:none}
.helplines b a:hover{text-decoration:underline;text-underline-offset:3px}
.helplines span{color:var(--ink-2)}
.helplines em{font-style:normal;display:block;font-size:.84rem;color:var(--muted)}

/* ---------- CTA final ---------- */
.cta{background:var(--surface);border-top:1px solid var(--line);text-align:center}
.cta h2{font-size:clamp(1.7rem,3vw,2.2rem);max-width:20ch;margin-inline:auto}
.cta p{color:var(--ink-2);max-width:52ch;margin:18px auto 0}
.cta .hero-cta{justify-content:center;margin-top:28px}

/* Band de final cu portret. Sursa e 838x1877 (raport 1:2,24) — prea inalta ca sa
   stea necontransa intr-o sectiune, deci o taiem la 3/4 si o centram pe fata. */
.cta-split{background:var(--surface);border-top:1px solid var(--line)}
.cta-split .wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:56px;align-items:center}
/* Fără fotografie (2026-10-16, la cererea clientei): textul centrat, pe o singură coloană. */
.cta-split .wrap:not(:has(>figure)){grid-template-columns:minmax(0,1fr);text-align:center}
.cta-split .wrap:not(:has(>figure)) :is(h2,p){margin-inline:auto}
.cta-split .wrap:not(:has(>figure)) .hero-cta{justify-content:center}
.cta-split figure{margin:0;border-radius:var(--radius);overflow:hidden;background:linear-gradient(170deg,var(--surface-2),var(--lilac-2))}
.cta-split figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%}
.cta-split h2{font-size:clamp(1.7rem,3vw,2.2rem);max-width:18ch}
.cta-split p{color:var(--ink-2);max-width:46ch;margin-top:18px}
.cta-split .hero-cta{margin-top:28px}
@media(max-width:860px){
  .cta-split .wrap{grid-template-columns:1fr;gap:30px}
  .cta-split figure{max-width:340px}
}

/* ---------- footer ---------- */
.site-foot{background:var(--lilac);border-top:1px solid var(--line);padding:56px 0 40px;font-size:.88rem;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.site-foot a{color:var(--ink-2);text-decoration:none;display:block;padding:4px 0}
.site-foot a:hover{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
.site-foot ul{list-style:none}
.foot-h{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.foot-brand{font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.foot-brand img{width:46px;height:46px;flex:none}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Stare goala, folosita de Biblioteca pana apar materialele. */
.empty-state{
  background:var(--lilac);border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 40px;text-align:center;
}
.empty-state h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin-bottom:16px}
.empty-state p{color:var(--ink-2);max-width:52ch;margin-inline:auto}
.empty-state p + p{margin-top:14px}
.empty-state .hero-cta{justify-content:center;margin-top:26px}
@media(max-width:520px){.empty-state{padding:32px 22px}}

/* ---------- pagini utilitare ---------- */
.centered{min-height:52vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.centered h1{font-size:clamp(2rem,4vw,2.8rem)}
.centered p{color:var(--ink-2);max-width:48ch;margin:20px auto 0}
.centered .hero-cta{justify-content:center}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .nav{
    position:fixed;inset:74px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:1rem}
  .nav a:last-child{border-bottom:0}
  .nav-toggle{display:block;order:3}
  .head-cta{display:none}
  .head-in{min-height:66px}
}
@media(max-width:860px){
  .hero{padding-top:44px}
  .hero-grid,.about-grid,.page-head ~ section.about .about-grid,.about-grid--flip,.contact-grid,.cards,.service{grid-template-columns:1fr}
  .about-grid--flip .about-fig{max-width:460px}
  .hero-grid{gap:38px}
  .about-grid{gap:34px}
  .service{gap:24px;padding:34px 0}
  .hero-fig{max-width:460px}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:58px 0}
  .page-head{padding:44px 0 34px}
  .band blockquote{padding:46px 0}
  .urgent{padding:22px 20px}
  .helplines li{grid-template-columns:1fr}
}
@media(max-width:520px){
  body{font-size:16.5px}
  .foot-grid{grid-template-columns:1fr}
  /* Fara depasire spre dreapta pe ecrane mici: inset-ul negativ impingea
     forma decorativa peste marginea paginii si producea derulare orizontala. */
  .hero-fig::before{inset:12% 0 -3% 0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .site-head,.nav-toggle,.cta,.hero-cta{display:none}
  body{background:#fff;font-size:11pt}
}

/* CTA vizibil doar în meniul mobil (în header e deja butonul .head-cta) */
.nav-cta{display:none}
@media(max-width:1150px){
  .nav a.nav-cta{
    display:inline-flex;align-self:flex-start;
    margin:16px 0 4px;padding:13px 24px;
    color:#fff;background:var(--accent);
    border:1.5px solid var(--accent);border-radius:999px;
    font-size:.95rem;
  }
  .nav a.nav-cta:hover{color:#fff;background:var(--accent-dk);border-color:var(--accent-dk)}
}

/* =========================================================
   Anti force-dark (Samsung Internet)

   Samsung Internet ignoră atât `color-scheme: light`, cât și `only light`:
   randează pagina în varianta light și o inversează cu algoritmul propriu.
   Singurul lucru care îl oprește e ca site-ul să declare că se ocupă singur
   de dark mode. Declarăm blocul, cu exact aceleași culori ca în light —
   pagina rămâne deschisă la culoare, iar browserul nu mai transformă nimic.

   Dacă vreodată se dorește un dark mode adevărat, aici e locul lui: se
   înlocuiesc valorile de mai jos și nimic altceva nu trebuie atins.
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#FFFFFF;
    --surface:#F2F8F5;
    --surface-2:#E4F1EB;
    --white:#FFFFFF;
    --ink:#1E3B36;
    --ink-2:#3A5550;
    --muted:#506762;
    --accent:#347968;
    --accent-dk:#26594D;
    --accent-soft:#DCEEE6;
    --warn-bg:#FFFFFF;
    --warn-line:#D0C7D1;
    --warn-dot:#6F4C76;
    --line:#E3DDE6;
    --line-2:#EFEBF1;
    --shadow:0 14px 34px -22px rgba(30,59,54,.4);
  }
  html,body{background:var(--bg);color:var(--ink)}
  .site-head{background:rgba(255,255,255,.92)}
  .card,.info-block,input,textarea,select{background:var(--white);color:var(--ink)}
  .btn{background:var(--accent);color:#fff}
  .btn-ghost{background:transparent;color:var(--accent-dk)}
  img{filter:none}
}

/* =========================================================
   Mișcare

   Tot ce se animă aici e discret și scurt. Pe un site de
   cabinet, mișcarea trebuie să însoțească cititul, nu să-l
   întrerupă.

   Regula de siguranță: starea ascunsă se aplică DOAR dacă
   JS-ul a marcat documentul cu `.js-reveal`. Dacă scriptul nu
   se încarcă, conținutul rămâne vizibil, nu dispare.
   ========================================================= */

.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}
/* Întârziere în cascadă pentru elementele dintr-un grup (carduri, servicii) */
.js-reveal [data-reveal][data-delay="1"]{transition-delay:.08s}
.js-reveal [data-reveal][data-delay="2"]{transition-delay:.16s}
.js-reveal [data-reveal][data-delay="3"]{transition-delay:.24s}

/* Antetul capătă umbră abia după ce pagina a fost derulată */
.site-head{transition:box-shadow .25s, background-color .25s}
.site-head.is-scrolled{box-shadow:0 6px 24px -18px rgba(30,59,54,.5)}

/* Fotografiile din carduri și din benzi se apropie ușor la hover */
.card figure,.cta-split figure,.about-fig,.contact-portrait{overflow:hidden}
.card img,.cta-split figure img,.about-fig img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card:hover img,.cta-split figure:hover img,.about-fig:hover img{transform:scale(1.03)}

/* Banda cu citate, pe toata latimea. Fara fotografie: imaginea de rasarit e
   3:4, prea inalta ca sa stea echilibrat langa un citat scurt; a fost mutata pe
   pagina Biblioteca, unde o coloana inalta e fireasca. */
.quote-band{background:var(--lilac);border-block:1px solid var(--line);padding:0}
/* padding:0 anuleaza padding-ul general de <section>; spatiul il da .wrap, o
   singura data. Altfel se aduna si banda ajunge la 660px inaltime. */
.quote-band .wrap{
  /* Valori masurate in browser, nu estimate. Banda a trecut prin 400px (padding
     96) si 284px (padding 44); ambele erau inca prea inalte. Cu 24px iese 201px. */
  padding-block:clamp(20px,2vw,26px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* Citatele stau toate in aceeasi celula de grila, suprapuse. Astfel containerul
   ia inaltimea celui mai lung dintre ele, de la sine. Varianta cu position
   absolute cerea o min-height ghicita, iar cand un citat depasea valoarea aceea
   punctele de navigare urcau peste text. */
/* Latimea e 76ch: mai lata decat titlurile de sectiune (62ch), mai ingusta
   decat .wrap. Motivul e inaltimea, nu lungimea randului — la 62ch cel mai lung
   citat ocupa 3 randuri si banda nu putea coboara sub ~244px. La 76ch intra in
   2 randuri, iar banda ajunge la 201px. Valoare gasita masurand in browser,
   comparand 62ch/76ch/86ch la mai multe valori de padding.

   align-items:center — banda pastreaza inaltimea celui mai lung citat, ca sa nu
   sara continutul la fiecare schimbare, iar citatele mai scurte se centreaza in
   spatiul ramas, cu aer egal sus si jos. */
.quote-rotator{display:grid;align-items:center;max-width:76ch}
.quote-rotator figure{
  grid-area:1/1;margin:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.quote-rotator figure:not(.is-on){pointer-events:none}
.quote-rotator figure.is-on{opacity:1;transform:none}
.quote-rotator blockquote{
  margin:0;font-family:var(--serif);color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.45;letter-spacing:-.012em;
}
.quote-rotator figcaption{
  margin-top:14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.quote-dots{display:flex;gap:9px;margin-top:20px;justify-content:center}
.quote-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--deco-dk);background:transparent;
  transition:background .25s, transform .25s;
}
.quote-dots button[aria-selected="true"]{background:var(--deco-dk);transform:scale(1.25)}
.quote-dots button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

/* Nota „in curand” de pe Biblioteca. Era o caseta de 318px care repeta ce spune
   deja antetul paginii; pe un ecran de 903px iesea taiata la jumatate. */
/* Nota si butonul pe acelasi rand: pe un ecran de 768px, doua randuri separate
   impingeau butonul sub marginea de jos. */
.soon-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.soon-row .soon{margin:0}
.soon{display:flex;align-items:baseline;gap:12px;margin-top:26px;color:var(--ink-2);font-size:.98rem}
.soon-label{
  flex:none;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--accent-dk);background:var(--accent-soft);padding:5px 10px;border-radius:999px;
}

/* Portretul de pe Despre mine nu depaseste ce a ramas din ecran sub antetul
   paginii. 560px = antetul lipicios + antetul paginii (358px, titlul are doua
   randuri) + padding-ul sectiunii. Scoped pe paginile interioare: .about exista
   si pe prima pagina, care nu se modifica. `width:auto` + aspect-ratio 4/5 pastreaza
   aceeasi incadrare a fetei, doar mai mica — nu taie mai mult din fotografie. */
/* Coloana imaginii se strange in jurul ei (max-content), nu ramane la .85fr: cu
   portretul limitat in inaltime, .85fr lasa un gol de ~220px intre poza si text. */
/* Doar pe ecran lat: o regula cu aceeasi specificitate ca cea de pe telefon, dar
   scrisa mai jos in fisier, o suprascria si strangea textul intr-o fasie de 90px. */
@media(min-width:861px){
  .page-head ~ section.about .about-grid{grid-template-columns:max-content minmax(0,1fr)}
  .page-head ~ section.about .about-fig{justify-self:start;width:fit-content}
}
@media(min-width:861px){
  .page-head ~ section.about .about-fig img{
    width:auto;max-width:100%;
    max-height:max(280px,calc(100vh - 560px));
  }
}

/* Biblioteca: fotografia de rasarit, intreaga, pe toata inaltimea coloanei. */
/* `stretch`, ca cele doua coloane sa inceapa si sa se termine la aceeasi
   inaltime. Fotografia isi pastreaza raportul si se centreaza pe verticala in
   coloana ei — fara decupaj, doar aer egal sus si jos. */
.biblio-grid{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:stretch}
/* Aliniata sus, nu centrata: cand fotografia e mai scurta decat coloana de
   text, centrarea o impingea in jos si o taia marginea ecranului. Sus, incepe
   odata cu textul si se termina inainte de pliu. */
.biblio-fig{margin:0;display:flex;align-items:flex-start;justify-content:flex-start}
/* Fotografia nu depaseste ce a mai ramas din ecran sub antetul paginii, ca sa nu
   fie taiata de marginea de jos. 440px = antetul paginii + cele doua padding-uri
   ale sectiunii. `width:auto` pastreaza raportul 3:4 cand inaltimea o limiteaza. */
.biblio-fig img{width:100%;max-width:100%;height:auto;display:block;border-radius:var(--radius)}
@media(min-width:861px){
  .biblio-fig img{
    width:auto;
    /* 500px = antetul lipicios (75) + antetul paginii (327) + padding-urile
       secțiunii + puțin aer. Masurat, nu estimat. */
    max-height:max(240px,calc(100vh - 500px));
  }
}
.biblio-grid .empty-state{margin-top:34px;text-align:left}
.biblio-grid .empty-state p{margin-inline:0}
.biblio-grid .empty-state .hero-cta{justify-content:flex-start}

@media(max-width:860px){
  .biblio-grid{grid-template-columns:1fr;gap:30px}
  .biblio-fig{max-width:380px}
}

/* Buton „înapoi sus”, apare după ce ai derulat o pagină */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line);background:var(--white);color:var(--accent-dk);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
  box-shadow:0 10px 26px -16px rgba(30,59,54,.55);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--surface-2)}
@media(max-width:600px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}

/* Linie subțire aurie, folosită ca semn discret sub titlurile de secțiune */
.rule-deco{width:54px;height:2px;background:var(--deco);border:0;margin:18px 0 0}

@media(prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .quote-rotator figure{transition:none}
  .card img,.cta-split figure img,.about-fig img{transition:none}
  .card:hover img,.cta-split figure:hover img,.about-fig:hover img{transform:none}
  .to-top{transition:none}
}

/* =========================================================
   Primul ecran (hero) — varianta B2, aleasa de client (2026-09-30)
   Portret in cerc, inel de text care se roteste incet, sigla ca stampila.
   Amprenta ramane 746px; banda de citate incepe la y=839.
   ========================================================= */
.hv{min-height:746px;display:flex;align-items:center;position:relative;overflow:hidden}
.hv > .wrap{width:100%;position:relative;z-index:1}
.hv-grid{display:grid;align-items:center;gap:48px}
.hv-copy{position:relative}

.hv h1{font-size:clamp(2.2rem,3.5vw,3.05rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.hv h1 em{font-style:normal;color:var(--accent-dk)}
.hv .lede{font-size:1.06rem;max-width:46ch;margin-top:20px}
.hv .creds{margin-top:22px}
.hv .hero-cta{margin-top:26px}
.hv .hero-meta{margin-top:20px}

/* --- animatii de intrare ---------------------------------------------- */
.w{display:inline-block;opacity:0;transform:translateY(.6em);
   animation:hvRise .9s cubic-bezier(.2,.7,.2,1) forwards;
   animation-delay:calc(var(--i,0) * 65ms + 140ms)}
.hv-fade{opacity:0;transform:translateY(14px);animation:hvRise .9s ease forwards;animation-delay:var(--d,700ms)}
@keyframes hvRise{to{opacity:1;transform:none}}
@keyframes hvPop{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes hvIn{from{opacity:0;translate:0 46px}to{opacity:1;translate:0 0}}
@keyframes hvOpa{to{opacity:1}}
@keyframes hvFloat{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes hvSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .w,.hv-fade{animation:none;opacity:1;transform:none}
  .hv *{animation:none!important}
}

/* =========================================================
   Portretul in cerc — varianta J3 (aleasa 2026-09-30)
   Cercul cu inel auriu care se deseneaza, credentialul deasupra,
   „18 ani de experienta” dedesubt. Toate dimensiunile sunt in cqw
   (procent din latimea scenei): geometria si textul scaleaza impreuna.
   ========================================================= */
@keyframes hvDrawIn{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes hvCheck{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes hvCard{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

.hv-grid{grid-template-columns:1.08fr .92fr}
.hv-stage{position:relative;width:min(100%,500px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.orb{position:absolute;left:10%;top:8.5%;width:80%;aspect-ratio:1}
.hv-disc{
  position:absolute;inset:6%;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--lilac-2));
  box-shadow:0 40px 70px -40px rgba(30,59,54,.6);
  animation:hvPop 1s cubic-bezier(.2,.8,.2,1) .3s backwards;
}
/* Fotografia are fundal transparent, deci se poate micsora in cerc fara benzi goale.
   Ancorata jos, centrata pe persoana (~58% din latimea imaginii). */
.hv-disc img{
  position:absolute;left:50%;bottom:0;height:auto;max-width:none;
  width:128%;transform:translateX(-58%);
}
.orb .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orb .ring circle{fill:none;stroke:var(--brand);stroke-width:1.1;stroke-linecap:round;
  --len:610;stroke-dasharray:610;transform:rotate(-90deg);transform-origin:100px 100px;
  animation:hvDrawIn 2.4s cubic-bezier(.5,.1,.2,1) 1.2s backwards}

.hv-stage .top,.hv-stage .bot{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center}
.hv-stage .top{top:0;gap:2.2cqw;animation:hvCard .9s cubic-bezier(.2,.8,.2,1) 1.5s backwards}
.hv-stage .bot{bottom:0;gap:3cqw;animation:hvCard .9s cubic-bezier(.2,.8,.2,1) 2s backwards}
.hv-stage .ok{flex:none;width:6.6cqw;height:6.6cqw;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.hv-stage .ok svg{width:56%;height:56%}
.hv-stage .ok path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;animation:hvCheck .7s ease 2.2s backwards}
.hv-stage .tx{font-family:var(--serif);font-weight:500;font-size:max(13px,3.7cqw);color:var(--ink)}
/* „18” si „ani de experienta” pe aceeasi linie de baza (ultimul rand al etichetei) */
.hv-stage .lock{display:flex;align-items:last baseline;gap:2.4cqw}
.hv-stage .lock b{font-family:var(--serif);font-weight:500;font-size:max(28px,9.6cqw);line-height:.86;
  color:var(--accent-dk);font-variant-numeric:tabular-nums;min-width:1.15em;text-align:right}
.hv-stage .lock span{font-family:var(--serif);font-size:max(13px,3.8cqw);line-height:1.1;color:var(--ink)}

@media(max-width:860px){
  .hv{min-height:0}
  .hv-grid{grid-template-columns:1fr!important;gap:30px}
  .hv-stage{max-width:400px;width:100%;order:-1}
}

/* =========================================================
   Pagina Servicii — meniu in stanga, cu sectiunile (2026-09-30)
   Ramane in ecran la derulare (sticky); linkul sectiunii curente e marcat
   din main.js (aria-current). Sub 1000px devine o banda de butoane, lipita
   sub antet.
   ========================================================= */
.svc-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px;align-items:start}
.svc-nav{position:sticky;top:96px;padding-top:52px}
.svc-nav p{margin:0 0 10px;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.svc-nav p:not(:first-child){margin-top:28px}
.svc-nav ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.svc-nav a{display:block;padding:8px 14px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--ink-2);text-decoration:none;font-size:.92rem;line-height:1.35;transition:color .18s,border-color .18s}
.svc-nav a:hover{color:var(--accent-dk)}
.svc-nav a[aria-current="true"]{border-left-color:var(--accent);color:var(--accent-dk);font-weight:600}
.svc-content{min-width:0}
.svc-content .wrap{max-width:none;padding-inline:0}
.svc-content [id]{scroll-margin-top:96px}
/* Banda „Practica de specialitate” nu mai poate curge pe toata latimea paginii: ramane in coloana */
.svc-content .alt-band{border:1px solid var(--line);border-radius:var(--radius);padding-inline:32px}
@media(max-width:1000px){
  .svc-layout{grid-template-columns:1fr;gap:0}
  .svc-nav{position:sticky;top:74px;z-index:40;margin:0 -20px;padding:10px 20px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .svc-nav p{display:none}
  .svc-nav ul{display:contents}
  .svc-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .svc-nav::-webkit-scrollbar{display:none}
  .svc-nav a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;margin:0;font-size:.86rem;background:var(--white)}
  .svc-nav a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .svc-content [id]{scroll-margin-top:140px}
  .svc-content .alt-band{padding-inline:20px}
}

/* ---------- Instrumente de evaluare (Servicii) ---------- */
.tools-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tools{list-style:none;display:contents}
.tools li{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--sage);
  border-radius:var(--radius-sm);padding:20px 22px 22px}
.tools h3{font-size:1.06rem;line-height:1.3;margin-bottom:8px}
.tools p{color:var(--ink-2);font-size:.93rem;line-height:1.65}
/* Caseta CogniKit: sugerează un sistem separat, cu fundal din paleta clientei (salvie → lila) */
.note-card{border:1px solid var(--line-strong);border-radius:var(--radius);padding:26px 28px;
  background:linear-gradient(160deg,var(--surface-2),var(--deco-soft))}
.note-card h3{font-size:1.25rem;margin-bottom:10px}
.tools li:last-child{grid-column:1/-1}
.note-card{grid-column:1/-1;margin-top:6px}
.note-card p{color:var(--ink-2);font-size:.96rem;line-height:1.7;max-width:74ch}
@media(max-width:700px){.tools-wrap{grid-template-columns:1fr}.note-card{padding:22px 20px}}

/* ---------- Căutare în site ---------- */
.search-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:1.5px solid var(--line);border-radius:999px;color:var(--ink-2);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s}
.search-toggle:hover{color:var(--accent-dk);border-color:var(--accent);background:var(--surface)}
@media(max-width:1150px){.search-toggle{order:2;margin-left:auto}}
@media print{.search-toggle{display:none}}

.search-dlg{width:min(660px,calc(100vw - 32px));max-height:min(78vh,640px);margin:8vh auto auto;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);
  box-shadow:0 30px 80px -30px rgba(30,59,54,.5);overflow:hidden}
.search-dlg[open]{display:flex;flex-direction:column}
.search-dlg::backdrop{background:rgba(30,59,54,.38);backdrop-filter:blur(3px)}
.search-form{display:flex;align-items:center;gap:8px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line)}
.search-form input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1.05rem;color:var(--ink);padding:8px 0}
.search-form input::placeholder{color:var(--muted)}
.search-form input::-webkit-search-cancel-button{display:none}
.search-form:focus-within{box-shadow:inset 0 -2px 0 var(--accent)}
.search-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:none;border:0;border-radius:999px;color:var(--ink-2);cursor:pointer}
.search-close:hover{background:var(--surface);color:var(--ink)}
.search-status{margin:0;padding:12px 22px 4px;font-size:.85rem;color:var(--muted)}
.search-status:empty{display:none}
.search-results{list-style:none;margin:0;padding:6px 10px 12px;overflow-y:auto}
.search-results:empty{display:none}
.search-results a{display:grid;gap:3px;padding:12px 12px;border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.search-results a:hover,.search-results a:focus-visible{background:var(--surface);outline:0}
.search-results a:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.search-page{justify-self:start;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--deco-dk);background:var(--deco-soft);padding:2px 9px;border-radius:999px}
.search-title{font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.search-snip{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.search-dlg mark{background:var(--accent-soft);color:var(--ink);border-radius:3px;padding:0 1px}
.search-quick{padding:12px 22px 22px;overflow-y:auto}
.search-quick[hidden]{display:none}
.search-quick p{margin:0 0 10px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.search-quick ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.search-quick a{display:inline-block;padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;
  text-decoration:none;color:var(--accent-dk);font-size:.92rem;transition:background .18s,border-color .18s}
.search-quick a:hover{background:var(--surface);border-color:var(--accent)}
@media(max-width:520px){.search-dlg{margin-top:4vh;max-height:88vh}}

.faq details[id]{scroll-margin-top:96px}

/* ---------- Mov și lila din paleta clientei (2026-10-06) ----------
   Salvia (#98C3AD) e culoarea „calmă” a benzilor; lila (din #D0C7D1) o alternează.
   Mov-ul (#A682B0) apare în detalii mici. Textul mov folosește doar --deco-dk,
   singura treaptă care trece AA. */
::selection{background:var(--lilac-2);color:var(--ink)}
.tools li:nth-child(even){border-top-color:var(--deco)}
/* linie scurtă sub titlurile de secțiune; doar pe paginile interioare, ca prima pagină să-și păstreze înălțimea */
:is(.page-head ~ section, .svc-content section) .sec-head h2::after{
  content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--deco);margin-top:16px}

/* ---------- Butoane „Programează o ședință” în mov (cerut de clientă, 2026-10-06) ----------
   Antetul (toate paginile, inclusiv varianta din meniul mobil) și butoanele de pe prima pagină.
   Text alb pe #A682B0 = 3.3:1, sub AA (4.5) pentru text mic; clienta l-a cerut alb, deci rămâne asa. Dacă apar reclamații de lizibilitate: fundal #8A5E96 (5.1:1).
   La hover fundalul trece pe mov închis și textul pe alb (7:1). */
:is(.site-head .head-cta, .site-head .nav a.nav-cta, body:has(.hv) .hero-cta .btn:not(.btn-ghost)){
  background:var(--deco);border-color:var(--deco);color:var(--on-deco);font-weight:600}
:is(.site-head .head-cta, .site-head .nav a.nav-cta, body:has(.hv) .hero-cta .btn:not(.btn-ghost)):hover{
  background:var(--deco-dk);border-color:var(--deco-dk);color:#fff}
:is(.site-head .head-cta, .site-head .nav a.nav-cta, body:has(.hv) .hero-cta .btn:not(.btn-ghost)):focus-visible{outline-color:var(--deco-dk)}