/* Tema Fișa, stratul de șlefuire (20.10.2026, cererea lui Arthur: „Fișa, polish”). Se încarcă ULTIMUL, după fisa-port.css.
   Nu schimbă structura, paleta sau fonturile: adâncime pe fișe, apăsare și hover pe tot ce se apasă, text așezat mai
   frumos, iar pe prima pagină secțiunile intră în pagină pe măsură ce derulezi (fisa.js, `reveal`; fără JS nimic nu e
   ascuns). Tot ce mișcă e doar transform și opacity și se stinge la prefers-reduced-motion. */

/* ---------- Text: titlurile echilibrate, paragrafele fără un cuvânt singur pe ultimul rând ---------- */
h2, h3, .ms-t, .doc-h { text-wrap: balance; }
p, dd, .lead, .ms-n { text-wrap: pretty; }

/* ---------- Hero: un halou cald (tonul secțiunii „Despre noi”) în jurul teancului, ca fișele să stea „pe masă” ---------- */
/* Fără `isolation` și fără z-index pe zonă: așa ::before (z-index -1) se pictează SUB tot conținutul paginii (formularul
   de căutare, fișele), doar peste fundal. Cu zona izolată, haloul trecea peste marginea formularului la 1000–1200px. */
.stack-zone { position: relative; }
.stack-zone::before { content: ""; position: absolute; left: 50%; top: 44%; width: min(170%, 820px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 226, 220, .9), rgba(236, 226, 220, .5) 48%, rgba(236, 226, 220, 0) 100%);
  z-index: -1; pointer-events: none; }
@media (max-width: 900px) { .stack-zone::before { width: min(140%, 560px); top: 50%; } }

/* ---------- Fișele de stoc: se ridică la hover, poza capătă umbră, apăsarea se simte ---------- */
.ms { transition: transform .28s var(--ease), border-color .16s var(--ease), box-shadow .2s var(--ease); }   /* + cele de bază */
.ms .ms-ph { transition: box-shadow .28s var(--ease); }
.ms .ms-ph img { transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ms:hover { transform: translateY(-3px); }
  .ms:hover .ms-ph { box-shadow: var(--sh-1); }
  .ms:hover .ms-ph img { transform: scale(1.035); }
  /* fișa mare de pe prima pagină e o ofertă pe un rând: se ridică doar poza, nu tot rândul */
  .mgrid.feat > li:first-child .ms:hover { transform: none; }
  .mgrid.feat > li:first-child .ms:hover .ms-ph { transform: translateY(-3px); }
  .mgrid.feat > li:first-child .ms .ms-ph { transition: box-shadow .28s var(--ease), transform .28s var(--ease); }
}
.ms:active { transform: translateY(-1px) scale(.995); transition-duration: .12s; }
.mgrid.feat > li:first-child .ms:active { transform: none; }                                 /* fișa mare: doar poza */
.mgrid.feat > li:first-child .ms:active .ms-ph { transform: translateY(-1px) scale(.995); }

/* ---------- Butoane și controale: apăsarea e animată, nu sare; roșul capătă umbră la hover ---------- */
.btn { transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease), transform .14s var(--ease); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { box-shadow: 0 8px 18px -10px rgba(204, 32, 42, .6); }
  .btn-line:hover { border-color: var(--ink); }
}
.hs-chip { transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), transform .14s var(--ease); }
.hs-chip:active { transform: scale(.97); }
.hs-go { transition: background-color .16s var(--ease), box-shadow .2s var(--ease), transform .14s var(--ease); }
.hs-go:active { transform: scale(.97); }
.view-toggle button { transition: background-color .16s var(--ease), color .16s var(--ease); }
@media (hover: hover) and (pointer: fine) { .view-toggle button:hover { color: var(--ink); } }
.round { transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .12s var(--ease); }
.lh-cta:active, .lh-tel:active i { transform: scale(.96); }
.lh-cta { transition: background-color .16s var(--ease), color .16s var(--ease), transform .14s var(--ease); }
.lh-tel i { transition: background-color .16s var(--ease), transform .14s var(--ease); }

/* ---------- Secțiunile intră în pagină la derulare (doar cu JS: clasa .rv o pune fisa.js) ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--rv-i, 0) * 55ms); }
.rv.in { opacity: 1; transform: none; }
/* după intrare, nu rămâne niciun transform pe element (sticky, poziționări absolute și umbre lucrează ca înainte) */
.rv.in.done { transition: none; transform: none; }

/* ---------- Mișcare redusă: nimic nu se deplasează, doar culorile se schimbă ---------- */
@media (prefers-reduced-motion: reduce) {
  .ms, .ms .ms-ph, .ms .ms-ph img, .btn, .hs-chip, .hs-go, .round, .lh-cta, .lh-tel i { transition: none; }
  .ms:hover, .ms:active, .btn:active, .hs-chip:active, .hs-go:active, .lh-cta:active, .lh-tel:active i,
  .mgrid.feat > li:first-child .ms:hover .ms-ph, .mgrid.feat > li:first-child .ms:active .ms-ph { transform: none; }
  .ms:hover .ms-ph img { transform: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Momentele primei pagini (fisa.js, moments(); Arthur, 20.10.2026: „o animație mică pe fiecare secțiune”) ----------
   Același motiv ca traseul din „Cum funcționează”: linia roșie se trage, lucrurile se așază. Clasa .mo o pune doar
   scriptul, pe ce e încă sub ecran; .on pornește momentul, iar la final scriptul scoate ambele clase (nu rămâne niciun
   transform pe element: hover-ul diplomelor și pozele merg ca înainte). Fără JS sau cu mișcare redusă: nimic ascuns. */
.doc-h.mo { border-bottom-color: transparent; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat;
  background-origin: border-box; transition: background-size .9s var(--ease-io) .05s; }
.doc-h.mo.on { background-size: 100% 3px; }
/* clip-ul stă pe POZĂ, nu pe cutie: Chrome nu socotește vizibilă o cutie tăiată de propriul clip-path, deci observatorul
   n-ar fi pornit niciodată momentul (verificatorul vizual, 20.10). Cutia gri apare întâi, poza se trage peste ea. */
.ms-ph.mo img { clip-path: inset(0 100% 0 0); transform: scale(1.06);
  transition: clip-path .7s var(--ease) calc(var(--mo-i, 0) * 80ms), transform 1.1s var(--ease) calc(var(--mo-i, 0) * 80ms); }
.ms-ph.mo.on img { clip-path: inset(0); transform: none; }
/* doar logoul se mișcă: celula poartă liniile tabelului, care rămân pe loc */
.logos2 li.mo img { opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .45s var(--ease) calc(var(--mo-i, 0) * 50ms), transform .6s var(--ease) calc(var(--mo-i, 0) * 50ms); }
.logos2 li.mo.on img { opacity: 1; transform: none; }
.dip.mo { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease) calc(var(--mo-i, 0) * 70ms), transform .7s var(--ease) calc(var(--mo-i, 0) * 70ms); }
.dip.mo.on { opacity: 1; transform: none; }
.ct-card.mo { opacity: 0; transform: translateY(26px) rotate(1.6deg); transform-origin: 30% 100%;
  transition: opacity .5s var(--ease), transform 1s var(--ease); }
.ct-card.mo.on { opacity: 1; transform: none; }
/* fișa serviciilor: mașina se desenează (pathLength="1" pe fiecare linie), apoi apar trimiterile pe rând; totul se
   termină în 1,4 s, înainte ca moments() să scoată clasele (1,6 s) */
.bp.mo :is(.bp-paper, .bp-lines, .bp-w) { opacity: 0; transition: opacity .9s var(--ease); }   /* ilustrația 911: apare, nu se trasează */
.bp.mo.on :is(.bp-paper, .bp-lines, .bp-w) { opacity: 1; }
.bp.mo :is(.bp-b, .bp-d, .bp-g) { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  transition: stroke-dashoffset 1s var(--ease-io), fill-opacity .3s linear .8s; }
.bp.mo .bp-d { transition-delay: .25s; }
.bp.mo :is(.bp-co, .bp-z) { opacity: 0; transition: opacity .35s var(--ease); }
.bp.mo .bp-co[data-bp="1"] { transition-delay: .8s; } .bp.mo .bp-co[data-bp="2"] { transition-delay: .88s; }
.bp.mo .bp-co[data-bp="3"] { transition-delay: .96s; } .bp.mo .bp-co[data-bp="4"] { transition-delay: 1.04s; }
.bp.mo .bp-co[data-bp="5"] { transition-delay: 1.12s; } .bp.mo .bp-z { transition-delay: .7s; }
.bp.mo.on :is(.bp-b, .bp-d, .bp-g) { stroke-dashoffset: 0; fill-opacity: 1; }
.bp.mo.on :is(.bp-co, .bp-z) { opacity: 1; }
.mo-set .mo, .mo-set .mo img, .mo-set .bp.mo * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .doc-h.mo, .ms-ph.mo img, .logos2 li.mo img, .dip.mo, .ct-card.mo { transition: none; opacity: 1; clip-path: none; transform: none; background-size: 100% 2px; }
  .bp.mo :is(.bp-b, .bp-d, .bp-g, .bp-co, .bp-z) { transition: none; stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  .bp.mo :is(.bp-paper, .bp-lines, .bp-w) { transition: none; opacity: 1; }
}

/* ---------- „De ce Clar Auto” (29.10.2026): patru fapte pe o linie, cu regula roșie deasupra, în secțiunea #despre ---------- */
.dece-wrap { padding-bottom: clamp(48px, 6vw, 88px); }
.dece { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s6); margin-top: var(--s2); }
.dece div, .dece div:first-child { padding: var(--s5) 0 0; border-top: 2px solid var(--red); }
.dece dd { color: var(--label-desk); margin: 6px 0 0; }
@media (max-width: 1000px) { .dece { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 560px) { .dece { grid-template-columns: 1fr; row-gap: 22px; } }

/* ---------- Contact: echipa (29.10.2026). Inițialele în cerc, numele în fontul titlurilor (--font-t), telefonul și emailul cu iconiță ---------- */
.ct-team { margin-top: var(--s7); }
.ct-team h3 { color: var(--ink); }
.ct-team .tm-sub { margin: 6px 0 var(--s5); color: var(--label); }
.ct-team ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.ct-team li { display: flex; gap: var(--s4); align-items: flex-start; min-width: 0; padding: 18px 18px 16px; background: var(--paper);
  border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--sh-0); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) { .ct-team li:hover { border-color: var(--hair-2); box-shadow: var(--sh-1); } }
.tm-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: var(--paper);
  font: 600 15px/1 var(--font-t); letter-spacing: .04em; }
.tm-i { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 1px; }
.tm-i b { font-family: var(--font-t); font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; padding-bottom: 7px;
  margin-bottom: 3px; border-bottom: 1px solid var(--hair); }
.tm-l { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--ink-2); text-decoration: none; min-width: 0; }
.tm-l svg { flex: none; width: 16px; height: 16px; color: var(--label); transition: color .16s var(--ease); }
.tm-l span { overflow-wrap: anywhere; }
.tm-l:hover span, .tm-l:focus-visible span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }
.tm-l:hover svg, .tm-l:focus-visible svg { color: var(--red); }
/* două coloane când e loc (și pe coloana îngustă de 761–1100 px a contactului devine una singură de la sine) */
.ct-team ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
/* bara de jos de pe telefon: la 320 px „Cere ofertă” ieșea 4 px din ecran */
@media (max-width: 340px) { .mbar .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 13.5px; } }

/* ---------- „Despre noi” fără foaie (29.10.2026, Arthur: „nu ca o pagină de hârtie”, apoi „dubioasă rău”) ----------
   Benzi pe toată lățimea, cu conținutul aliniat la ramă (--max): sus titlul + introducerea + butoanele lângă desenul 911
   (fișa serviciilor de pe prima pagină), povestea pe hârtie, serviciile pe carduri numerotate, cifrele pe banda roșie,
   valorile pe patru coloane, îndemnul la final. Fără :has() (Firefox < 121 / Safari < 15.4): fiecare bandă are clasa ei. */
.about-page > *, .ap-top { padding-inline: max(var(--g), calc((100% - var(--max)) / 2)); }
.ap-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-block: clamp(36px, 5vw, 80px) clamp(48px, 6vw, 96px); }
.ap-top h1 { margin: 0 0 var(--s5); letter-spacing: -.03em; line-height: 1.02; }
.ap-top .page-intro .lead { color: var(--ink-2); max-width: 54ch; margin: 0; }
.ap-top .page-intro .lead + .lead { margin-top: var(--s4); }
.ap-top .page-intro .lead strong { display: block; color: var(--ink); max-width: 30ch; }
.ap-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }
/* Ferrari 812: se transformă din schiță în mașina reală CHIAR în timpul drumului (Arthur, 29.10.2026: „când apeși, intră și,
   pe măsură ce intră, devine mașină reală”). Două rânduri de straturi, suprapuse exact (img/812/): schița (car-paper,
   car-lines, wheel-*) și mașina reală (real-body, real-wheel-*, decupată din randarea Higgsfield aliniată la schiță).
   Mașina reală are o mască în degrade care trece de la bot spre spate, odată cu o linie de lumină (.ap-scan), în timp ce
   mașina intră. Roțile ambelor rânduri se rotesc împreună. Drumul: fisa.js, aboutCar. Static (fără JS, mișcare redusă,
   fără observator): mașina reală, pe loc. Cadrul păstrează raportul și procentele din desenul original 2752 × 1536. */
.ap-art { position: relative; margin: 0; aspect-ratio: 1928 / 1076; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #FFFFFF 0%, #F7F6F4 55%, #ECEAE7 100%);
  border: 1px solid var(--hair); border-radius: var(--r); box-shadow: 0 1px 2px rgba(60, 36, 28, .06), 0 12px 28px -18px rgba(60, 36, 28, .16); }
.ap-car { position: absolute; left: 4.724%; top: 32.552%; width: 90.843%; height: 50.26%; display: block; }
.ap-sk, .ap-re, .ap-body { position: absolute; inset: 0; }
.ap-body { transform-origin: 72% 100%; }
.ap-sk > img:not(.ap-w), .ap-re > img:not(.ap-w) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ap-w { position: absolute; height: auto; aspect-ratio: 1; will-change: transform; }
.ap-w-r { left: 12.48%; top: 44.43%; width: 16.88%; }
.ap-w-f { left: 71.36%; top: 46.89%; width: 16.16%; }
.ap-shadow { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 13%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 27, 25, .28), rgba(31, 27, 25, 0)); }
/* masca mașinii reale: imaginea de 300% are dreapta opacă și stânga transparentă, cu o bandă moale între ele; poziția 0%
   = ascunsă, 100% = vizibilă toată; banda trece peste mașină între 25% și 75% */
.ap-re { -webkit-mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 100% 0 / 300% 100% no-repeat; }
/* linia de lumină: un strat cât mașina, tăiat pe siluetă; banda din fundal are aceeași imagine de 300% și aceeași
   poziție ca masca mașinii reale, deci stă exact pe marginea transformării */
/* masca lui .ap-scan e car-paper.webp fără ?v= (url din CSS): o schiță nouă se pune sub alt nume de fișier */
.ap-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 55%) 0% 0 / 300% 100% no-repeat;
  -webkit-mask: url("img/812/car-paper.webp") 0 0 / 100% 100% no-repeat; mask: url("img/812/car-paper.webp") 0 0 / 100% 100% no-repeat; }
.ap-speed { position: absolute; inset: 0; pointer-events: none; }
.ap-speed i { position: absolute; left: 3%; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(31, 27, 25, 0), rgba(31, 27, 25, .32)); }
.ap-speed i:nth-child(1) { top: 44%; width: 30%; } .ap-speed i:nth-child(2) { top: 55%; width: 42%; }
.ap-speed i:nth-child(3) { top: 66%; width: 26%; } .ap-speed i:nth-child(4) { top: 75%; width: 36%; }
/* înainte de script (scripting: enabled): schița în stânga; plasa de 5 s doar fără .ap-arm (scriptul încă n-a pornit) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ap-art:not(.ap-static):not(.ap-go) .ap-car { transform: translateX(-62%); }
  .ap-art:not(.ap-static):not(.ap-go) .ap-re { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  .ap-art:not(.ap-static):not(.ap-go):not(.ap-arm) .ap-car { animation: apFbCar .01s linear 5s forwards; }
  .ap-art:not(.ap-static):not(.ap-go):not(.ap-arm) .ap-re { animation: apFbMask .01s linear 5s forwards; }
  .ap-art:not(.ap-static):not(.ap-go):not(.ap-arm) .ap-sk { animation: apFbHide .01s linear 5s forwards; }
}
@keyframes apFbCar { to { transform: none; } }
@keyframes apFbHide { to { opacity: 0; } }
@keyframes apFbMask { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.ap-art.ap-arm .ap-car { transform: translateX(-62%); }
.ap-art.ap-arm .ap-re { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
/* drumul: 2,3 s, aproape uniform la început; transformarea merge cât mașina încă rulează (0,25–1,85 s), înainte de frână */
.ap-art.ap-go .ap-car { transform: none; transition: transform 2.3s cubic-bezier(.3, .5, .25, 1); }
.ap-art.ap-go .ap-re { -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.6s cubic-bezier(.4, .15, .6, .9) .25s, mask-position 1.6s cubic-bezier(.4, .15, .6, .9) .25s; }
.ap-art.ap-go .ap-scan { animation: apScan 1.6s cubic-bezier(.4, .15, .6, .9) .25s both; }
/* schița de dedesubt dispare exact când masca e plină: altfel conturul ei gri ieșea ca un halou în jurul mașinii reale (-77) */
.ap-art.ap-go .ap-sk { opacity: 0; transition: opacity .2s linear 1.85s; }
.ap-art.ap-static .ap-sk { visibility: hidden; }
.ap-art.ap-go .ap-w { animation: apSpin 2.3s cubic-bezier(.3, .5, .25, 1) both; }
.ap-art.ap-go .ap-body { animation: apBrake .7s cubic-bezier(.3, .7, .4, 1) 1.8s both; }
.ap-art.ap-go .ap-speed i { animation: apStreak 1.5s ease-out both; }
.ap-art.ap-go .ap-speed i:nth-child(2) { animation-delay: .08s; } .ap-art.ap-go .ap-speed i:nth-child(3) { animation-delay: .16s; }
.ap-art.ap-go .ap-speed i:nth-child(4) { animation-delay: .04s; }
/* la apăsare: mașina reală pleacă spre dreapta, apoi schița intră din nou și se transformă (scriptul repornește .ap-go) */
.ap-art.ap-out .ap-car { transform: translateX(125%); transition: transform .85s cubic-bezier(.55, 0, .9, .45); }
.ap-art.ap-out .ap-w { animation: apSpinOut .85s cubic-bezier(.55, 0, .9, .45) both; }
.ap-art.ap-out .ap-body { animation: apSquat .85s ease-in both; }
.ap-art.ap-out .ap-scan, .ap-art.ap-out .ap-speed i { animation: none; opacity: 0; }
.ap-art.ap-arm, .ap-art.ap-go, .ap-art.ap-out { cursor: pointer; }
.ap-art.ap-done .ap-w { animation: none; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
@media (hover: hover) and (pointer: fine) { .ap-art.ap-done:hover .ap-w { transform: rotate(40deg); } }
@keyframes apScan { 0% { background-position: 0% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 100% 0; opacity: 0; } }
@keyframes apSpin { from { transform: rotate(-1080deg); } to { transform: rotate(0); } }
@keyframes apSpinOut { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes apBrake { 0% { transform: none; } 35% { transform: translateY(1.2%) rotate(.9deg); } 70% { transform: translateY(-.3%) rotate(-.25deg); } 100% { transform: none; } }
@keyframes apSquat { 0% { transform: none; } 30% { transform: rotate(-.8deg); } 100% { transform: rotate(-.4deg); } }
@keyframes apStreak { 0% { opacity: 0; transform: translateX(-30%) scaleX(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(10%) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .ap-art .ap-car, .ap-art .ap-w, .ap-art .ap-body { transition: none !important; animation: none !important; transform: none !important; }
  .ap-art .ap-sk, .ap-art .ap-scan, .ap-art .ap-speed { display: none !important; }
  .ap-art .ap-re { -webkit-mask: none !important; mask: none !important; }
}
/* insigna „25+” de pe desen a ieșit (Arthur, 29.10.2026: „25” apărea de 5 ori pe pagină) */
/* povestea: banda de hârtie, titlul la stânga, textul la dreapta */
.ap-story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); align-items: start;
  padding-block: clamp(44px, 5.5vw, 80px); background: var(--paper); }
.ap-story h2 { margin: 0; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.ap-story h2::before { content: ""; display: block; width: 32px; height: 3px; background: var(--red); border-radius: 2px; margin-bottom: var(--s4); }
.ap-story p { margin: 0; color: var(--ink-2); max-width: 64ch; }
/* serviciile: cinci carduri numerotate; comanda (munca de bază) pe două coloane */
.ap-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding-block: clamp(44px, 5.5vw, 80px); counter-reset: ap; }
.ap-card { counter-increment: ap; position: relative; padding: clamp(22px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r); box-shadow: var(--sh-0); }
.ap-card-wide { grid-column: span 2; }
.ap-card::before { content: counter(ap, decimal-leading-zero); display: block; margin-bottom: var(--s4); padding-bottom: var(--s3);
  border-bottom: 2px solid var(--red); width: 40px; font: 700 var(--fs-b)/1 var(--font-t); color: var(--red); letter-spacing: .02em; }
.ap-card h2 { margin: 0 0 var(--s3); color: var(--ink); line-height: 1.25; text-wrap: balance; }
.ap-card p, .ap-card li { color: var(--ink-2); max-width: 62ch; }
.ap-card p { margin: 0 0 var(--s3); }
.ap-card > :last-child { margin-bottom: 0; }
.ap-card { display: flex; flex-direction: column; }
.ap-more { margin-top: auto !important; padding-top: var(--s3); }
.ap-more a { font: 600 var(--fs-m)/1.3 var(--font-t); color: var(--ink); text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ap-more a:hover { color: var(--red); }
.nw { white-space: nowrap; }
.ap-card ul { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.ap-card li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.ap-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--red); }
/* cifrele: banda roșie */
.ap-cifre { background: var(--red); color: var(--paper); padding-block: clamp(48px, 5.8vw, 84px); }
.ap-cifre h2 { margin: 0 0 var(--s6); color: var(--paper); }
.page-despre .ap-cifre .facts { list-style: none; padding: 0; margin: 0 0 var(--s6); gap: var(--s5) var(--s6); }
.page-despre .ap-cifre .facts li { color: var(--on-red); padding: var(--s4) 0 0; border-top: 1px solid rgba(255, 253, 252, .4); }
.page-despre .ap-cifre .facts strong { color: var(--paper); font-size: clamp(30px, 3.6vw, 48px); }
.ap-cifre p { margin: 0; color: var(--on-red); max-width: 64ch; }
/* valorile: patru coloane, fiecare cu regula ei */
.ap-valori { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.ap-valori h2 { margin: 0 0 var(--s6); color: var(--ink); }
.ap-valori .values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s5); margin: 0; }
.ap-valori .values div { padding-top: var(--s4); border-top: 2px solid var(--red); }
.ap-valori dt { font-family: var(--font-t); font-weight: 600; color: var(--ink); margin: 0; }
.ap-valori dd { margin: 6px 0 0; color: var(--ink-2); }
/* îndemnul de la final: hârtie, lipit de subsol */
.ap-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6);
  padding-block: clamp(36px, 4.5vw, 64px); background: var(--paper); border-top: 1px solid var(--hair); }
.ap-end h2 { margin: 0; color: var(--ink); }
.ap-end h2 + p { margin: 6px 0 0; color: var(--ink-2); }
.ap-end .ap-cta { margin: 0; }
body[data-page="despre"] .foot { margin-top: 0; }
@media (max-width: 1000px) {
  .ap-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-valori .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ap-top { grid-template-columns: 1fr; }
  .ap-story { grid-template-columns: 1fr; row-gap: var(--s4); }
}
@media (max-width: 760px) {
  .ap-svc { grid-template-columns: 1fr; }
  .ap-card-wide { grid-column: auto; }
  .page-despre .ap-cifre .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ap-valori .values { grid-template-columns: 1fr; } .ap-cta .btn { flex: 1 1 100%; } }

/* ---------- caroseriile din cererea la comandă (Arthur, 29.10.2026): schița celui mai nou model devine mașina reală
   când o alegi. Două straturi aliniate la pixel (img/caroserii/<id>-schita, -real); masca trece de la bot spre spate,
   cu o linie de lumină (.bd-scan, mascată de silueta mașinii). Cutia are înălțimea dubei, mașinile stau pe aceeași linie. */
.bd-car { position: relative; display: block; width: min(100%, 84px); aspect-ratio: 240 / 104; }
.bd-car img, .bd-scan { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.bd-sk { transition: opacity .2s linear; }
.bd-re { -webkit-mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 0% 0 / 300% 100% no-repeat;
  mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 0% 0 / 300% 100% no-repeat; }
.bd-scan { opacity: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 55%) 0% 0 / 300% 100% no-repeat; }
/* silueta lui .bd-scan e chiar mașina reală, fără ?v= (url din CSS): o mașină nouă se pune sub alt nume de fișier */
.bd-limuzina .bd-scan { aspect-ratio: 240 / 78; -webkit-mask: url("img/caroserii/limuzina-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/limuzina-real.webp") 0 0 / 100% 100% no-repeat; }
.bd-suv .bd-scan { aspect-ratio: 240 / 89; -webkit-mask: url("img/caroserii/suv-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/suv-real.webp") 0 0 / 100% 100% no-repeat; }
.bd-coupe .bd-scan { aspect-ratio: 240 / 74; -webkit-mask: url("img/caroserii/coupe-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/coupe-real.webp") 0 0 / 100% 100% no-repeat; }
.bd-cabrio .bd-scan { aspect-ratio: 240 / 73; -webkit-mask: url("img/caroserii/cabrio-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/cabrio-real.webp") 0 0 / 100% 100% no-repeat; }
.bd-break .bd-scan { aspect-ratio: 240 / 80; -webkit-mask: url("img/caroserii/break-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/break-real.webp") 0 0 / 100% 100% no-repeat; }
.bd-utilitara .bd-scan { aspect-ratio: 240 / 104; -webkit-mask: url("img/caroserii/utilitara-real.webp") 0 0 / 100% 100% no-repeat; mask: url("img/caroserii/utilitara-real.webp") 0 0 / 100% 100% no-repeat; }
.bd.is-real .bd-car { animation: bdNudge .9s var(--ease); }
.bd.is-real .bd-re { -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position .95s cubic-bezier(.4, .15, .6, .9), mask-position .95s cubic-bezier(.4, .15, .6, .9); }
.bd.is-real .bd-scan { animation: apScan .95s cubic-bezier(.4, .15, .6, .9) both; }
.bd.is-real .bd-sk { opacity: 0; transition: opacity .2s linear .95s; }
/* precompletată (din link sau la întoarcere în pagină): direct reală, fără trecere */
.bd.is-now .bd-car, .bd.is-now .bd-re, .bd.is-now .bd-scan, .bd.is-now .bd-sk { animation: none; transition: none; }
@keyframes bdNudge { from { transform: translateX(-7%); } to { transform: none; } }
.bodies-sm .bd { flex: 1 1 0; min-width: 0; }
.bodies-sm .bd-car { width: min(100%, 76px); }
@media (prefers-reduced-motion: reduce) {
  .bd-car, .bd-re, .bd-scan, .bd-sk { animation: none !important; transition: none !important; }
}

/* ---------- „Mulțumim” (Arthur, 29.10.2026): un Mercedes-AMG GT 63 intră ca schiță, devine real pe drum și oprește la
   pinul Clar Auto; apoi se pune ștampila „Primită”. Aceeași tehnică ca 812-ul de pe „Despre noi” (.ap-*). */
/* sub titlu, o bandă pe toată lățimea foii: drumul spre pin; ștampila din dreapta titlului se pune la sosire */
.ty-art { position: relative; margin: 26px 0 0; aspect-ratio: 16 / 5; border-radius: 6px; overflow: hidden;
  background: radial-gradient(90% 120% at 55% 25%, var(--paper) 0%, var(--field) 65%, #ECEEEE 100%); }
.ty-road { position: absolute; left: 0; right: 0; bottom: 23%; height: 2px; background: repeating-linear-gradient(90deg, var(--hair-2) 0 14px, transparent 14px 26px); }
.ty-pin { position: absolute; right: 9%; bottom: 23%; width: 6.5%; transform-origin: 50% 100%; }
.ty-pin path { fill: var(--red); } .ty-pin circle { fill: var(--paper); }
.ty-car { position: absolute; left: 30%; width: 46%; bottom: 20%; aspect-ratio: 640 / 206; display: block; }
.ty-sk, .ty-re, .ty-body { position: absolute; inset: 0; }
.ty-body { transform-origin: 72% 100%; }
.ty-sk > img:not(.ty-w), .ty-re > img:not(.ty-w) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ty-w { position: absolute; height: auto; aspect-ratio: 1; top: 47.21%; width: 16.27%; will-change: transform; }
.ty-w-r { left: 13.82%; } .ty-w-f { left: 70.56%; }
.ty-shadow { position: absolute; left: 6%; right: 6%; bottom: -4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(28, 28, 30, .26), rgba(28, 28, 30, 0)); }
.ty-re { -webkit-mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(to left, #000 0 44%, transparent 56% 100%) 100% 0 / 300% 100% no-repeat; }
/* masca lui .ty-scan e gt-hartie.webp fără ?v= (url din CSS): o schiță nouă se pune sub alt nume de fișier */
.ty-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 55%) 0% 0 / 300% 100% no-repeat;
  -webkit-mask: url("img/sosire/gt-hartie.webp") 0 0 / 100% 100% no-repeat; mask: url("img/sosire/gt-hartie.webp") 0 0 / 100% 100% no-repeat; }
/* înainte de script (scripting: enabled): schița în afara scenei, ștampila nepusă; plasa de 5 s doar fără .ty-arm */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ty:not(.ty-static):not(.ty-go) .ty-car { transform: translateX(-170%); }
  .ty:not(.ty-static):not(.ty-go) .ty-re { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  .ty:not(.ty-static):not(.ty-go) .stamp { opacity: 0; }
  .ty:not(.ty-static):not(.ty-go):not(.ty-arm) .ty-car { animation: apFbCar .01s linear 5s forwards; }
  .ty:not(.ty-static):not(.ty-go):not(.ty-arm) .ty-re { animation: apFbMask .01s linear 5s forwards; }
  .ty:not(.ty-static):not(.ty-go):not(.ty-arm) .ty-sk { animation: apFbHide .01s linear 5s forwards; }
  .ty:not(.ty-static):not(.ty-go):not(.ty-arm) .stamp { animation: tyFbShow .01s linear 5s forwards; }
}
@keyframes tyFbShow { to { opacity: 1; } }
.ty.ty-arm .ty-car { transform: translateX(-170%); }
.ty.ty-arm .ty-re { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
.ty.ty-arm .stamp { opacity: 0; }
/* drumul: 2,1 s; transformarea merge cât mașina încă rulează (0,3–1,8 s), frâna la pin, apoi ștampila */
.ty.ty-go .ty-car { transform: none; transition: transform 2.1s cubic-bezier(.3, .5, .25, 1); }
.ty.ty-go .ty-re { -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.5s cubic-bezier(.4, .15, .6, .9) .3s, mask-position 1.5s cubic-bezier(.4, .15, .6, .9) .3s; }
.ty.ty-go .ty-scan { animation: apScan 1.5s cubic-bezier(.4, .15, .6, .9) .3s both; }
.ty.ty-go .ty-sk { opacity: 0; transition: opacity .2s linear 1.8s; }
.ty.ty-static .ty-sk { visibility: hidden; }
.ty.ty-go .ty-w { animation: apSpin 2.1s cubic-bezier(.3, .5, .25, 1) both; }
.ty.ty-go .ty-body { animation: apBrake .7s cubic-bezier(.3, .7, .4, 1) 1.65s both; }
.ty.ty-go .ty-pin { animation: tyPin .7s cubic-bezier(.3, .7, .4, 1) 1.85s both; }
.ty.ty-go .stamp { animation: tyStamp .42s cubic-bezier(.3, .7, .4, 1) 2.2s both; }
.ty.ty-arm .ty-art, .ty.ty-go .ty-art { cursor: pointer; }
@keyframes tyPin { 0% { transform: none; } 35% { transform: scale(1.08, .86); } 65% { transform: scale(.97, 1.05); } 100% { transform: none; } }
@keyframes tyStamp { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-6deg) scale(.94); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ty .ty-car, .ty .ty-w, .ty .ty-body, .ty .ty-pin, .ty .stamp { transition: none !important; animation: none !important; }
  .ty .ty-car, .ty .ty-w, .ty .ty-body, .ty .ty-pin { transform: none !important; }
  .ty .ty-sk, .ty .ty-scan { display: none !important; }
  .ty .ty-re { -webkit-mask: none !important; mask: none !important; }
}
@media (max-width: 640px) {
  .ty-art { aspect-ratio: 16 / 8; margin-top: 20px; }
  .ty-car { left: 14%; width: 64%; bottom: 19%; }
  .ty-pin { right: 6%; width: 10%; }
}

/* ---------------- Recenzia UI din 02.11.2026 ---------------- */
/* Bara de jos pe telefon: „Cere ofertă” e acțiunea principală, deci roșie; Sună și WhatsApp rămân pe contur */
.mbar .mbar-cta { background: var(--red); border-color: var(--red); color: #fff; }
.mbar .mbar-cta:active { background: var(--red-press); border-color: var(--red-press); }
/* Fișele de pe un rând: prețul la aceeași înălțime, oricât de lung e numele și chiar fără versiune
   (titlul ține loc pentru 2 rânduri, versiunea pentru 1). Fișa mare din „Mașini disponibile acum” are așezarea ei. */
@media (min-width: 700px) {
  .mgrid .ms-t { min-height: 2.5em; }
  .mgrid .ms-v { min-height: 1.55em; }
  .mgrid.feat > li:first-child .ms-t, .mgrid.feat > li:first-child .ms-v { min-height: 0; }
}
/* Prețul din fișa mașinii: când trece sub titlu, „cu TVA” și nota stau sub el aliniate la stânga, nu la dreapta.
   Ruperea depinde de lungimea numelui, nu doar de lățime, deci clasa o pune fisa.js (priceUnder); fără JS rămâne dreapta. */
.price.is-under { text-align: left; }
/* Textul de exemplu din câmpuri: culoarea etichetelor (5,3:1 pe câmp), nu griul rece al browserului (4,1:1) */
.inp::placeholder, input::placeholder, textarea::placeholder { color: var(--label); opacity: 1; }
/* Ținte de atingere de minimum 44px pe ecranele tactile. În antet zona crește printr-un strat invizibil, ca desenul
   antetului să nu se miște; în rest, prin înălțime. */
@media (pointer: coarse), (max-width: 844px) {
  .lh .lang a, .lh-tel, .menu-btn, .view-toggle button { position: relative; }
  .lh .lang a::after { content: ""; position: absolute; inset: -10px 0; }
  .lh-tel::after { content: ""; position: absolute; inset: -2px; }
  .menu-btn::after { content: ""; position: absolute; inset: -3px; }   /* -2px + bordura de 1px */
  .view-toggle button::after { content: ""; position: absolute; inset: -4px 0; }
  .grp-nav a, .car-top a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-nav { row-gap: 0; }
  .foot-ct, .foot-links, .ca-legal-links { row-gap: 0; }
  .foot-nav a, .foot-links a, .ca-legal-links a, .ca-legal-cookies { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-ct { gap: 0; }
  .foot-ct a { padding-block: 11px; }      /* bloc, nu flex: pe lățimile cu subsolul aliniat la dreapta rămâne la dreapta */
}

/* Ardezie (4 noiembrie 2026). Benzile pline, taburile și titlurile închise trec pe ardezie.
   Rămân roșii: linia de sub antet, liniile de sub titluri și de deasupra fișelor, butoanele,
   prețurile, cifrele pașilor și banda „Clar Auto în cifre” (.ap-cifre). Rămân roșii și liniuța din meniu (.lh-ind),
   linia tabului activ din căutare, bulina cu numărul de mașini (.hs-tab-n) și butonul activ Listă/Fișe. */
:root { --ardezie: #2C3E48; --on-ardezie: #D9E4E8; }   /* text pe ardezie: 8,6:1 */

.band-red-full, .band-red, .red-band, .ms-fill-in { background: var(--ardezie); --on-red: var(--on-ardezie); }
.band-red-full .route.ill .step-no { background: var(--red); }

.hs-tabs [role=tab][aria-selected=true] { color: var(--ardezie); }
.lang a[aria-current="true"] { background: var(--ardezie); }
.view-toggle button[aria-pressed="true"] { background: var(--red); }
/* hover-ul de la r.48 (cerneală) ar bate textul alb pe butonul apăsat: rămâne alb */
.view-toggle button[aria-pressed="true"]:hover { color: #fff; }

h1, h2, h3, .ct-team h3, .ap-story h2, .ap-card h2, .ap-valori h2, .ap-end h2 { color: var(--ardezie); }

/* Liniile roșii: 2px peste tot (4.11.2026), cât au liniile de deasupra fișelor și a valorilor. Înainte: linia de sub antet 3px,
   sublinierea titlurilor 3px (și cea animată), liniuța din meniu 2,5px, linia tabului activ 3px, liniuța de deasupra
   titlurilor din „Despre noi” 3px. */
.lh-rule { height: 2px; }
.doc-h { border-bottom-width: 2px; }
.doc-h.mo { background-size: 0 2px; }
.doc-h.mo.on { background-size: 100% 2px; }
.ap-story h2::before { height: 2px; }
.lh-nav a[aria-current="page"]::after, .lh-ind { height: 2px; }
.hs-tabs [role=tab][aria-selected=true]::after { height: 2px; }
.stamp { border-width: 2px; }
/* .doc-h.mo de mai sus vine după blocul cu mișcare redusă de la începutul fișierului și l-ar bate: linia rămâne trasă */
@media (prefers-reduced-motion: reduce) { .doc-h.mo { background-size: 100% 2px; } }