/* Expert Cert Systems — one stylesheet.
   The two brand colours are measured off the official logo, not chosen:
   docs/assets/ecs-logo-original.png quantises to #3F559E for the wordmark and
   #C71C81 for the ring. Blue carries structure and action (buttons, focus, the
   site name); magenta is spent only on the mark and on accreditation codes.
   Ground is a cool neutral so it sits under a blue identity rather than fighting it.
   Status colours stay semantic and separate from both — a verdict must never be
   mistaken for branding, so red/amber/green are their own scale.
   One scheme only: light. A dark variant existed and shipped, and on Sebi's dark-mode PC
   the whole site came up dark — not what a certification body should look like. */

@font-face{font-family:"ECS Display";src:url(/assets/fonts/serif-display.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ECS Sans";src:url(/assets/fonts/sans-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ECS Sans";src:url(/assets/fonts/sans-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"ECS Mono";src:url(/assets/fonts/mono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F6F7F9; --paper-2:#EDEFF4;
  --ink:#131722; --ink-2:#414A5C; --ink-3:#6A7386;
  --brand:#3F559E; --brand-ink:#FFFFFF; --brand-deep:#374A8C;
  --accent:#C71C81;
  --ok:#1E7A4C; --warn:#8A5A00; --stop:#B02318; --none:#6A7386;
  --rule:#DDE1E9; --rule-strong:#BCC3D0;
  --card:#FFFFFF; --card-edge:#E2E6EE;
  --focus:#3F559E;
  --shadow:0 1px 2px rgba(19,23,34,.05), 0 8px 24px -14px rgba(19,23,34,.30);
  /* Light only, by Sebi's decision. Without this the browser still renders form controls,
     scrollbars and the autofill background in its dark palette on a dark-mode machine,
     which is how the site looked dark to him even after the dark rules were removed. */
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Bara de derulare, aproape invizibilă — preferința permanentă a lui Sebi. Se pune și pe
   containerele cu derulare proprie, nu doar pe pagină. --ink este #131722 = 19,23,34. */
*{scrollbar-width:thin;scrollbar-color:rgba(19,23,34,.13) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(19,23,34,.11);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(19,23,34,.24);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* Coloană, nu pagină: subsolul stă jos și pe paginile scurte. Fără asta, pe /verificare
   rămâneau 359px de fundal gol sub el la 1920, iar pe 404 — 548px. Măsurat. */
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"ECS Sans",ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:inherit}

/* 1200px e geometria de referință a lui Sebi (Trufaco), nu 1000: pe ecranul lui de 1920
   coloana de 1000 lăsa jumătate de ecran gol. Paginile de text curat stau la 900 — destul
   cât proza să umple rândul, nu atât cât să devină greu de citit. */
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:10;background:var(--card);padding:10px 14px;
  border:1px solid var(--rule-strong)}

/* contact bar + header. The header is sticky: on a page this long, the way back to
   Certificări or Contact should never be a scroll to the top. The contact bar scrolls
   away with the page — it is an offer, not a control. */
.topbar{background:var(--brand);color:#fff;font-size:13px}
.topbar .wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding-block:7px}
.topbar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.topbar a:hover{border-bottom-color:#fff}
.topbar-addr{margin-left:auto;opacity:.85}
@media (max-width:760px){
  .topbar .wrap{gap:14px;font-size:12.5px}
  /* The address is the least urgent of the three and the longest; it stays in the footer
     and on /contact, where someone looking for it actually goes. */
  .topbar-addr{display:none}
}

/* header */
.top{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30;
  background:var(--paper);
  /* Only once it has actually left the top: a shadow on a header that has not moved is
     decoration. */
  box-shadow:0 1px 0 var(--rule)}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none}
/* The logo carries the name and the tagline, so nothing is set beside it. Constrained by
   height and free in width: ECS can upload the square mark or the wide lockup through
   /admin and neither gets squashed. */
.brand-logo{display:block;height:82px;width:auto;max-width:300px;object-fit:contain}
@media (max-width:520px){.brand-logo{height:60px}}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav-item{position:relative}
.nav-item > a{display:inline-block;color:var(--ink-2);text-decoration:none;font-size:14.5px;
  padding:6px 10px;border-bottom:2px solid transparent}
.nav-item > a:hover{color:var(--ink)}
.nav-item > a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.has-sub > a::after{content:"";display:inline-block;margin-left:6px;vertical-align:2px;
  border:3.5px solid transparent;border-top-color:currentColor;opacity:.55}

/* Submenus open on hover AND on keyboard focus, with no JavaScript — the site sends
   un CSP fără 'unsafe-inline', iar un meniu care depinde de un script cade pentru cine îl pierde.
   (Din 2026-08-24 site-ul are un script propriu, pentru consimțământ. Meniul tot nu-l folosește:
   e desenat din CSS și funcționează cu JavaScript oprit.) */
.subnav{position:absolute;left:0;top:100%;z-index:20;margin:0;padding:6px;list-style:none;
  min-width:290px;background:var(--card);border:1px solid var(--card-edge);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility 0s .12s}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{opacity:1;visibility:visible;
  transform:none;transition-delay:0s}
.subnav a{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  padding:8px 10px;font-size:14px;color:var(--ink-2);text-decoration:none;border-radius:2px}
.subnav a:hover,.subnav a:focus-visible{background:var(--paper-2);color:var(--ink)}
.subnav .is-child{padding-left:26px;font-size:13.5px;color:var(--ink-3)}
.subnav .is-child::before{content:"";position:absolute;margin-left:-14px;margin-top:9px;width:8px;height:1px;background:var(--rule-strong)}
.subnav li{position:relative}
.subnav .ext{font-family:"ECS Mono",monospace;font-size:10px;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--rule);padding:1px 4px;border-radius:2px;flex:none}
/* Hamburgerul — cerut de Sebi 2026-08-24, împreună cu „toate linkurile din meniu".
   Răstoarnă decizia din iulie, care ascundea submeniul pe telefon ca să nu apară un zid de
   treizeci de linkuri înaintea conținutului. Zidul dispare fiindcă e în spatele unei
   apăsări — nu pentru că linkurile lipsesc.

   Mecanismul e <details>, deci butonul are stare, focus și rol fără JavaScript. <nav> e
   FRATELE lui: vezi nota din templates/layout.php — ca fiu, la 1920 meniul se măsura
   `width:0`, fiindcă browserul sare peste conținutul unui <details> închis.

   Măsurat înainte: antetul lipicios ocupa 193px din 844 pe telefon (23% din ecran,
   permanent) și 172px pe tabletă. Strâns, rămâne un singur rând: 89px, respectiv 111px. */
.navtoggle{display:none}
.navtoggle > summary{list-style:none;cursor:pointer}
.navtoggle > summary::-webkit-details-marker{display:none}

@media (max-width:860px){
  .navtoggle{display:block;margin-left:auto}
  .navtoggle > summary{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;
    color:var(--ink-2);padding:9px 13px;border:1px solid var(--rule-strong);
    border-radius:2px;background:var(--card)}
  .navtoggle > summary:hover{color:var(--ink)}
  .navtoggle > summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .navtoggle[open] > summary{color:var(--ink);border-color:var(--brand)}
  .nav-ico{width:16px;height:12px;flex:none}

  /* 🔴 `:has()` pe părinte, NU combinator de frați. Costul aflării: Sebi a raportat de pe
     telefon „apăs pe meniu și nu se întâmplă nimic", la câteva minute după primul deploy.
     Reprodus pe WebKit (motorul oricărui browser de pe iPhone), pe pagina LIVE:
       la apăsare  → `details.open` devine `true`, dar `.nav` rămâne `display:none`, h=0
       după ce ating elementul și forțez un reflow → `display:flex`, h=548
     Adică regula era corectă, dar WebKit NU reevaluează selectorul cu combinator de
     adiacență când se schimbă atributul `open` de pe fratele dinainte. Bug de invalidare de
     stil, nu de CSS. Ambele polarități (`:not([open]) +` și `[open] +`) cad la fel — deci
     nu inversarea era soluția. Pe Chromium nu se reproduce, motiv pentru care prima captură
     headless arăta meniul funcționând perfect.

     Măsurat pe amândouă motoarele, cu apăsare reală: închis 0 → deschis 548 → reînchis 0.

     Polaritatea e aleasă ca să cadă în siguranță: un browser fără `:has()` aruncă regula și
     rămâne cu meniul VIZIBIL (urât, dar utilizabil), nu ascuns pentru totdeauna. */
  .top .wrap:has(.navtoggle:not([open])) .nav{display:none}

  /* Panoul iese din fluxul antetului: altfel deschiderea meniului împinge pagina în jos
     cu înălțimea lui. .top e sticky, deci e deja bloc de referință pentru absolut. */
  .nav{position:absolute;left:0;right:0;top:100%;z-index:40;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 24px 14px;background:var(--card);border-top:1px solid var(--rule);
    box-shadow:var(--shadow);max-height:76dvh;overflow-y:auto;overscroll-behavior:contain}
  .nav-item{position:static}
  /* `block`, nu `inline-block`: linia de despărțire trebuie să traverseze rândul. Pe
     inline-block se oprea la ultimul cuvânt și arăta a subliniere greșită, nu a separator. */
  .nav-item > a{display:block;padding:12px 2px;border-bottom:1px solid var(--rule);
    font-size:15.5px}
  .nav-item > a[aria-current="page"]{border-bottom-color:var(--brand)}
  .has-sub > a::after{display:none}

  /* Submeniul, desfăcut și indentat — nu suprapus. Aici trăiește cerința „să văd toate
     linkurile": cele șapte intrări de sub Certificări sunt vizibile, nu la un tap distanță. */
  .subnav{position:static;opacity:1;visibility:visible;transform:none;transition:none;
    min-width:0;background:transparent;border:0;box-shadow:none;padding:4px 0 8px 14px}
  .subnav a{padding:8px 10px 8px 0;font-size:14px}
  .subnav .is-child{padding-left:22px}
  .subnav .is-child::before{margin-left:-14px;margin-top:18px}
}

/* type */
/* 🪤 Plafonul în `ch` pe TITLURI e defectul care s-a repetat de trei ori pe alte proiecte:
   titlul se oprește la 70% din coloană și rândul pare rupt, nu deliberat. `text-wrap:balance`
   rezolvă echilibrul rândurilor fără să limiteze lățimea — plafonul era problema, nu balance. */
h1{font-family:"ECS Display",Georgia,serif;font-weight:400;font-size:clamp(28px,4.2vw,44px);
  line-height:1.15;letter-spacing:-.012em;margin:0 0 16px;text-wrap:balance}
h2{font-family:"ECS Display",Georgia,serif;font-weight:400;font-size:25px;margin:0;
  letter-spacing:-.008em;text-wrap:balance}
h3{font-size:16px;margin:0 0 6px;font-weight:600}
p{margin:0 0 14px}
/* `pretty` atinge DOAR ultimul rând, deci scoate orfanii fără să scurteze restul — spre
   deosebire de `balance`, care pe proză egalizează rândurile și lasă gol în dreapta.
   Măsurat pe homepage: 5 orfani la 1920 → 1, 10 la 390 → 0. */
p,li,dd,dt,.lede,.hint,figcaption{text-wrap:pretty}
.lede{color:var(--ink-2);font-size:17px}
/* Firul Ariadnei. Se desenează doar de la trei pași în sus — vezi nota din page.php.
   Separatorul e pus din CSS, nu scris în HTML: un „›" în marcaj ar fi citit cu voce tare de
   un cititor de ecran la fiecare pas. */
.crumbs{padding-block:18px 0;font-size:13px;color:var(--ink-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:0 8px}
.crumbs li{display:flex;align-items:baseline;gap:8px}
.crumbs li + li::before{content:"›";color:var(--rule-strong);speak:never}
.crumbs a{color:var(--ink-3);text-decoration:none;text-underline-offset:3px}
.crumbs a:hover{color:var(--ink-2);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink-2)}
/* Sub 520px firul poate ajunge pe două rânduri; interlinia strânsă îl ține discret. */
@media (max-width:520px){.crumbs{font-size:12.5px;padding-block:14px 0}.crumbs ol{line-height:1.5}}

.eyebrow{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--rule-strong)}
/* "Rânduri rupte." A reading measure is right — long lines are genuinely harder to read —
   but it was applied to the text alone while the heading above it ran the full container
   width. The line then stops in the middle of a rule that does not, and reads as broken
   rather than as a deliberate column.
   The fix is one shared edge: the intro block sets the width, and the heading and the
   text inside it break at the same place. Applied to every template, not just the ones
   that happen to share page.php — which is how /acreditari kept the old behaviour after
   I claimed to have checked every page. */
.hero{max-width:900px}
.hero h1,.hero .lede,.hero .std-line{max-width:none}
.page-prose .wrap{max-width:900px}
.page-prose .prose,.page-prose .lede,.page-prose .verify .lede{max-width:none}
.prose{max-width:none}
.prose p{color:var(--ink-2)}
.prose ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2)}
.prose li{margin:4px 0}

main{display:block}
.hero{padding-block:56px 8px}
.section{padding-block:52px}
/* Two sections in a row would otherwise stack 52px of their own padding against each
   other and open a gap that reads as a missing block. */
.section + .section{padding-top:12px}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;flex-wrap:wrap}
.section-head .aside{margin-left:auto;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

/* verification */
.verify{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--shadow);
  padding:22px;display:grid;gap:14px}
.verify label{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.verify .row{display:flex;gap:10px;flex-wrap:wrap}
.verify input{flex:1 1 260px;min-width:0;font-family:"ECS Mono",monospace;font-size:19px;
  font-weight:500;letter-spacing:.02em;padding:14px 16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule-strong);border-radius:2px}
.verify input::placeholder{color:var(--ink-3);font-weight:500}
.verify input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.btn{font:inherit;font-weight:600;font-size:15px;padding:14px 22px;border-radius:2px;cursor:pointer;
  background:var(--brand);color:var(--brand-ink);border:1.5px solid var(--brand);text-decoration:none;
  display:inline-block}
.btn:hover{filter:brightness(1.12)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hint{font-size:13px;color:var(--ink-3);margin:0}
.hint code{font-family:"ECS Mono",monospace;font-size:12.5px;background:var(--paper-2);
  border:1px solid var(--rule);padding:1px 5px;border-radius:2px}

/* verdict */
.verdict{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--shadow);
  position:relative;overflow:hidden;margin-top:18px}
.verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vc,var(--none))}
.verdict-head{display:flex;gap:18px;align-items:flex-start;padding:20px 22px 16px;
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.stamp{flex:none;display:grid;place-items:center;width:98px;height:98px;border-radius:50%;
  border:2.5px solid var(--vc,var(--none));color:var(--vc,var(--none));text-align:center;
  transform:rotate(-7deg)}
.stamp b{display:block;font-family:"ECS Mono",monospace;font-weight:500;font-size:12.5px;letter-spacing:.05em}
.stamp i{display:block;font-style:normal;font-size:9px;letter-spacing:.12em;opacity:.85;margin-top:3px}
.verdict-main{flex:1 1 320px;min-width:0}
.verdict-num{font-family:"ECS Mono",monospace;font-weight:500;font-size:24px;margin:0 0 4px;
  word-break:break-all}
.verdict-firm{font-family:"ECS Display",Georgia,serif;font-size:20px;line-height:1.25;margin:0 0 8px;
  text-wrap:balance}
.chip{display:inline-block;font-family:"ECS Mono",monospace;font-size:12.5px;
  border:1px solid var(--rule-strong);padding:3px 8px;border-radius:2px;color:var(--ink-2)}
.fields{padding:16px 22px 20px;display:grid;gap:14px;margin:0}
.fields div{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.fields dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.fields dd{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.verdict-foot{border-top:1px solid var(--rule);padding:12px 22px;display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;font-size:12.5px;color:var(--ink-3);background:var(--paper-2)}
.verdict-foot .perma{font-family:"ECS Mono",monospace;font-size:12px;color:var(--ink-2);word-break:break-all}
.miss{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--shadow);padding:22px;
  position:relative;overflow:hidden;margin-top:18px}
.miss::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stop)}
.miss h2{font-size:19px;margin-bottom:6px}
.miss p{color:var(--ink-2);font-size:14.5px;margin:0}

/* The SVG symbol sprite is hidden with a class, never a style attribute: the CSP has no
   'unsafe-inline', so a style attribute is dropped and the sprite would take up space. */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* hero — the verification box keeps the left, the standard marks take the right, so the
   page says what ECS certifies before a word is read. */
.hero--split{padding-block:48px 8px;max-width:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:44px;align-items:start}
.hero-marks{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:52px}
.hero-marks a{display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--card-edge);background:var(--card);padding:14px 8px;border-radius:2px}
.hero-marks a:hover{color:var(--brand);border-color:var(--brand)}
.hero-marks svg{width:44px;height:44px}
.hero-marks span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-marks{grid-template-columns:repeat(4,1fr);padding-top:0}
}
@media (max-width:460px){.hero-marks{grid-template-columns:repeat(2,1fr)}}

/* homepage — the layout Sebi approved from the mockup, moved here verbatim so what
   shipped is what he saw. Identity first, verification further down: the search box
   serves someone who already holds a certificate, not someone deciding whether to
   work with ECS. */
.intro .hero,.intro{max-width:none}
.intro{padding-block:56px 40px;border-bottom:1px solid var(--rule)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.intro h1{font-size:clamp(30px,3.6vw,42px);margin-bottom:20px}
.intro .lede{font-size:18px;max-width:none}
.intro .std-line{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink-2)}
.intro .std-line b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn--ghost{background:transparent;color:var(--brand);border:1.5px solid var(--rule-strong)}
.btn--ghost:hover{border-color:var(--brand)}
.facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.facts div{background:var(--card);padding:16px 18px}
.facts dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.facts dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.45}
.facts dd b{font-family:"ECS Mono",monospace;font-weight:500;color:var(--accent)}
/* Two columns, stated rather than fitted. auto-fit with a 260px minimum put three cards
   on the first row inside a 1000px wrap and left the fourth alone beside a grey hole —
   a layout that reads as broken. Four pillars want a 2x2, and it only shows up in a
   screenshot. */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--rule);border:1px solid var(--rule);gap:1px}
@media (max-width:640px){.why{grid-template-columns:1fr}}
.why div{background:var(--card);padding:24px;display:flex;flex-direction:column}
.why h3{font-size:15px;margin:0 0 8px}
.why p{margin:0;font-size:14px;color:var(--ink-2)}
/* auto margin, so the proof links line up along the bottom no matter how long the
   paragraph above them runs. Same device as .acc-links. */
.why a{margin:auto 0 0;padding-top:14px;font-size:13.5px;font-weight:600;
  text-underline-offset:3px}
.verify-strip{background:var(--paper-2);border-block:1px solid var(--rule)}
.verify-strip .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:44px;align-items:center;padding-block:44px}
.verify-strip h2{margin-bottom:10px}
.verify-strip p{color:var(--ink-2);font-size:15px;margin:0}
/* 🪤 `1fr` era `minmax(auto,1fr)`, iar minimul `auto` = min-content-ul cardului de
   verificare: 341px. Într-un container de 272px (viewport 320) coloana refuza să coboare,
   iar pagina căpăta 45px de derulare laterală — invizibilă la 390, reală pe un telefon mic.
   Măsurat: scrollWidth 365 → 320 după `minmax(0,1fr)` plus min-width:0 pe card. */
@media (max-width:860px){
  .intro-grid,.verify-strip .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
}
.verify,.verify > *{min-width:0}

/* accreditations — the certificate itself is the illustration */
.accs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* Aceeași regulă ca la .svc: 3 → 1, fără palierul de 2 care lăsa gaură (640-900px). */
@media (max-width:900px){.accs{grid-template-columns:1fr}}
.acc{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--shadow);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.acc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--vc,var(--none))}
/* Pagina ÎNTREAGĂ, la raportul ei natural (560×792). `object-fit:cover` arăta 48% din
   înălțime — măsurat — iar pe certificat scrie, textual: „Reproducerea parţială a
   prezentului certificat este interzisă." (2022-02-SM-108-C…pdf). Nu e o alegere de
   compoziție, e condiția actului pe care îl reproducem. Cardul iese înalt; asta e. */
.acc-doc{display:block;background:var(--paper-2);border-bottom:1px solid var(--rule);
  aspect-ratio:560/792;overflow:hidden}
.acc-doc img{width:100%;height:100%;object-fit:contain;display:block}
.acc-doc:hover img{opacity:.92}
.acc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.acc-code{margin:0;font-family:"ECS Mono",monospace;font-weight:500;font-size:15px;
  color:var(--accent);letter-spacing:.04em}
.acc-title{margin:0;font-size:15.5px;line-height:1.35}
.acc-scope{margin:0;font-size:13.5px;color:var(--ink-2)}
.acc-dates{margin:4px 0 0;display:grid;gap:5px}
/* Label above value, not beside it: three cards across leaves ~300px each, and a
   two-column row broke "SR EN ISO/CEI 17021-1:2015" mid-token. */
.acc-dates div{display:grid;gap:1px}
.acc-dates dt{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.acc-dates dd{margin:0;font-size:13px;color:var(--ink-2)}
.acc-state{margin:6px 0 0;font-size:12.5px;color:var(--vc,var(--ink-2));display:flex;
  align-items:center;gap:7px;font-weight:600}
.acc-state .dot{width:8px;height:8px;border-radius:50%;background:var(--vc,var(--none));flex:none}
.acc-links{margin:auto 0 0;padding-top:10px;display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px}
.acc-links a{text-underline-offset:3px}
.accs + .t-sm{margin-top:20px}
/* Aceeași regulă și pe homepage: un raport „compact" ar fi tot un decupaj. */
.accs--compact .acc-doc{aspect-ratio:560/792}

/* services */
/* Trei carduri: 3 coloane, apoi DIRECT 1. `auto-fit` trecea printr-un palier de 2
   coloane între 640 și 820px, adică 2+1 cu o gaură lângă ultimul card. Măsurat, nu
   presupus. Un rând de trei care devine o coloană nu are cum să lase gaură. */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.svc-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--card-edge);padding:22px;
  border-top:3px solid var(--brand)}
.svc-item:hover{box-shadow:var(--shadow)}
.svc-mark{width:46px;height:46px;color:var(--brand)}
.svc-item h3{margin:4px 0 0;font-size:16px}
.svc-item p{margin:0;font-size:14px;color:var(--ink-2)}
.svc-go{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--brand)}
.svc-go::after{content:" →"}

/* forms */
/* Fără plafon propriu: se oprea la 720px sub un titlu a cărui linie mergea până la 952,
   deci marginea dreaptă ieșea zimțată. Câmpurile stau perechi, nu întinse la infinit. */
.form{display:grid;gap:16px}
.form label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.form .req{color:var(--stop)}
.form input,.form textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;
  color:var(--ink);background:var(--card);border:1.5px solid var(--rule-strong);border-radius:2px}
.form input:focus,.form textarea:focus{outline:2px solid var(--focus);outline-offset:2px;
  border-color:var(--focus)}
.form textarea{resize:vertical;min-height:140px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
/* The honeypot must be invisible without being display:none — some bots skip fields that
   are not rendered at all, which would defeat the point of having it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{border:1px solid var(--card-edge);background:var(--card);padding:16px 18px;
  border-left:4px solid var(--none);margin-bottom:20px}
.notice p,.notice ul{margin:0}
.notice ul{padding-left:18px}
.notice--ok{border-left-color:var(--ok)}
.notice--bad{border-left-color:var(--stop)}

/* figures and quotes */
/* Patru cifre: 4 → 2 → 1. Niciodată 3, fiindcă 3 coloane cu 4 elemente lasă o gaură de
   DOUĂ celule pe al doilea rând — se vedea între 640 și 768px. 2×2 e plin. */
.figures{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:820px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.figures{grid-template-columns:1fr}}
.figures li{background:var(--card);padding:22px 20px;display:grid;gap:4px}
.figures b{font-family:"ECS Display",Georgia,serif;font-size:30px;font-weight:400;color:var(--brand);
  line-height:1.1}
.figures span{font-size:13px;color:var(--ink-2)}
.quotes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quotes li{background:var(--card);border:1px solid var(--card-edge);padding:22px;
  border-top:3px solid var(--accent)}
.quotes blockquote{margin:0 0 12px;font-size:15px;color:var(--ink-2);line-height:1.6}
.quote-by{margin:0;font-size:13.5px}

/* document lists */
.documents-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule)}
.documents-list li{background:var(--paper);padding:12px 14px;display:flex;gap:12px;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.documents-list a{font-weight:600;text-underline-offset:3px}
.documents-list small{color:var(--ink-3);font-size:12.5px}
.doc-archive summary{cursor:pointer;font-size:14px;color:var(--ink-3);padding:10px 0}
.doc-archive summary:hover{color:var(--ink-2)}

/* grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule)}
.cards > *{background:var(--paper);padding:20px}
.cards .code{font-family:"ECS Mono",monospace;font-weight:500;font-size:15px;color:var(--accent);
  letter-spacing:.03em}
.cards p{margin:0;font-size:14px;color:var(--ink-2)}
.cards .std{margin-top:10px;font-family:"ECS Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.cols > * > h3{border-top:2px solid var(--brand);padding-top:12px}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.contact-grid dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:4px}
.contact-grid dd{margin:0;font-size:15px}
.contact-grid a{text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.contact-grid a:hover{border-color:var(--ink)}

.documents{margin-top:36px;border-top:1px solid var(--rule);padding-top:24px}
.documents h2{margin-bottom:14px}
.documents ul{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule)}
.documents li{background:var(--paper);padding:12px 14px;display:flex;gap:10px;
  justify-content:space-between;flex-wrap:wrap}
.documents li a{font-weight:600;text-underline-offset:3px}
.documents li small{color:var(--ink-3)}

/* news — a dated list, not cards: these are register-of-record notices, and a date
   the reader can scan matters more than decoration. */
.news{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule)}
.news li{background:var(--paper);padding:16px 0 16px 0;display:grid;
  grid-template-columns:130px 1fr;gap:20px;align-items:baseline}
/* Sub 640px coloana fixă de 130px lăsa textului 192px din 342 — o știre scurtă ieșea pe
   treisprezece rânduri. Măsurat: 192 → 342px, iar lista scade de la 1413px la 1024px. */
@media (max-width:640px){
  .news li{grid-template-columns:1fr;gap:4px}
  .news time{font-size:12px}
}
.news time{font-family:"ECS Mono",monospace;font-size:12.5px;color:var(--ink-3);
  letter-spacing:.03em;white-space:nowrap}
.news p{margin:0;color:var(--ink-2);font-size:14.5px}
.linklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.linklist a{font-weight:600;text-underline-offset:3px}
.steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:1px;
  background:var(--rule)}
.steps li{background:var(--paper);padding:18px 0 18px 52px;position:relative}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:18px;
  font-family:"ECS Mono",monospace;font-size:12.5px;color:var(--brand);
  border:1.5px solid var(--brand);width:28px;height:28px;display:grid;place-items:center}
.steps h3{margin:0 0 4px}
.steps p{margin:0;color:var(--ink-2);font-size:14.5px}

.foot{border-top:1px solid var(--rule);padding-block:24px 40px;color:var(--ink-3);font-size:13px}
.foot .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.foot .right{margin-left:auto}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.foot-nav a{color:var(--ink-3);text-decoration:none}
.foot-nav a:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .fields div{grid-template-columns:1fr;gap:3px}
  .stamp{width:84px;height:84px}
}
@media (prefers-reduced-motion:no-preference){
  .verdict,.miss{animation:settle .26s cubic-bezier(.2,.9,.3,1.1) both}
  @keyframes settle{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* Status colour lives in a class, not an inline style: the site sends a strict CSP
   without 'unsafe-inline', which silently drops style attributes — and the verdict's
   colour IS the signal, so losing it turns every result grey. */
.is-valid{--vc:var(--ok)}
.is-suspendat{--vc:var(--warn)}
.is-retras,.is-expirat{--vc:var(--stop)}
.is-neclar{--vc:var(--none)}

/* small utilities, replacing what were inline styles */
.t-sm{font-size:14.5px}
.t-xs{font-size:13.5px;color:var(--ink-3)}
.section--tight{padding-block:8px 52px}
.lede--flush{margin:0;max-width:none}

/* Harta sediului — SVG inline, desenat din date OpenStreetMap. Vezi templates/_map.php
   pentru de ce nu e iframe și de ce nu e fișier extern.
   Culorile vin din aceiași tokeni ca restul site-ului, deci harta nu e o insulă vizuală. */
/* Plafon de lățime, nu întindere: viewBox-ul e fix (760×430), desenat la scara aia, deci
   pe o coloană de 1152px harta devine un dreptunghi de 652px înălțime cu foarte puține
   străzi în el. La scara nativă densitatea arată cum a fost desenată.
   Un zoom REAL înseamnă regenerat din Overpass cu atribuirea repoziționată — creditul ODbL
   stă la 752,422, deci o tăiere de viewBox l-ar scoate din cadru, iar atribuirea e
   obligatorie, nu decorativă. */
.map-wrap{border:1px solid var(--card-edge);background:var(--paper-2);overflow:hidden;
  max-width:820px}
.map{display:block;width:100%;height:auto}
.map-label{
  font-family:"ECS Sans",ui-sans-serif,system-ui,sans-serif;font-size:11px;
  fill:var(--ink-3);text-anchor:middle;dominant-baseline:middle;
  /* Conturul e ce face eticheta lizibilă peste linia străzii, fără o casetă opacă
     care ar acoperi harta. */
  paint-order:stroke fill;stroke:var(--paper-2);stroke-width:3.5px;stroke-linejoin:round;
}
.map-here{
  font-family:"ECS Sans",ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:600;
  fill:var(--brand);text-anchor:middle;
  paint-order:stroke fill;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;
}
.map-credit{
  font-family:"ECS Sans",ui-sans-serif,system-ui,sans-serif;font-size:10px;
  fill:var(--ink-3);text-anchor:end;opacity:.75;
}
.map-foot{
  display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  margin:10px 0 0;font-size:14px;color:var(--ink-3);
}
.map-foot a{color:var(--brand)}
.map-street{
  font-family:"ECS Sans",ui-sans-serif,system-ui,sans-serif;font-size:11.5px;
  fill:var(--ink-2);text-anchor:middle;
  paint-order:stroke fill;stroke:var(--paper-2);stroke-width:4px;stroke-linejoin:round;
}

/* Consimțământ pentru cookie-uri. Macheta aprobată 2026-08-24.
   Bara e `position:fixed` jos: nu împinge conținutul și nu acoperă antetul. Nu blochează
   pagina — un zid modal peste conținut e ce împinge oamenii să apese „Accept" ca să scape,
   iar un accept dat ca să scapi nu e consimțământ. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--card);border-top:3px solid var(--brand);
  box-shadow:0 -8px 24px -14px rgba(19,23,34,.35);
}
.consent[hidden]{display:none}
.consent-inner{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding-block:18px}
.consent-inner--panel{display:block;padding-block:20px;max-height:70vh;overflow-y:auto}
.consent-text{flex:1 1 340px;min-width:240px}
.consent-text strong{display:block;font-size:15.5px;margin-bottom:4px}
.consent-text p{font-size:14px;color:var(--ink-2);margin:0;max-width:62ch}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.consent-actions--panel{margin-top:16px}
.consent-h{font-size:15.5px;margin:0 0 14px;font-weight:600;font-family:inherit}
/* „Refuz" cu aceeași mărime ȘI același contur ca „Accept" — 1.5px, ca `.btn`. Scria 1px, deci
   comentariul care promitea contururi identice mintea și diferența chiar se vedea. Prinsă la
   review-ul adversarial din 2026-08-24.
   Diferă doar umplerea, care spune care e acțiunea principală, nu care e permisă. */
.btn--ghost{background:var(--card);color:var(--brand);border:1.5px solid var(--brand)}
.btn--plain{
  background:transparent;border-color:transparent;color:var(--ink-3);font-weight:400;
  text-decoration:underline;text-underline-offset:3px;padding-inline:6px;
}
.consent-row{display:flex;gap:16px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--rule)}
.consent-row:first-of-type{border-top:none;padding-top:0}
.consent-row-main{flex:1}
.consent-row-main strong{display:block;font-size:14.5px;margin-bottom:2px}
.consent-row-main span{display:block;font-size:13.5px;color:var(--ink-3)}
.consent-tech{font-family:"ECS Mono",ui-monospace,monospace;font-size:12px;margin-top:5px}
.consent-pill{
  font-family:"ECS Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:.3em .6em;border-radius:3px;white-space:nowrap;
  background:#E6F2EC;color:var(--ok);align-self:flex-start;
}
.consent-toggle{
  width:44px;height:25px;border-radius:13px;background:var(--rule-strong);
  position:relative;flex:none;border:none;cursor:pointer;margin-top:2px;
  transition:background .15s ease;
}
.consent-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;transition:left .15s ease;
}
.consent-toggle[aria-checked="true"]{background:var(--brand)}
.consent-toggle[aria-checked="true"]::after{left:22px}
.consent-toggle:focus-visible,.btn--ghost:focus-visible,.btn--plain:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .consent-toggle,.consent-toggle::after{transition:none}
}
.foot-consent{
  background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.foot-consent[hidden]{display:none}
.foot-copy{margin-top:14px;color:var(--ink-3)}
@media (max-width:640px){
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1 1 auto}
}
/* Waze primul și mai apăsat: pe telefon el pornește navigația, celelalte doar arată locul. */
.map-go{font-weight:600}