:root {
    --sc-canvas:     #0B1510;
    --sc-surface:    #13221A;
    --sc-ink:        #F1EEE3;
    --sc-ink-soft:   #B7C4B0;
    --sc-accent:     #BFD98A;
    --sc-accent-ink: #0B1510;
    --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sc-font-text:    "Geist", system-ui, sans-serif;
    --sc-shadow-color: 150 40% 3%;
    --plate: color-mix(in oklab, #0B1510 84%, transparent);
    --copy-sus: 6rem;
  }

  /* ---------- chrome: wordmark, shop links, coș ---------- */
  .bar {
    position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
    padding: var(--sc-4) var(--sc-gutter);
    background: none;
  }
  /* banda de sus coboara sub bara: pe cadrele cu cer, meniul statea pe alb */
  .bar::before {
    content: ""; position: absolute; inset: 0 0 -76px 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 52%, transparent) 46%,
      transparent 100%);
  }
  .bar__brand { position: relative; display: flex; align-items: center; gap: var(--sc-3); color: var(--sc-ink); text-decoration: none; }
  /* Balta de lumina de sub sigla a disparut odata cu sigla rastru: un desen
     alb se vede pe orice cadru, deci nu mai are nevoie de nimic sub el.
     Umbra lui proprie ii ajunge.
     Din 15.10.2026 aici sta sigla adevarata a clientului, varianta alba a
     lockupului orizontal scris de `tools/logo.py`, aceeasi cu cea din
     `inc/chrome.php` de pe restul site-ului. Pe lumea filmata nu intra
     niciodata varianta in culori: verdele inchis al frunzelor s-ar pierde in
     frunzisul din cadru. */
  .bar__sigla { display: block; flex: none; height: 46px; width: auto; filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--sc-canvas) 70%, transparent)); }
  /* Sigla rama la fel cand cursorul trece peste ea. Fara regula asta,
     `a:hover { color: var(--cerneala) }` din `mg.css` o lua pe `.bar__brand`
     si cuvintele „Mara Garden” treceau din crem in verde-inchis, adica
     dispareau peste lumea filmata. Specificitatea se calculeaza: `a:hover` e
     (0,1,1) si bate `.bar__brand`, care e (0,1,0); `.bar__brand:hover` e
     (0,2,0) si o bate pe ea. Semnul isi tine albul din regula lui proprie.
     Cerere Radu, 13.10.2026; defectul era de dinaintea siglei noi, fiindca
     `mg.css` se incarca si pe pagina de start, inaintea foii ei. */
  .bar__brand:hover, .bar__brand:focus-visible { color: var(--sc-ink); }
  .bar nav { display: flex; align-items: center; gap: var(--sc-5); }
  .bar nav a { color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; }
  .bar nav a:hover { color: var(--sc-accent); }
  .bar .cos {
    display: inline-flex; align-items: center; gap: var(--sc-2);
    padding: 0.5rem 0.95rem; border-radius: var(--sc-r-pill);
    border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
  }
  .bar .cos b { font-weight: 600; color: var(--sc-accent); }
  .bar .tel { font-variant-numeric: tabular-nums; }
  /* Iconita sta pe acelasi rand cu textul si nu se micsoreaza cand bara se
     stramteaza: `flex: none`, altfel pe 390 px telefonul o turteste. */
  .bar nav a { display: inline-flex; align-items: center; gap: 0.42rem; }
  .bar nav a svg { flex: none; opacity: 0.92; }

  /* Meniul paginii de start, cerere Radu 13.10.2026: „in header, pe mobil, nu
     apare meniul in format hamburger”. Pana acum cele cinci legaturi se
     ascundeau sub 860 px cu `display: none` si nu exista NICIO cale de a le
     deschide: pe telefon pagina de start arata numai sigla, numarul si coșul.
     Paginile de prezentare au hamburger de la inceput, deci se imprumuta
     tiparul de acolo (`.bara__buton` plus `.meniu[hidden]` din `mg.css`):
     buton cu `aria-expanded` si `aria-controls`, lista cu `hidden`, iar
     numarul de telefon ajunge in interiorul meniului deschis, exact cum a
     cerut Radu, deci bara de sus rama cu trei piese pe 360 px. */
  .bar__meniu { display: flex; align-items: center; gap: var(--sc-5); margin: 0; padding: 0; list-style: none; }
  .bar__burger {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex: none;
    border-radius: var(--sc-r-pill);
    border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
    background: none; color: var(--sc-ink); cursor: pointer;
  }
  .bar__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Submeniul „Magazin” in antetul paginii de start (cerere Radu, 16.10.2026:
     meniul paginilor secundare sa fie afisat si pe pagina de start).

     Clasele sunt chiar cele din `mg.css`, fiindca marcajul il scrie aceeasi
     functie, `mg_meniu_elemente()`. Dar `mg.css` se incarca si aici, inaintea
     foii acesteia, si regulile lui sunt scrise pentru antetul ALB si pentru
     pragul lui de 60.0625rem, nu pentru cel de 861 px al paginii de start:
     intre 861 si 960 px panoul lui ar fi ieșit lista indentata in mijlocul
     unui rand orizontal. De aceea regulile de mai jos se leaga de `.bar`:
     `.bar .submeniu` cantareste (0,2,0) si bate `.submeniu`, (0,1,0), la orice
     ordine de incarcare. Specificitatea se calculeaza, nu se presupune. */

  /* Sub 861 px panoul meniului e deja vertical, deci submeniul sta deschis in
     el, ca lista indentata, fara chevron: pe o suprafata de atins nu exista
     trecere cu cursorul, iar un al doilea buton pe fiecare element ar cere
     doua atingeri pentru un drum pe care panoul il arata oricum. */
  .bar .submeniu { margin: 0; padding: 0 0 0.25rem 0.9rem; list-style: none; }
  .bar .submeniu a { border-top: 0; opacity: 0.86; }
  .bar .meniu__chevron { display: none; }

  @media (min-width: 861px) {
    .bar .meniu__cu-sub { position: relative; }
    .bar .meniu__chevron { display: inline-block; flex: none; transition: transform 0.15s; }
    .bar .meniu__cu-sub:hover .meniu__chevron,
    .bar .meniu__cu-sub:focus-within .meniu__chevron { transform: rotate(180deg); }
    /* Panoul e OPAC, nu translucid: sub bara curge filmul, iar un panou
       translucid peste cadre in mișcare face eticheta ilizibila.
       `top: 100%` fara interval, cu captuseala in panou: un interval intre
       eticheta si panou rupe trecerea cursorului si panoul se inchide intre
       ele. */
    .bar .submeniu {
      display: none; position: absolute; top: 100%; left: -1rem; z-index: 60;
      padding: 0.85rem 1rem;
      grid-template-columns: repeat(2, minmax(10.5rem, 1fr)); gap: 0.1rem 1.4rem;
      background: var(--sc-canvas);
      border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent);
      border-radius: var(--sc-r-md);
      box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55);
    }
    .bar .meniu__cu-sub:hover > .submeniu,
    .bar .meniu__cu-sub:focus-within > .submeniu { display: grid; }
    .bar .submeniu a { min-height: 40px; white-space: nowrap; opacity: 1; }
  }
  /* A treia coloana abia cand incape, ca in `mg.css`. */
  @media (min-width: 1248px) {
    .bar .submeniu { grid-template-columns: repeat(3, minmax(10.5rem, 1fr)); }
  }
  @media (prefers-reduced-motion: reduce) { .bar .meniu__chevron { transition: none; } }

  /* ---------- semnătura: frunza anotimpurilor (harta lumii) ---------- */
  .leaf {
    position: fixed; z-index: var(--sc-z-chrome); left: var(--sc-gutter); top: 50%;
    translate: 0 -50%; display: grid; gap: var(--sc-4); justify-items: start;
  }
  /* Spalarea din jurul hartii anotimpurilor NU mai e aici. Era o cutie lipita
     de element, iar o cutie lasa o dunga: vezi nota de la scrimuri. Lumina de
     sub lista vine acum din marginea ecranului, prin `.scrim--lead/--trail`. */
  .leaf svg { width: 54px; height: 104px; overflow: visible; }
  .leaf .lf-fill { fill: var(--sc-accent); opacity: 0.16; transition: fill var(--sc-d-slow) linear; }
  .leaf .lf-line { fill: none; stroke: var(--sc-accent); stroke-width: 1.4; stroke-linecap: round; }
  .leaf .lf-edge { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--yr, 0)); }
  .leaf .lf-vein { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; transition: stroke-dashoffset 900ms var(--sc-ease-out); }
  .leaf .lf-vein.on { stroke-dashoffset: 0; }
  .leaf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .leaf button {
    all: unset; cursor: pointer; display: flex; align-items: center; gap: var(--sc-2);
    font-size: var(--sc-t-xs); letter-spacing: 0.04em; color: var(--sc-ink-soft);
    padding: 3px 6px 3px 0; min-height: 24px;
  }
  .leaf button::before {
    content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.6;
    transition: width var(--sc-d-base) var(--sc-ease-out);
  }
  .leaf button[aria-current="true"] { color: var(--sc-ink); }
  .leaf button[aria-current="true"]::before { width: 28px; background: var(--sc-accent); opacity: 1; }
  .leaf button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

  /* ---------- copy over the world ---------- */
  .wcopy { max-width: min(36rem, 46vw); }
  /* Spalarea din spatele copy-ului NU mai e o cutie in jurul blocului. Urma
     blocul, deci avea margini, iar marginile se vedeau. Urca acum in scrimul
     de ecran, unde porneste din marginea ecranului. */
  .sc-copy--lead.wcopy { left: calc(var(--sc-gutter) + 132px); }
  .wcopy:is(.sc-copy--lead, .sc-copy--trail) {
    top: var(--copy-sus);
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .wcopy .plants { flex: 0 1 auto; min-height: 0; }
  /* Fotografia cartonasului are un plafon in `svh`, nu `flex: 1`: cu
     flex-grow, imaginea se intindea pe toata inaltimea cartonasului si
     raportul 4/5 al machetei devenea 1/2 pe un ecran inalt. Plafonul nu
     atinge nimic pe o fereastra obisnuita (34svh = 306 px la 900) si intra in
     joc numai cand chiar nu incape, unde decupeaza (`cover`), nu turteste. */
  .wcopy .plant img { max-height: 34svh; }
  /* Pretul se aseaza pe acelasi rand in toate cartonasele grilei. Fara asta el
     urmeaza numele, iar un nume care se rupe pe trei randuri (Cryptomeria
     japonica Globosa Nana) il impinge cu 7 px mai jos decat la vecinii lui,
     deci trei preturi pe trei inaltimi. `margin-top: auto` il lipeste de baza;
     `flex` e pus pe TEXT, nu pe fotografie: pe fotografie a fost incercat o
     data si a stricat raportul 4/5 al machetei. */
  /* Asezarea cartonasului (flex, pretul lipit de baza) sta in blocul
     „plante reale” de mai jos, nu aici: scrisa aici, pierdea pe ordine in
     fata lui `.plant { display: grid }` din acel bloc, la aceeasi
     specificitate, si nu facea nimic. */
  h1, h2 { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
  /* Titlul are si un plafon in `svh`: pe o fereastra joasa, doua randuri de
     titlu plus trei cartonase nu incap intre bara si ancora de jos, iar
     blocul creste in sus, adica inspre afara ecranului. */
  h1 { font-size: min(clamp(3rem, 1.8rem + 4.6vw, 6.2rem), 11svh); line-height: 0.98; }
  h2 { font-size: min(clamp(2.3rem, 1.5rem + 3vw, 4.4rem), 8.4svh); line-height: 1.02; }
  h1 em, h2 em { font-style: italic; color: var(--sc-accent); }
  .wcopy p { margin: var(--sc-4) 0 0; max-width: 44ch; color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.62; letter-spacing: 0.002em; text-wrap: pretty; }
  .wcopy .soft { color: var(--sc-ink-soft); }
  .acts { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
  .btn {
    display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 48px;
    padding: 0 1.4rem; border-radius: var(--sc-r-pill); font-weight: 500; text-decoration: none;
    font-size: var(--sc-t-sm); transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-base);
  }
  .btn:active { transform: scale(0.97); }
  .btn--fill { background: var(--sc-accent); color: var(--sc-accent-ink); }
  .btn--line { color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-ink) 58%, transparent); background: color-mix(in oklab, var(--sc-canvas) 62%, transparent); }
  .btn--line:hover { border-color: var(--sc-accent); }

  /* plante reale, pe plăcuță solidă: fotografia de produs nu stă pe film */
  .plants { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-3); margin-top: var(--sc-5); }
  .plant {
    display: flex; flex-direction: column; text-decoration: none; color: var(--sc-ink);
    background: var(--plate); border-radius: var(--sc-r-md); overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent);
    box-shadow: var(--sc-e2);
    transition: border-color var(--sc-d-base), transform var(--sc-d-base) var(--sc-ease-out);
  }
  .plant:hover { border-color: var(--sc-accent); transform: translateY(-3px); }

  /* Culoarea textului la trecerea cursorului, reluată explicit.
     `mg.css`, foaia globală a temei, are `a:hover { color: var(--cerneala) }`:
     o cerneală închisă, gândită pentru paginile pe crem. Pagina de start are
     fundalul închis, deci regula aceea stinge exact textul peste care stă
     cursorul, iar denumirea plantei dispare în plăcuță. `a:hover` cântărește
     (0,1,1), mai mult decât o clasă singură, deci componentele de aici își
     reiau culoarea cu un selector de clasă plus pseudo-clasă, care cântărește
     (0,2,0). Măsurat pe 16.10.2026 pe site-ul viu: cele nouă cartonașe de
     plantă și butonul cu contur erau închis pe închis; `.cats a`, `.contact a`
     și `.bar nav a` nu sunt atinse, fiindcă ele cântăresc deja destul. */
  .plant:hover, .plant:focus-visible { color: var(--sc-ink); }
  .btn--line:hover, .btn--line:focus-visible { color: var(--sc-ink); }
  .btn--fill:hover, .btn--fill:focus-visible { color: var(--sc-accent-ink); }
  .plant img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
  /* Fotografia e singura parte care cedeaza cand blocul nu incape in
     inaltimea data de `top` plus `bottom` ale lui `.sc-copy--lead`. */
  .plant img { flex: 0 1 auto; min-height: 0; }
  .plant div { padding: var(--sc-3) var(--sc-3) var(--sc-4); display: grid; gap: 2px; }
  /* Textul nu se strange niciodata si creste cat trebuie: asa pretul sta pe
     acelasi rand in toate cartonasele grilei, si la o denumire care se rupe
     pe trei randuri („Cryptomeria japonica Globosa Nana”). */
  .plant > div { flex: 1 0 auto; display: flex; flex-direction: column; }
  .plant > div b { margin-top: auto; }
  .plant i { font-family: var(--sc-font-display); font-size: 1.12rem; line-height: 1.12; }
  .plant small { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); line-height: 1.35; }
  .plant b { margin-top: var(--sc-2); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
  .more { display: inline-block; margin-top: var(--sc-4); color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 500; text-underline-offset: 4px; }
  .more:hover { color: var(--sc-accent); }

  .cats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sc-2); margin-top: var(--sc-5); }
  .cats a {
    padding: 0.6rem 1rem; border-radius: var(--sc-r-pill); text-decoration: none; color: var(--sc-ink);
    background: var(--plate); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent);
    font-size: var(--sc-t-sm);
  }
  .cats a:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

  /* ultima plasă de contrast: textul clar peste punctele de lumină din frunziș.
     Umbra e sub pragul vizibil pe fundal întunecat și salvează literele pe cer. */
  .bar nav a, .leaf button, .leaf .now,
  h1, h2, .wcopy p, .more, .svc li b, .svc li span {
    text-shadow: 0 1px 2px color-mix(in oklab, var(--sc-canvas) 62%, transparent),
                 0 2px 16px color-mix(in oklab, var(--sc-canvas) 52%, transparent);
  }
  /* titlul poartă un halou mai larg: la 6rem, literele acoperă singure petele de lumină */
  /* Cele trei randuri ale titlului de pe primul picior. Blocuri, nu `<br>`. */
  #h-hero > span { display: block; }
  h1, h2 {
    text-shadow: 0 1px 3px color-mix(in oklab, var(--sc-canvas) 70%, transparent),
                 0 4px 30px color-mix(in oklab, var(--sc-canvas) 62%, transparent),
                 0 0 70px color-mix(in oklab, var(--sc-canvas) 46%, transparent);
  }

  /* Scrimuri, frați ai copy-ului, nu copii.
     REGULA, de geometrie, nu de gust: fiecare strat porneste dintr-o margine a
     ECRANULUI si ajunge la transparent inainte de marginea opusa. Altfel se
     vede cutia. `radial-gradient(62% 56% at 34% 50%)` atinge transparentul la
     34% − 62% = −28%, adica in afara cutiei: pe marginea din stanga ramane la
     ~42% opacitate si taie imaginea cu o dunga dreapta. Asa aratau cele doua
     spalari de dinainte, cea a hartii anotimpurilor si cea a blocului de text:
     trei dungi drepte peste cadru, una verticala la 8 px, una la 112 px si una
     orizontala sub bara. Spalarile lor au urcat aici, in straturile 3 de mai
     jos, unde incep din marginea ecranului si se pierd difuz spre interior. */
  /* Cutia scrimului urca 14vh PESTE marginea de sus a ecranului. Motivul e
     masurat: `main` incepe la 24 px, deci cutia scrimului statea la top = 18,
     nu la 0. Perna de sub titlu e plina pe marginea ei de sus, fiindca acolo
     marginea trebuie sa coincida cu marginea ecranului, si asa lasa o dunga
     orizontala de 2 px la y = 18, pe 60% din latime. Cu cutia ridicata, muchia
     ei de sus cade in afara ecranului, unde nu se vede. Jos ramane la 0,
     fiindca spalarile de jos sunt ancorate in marginea de jos a ecranului. */
  .scrim { position: absolute; inset: -14vh 0 0 0; pointer-events: none; }
  .scrim--lead  {
    background:
      linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 46%, transparent) 26%, transparent 60%),
      radial-gradient(120% 95% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 38%, transparent 72%),
      radial-gradient(96% 64% at 2% 40%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 42%, transparent 82%);
  }
  .scrim--trail {
    background:
      linear-gradient(270deg, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 46%, transparent) 26%, transparent 60%),
      radial-gradient(120% 95% at 100% 100%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 38%, transparent 72%),
      radial-gradient(96% 64% at 98% 40%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 42%, transparent 82%);
  }
  .scrim--foot  { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 48%, transparent 88%); }

  /* ---------- finalul: sosirea la casă ---------- */
  .finale { inset: auto 0 0 0 !important; left: 0 !important; right: 0; max-width: none !important; padding: 0 var(--sc-gutter) var(--sc-5) calc(var(--sc-gutter) + 132px); }
  .finale__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sc-7); align-items: end; }
  .svc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
  .svc li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-4); padding-top: var(--sc-3); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
  .svc b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
  .svc span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
  .contact { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
  .contact a { color: var(--sc-ink); text-underline-offset: 4px; }
  .foot {
    margin-top: var(--sc-6); padding-top: var(--sc-4); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-3);
    font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  }
  .foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); }
  .foot a { color: var(--sc-ink-soft); text-decoration: none; }
  .foot a:hover { color: var(--sc-ink); }

  /* ---------- frunzele care cad, doar în toamnă ---------- */
  .fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
  .fall svg { position: absolute; top: -8vh; width: 26px; height: 26px; opacity: 0; will-change: transform, opacity; }

  @media (max-width: 860px) {
    :root { --copy-sus: 10.5rem; }
    .leaf { top: auto; bottom: auto; top: 76px; translate: none; left: var(--sc-gutter); grid-template-columns: auto auto; align-items: center; gap: var(--sc-2); }
    .leaf svg { width: 22px; height: 42px; }
    .leaf ol { display: none; }
    .leaf .now { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink); letter-spacing: 0.04em; }
    /* Pe piciorul final pastila iese din drumul titlului. Vezi comentariul
       de la `laFinal` din script. */
    :root.sc-final .leaf { display: none; }
    /* Lista iese din rândul barei si devine panou sub ea. Bara e `fixed`,
       deci e si bloc de referinta pentru `position: absolute`. */
    .bar__burger { display: inline-flex; }
    .bar__meniu {
      position: absolute; left: 0; right: 0; top: 100%;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 0.2rem var(--sc-4) 0.7rem;
      /* Panoul se deruleaza in el insusi. Masurat pe 375x812 dupa ce meniul a
         primit toate cele sase intrari plus cele douasprezece categorii din
         submeniu: 855 px de panou intr-o fereastra de 812, cu numarul de
         telefon la 919, adica dedesubtul ecranului. Panoul e `absolute` intr-o
         bara `fixed`, deci nu se duce cu derularea paginii: fara limita de
         aici, ultimele intrari nu erau inaccesibile dintr-o scapare, erau
         inaccesibile prin construcție. Acelasi tipar ca in `mg.css` pentru
         paginile secundare; 76 px e inaltimea barei de aici.
         `dvh` inaintea lui `vh`: pe telefon bara de unelte a browserului intra
         si iese, iar `100vh` rama la inaltimea cea mai mare, deci panoul ar fi
         depasit ecranul oricum. Randul cu `vh` sta dedesubt ca rezerva. */
      max-height: calc(100vh - 76px);
      max-height: calc(100dvh - 76px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: color-mix(in oklab, var(--sc-canvas) 96%, transparent);
      border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent);
    }
    .bar__meniu[hidden] { display: none; }
    /* `.bar nav a` e `inline-flex`, deci legatura se stramta la latimea
       literei si linia de despartire ieșea cat textul, nu cat panoul.
       Verificat pe captura, apoi masurat: legaturi de 42, 55, 48 px intr-un
       panou de 358.
       Doua clase si un tip, adica (0,2,1): regula de mai jos din acelasi bloc,
       `.bar nav a, .foot a`, are (0,1,2) si vine DUPA, deci la specificitate
       egala ar fi câștigat ea si legatura ar fi rama `inline-flex`.
       Specificitatea se calculeaza, nu se presupune. */
    .bar .bar__meniu a { display: flex; }
    .bar__meniu a { border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
    /* Pastila anotimpului sta `fixed` la 76 px de sus, adica exact acolo unde
       se deschide panoul, si are acelasi `z-index` ca bara. Fiind mai jos in
       marcaj, se desena PESTE prima legatura: „Primavara” intra in „Plante”.
       Masurat pe captura, nu presupus. Cat timp meniul e deschis, pastila nu
       are ce spune, deci iese. */
    :root:has(.bar__meniu:not([hidden])) .leaf { display: none; }
    /* Si bannerul de cookie-uri, din acelasi motiv si masurat la fel: `fixed`
       jos, `z-index: 70`, 263 px pe telefon, adica peste ultima intrare a
       panoului, numarul de telefon. Se intoarce la inchiderea meniului. */
    :root:has(.bar__meniu:not([hidden])) .cookie { display: none; }
    /* pe 390 px antetul se rupea pe două rânduri, iar numărul de telefon se tăia în două */
    .bar { gap: var(--sc-3); padding-left: var(--sc-4); padding-right: var(--sc-4); }
    .bar nav { gap: var(--sc-3); }
    .bar__brand { gap: var(--sc-2); }
    .bar__sigla { height: 36px; }
    /* Numarul nu mai sta pe rândul barei, ci in meniu, deci nu mai are motiv
       sa fie mai mic decât celelalte legaturi din lista. */
    .bar .tel { white-space: nowrap; }
    /* Suprafata de atins pe telefon: legaturile din bara si din subsol aveau
       19-20 px de inaltime, adica o tinta pe care degetul mare o rateaza din
       doua incercari. Litera rama cum e, cutia creste. */
    /* Cele 44 px rama pe legaturile din meniul barei, unde sunt pe un rând
       singur si unde degetul chiar le vaneaza. In subsol se despart, mai jos:
       acolo sunt sapte legaturi legale pe trei rânduri, iar 44 px pe fiecare
       fac din rândul de drepturi de autor un bloc mai inalt decat tot ce scrie
       in el. */
    .bar nav a, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
    .bar .cos { white-space: nowrap; padding-inline: 0.7rem; }
    /* Pe telefon spalarile aveau aceeasi problema, cu cutii si mai late decat
       continutul: una in jurul hartii, una in jurul blocului de text. Au urcat
       si ele in scrim, unde sunt benzi pe toata latimea. */
    .sc-copy--lead.wcopy, .wcopy { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; }
    h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 3.4rem); }
    h2 { font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem); }
    .plants { gap: var(--sc-2); }
    .plant div { padding: var(--sc-2); }
    .plant i { font-size: 0.95rem; }
    .plant small { display: none; }
    .cats { justify-content: flex-start; }
    .finale { padding-left: var(--sc-gutter); padding-bottom: var(--sc-4); }
    .finale__grid { grid-template-columns: 1fr; gap: var(--sc-4); }
    .svc { gap: var(--sc-3); }
    .svc li { grid-template-columns: 1fr; gap: 1px; padding-top: var(--sc-2); }
    .svc b { font-size: 1.15rem; }
    .svc span { font-size: var(--sc-t-xs); line-height: 1.42; }
    .finale .acts { margin-top: var(--sc-4); }
    .finale .contact { gap: 0.15rem; }
    /* Subsolul paginii de start, cerere Radu 13.10.2026, a doua rundă:
       „meniul din subsol încă are spațierea prea mare între rânduri”, adică
       rândul cu „© 2026 Mara Garden Concept SRL · CUI 43292758”.

       Masurat inainte: `.foot` 192 px pe 390 px de latime, din care 148 numai
       navigatia: sapte legaturi legale pe trei rânduri, fiecare intr-o cutie
       de 44 px, cu 8 px intre rânduri. Deci 52 px intre centrele a doua
       rânduri, pentru un text de 14 px: 33 px de gol intre doua rânduri de
       litere.

       Norma 2.5.8 din WCAG 2.2 cere 24 px intre centre, nu 52. Cutia scade la
       30 px si spatiul dintre rânduri la 2, deci 32 px intre centre: opt px
       peste prag, iar golul dintre doua rânduri de litere scade de la 33 la
       13. Legaturile de subsol sunt si ele legaturi dintr-o lista de text, nu
       butoane de acțiune, deci confortul de 44 px nu are acelasi rost ca in
       meniu.

       `margin-top` de deasupra subsolului scade de la 2rem la 1rem: pe telefon
       separa doua blocuri care oricum au o linie intre ele.

       A doua jumatate a cererii — „titlul secțiunii din partea de sus a
       ecranului este afișat sub headerul site-ului” — se repara TOT de aici,
       si nu e un defect separat. `.finale` e ancorata jos (`inset: auto 0 0 0`)
       si creste in sus, deci fiecare px pe care il ia subsolul il ia titlul de
       sub bara. Masurat inainte: titlul acoperit cu 5 px pe 390 si cu 25 px pe
       360, unde se rupe pe mai multe rânduri. Inaltimea pe care o eliberam
       aici o primeste titlul inapoi. Se verifica cu `tools/diag-foot.mjs`, care
       masoara si suprapunerea. */
    .foot { gap: var(--sc-2); padding-top: var(--sc-3); margin-top: var(--sc-4); }
    .foot a { min-height: 30px; }
    .foot nav { gap: 2px var(--sc-4); }
    /* Doua benzi verticale pe toata latimea, una de jos si una de sus: pe
       toata latimea nu exista margine laterala, deci nu exista dunga. Cea de
       sus tine harta anotimpurilor si titlul, care pe telefon stau amandoua
       sub bara. */
    .scrim--lead, .scrim--trail {
      background:
        linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 66%, transparent) 52%, transparent 82%),
        linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 42%, transparent 74%);
    }
  }
  /* Pe ecran lat lista e vizibila, desi poarta `hidden`: atributul se scoate
     si din JS, fiindca un element cu `hidden` rama in afara arborelui de
     accesibilitate chiar daca CSS il arata. */
  @media (min-width: 861px) {
    .leaf .now { display: none; }
    .bar__meniu[hidden] { display: flex; }
    .bar__burger { display: none; }
  }
  /* ============== pe telefon pagina iese din film si devine document =======
     Cerere client prin Radu, 15.10.2026: pe mobil navigarea e greoaie pe
     pagina de start; se poate afisa mai fluid textul, fara sa depinda de
     fundal?

     Masurat inainte, pe pagina vie la 390x844: 4.622 px de derulare pentru
     sase blocuri de text, iar din 24 de ecrane citite din 200 in 200 px, 12
     aveau text intreg, 8 text prins la mijlocul tranzitiei (opacitate intre
     0,07 si 0,59) si 4 niciun text. Cauza nu e viteza, e cuplarea: textul sta
     `fixed` si isi aprinde opacitatea dupa pozitia filmului, deci degetul muta
     pagina si pe ecran nu se schimba nimic, sau se schimba pe jumatate. Omul
     care deruleaza cu degetul se asteapta sa se miste ce vede, nu sa se
     aprinda altceva in acelasi loc.

     Deci sub 860 px zborul se opreste si fiecare anotimp devine o sectiune in
     flux, cu cadrul lui ca fotografie deasupra si textul pe fondul paginii.
     Textul nu mai sta niciodata peste imagine, deci scrimurile, umbra de text
     si haloul de sub titlu ies: existau numai ca sa-l salveze peste cadrele
     luminoase. Primul picior ramane film, fiindca e semnatura paginii si tot
     ce vede omul in prima secunda; celelalte opt clipuri nu se mai cer deloc
     pe date mobile.

     DOUA lucruri care par detalii si nu sunt:

     1. Comutatorul e interogarea de media, nu o clasa pusa din script. O clasa
        s-ar fi pus din `acasa.js`, care se incarca in subsol, deci primul
        desen ar fi fost tot filmul si abia al doilea documentul: o fotografie
        pe tot ecranul care sare. Asa, asezarea e corecta de la prima octeta.
     2. Fiecare selector porneste de la `#main`. Nu e podoaba: regulile de
        dinaintea montarii din `scrollcraft.css`
        (`[data-sc-mode="worldflight"] [data-sc-segment]`, 0-2-0, si
        `[data-sc-copy] { opacity: 0 }`) le-ar fi batut pe ale mele la
        specificitate. Cu identificatorul in fata (1-x-x) castiga acestea,
        indiferent de ordinea in fisier. Consecinta buna: cu JavaScriptul picat
        pagina ramane un document lizibil, cu cadrele statice, in loc de un
        ecran gol. Specificitatea se calculeaza, nu se presupune.

     Care cadru la care sectiune, verificat pe cele noua postere:
       picior 1 (p-r1) erou      frunze verzi in contralumina, prim-plan
       picior 2 (p-g1) primavara camelie roz si arbore de Iuda infloriti
       picior 4 (p-g2) vara      hortensii albe si albastre, graminee
       picior 6 (p-g3) toamna    artarul japonez rosu, subiectul titlului
       picior 8 (p-g4) iarna     bile de buxus cu bruma si cedru albastru
       picior 9 (p-r5) final     tuia verde cu luminite, prim-plan cald
     Picioarele 3, 5 si 7 (p-r2, p-r3, p-r4) ies: repeta subiectul vecinului
     imediat, iar pe o fotografie de 390 px un cadru larg si fara subiect nu
     spune nimic. */
  @media (max-width: 860px) {
    /* Un singur flux pentru tot: invelisurile dispar ca cutii, nu ca
       continut. Fara `display: contents`, cele sase cadre ar fi ramas un bloc
       si tot textul altul, adica sase fotografii una peste alta urmate de
       toata pagina. Cu el, cadrele si sectiunile ajung surori in acelasi
       flex, deci `order` le poate intercala. */
    /* `margin-top: 24px` vine pe `main` din foaia site-ului si in zbor nu se
       vedea niciodata: scena era `fixed` si acoperea tot ecranul, inclusiv
       banda de deasupra ei. In flux eroul e in flux, deci decalajul devine o
       dunga inchisa de 24 px intre bara si marginea de sus a fotografiei.
       Masurat pe pagina vie la 390 px: `mainTop` 24, `eroulTop` 24. */
    #main { display: flex; flex-direction: column; background: var(--sc-canvas); margin-top: 0; }
    #main [data-sc-world], #main [data-sc-world-copy] { display: contents; }
    #main [data-sc-spacer] { display: none; }

    /* ---- cadrele ---- */
    #main [data-sc-segment] { display: none; position: relative; inset: auto; opacity: 1; }
    #main [data-sc-segment] > video { display: none; }
    #main [data-sc-segment] > img {
      position: relative; inset: auto; width: 100%; height: auto;
      aspect-ratio: 16 / 10; object-fit: cover; transform: none;
    }
    #main [data-sc-segment]:nth-child(1),
    #main [data-sc-segment]:nth-child(2),
    #main [data-sc-segment]:nth-child(4),
    #main [data-sc-segment]:nth-child(6),
    #main [data-sc-segment]:nth-child(8),
    #main [data-sc-segment]:nth-child(9) { display: block; }

    /* Eroul ramane film si isi pastreaza cadrul pe tot ecranul. 52svh, nu
       100svh: titlul trebuie sa fie vizibil fara nicio derulare, iar la 844 px
       de inaltime 52svh lasa 439 px pentru titlu, fraza si butoane. */
    #main [data-sc-segment]:nth-child(1) { height: 52svh; min-height: 290px; overflow: clip; }
    #main [data-sc-segment]:nth-child(1) > img,
    #main [data-sc-segment]:nth-child(1) > video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      aspect-ratio: auto; object-fit: cover;
    }
    #main [data-sc-segment]:nth-child(1) > video { display: block; z-index: 1; }

    /* ---- ordinea: cadru, text, cadru, text ---- */
    #main [data-sc-segment]:nth-child(1) { order: 1; }
    #main [data-sc-segment]:nth-child(2) { order: 3; }
    #main [data-sc-segment]:nth-child(4) { order: 5; }
    #main [data-sc-segment]:nth-child(6) { order: 7; }
    #main [data-sc-segment]:nth-child(8) { order: 9; }
    #main [data-sc-segment]:nth-child(9) { order: 11; }
    #main section[aria-labelledby="h-hero"]   { order: 2; }
    #main section[aria-labelledby="h-prim"]   { order: 4; }
    #main section[aria-labelledby="h-vara"]   { order: 6; }
    #main section[aria-labelledby="h-toamna"] { order: 8; }
    #main section[aria-labelledby="h-iarna"]  { order: 10; }
    #main section[aria-labelledby="h-final"]  { order: 12; }

    /* ---- textul, in flux ---- */
    #main section[data-sc-copy] {
      position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto;
      max-width: none; opacity: 1; transform: none; pointer-events: auto;
      display: block; text-align: left; will-change: auto;
      padding: var(--sc-5) var(--sc-gutter) var(--sc-7);
    }
    /* `.finale` isi ancoreaza marginile cu `!important`, fiindca pe desktop
       creste in sus din marginea de jos a ecranului. In flux nu mai are de ce. */
    #main section.finale {
      inset: auto !important; left: auto !important; right: auto !important;
      max-width: none !important; padding: var(--sc-5) var(--sc-gutter) var(--sc-6) !important;
    }
    /* Spalarile si frunzele care cad erau plase de contrast pentru text peste
       film. Nu mai exista text peste film. */
    #main .scrim, #main .fall { display: none; }
    /* Harta anotimpurilor arata unde ai ajuns IN zbor. Fara zbor nu are ce
       spune, iar pastila ei sta `fixed` exact peste primul rand de text. */
    .leaf { display: none; }
    /* Umbra de sub litere si haloul de sub titlu salvau textul pe cer. Pe
       fondul paginii sunt numai murdarie: o litera crem pe #0B1510 are
       contrast 13,6:1 fara niciun ajutor. */
    #main :is(h1, h2, .wcopy p, .more, .svc li b, .svc li span) { text-shadow: none; }

    /* Anul gradinii nu se pierde: fiecare sectiune isi tine culoarea de
       anotimp, aceeasi din `stops` din script, numai ca din foaie. In flux
       bucla care o interpola nu mai ruleaza, si nu are de ce: pe un document
       anotimpul nu mai e o pozitie, e locul unde ai ajuns cu cititul. */
    #main section[aria-labelledby="h-vara"]   { --sc-accent: rgb(141, 196, 118); }
    #main section[aria-labelledby="h-toamna"] { --sc-accent: rgb(232, 112, 70); }
    #main section[aria-labelledby="h-iarna"]  { --sc-accent: rgb(176, 208, 220); }
    #main section[aria-labelledby="h-final"]  { --sc-accent: rgb(235, 186, 112); }

    /* Bara e `fixed`, iar un document chiar ii curge pe dedesubt: in zbor nu
       se intampla niciodata, fiindca textul statea si el `fixed`, la 168 px de
       sus. Aici orice titlu ajunge, la derulare, exact sub sigla si sub coș.
       Masurat pe capturi: literele lui „Primavara, gradina incepe cu florile”
       treceau pe sub „Mara Garden”.

       Nu se repara cu spatiu: pe un document nu exista poziție la care
       conținutul sa nu treaca pe sub o bara fixa. Se repara cu fond opac, si
       numai acolo unde trebuie: peste erou bara rama transparenta, fiindca
       acolo e film si o banda inchisa l-ar taia in doua; de la primul anotimp
       in jos devine opaca. Comutarea o face un observator de intersecție pe
       erou, nu un ascultator de derulare: un `scroll` pe telefon se declanseaza
       de sute de ori pe gest, iar aici trebuie aflat un singur lucru.

       `scroll-padding-top` exista pentru butonul „Cereți o oferta” din erou,
       care sare la `#oferta`: fara el titlul secțiunii ateriza sub bara. 76 px
       = inaltimea barei (64) plus o rasuflare. */
    html { scroll-padding-top: 76px; }
    .bar--opac {
      background: var(--sc-canvas);
      border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
    }
    .bar--opac::before { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) { .fall { display: none; } .plant, .btn { transition: none; } }