@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-wght-italic.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-wght-italic.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/karla-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/karla-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/karla-latin-ext-wght-italic.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/karla-latin-wght-italic.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:80ch;--font-heading:"Newsreader",Georgia,serif;--font-heading-weight:500;--font-body:"Karla",system-ui,sans-serif;--radius-sm:5px;--radius-md:5px;--radius-lg:5px}
body,.btn,.input,.tag{font-family:var(--font-body)}

.card,.dialog,.btn,.tag,.seg,.input,.patch,.figure,.theme,.cal,.slot{border-radius:5px}
.figure.round,.figure.round .ph,.num,.radio .dot,.day{border-radius:50%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;text-wrap:pretty;overflow-x:clip;font-size:18px}
.wrap{max-width:1440px;margin:0;padding:0 var(--edge)}

.hero-banner{position:relative;min-height:calc(100vh - var(--top-h,243px));min-height:calc(100svh - var(--top-h,243px));display:grid;align-items:center;overflow:hidden}
.hero-banner .hero-bg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;display:block}
.hero-banner .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--color-text) 88%,transparent) 0%,color-mix(in srgb,var(--color-text) 62%,transparent) 42%,color-mix(in srgb,var(--color-text) 12%,transparent) 78%,transparent 100%)}
.hero-banner .hero-content{position:relative;pointer-events:none;padding-top:calc(2*var(--leading));padding-bottom:calc(2*var(--leading));color:var(--color-bg)}
.hero-banner .hero-content a,.hero-banner .hero-content h1,.hero-banner .hero-content p,.hero-banner .hero-content .kicker,.hero-banner .hero-content .row{pointer-events:auto}
.hero-banner .kicker{color:color-mix(in srgb,var(--color-bg) 82%,transparent)}
.hero-banner .display{margin-bottom:var(--half)}
.hero-banner .body,.hero-banner .lead{color:color-mix(in srgb,var(--color-bg) 90%,transparent)}
.hero-banner .btn-ghost{color:var(--color-bg);border-color:color-mix(in srgb,var(--color-bg) 55%,transparent)}
.hero-banner .btn-ghost:hover{background:color-mix(in srgb,var(--color-bg) 16%,transparent);color:var(--color-bg)}
@media (max-width:1000px){.hero-banner{padding-top:0}}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}

.nav{position:sticky;top:0;z-index:5;flex-wrap:wrap;row-gap:var(--space-2);background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(10px);padding-inline:var(--edge)}
.nav-brand{font-size:19px;letter-spacing:-.01em}
.nav-links{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.nav a{white-space:nowrap}
.nav .btn{white-space:nowrap}
@media (max-width:900px){.nav{gap:var(--space-3)}.nav-brand{margin-right:0;width:100%}.nav-links{gap:var(--space-3);font-size:16px}}

.display{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:56px;line-height:1.1;letter-spacing:0;margin:0 0 var(--leading);margin-left:-.028em}
.display .line{display:block}
.display.md{font-size:56px;line-height:1.1}
h2.sec{font-size:36px;line-height:1.18;margin:0 0 var(--half)}
h3.sub{font-size:24px;line-height:1.15;margin:0 0 var(--space-2)}
.kicker{display:block;font-size:16px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);margin:0 0 var(--space-3)}
.lead{font-size:18px;line-height:1.6;max-width:64ch;margin:0 0 var(--leading);color:color-mix(in srgb,var(--color-text) 88%,transparent)}
.body{font-size:18px;line-height:1.72;max-width:var(--measure)}
.body p{margin:0 0 var(--leading)}
.body p:last-child{margin-bottom:0}
.quiet{color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.slogan{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(21px,2.4vw,28px);line-height:1.3;max-width:34ch;margin:0}

section{padding:calc(2.5*var(--leading)) 0}
section.tight{padding:calc(1.5*var(--leading)) 0}
.hero{position:relative;padding:calc(2*var(--leading)) 0 calc(2*var(--leading))}
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--leading) clamp(28px,5vw,80px);align-items:center}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.split,.split.even{grid-template-columns:1fr}}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.btn{font-size:16px;padding:calc(var(--space-2)*1.15) calc(var(--space-4)*1.1)}

.figure{margin:0;border-radius:5px;overflow:hidden}
.figure .ph{width:100%;aspect-ratio:3/4;display:block}
.figure.wide .ph{aspect-ratio:4/3}
.figure.round{border-radius:50%}
.figure.round .ph{aspect-ratio:1}

@media (max-width:1000px){.alaturi .al-text .sec br{display:none}}

@media (max-width:1000px){}
.cap{font-size:18px;line-height:1.55;margin-top:var(--space-2);color:color-mix(in srgb,var(--color-text) 55%,transparent);max-width:36ch}

.patch{background:var(--color-accent-2-100);border-radius:5px;padding:calc(1.75*var(--leading)) clamp(24px,4vw,60px)}
.patch.warm{background:var(--color-accent-100)}
.patch.surface{background:var(--color-surface)}

.grid{display:grid;gap:var(--space-4)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{padding:calc(var(--space-4)*1.2);gap:var(--space-3)}
.card h4{font-size:19px;line-height:1.2;margin:0}
.card p{font-size:18px;line-height:1.65;margin:0;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.num{width:34px;height:34px;flex:none;border-radius:50%;background:var(--color-accent-200);color:var(--color-accent-800);font-family:var(--font-heading);font-size:15px;display:grid;place-items:center}

.grid.themes{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--space-4)}
.grid.themes>.theme{grid-column:span 2}
.grid.themes>.theme:nth-child(4),.grid.themes>.theme:nth-child(5){grid-column:span 3}
@media (max-width:1000px){
  .grid.themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.themes>.theme,
  .grid.themes>.theme:nth-child(4),.grid.themes>.theme:nth-child(5){grid-column:span 1}}
@media (max-width:640px){
  .grid.themes{grid-template-columns:1fr}}
.theme{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:340px;border-radius:5px;overflow:hidden;background:var(--color-surface)}
.theme .t-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.theme .ph.t-bg{aspect-ratio:auto;border-radius:0;overflow:hidden}
.theme .ph.t-bg .ph-tag{justify-content:flex-start;padding-top:34px}
.theme:hover .t-bg{transform:scale(1.04)}
.theme .t-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--color-text) 82%,transparent) 0%,color-mix(in srgb,var(--color-text) 46%,transparent) 46%,color-mix(in srgb,var(--color-text) 8%,transparent) 82%,transparent 100%)}
.theme .t-body{position:relative;z-index:2;margin-top:auto;display:flex;flex-direction:column;padding:calc(var(--space-6)*1.1);text-decoration:none;color:var(--color-bg)}
.theme .t-body:hover,.theme .t-body:focus-visible{color:var(--color-bg);outline:none}
.theme .t-name{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(22px,1.9vw,28px);line-height:1.14;max-width:22ch;min-height:2.28em;display:flex;align-items:flex-end}
.theme .t-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.theme:hover .t-reveal,.theme .t-body:focus-visible .t-reveal{grid-template-rows:1fr;opacity:1}
.theme .t-reveal-in{overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3)}
.theme .t-felt{padding-top:var(--space-4);font-size:18px;line-height:1.55;min-height:3.1em;color:color-mix(in srgb,var(--color-bg) 92%,transparent)}
.theme .t-more{font-size:16px;font-weight:600;color:var(--color-bg)}
@media (prefers-reduced-motion:reduce){.theme .t-bg,.theme .t-reveal{transition:none}}
.tags{display:flex;flex-wrap:wrap;gap:6px}

.slist{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.slist .tag{font-size:18px;padding:9px 18px}

footer{background:#2E5D3A;color:color-mix(in srgb,var(--color-bg) 82%,transparent);
  font-size:18px;line-height:1.75;border-top:0;
  margin-top:calc(2*var(--leading));
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:calc(2.2*var(--leading) + 20px) max(var(--edge),calc(50vw - 720px + var(--edge)))}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--color-accent-300)}

footer .fgrid{display:grid;grid-template-columns:1.55fr 1fr 1.3fr .8fr;
  gap:48px clamp(40px,4.4vw,80px);align-items:start}
footer .fcol{min-width:0}

footer .fmarca{display:block;font-family:var(--font-heading);font-weight:300;
  font-size:clamp(28px,2.5vw,38px);line-height:1.1;letter-spacing:.075em;
  text-transform:uppercase;color:var(--color-bg)}
footer .fmarca:hover{color:var(--color-bg);opacity:.82}
footer .ftagline{display:block;margin:12px 0 0;font-size:12.5px;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--color-accent-300)}
footer .fcopy{margin:22px 0 0;font-size:14px;line-height:1.6;
  color:color-mix(in srgb,var(--color-bg) 62%,transparent)}

footer .fcol-insigna{padding-top:10px}
footer .finsigna{display:inline-flex;align-items:center;gap:14px;
  background:#B0CBB0;color:#2E5D3A;padding:16px 22px;
  --taiere:12px;
  clip-path:polygon(
    var(--taiere) 0, calc(100% - var(--taiere)) 0,
    100% var(--taiere), 100% calc(100% - var(--taiere)),
    calc(100% - var(--taiere)) 100%, var(--taiere) 100%,
    0 calc(100% - var(--taiere)), 0 var(--taiere))}
footer .fi-bifa{flex:0 0 32px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--color-bg);color:var(--color-accent)}
footer .fi-bifa svg{width:17px;height:17px}
footer .fi-text{display:block;line-height:1.2}
footer .fi-text small{display:block;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,#2E5D3A 70%,transparent)}
footer .fi-text b{display:block;margin-top:3px;font-family:var(--font-heading);
  font-weight:600;font-size:16px;line-height:1.18;color:#2E5D3A}

footer .ftitlu{font-family:var(--font-heading);font-weight:500;font-size:20px;
  line-height:1.2;margin:0 0 26px;color:var(--color-bg)}
footer .flink{display:block;width:fit-content;font-size:12.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--color-bg);white-space:nowrap;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-bg) 55%,transparent)}
footer .flink:hover{color:var(--color-accent-300);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-accent-300) 60%,transparent)}
footer .flink + .flink{margin-top:10px}
footer .ftext{margin:14px 0 0;font-size:15px;line-height:1.7}

footer .fnav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
footer .fnav a{display:inline-block;font-size:13px;letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-bg) 34%,transparent)}
footer .fnav a:hover{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-accent-300) 60%,transparent)}
footer .fnav a[aria-current="page"]{color:var(--color-bg);font-weight:700;
  box-shadow:inset 0 -1px 0 var(--color-bg)}

@media (max-width:1100px){
  footer .fgrid{grid-template-columns:1fr 1fr;gap:44px clamp(32px,5vw,64px)}
  /* Pe doua coloane, insigna statea lipita de marginea din dreapta, deci nu
     se alinia cu nimic: „Linkuri rapide", chiar sub ea, incepe la marginea
     din stanga a coloanei. Acum pornesc amandoua din acelasi punct. */
  footer .fcol-insigna{padding-top:0;justify-self:start}
}
@media (max-width:620px){
  footer .fgrid{grid-template-columns:1fr;gap:36px}
  footer .flink{font-size:11.5px;letter-spacing:.02em}
  footer .fcol-insigna{justify-self:start}
  footer .ftitlu{margin-bottom:18px}
}

.lead,.body,.body p,.card p,.blocks .card p,.theme .t-felt,.note,.cap,.slist .tag,.tags .tag,.chain .link,.slot,.cal-month,.nav-links,footer,.field label,.input,.seg-opt{font-size:18px}
.lead{line-height:1.6}
.cap,.note{line-height:1.55}
.btn{font-size:16px}
.theme .t-more{font-size:16px}

.hero-banner .kicker.typed{color:var(--color-accent)}
.kicker.typing::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:4px;vertical-align:-.12em;animation:caret .8s steps(1,end) infinite}
@keyframes caret{50%{opacity:0}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.rv-in{opacity:1;transform:none}

.cal{background:var(--color-surface);border-radius:5px;padding:calc(var(--space-6)) calc(var(--space-6))}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.cal-month{font-family:var(--font-heading);font-size:18px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding-bottom:6px;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
.day{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;font:inherit;font-size:16px;color:var(--color-text);cursor:pointer}
.day.free{background:var(--color-accent-2-200);font-weight:600}
.day.free:hover{background:var(--color-accent-2-300)}
.day.on{background:var(--color-accent);color:var(--color-bg)}
.day.off{color:color-mix(in srgb,var(--color-text) 28%,transparent);cursor:default}
.slots{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.slot{border:1px solid var(--color-divider);background:transparent;border-radius:5px;padding:9px 18px;font:inherit;font-size:18px;cursor:pointer}
.slot:hover{background:color-mix(in srgb,var(--color-text) 6%,transparent)}
.slot.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.note{font-size:18px;line-height:1.55;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-top:var(--space-4)}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:var(--space-6)}
.blocks .card{gap:var(--space-4);padding:calc(var(--space-6)*1.25)}
.blocks .card h4{font-size:21px;line-height:1.2;margin:0}
.blocks .card p{font-size:18px;line-height:1.75}
.ico-row{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-3)}
.ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:5px;background:var(--color-accent-100);color:var(--color-accent-700)}
.ico svg{width:25px;height:25px}
.theme-block{padding:calc(1.5*var(--leading)) 0;border-top:1px solid var(--color-divider)}
.theme-block:first-of-type{border-top:0}

.tb{padding:calc(2.4*var(--leading)) 0;margin-bottom:calc(1.2*var(--leading))}
.tb .split{gap:var(--leading) clamp(40px,6vw,110px)}
.tb:nth-of-type(odd) .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tb:nth-of-type(even) .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tb:nth-of-type(odd) .figure{margin-right:calc(-1*var(--edge))}
.tb:nth-of-type(even) .figure{margin-left:calc(-1*var(--edge))}
.tb .figure.wide .ph{aspect-ratio:5/4}
.tb .tags{gap:10px;margin-top:var(--space-2)}
.tb .sub{font-size:36px;line-height:1.18}
.tb .cap{margin-top:var(--space-4)}
.tb:nth-of-type(odd){margin-right:0}
.tb:nth-of-type(even){margin-left:0}
.tb:nth-of-type(even) .split>div:first-child{order:2}
.tb .split{align-items:center}
.tb .sub{margin-bottom:var(--space-2)}
.c1{background:var(--color-accent-200)}
.c2{background:var(--color-accent-2-200)}
.c3{background:var(--color-accent-100)}
.c4{background:var(--color-accent-2-100)}
.c5{background:var(--color-accent-300)}
@media (max-width:860px){.tb:nth-of-type(odd),.tb:nth-of-type(even){margin-inline:0}.tb:nth-of-type(even) .split>div:first-child{order:0}.tb:nth-of-type(odd) .figure,.tb:nth-of-type(even) .figure{margin-inline:0}.tb:nth-of-type(odd) .split,.tb:nth-of-type(even) .split{grid-template-columns:1fr}}

.chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.chain .link{background:var(--color-surface);border-radius:5px;padding:11px 20px;font-size:18px;line-height:1.3}
.chain .link.hot{background:var(--color-accent-200);color:var(--color-accent-800)}
.chain .link.cool{background:var(--color-accent-2-200);color:var(--color-accent-2-800)}
.chain .arr{color:var(--color-accent);font-size:17px;line-height:1}
.reslist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}

html{background:var(--color-bg)}
body{background:transparent}
.para{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
body>*:not(.para){position:relative;z-index:1;max-width:1440px;margin-left:auto;margin-right:auto}

body>section.hero-banner,body>section.brandband,body>figure.banner,
/* scena de pe Acasa tine acum hero-ul inauntru, deci plafonul de 1440 trebuie
   ridicat de pe ea, nu de pe hero: altfel toata scena sta intr-o coloana de
   1440 si apar margini bej in stanga si in dreapta pe ecrane mai late. */
body>.scena{max-width:none}
.hero-banner>.wrap{width:100%;margin-left:auto;margin-right:auto}
.pl{position:absolute;inset:-25% -12%;background-repeat:repeat;will-change:transform}
.pl.p1{inset:0;height:100vh}
.pl.p1{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%221250%22%20viewBox%3D%220%200%20600%201250%22%3E%3Cg%20transform%3D%22translate(5%207)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(46%2C35%2C24%2C0.5)%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M300.0%201180.0%20Q305.2%201015.0%20300.0%20880.0%22%20stroke-width%3D%2252.0%22%2F%3E%3Cpath%20d%3D%22M300.0%20880.0%20Q280.3%20752.5%20239.8%20648.2%22%20stroke-width%3D%2232.2%22%2F%3E%3Cpath%20d%3D%22M239.8%20648.2%20Q184.9%20556.6%20149.9%20481.7%22%20stroke-width%3D%2232.2%22%2F%3E%3Cpath%20d%3D%22M149.9%20481.7%20Q89.6%20423.1%2042.6%20375.2%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M42.6%20375.2%20Q5.9%20345.0%20-58.5%20320.3%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M-58.5%20320.3%20Q-97.4%20315.9%20-144.9%20312.3%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M-58.5%20320.3%20Q-92.5%20285.4%20-121.3%20256.8%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M42.6%20375.2%20Q27.6%20315.7%20-5.7%20267.0%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M-5.7%20267.0%20Q-39.4%20235.3%20-68.7%20209.4%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M-5.7%20267.0%20Q-16.0%20217.3%20-21.8%20176.6%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M149.9%20481.7%20Q137.0%20407.3%20117.1%20346.4%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M117.1%20346.4%20Q94.1%20294.5%2072.2%20251.9%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M72.2%20251.9%20Q43.9%20221.0%2017.6%20195.7%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M72.2%20251.9%20Q64.9%20210.0%2062.2%20175.7%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M117.1%20346.4%20Q111.7%20292.6%20120.0%20248.5%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M120.0%20248.5%20Q107.3%20207.3%2099.7%20173.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M120.0%20248.5%20Q127.2%20209.6%20143.9%20177.8%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M239.8%20648.2%20Q246.8%20554.1%20236.5%20477.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M236.5%20477.2%20Q212.8%20411.1%20196.2%20357.0%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q151.1%20331.6%20112.9%20310.9%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M112.9%20310.9%20Q87.2%20304.7%2047.1%20299.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M112.9%20310.9%20Q86.7%20283.4%2058.8%20260.9%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q175.0%20305.4%20158.0%20263.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M158.0%20263.2%20Q144.0%20228.8%20112.1%20200.7%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M158.0%20263.2%20Q157.2%20223.1%20147.8%20190.3%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q222.0%20310.8%20238.0%20273.0%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M238.0%20273.0%20Q242.6%20235.9%20252.7%20205.5%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M238.0%20273.0%20Q257.9%20250.0%20288.9%20231.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M236.5%20477.2%20Q252.1%20406.4%20254.8%20348.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q236.7%20304.6%20211.0%20268.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M211.0%20268.6%20Q192.2%20243.8%20164.5%20223.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M211.0%20268.6%20Q208.0%20233.2%20199.4%20204.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q261.5%20298.0%20265.7%20256.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M265.7%20256.6%20Q268.0%20219.5%20257.7%20189.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M265.7%20256.6%20Q279.6%20224.6%20293.9%20198.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q283.6%20305.1%20319.8%20269.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M319.8%20269.6%20Q336.8%20233.1%20346.2%20203.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M319.8%20269.6%20Q347.3%20244.7%20373.5%20224.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M300.0%20880.0%20Q334.9%20762.9%20349.9%20667.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M349.9%20667.1%20Q333.1%20582.7%20333.6%20513.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M333.6%20513.5%20Q303.0%20455.3%20283.1%20407.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M283.1%20407.7%20Q259.0%20370.5%20237.4%20340.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q205.5%20329.6%20178.1%20321.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q216.0%20313.8%20200.5%20292.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q232.3%20308.6%20230.2%20282.9%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M283.1%20407.7%20Q281.9%20358.5%20276.8%20318.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q260.8%20285.7%20241.3%20259.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q271.6%20284.4%20274.8%20256.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q289.0%20283.7%20302.3%20255.4%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M333.6%20513.5%20Q338.9%20452.6%20362.3%20402.8%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M362.3%20402.8%20Q368.5%20354.1%20358.9%20314.4%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M358.9%20314.4%20Q355.1%20281.0%20339.8%20253.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M358.9%20314.4%20Q375.6%20278.8%20385.8%20249.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M362.3%20402.8%20Q380.9%20364.7%20400.4%20333.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q395.4%20301.3%20381.0%20275.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q406.9%20304.4%20425.3%20280.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q426.3%20314.9%20451.2%20299.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M349.9%20667.1%20Q388.8%20590.9%20435.5%20528.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q427.9%20466.7%20429.0%20416.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q410.1%20378.6%20385.9%20347.9%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M385.9%20347.9%20Q369.3%20324.8%20338.0%20306.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M385.9%20347.9%20Q376.9%20318.0%20373.7%20293.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q423.6%20373.8%20426.5%20339.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M426.5%20339.3%20Q416.5%20308.4%20406.5%20283.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M426.5%20339.3%20Q432.2%20308.0%20440.4%20282.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q448.0%20377.3%20459.5%20345.6%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M459.5%20345.6%20Q466.2%20315.6%20468.5%20291.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M459.5%20345.6%20Q474.5%20321.3%20489.1%20301.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q470.0%20477.2%20503.7%20435.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M503.7%20435.1%20Q515.9%20388.6%20528.0%20350.5%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M528.0%20350.5%20Q527.2%20312.9%20525.9%20282.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M528.0%20350.5%20Q552.2%20319.5%20568.0%20294.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M503.7%20435.1%20Q539.8%20406.7%20567.8%20383.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M567.8%20383.4%20Q582.3%20358.1%20608.1%20337.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M567.8%20383.4%20Q592.8%20366.7%20619.0%20353.0%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q483.9%20493.7%20540.6%20465.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q558.8%20422.3%20575.5%20387.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q572.3%20350.5%20568.1%20320.6%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q593.2%20357.9%20603.9%20334.0%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q594.6%20366.9%20628.4%20350.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q579.6%20435.2%20621.2%20410.7%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M621.2%20410.7%20Q639.8%20382.4%20671.2%20359.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M621.2%20410.7%20Q657.0%20397.0%20690.3%20385.8%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q573.4%20465.8%20627.3%20466.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q648.5%20449.5%20684.6%20435.9%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q652.6%20468.7%20687.6%20470.7%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q645.0%20489.7%20668.0%20508.9%22%20stroke-width%3D%223.0%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(46%2C35%2C24%2C0.5)%22%20opacity%3D%220.5%22%3E%3Ccircle%20cx%3D%22-144.9%22%20cy%3D%22312.3%22%20r%3D%2239.3%22%2F%3E%3Ccircle%20cx%3D%22-121.3%22%20cy%3D%22256.8%22%20r%3D%2234.7%22%2F%3E%3Ccircle%20cx%3D%22-68.7%22%20cy%3D%22209.4%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22-21.8%22%20cy%3D%22176.6%22%20r%3D%2256.7%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%22195.7%22%20r%3D%2236.2%22%2F%3E%3Ccircle%20cx%3D%2262.2%22%20cy%3D%22175.7%22%20r%3D%2245.7%22%2F%3E%3Ccircle%20cx%3D%2299.7%22%20cy%3D%22173.6%22%20r%3D%2246.5%22%2F%3E%3Ccircle%20cx%3D%22143.9%22%20cy%3D%22177.8%22%20r%3D%2239.0%22%2F%3E%3Ccircle%20cx%3D%2247.1%22%20cy%3D%22299.6%22%20r%3D%2241.5%22%2F%3E%3Ccircle%20cx%3D%2258.8%22%20cy%3D%22260.9%22%20r%3D%2234.0%22%2F%3E%3Ccircle%20cx%3D%22112.1%22%20cy%3D%22200.7%22%20r%3D%2240.7%22%2F%3E%3Ccircle%20cx%3D%22147.8%22%20cy%3D%22190.3%22%20r%3D%2247.2%22%2F%3E%3Ccircle%20cx%3D%22252.7%22%20cy%3D%22205.5%22%20r%3D%2253.3%22%2F%3E%3Ccircle%20cx%3D%22288.9%22%20cy%3D%22231.2%22%20r%3D%2242.9%22%2F%3E%3Ccircle%20cx%3D%22164.5%22%20cy%3D%22223.6%22%20r%3D%2237.1%22%2F%3E%3Ccircle%20cx%3D%22199.4%22%20cy%3D%22204.2%22%20r%3D%2236.9%22%2F%3E%3Ccircle%20cx%3D%22257.7%22%20cy%3D%22189.1%22%20r%3D%2235.9%22%2F%3E%3Ccircle%20cx%3D%22293.9%22%20cy%3D%22198.3%22%20r%3D%2253.9%22%2F%3E%3Ccircle%20cx%3D%22346.2%22%20cy%3D%22203.2%22%20r%3D%2242.4%22%2F%3E%3Ccircle%20cx%3D%22373.5%22%20cy%3D%22224.3%22%20r%3D%2253.9%22%2F%3E%3Ccircle%20cx%3D%22178.1%22%20cy%3D%22321.1%22%20r%3D%2235.6%22%2F%3E%3Ccircle%20cx%3D%22200.5%22%20cy%3D%22292.2%22%20r%3D%2259.7%22%2F%3E%3Ccircle%20cx%3D%22230.2%22%20cy%3D%22282.9%22%20r%3D%2246.1%22%2F%3E%3Ccircle%20cx%3D%22241.3%22%20cy%3D%22259.0%22%20r%3D%2236.3%22%2F%3E%3Ccircle%20cx%3D%22274.8%22%20cy%3D%22256.6%22%20r%3D%2242.3%22%2F%3E%3Ccircle%20cx%3D%22302.3%22%20cy%3D%22255.4%22%20r%3D%2256.2%22%2F%3E%3Ccircle%20cx%3D%22339.8%22%20cy%3D%22253.7%22%20r%3D%2247.0%22%2F%3E%3Ccircle%20cx%3D%22385.8%22%20cy%3D%22249.6%22%20r%3D%2248.2%22%2F%3E%3Ccircle%20cx%3D%22381.0%22%20cy%3D%22275.0%22%20r%3D%2235.1%22%2F%3E%3Ccircle%20cx%3D%22425.3%22%20cy%3D%22280.6%22%20r%3D%2242.9%22%2F%3E%3Ccircle%20cx%3D%22451.2%22%20cy%3D%22299.7%22%20r%3D%2258.1%22%2F%3E%3Ccircle%20cx%3D%22338.0%22%20cy%3D%22306.0%22%20r%3D%2258.2%22%2F%3E%3Ccircle%20cx%3D%22373.7%22%20cy%3D%22293.5%22%20r%3D%2246.3%22%2F%3E%3Ccircle%20cx%3D%22406.5%22%20cy%3D%22283.2%22%20r%3D%2235.1%22%2F%3E%3Ccircle%20cx%3D%22440.4%22%20cy%3D%22282.3%22%20r%3D%2250.1%22%2F%3E%3Ccircle%20cx%3D%22468.5%22%20cy%3D%22291.1%22%20r%3D%2256.9%22%2F%3E%3Ccircle%20cx%3D%22489.1%22%20cy%3D%22301.4%22%20r%3D%2242.2%22%2F%3E%3Ccircle%20cx%3D%22525.9%22%20cy%3D%22282.2%22%20r%3D%2236.8%22%2F%3E%3Ccircle%20cx%3D%22568.0%22%20cy%3D%22294.2%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22608.1%22%20cy%3D%22337.4%22%20r%3D%2253.6%22%2F%3E%3Ccircle%20cx%3D%22619.0%22%20cy%3D%22353.0%22%20r%3D%2255.1%22%2F%3E%3Ccircle%20cx%3D%22568.1%22%20cy%3D%22320.6%22%20r%3D%2256.0%22%2F%3E%3Ccircle%20cx%3D%22603.9%22%20cy%3D%22334.0%22%20r%3D%2239.0%22%2F%3E%3Ccircle%20cx%3D%22628.4%22%20cy%3D%22350.4%22%20r%3D%2236.3%22%2F%3E%3Ccircle%20cx%3D%22671.2%22%20cy%3D%22359.3%22%20r%3D%2237.4%22%2F%3E%3Ccircle%20cx%3D%22690.3%22%20cy%3D%22385.8%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22684.6%22%20cy%3D%22435.9%22%20r%3D%2245.9%22%2F%3E%3Ccircle%20cx%3D%22687.6%22%20cy%3D%22470.7%22%20r%3D%2236.9%22%2F%3E%3Ccircle%20cx%3D%22668.0%22%20cy%3D%22508.9%22%20r%3D%2255.7%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(0%200)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(122%2C94%2C62%2C0.85)%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M300.0%201180.0%20Q305.2%201015.0%20300.0%20880.0%22%20stroke-width%3D%2252.0%22%2F%3E%3Cpath%20d%3D%22M300.0%20880.0%20Q280.3%20752.5%20239.8%20648.2%22%20stroke-width%3D%2232.2%22%2F%3E%3Cpath%20d%3D%22M239.8%20648.2%20Q184.9%20556.6%20149.9%20481.7%22%20stroke-width%3D%2232.2%22%2F%3E%3Cpath%20d%3D%22M149.9%20481.7%20Q89.6%20423.1%2042.6%20375.2%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M42.6%20375.2%20Q5.9%20345.0%20-58.5%20320.3%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M-58.5%20320.3%20Q-97.4%20315.9%20-144.9%20312.3%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M-58.5%20320.3%20Q-92.5%20285.4%20-121.3%20256.8%22%20stroke-width%3D%2220.0%22%2F%3E%3Cpath%20d%3D%22M42.6%20375.2%20Q27.6%20315.7%20-5.7%20267.0%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M-5.7%20267.0%20Q-39.4%20235.3%20-68.7%20209.4%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M-5.7%20267.0%20Q-16.0%20217.3%20-21.8%20176.6%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M149.9%20481.7%20Q137.0%20407.3%20117.1%20346.4%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M117.1%20346.4%20Q94.1%20294.5%2072.2%20251.9%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M72.2%20251.9%20Q43.9%20221.0%2017.6%20195.7%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M72.2%20251.9%20Q64.9%20210.0%2062.2%20175.7%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M117.1%20346.4%20Q111.7%20292.6%20120.0%20248.5%22%20stroke-width%3D%2212.4%22%2F%3E%3Cpath%20d%3D%22M120.0%20248.5%20Q107.3%20207.3%2099.7%20173.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M120.0%20248.5%20Q127.2%20209.6%20143.9%20177.8%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M239.8%20648.2%20Q246.8%20554.1%20236.5%20477.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M236.5%20477.2%20Q212.8%20411.1%20196.2%20357.0%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q151.1%20331.6%20112.9%20310.9%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M112.9%20310.9%20Q87.2%20304.7%2047.1%20299.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M112.9%20310.9%20Q86.7%20283.4%2058.8%20260.9%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q175.0%20305.4%20158.0%20263.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M158.0%20263.2%20Q144.0%20228.8%20112.1%20200.7%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M158.0%20263.2%20Q157.2%20223.1%20147.8%20190.3%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M196.2%20357.0%20Q222.0%20310.8%20238.0%20273.0%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M238.0%20273.0%20Q242.6%20235.9%20252.7%20205.5%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M238.0%20273.0%20Q257.9%20250.0%20288.9%20231.2%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M236.5%20477.2%20Q252.1%20406.4%20254.8%20348.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q236.7%20304.6%20211.0%20268.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M211.0%20268.6%20Q192.2%20243.8%20164.5%20223.6%22%20stroke-width%3D%227.7%22%2F%3E%3Cpath%20d%3D%22M211.0%20268.6%20Q208.0%20233.2%20199.4%20204.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q261.5%20298.0%20265.7%20256.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M265.7%20256.6%20Q268.0%20219.5%20257.7%20189.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M265.7%20256.6%20Q279.6%20224.6%20293.9%20198.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M254.8%20348.6%20Q283.6%20305.1%20319.8%20269.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M319.8%20269.6%20Q336.8%20233.1%20346.2%20203.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M319.8%20269.6%20Q347.3%20244.7%20373.5%20224.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M300.0%20880.0%20Q334.9%20762.9%20349.9%20667.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M349.9%20667.1%20Q333.1%20582.7%20333.6%20513.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M333.6%20513.5%20Q303.0%20455.3%20283.1%20407.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M283.1%20407.7%20Q259.0%20370.5%20237.4%20340.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q205.5%20329.6%20178.1%20321.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q216.0%20313.8%20200.5%20292.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M237.4%20340.1%20Q232.3%20308.6%20230.2%20282.9%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M283.1%20407.7%20Q281.9%20358.5%20276.8%20318.2%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q260.8%20285.7%20241.3%20259.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q271.6%20284.4%20274.8%20256.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M276.8%20318.2%20Q289.0%20283.7%20302.3%20255.4%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M333.6%20513.5%20Q338.9%20452.6%20362.3%20402.8%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M362.3%20402.8%20Q368.5%20354.1%20358.9%20314.4%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M358.9%20314.4%20Q355.1%20281.0%20339.8%20253.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M358.9%20314.4%20Q375.6%20278.8%20385.8%20249.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M362.3%20402.8%20Q380.9%20364.7%20400.4%20333.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q395.4%20301.3%20381.0%20275.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q406.9%20304.4%20425.3%20280.6%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M400.4%20333.6%20Q426.3%20314.9%20451.2%20299.7%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M349.9%20667.1%20Q388.8%20590.9%20435.5%20528.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q427.9%20466.7%20429.0%20416.1%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q410.1%20378.6%20385.9%20347.9%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M385.9%20347.9%20Q369.3%20324.8%20338.0%20306.0%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M385.9%20347.9%20Q376.9%20318.0%20373.7%20293.5%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q423.6%20373.8%20426.5%20339.3%22%20stroke-width%3D%224.8%22%2F%3E%3Cpath%20d%3D%22M426.5%20339.3%20Q416.5%20308.4%20406.5%20283.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M426.5%20339.3%20Q432.2%20308.0%20440.4%20282.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M429.0%20416.1%20Q448.0%20377.3%20459.5%20345.6%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M459.5%20345.6%20Q466.2%20315.6%20468.5%20291.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M459.5%20345.6%20Q474.5%20321.3%20489.1%20301.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q470.0%20477.2%20503.7%20435.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M503.7%20435.1%20Q515.9%20388.6%20528.0%20350.5%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M528.0%20350.5%20Q527.2%20312.9%20525.9%20282.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M528.0%20350.5%20Q552.2%20319.5%20568.0%20294.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M503.7%20435.1%20Q539.8%20406.7%20567.8%20383.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M567.8%20383.4%20Q582.3%20358.1%20608.1%20337.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M567.8%20383.4%20Q592.8%20366.7%20619.0%20353.0%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M435.5%20528.5%20Q483.9%20493.7%20540.6%20465.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q558.8%20422.3%20575.5%20387.1%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q572.3%20350.5%20568.1%20320.6%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q593.2%20357.9%20603.9%20334.0%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M575.5%20387.1%20Q594.6%20366.9%20628.4%20350.4%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q579.6%20435.2%20621.2%20410.7%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M621.2%20410.7%20Q639.8%20382.4%20671.2%20359.3%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M621.2%20410.7%20Q657.0%20397.0%20690.3%20385.8%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M540.6%20465.3%20Q573.4%20465.8%20627.3%20466.2%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q648.5%20449.5%20684.6%20435.9%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q652.6%20468.7%20687.6%20470.7%22%20stroke-width%3D%223.0%22%2F%3E%3Cpath%20d%3D%22M627.3%20466.2%20Q645.0%20489.7%20668.0%20508.9%22%20stroke-width%3D%223.0%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(122%2C94%2C62%2C0.85)%22%20opacity%3D%220.55%22%3E%3Ccircle%20cx%3D%22-144.9%22%20cy%3D%22312.3%22%20r%3D%2239.3%22%2F%3E%3Ccircle%20cx%3D%22-121.3%22%20cy%3D%22256.8%22%20r%3D%2234.7%22%2F%3E%3Ccircle%20cx%3D%22-68.7%22%20cy%3D%22209.4%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22-21.8%22%20cy%3D%22176.6%22%20r%3D%2256.7%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%22195.7%22%20r%3D%2236.2%22%2F%3E%3Ccircle%20cx%3D%2262.2%22%20cy%3D%22175.7%22%20r%3D%2245.7%22%2F%3E%3Ccircle%20cx%3D%2299.7%22%20cy%3D%22173.6%22%20r%3D%2246.5%22%2F%3E%3Ccircle%20cx%3D%22143.9%22%20cy%3D%22177.8%22%20r%3D%2239.0%22%2F%3E%3Ccircle%20cx%3D%2247.1%22%20cy%3D%22299.6%22%20r%3D%2241.5%22%2F%3E%3Ccircle%20cx%3D%2258.8%22%20cy%3D%22260.9%22%20r%3D%2234.0%22%2F%3E%3Ccircle%20cx%3D%22112.1%22%20cy%3D%22200.7%22%20r%3D%2240.7%22%2F%3E%3Ccircle%20cx%3D%22147.8%22%20cy%3D%22190.3%22%20r%3D%2247.2%22%2F%3E%3Ccircle%20cx%3D%22252.7%22%20cy%3D%22205.5%22%20r%3D%2253.3%22%2F%3E%3Ccircle%20cx%3D%22288.9%22%20cy%3D%22231.2%22%20r%3D%2242.9%22%2F%3E%3Ccircle%20cx%3D%22164.5%22%20cy%3D%22223.6%22%20r%3D%2237.1%22%2F%3E%3Ccircle%20cx%3D%22199.4%22%20cy%3D%22204.2%22%20r%3D%2236.9%22%2F%3E%3Ccircle%20cx%3D%22257.7%22%20cy%3D%22189.1%22%20r%3D%2235.9%22%2F%3E%3Ccircle%20cx%3D%22293.9%22%20cy%3D%22198.3%22%20r%3D%2253.9%22%2F%3E%3Ccircle%20cx%3D%22346.2%22%20cy%3D%22203.2%22%20r%3D%2242.4%22%2F%3E%3Ccircle%20cx%3D%22373.5%22%20cy%3D%22224.3%22%20r%3D%2253.9%22%2F%3E%3Ccircle%20cx%3D%22178.1%22%20cy%3D%22321.1%22%20r%3D%2235.6%22%2F%3E%3Ccircle%20cx%3D%22200.5%22%20cy%3D%22292.2%22%20r%3D%2259.7%22%2F%3E%3Ccircle%20cx%3D%22230.2%22%20cy%3D%22282.9%22%20r%3D%2246.1%22%2F%3E%3Ccircle%20cx%3D%22241.3%22%20cy%3D%22259.0%22%20r%3D%2236.3%22%2F%3E%3Ccircle%20cx%3D%22274.8%22%20cy%3D%22256.6%22%20r%3D%2242.3%22%2F%3E%3Ccircle%20cx%3D%22302.3%22%20cy%3D%22255.4%22%20r%3D%2256.2%22%2F%3E%3Ccircle%20cx%3D%22339.8%22%20cy%3D%22253.7%22%20r%3D%2247.0%22%2F%3E%3Ccircle%20cx%3D%22385.8%22%20cy%3D%22249.6%22%20r%3D%2248.2%22%2F%3E%3Ccircle%20cx%3D%22381.0%22%20cy%3D%22275.0%22%20r%3D%2235.1%22%2F%3E%3Ccircle%20cx%3D%22425.3%22%20cy%3D%22280.6%22%20r%3D%2242.9%22%2F%3E%3Ccircle%20cx%3D%22451.2%22%20cy%3D%22299.7%22%20r%3D%2258.1%22%2F%3E%3Ccircle%20cx%3D%22338.0%22%20cy%3D%22306.0%22%20r%3D%2258.2%22%2F%3E%3Ccircle%20cx%3D%22373.7%22%20cy%3D%22293.5%22%20r%3D%2246.3%22%2F%3E%3Ccircle%20cx%3D%22406.5%22%20cy%3D%22283.2%22%20r%3D%2235.1%22%2F%3E%3Ccircle%20cx%3D%22440.4%22%20cy%3D%22282.3%22%20r%3D%2250.1%22%2F%3E%3Ccircle%20cx%3D%22468.5%22%20cy%3D%22291.1%22%20r%3D%2256.9%22%2F%3E%3Ccircle%20cx%3D%22489.1%22%20cy%3D%22301.4%22%20r%3D%2242.2%22%2F%3E%3Ccircle%20cx%3D%22525.9%22%20cy%3D%22282.2%22%20r%3D%2236.8%22%2F%3E%3Ccircle%20cx%3D%22568.0%22%20cy%3D%22294.2%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22608.1%22%20cy%3D%22337.4%22%20r%3D%2253.6%22%2F%3E%3Ccircle%20cx%3D%22619.0%22%20cy%3D%22353.0%22%20r%3D%2255.1%22%2F%3E%3Ccircle%20cx%3D%22568.1%22%20cy%3D%22320.6%22%20r%3D%2256.0%22%2F%3E%3Ccircle%20cx%3D%22603.9%22%20cy%3D%22334.0%22%20r%3D%2239.0%22%2F%3E%3Ccircle%20cx%3D%22628.4%22%20cy%3D%22350.4%22%20r%3D%2236.3%22%2F%3E%3Ccircle%20cx%3D%22671.2%22%20cy%3D%22359.3%22%20r%3D%2237.4%22%2F%3E%3Ccircle%20cx%3D%22690.3%22%20cy%3D%22385.8%22%20r%3D%2251.1%22%2F%3E%3Ccircle%20cx%3D%22684.6%22%20cy%3D%22435.9%22%20r%3D%2245.9%22%2F%3E%3Ccircle%20cx%3D%22687.6%22%20cy%3D%22470.7%22%20r%3D%2236.9%22%2F%3E%3Ccircle%20cx%3D%22668.0%22%20cy%3D%22508.9%22%20r%3D%2255.7%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right -30px bottom;background-size:auto 88vh;opacity:.17}
.pl.p2{display:none}
.pl.p3{display:none}
@media (prefers-reduced-motion:reduce){.pl{transform:none!important}}

.ph{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:inherit;background:var(--color-neutral-200);background-image:repeating-linear-gradient(45deg,transparent 0 15px,color-mix(in srgb,var(--color-neutral-400) 20%,transparent) 15px 30px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-neutral-500) 50%,transparent)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.ph-tag{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;color:var(--color-neutral-700)}
.ph-tag b{font:600 13px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;color:var(--color-neutral-800);word-break:break-all}
.ph-tag small{font:400 13.5px/1.5 var(--font-body);max-width:36ch;color:var(--color-neutral-600)}
.ph-tag i{font-style:normal;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--color-neutral-500)}

.hero-banner .ph-tag{justify-content:flex-start;padding-top:72px}

.theme.tc-1{background:var(--color-accent-2-700)}
.theme.tc-2{background:var(--color-neutral-700)}
.theme.tc-3{background:var(--color-accent-700)}
.theme.tc-4{background:var(--color-accent-2-800)}
.theme.tc-5{background:var(--color-neutral-800)}
.theme.tc-6{background:var(--color-accent-800)}

.banner .ph img,.hero-banner .hero-bg img{height:132%;top:-16%;bottom:auto;will-change:transform}
@media (prefers-reduced-motion:reduce){.banner .ph img,.hero-banner .hero-bg img{height:100%;top:0;will-change:auto}}

.hero-banner .hero-bg img{height:148%;top:-24%}

.brandband{position:relative;padding:0;aspect-ratio:8.081;display:grid;place-items:center;overflow:hidden;text-align:center}
.brandband .bb-bg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;display:block;border-radius:0}
.brandband .bb-scrim{position:absolute;inset:0;pointer-events:none;background:color-mix(in srgb,var(--color-text) 42%,transparent)}
.brandband .bb-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.05vw;padding:0 var(--edge)}
.brandband .bb-name{display:block;font-family:'Jost','Century Gothic','Futura',system-ui,sans-serif;font-size:4.08vw;line-height:1;letter-spacing:.2855em;text-indent:.2855em;text-transform:uppercase;color:var(--color-bg);white-space:nowrap}
.brandband .bb-n1{font-weight:500}
.brandband .bb-n2{font-weight:300}
.brandband .kicker{margin:0;font-family:'Jost','Century Gothic','Futura',system-ui,sans-serif;font-size:1.20vw;font-weight:500;line-height:1;letter-spacing:.1542em;text-indent:.1542em;text-transform:uppercase;color:var(--color-accent)}

.brandband .ph-tag{inset:0 auto auto 0;width:min(200px,17%);height:auto;align-items:flex-start;justify-content:flex-start;text-align:left;padding:8px 10px;gap:1px}
.brandband .ph-tag b{font-size:10px;line-height:1.3}
.brandband .ph-tag small{font-size:10px;line-height:1.3;max-width:none}
.brandband .ph-tag i{font-size:9px}

@media (max-width:860px){
  .brandband{aspect-ratio:auto;min-height:34vw;padding:calc(1.2*var(--leading)) 0}
  .brandband .bb-content{gap:var(--space-3)}
  .brandband .bb-name{font-size:clamp(20px,6.6vw,38px);white-space:normal}
  .brandband .kicker{font-size:clamp(8.5px,2.1vw,12px)}
}

.hero-banner .hero-content .display{font-size:34px;line-height:1.3;max-width:640px}
.hero-banner .hero-content .lead{font-size:22px;line-height:1.6;max-width:640px}
@media (max-width:860px){
  .hero-banner .hero-content .display{font-size:26px}
  .hero-banner .hero-content .lead{font-size:18px}
}

.quoteblock{display:flex;align-items:flex-start;margin-top:var(--leading)}
.qb-left{flex:0 0 50.75%;position:relative;z-index:1}
.qb-photo{margin:0;overflow:hidden;border-radius:0}
.qb-photo .ph{width:100%;height:auto;aspect-ratio:3/2;border-radius:0}

@supports (height:1cqw){
  .qb-left{container-type:inline-size}
  .qb-photo .ph{aspect-ratio:auto;height:calc(100cqw / 1.5 + 30px)}
}
.qb-panel{flex:0 0 50.75%;margin-left:-1.5%;margin-top:6.29%;padding:1.7em 1.9em;font-size:clamp(19px,2.05vw,26px);background:var(--color-accent-2-800);color:var(--color-bg)}
.qb-quote{margin:0;font-family:var(--font-heading);font-style:italic;font-weight:500;font-size:1em;line-height:1.5;color:var(--color-bg)}
.qb-sign{margin:1.5em 0 0;font-family:var(--font-body);font-style:normal;font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--color-bg) 78%,transparent)}

@media (max-width:1000px){
  .quoteblock{display:block}
  .qb-left,.qb-panel{flex:none}
  .qb-panel{margin:var(--space-4) 0 0;font-size:20px}
}

#contact{border-top:1px solid var(--color-divider)}

.contactblock{display:grid;grid-template-columns:47.3% 45.2%;column-gap:7.6%;align-items:start;margin-top:var(--leading)}
.cb-head{grid-column:1;grid-row:1}
.cb-photo{grid-column:1;grid-row:2;align-self:stretch;margin:var(--leading) 0 0;overflow:hidden;border-radius:5px}
.cb-photo .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:5px}
.cb-form{grid-column:2;grid-row:2;margin-top:var(--leading)}
.cb-note{grid-column:1;grid-row:3;margin-top:var(--space-4)}
.cb-rule{border:0;border-top:1px solid var(--color-divider);margin:var(--space-4) 0 var(--leading)}
@media (max-width:860px){
  .contactblock{display:block}
  .cb-photo{aspect-ratio:16/9;height:auto}
  .cb-form{margin-top:calc(1.5*var(--leading))}
}

body>nav.nav{position:absolute;top:16px;left:max(20px,3.3%);right:max(20px,3.3%);width:auto;max-width:none;margin:0;height:70px;
  z-index:10;border-radius:0;padding-inline:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;color:var(--color-bg);
  transition:color .35s ease}
body>nav.nav .nav-brand,body>nav.nav .nav-links a{color:inherit}

body>nav.nav .nav-links a{font-size:18px}

body>nav.nav .nav-id{display:flex;flex-direction:column;justify-content:center;gap:2px;margin-right:auto;min-width:0}
body>nav.nav .nav-brand{font-size:24px;line-height:1.1;margin-right:0}
body>nav.nav .nav-tagline{margin:0;color:var(--color-accent-300);white-space:nowrap;line-height:1.2;font-size:10px;letter-spacing:.05em}

@media (max-width:1450px){body>nav.nav .nav-tagline{display:none}}
body>nav.nav.nav-pe-fundal .nav-tagline{color:var(--color-accent-700)}
body>nav.nav .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav .nav-links a:hover{color:var(--color-accent-200)}

body>nav.nav.nav-pe-fundal{background:none;color:var(--color-text);box-shadow:none}
body>nav.nav.nav-pe-fundal .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav.nav-pe-fundal .nav-links a:hover{color:var(--color-accent-800)}

body>nav.nav .nav-links a,
body>nav.nav.nav-pe-fundal .nav-links a,
body>nav.nav.nav-inchis .nav-links a{color:#2F1505}
body>nav.nav .nav-links a[aria-current="page"],
body>nav.nav.nav-pe-fundal .nav-links a[aria-current="page"],
body>nav.nav.nav-inchis .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav .nav-links a:hover,
body>nav.nav.nav-pe-fundal .nav-links a:hover,
body>nav.nav.nav-inchis .nav-links a:hover{color:#F1833F}

body>nav.nav:not(.nav-inchis):not(.nav-pe-fundal) .nav-links a{color:var(--color-bg)}
body>nav.nav:not(.nav-inchis):not(.nav-pe-fundal) .nav-links a[aria-current="page"],
body>nav.nav:not(.nav-inchis):not(.nav-pe-fundal) .nav-links a:hover{color:#F1833F}
@media (max-width:860px){body>nav.nav{height:auto;min-height:60px;padding-block:10px}}

.hero-banner{position:relative;min-height:100vh;min-height:100svh;padding:0;display:grid;align-items:end;overflow:hidden}

.hero-banner .hero-navscrim{position:absolute;top:0;left:0;right:0;height:320px;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(32,30,29,0.680) 0.0%,rgba(32,30,29,0.673) 6.2%,rgba(32,30,29,0.654) 12.5%,rgba(32,30,29,0.623) 18.8%,rgba(32,30,29,0.580) 25.0%,rgba(32,30,29,0.529) 31.2%,rgba(32,30,29,0.470) 37.5%,rgba(32,30,29,0.406) 43.8%,rgba(32,30,29,0.340) 50.0%,rgba(32,30,29,0.274) 56.2%,rgba(32,30,29,0.210) 62.5%,rgba(32,30,29,0.151) 68.8%,rgba(32,30,29,0.100) 75.0%,rgba(32,30,29,0.057) 81.2%,rgba(32,30,29,0.026) 87.5%,rgba(32,30,29,0.007) 93.8%,rgba(32,30,29,0.000) 100.0%)}
.hero-banner .hero-content{position:relative;z-index:3;width:100%;max-width:none;margin:0;padding:0 var(--nume-stanga) 23svh;color:var(--color-bg)}
.hero-banner .hero-content .display{font-size:34px;line-height:1.3;max-width:30ch;margin:0}
.hero-banner .hero-content .kicker{color:var(--color-accent-300);margin-bottom:var(--space-3)}
.hero-banner .hero-sub{font-size:22px;line-height:1.6;max-width:34ch;margin:var(--space-3) 0 0;color:color-mix(in srgb,var(--color-bg) 62%,transparent)}
@media (max-width:860px){
  .hero-banner .hero-content{padding:0 7.5% 16svh}
  .hero-banner .hero-content .display{font-size:26px}
  .hero-banner .hero-sub{font-size:18px}
}

body>nav.nav.nav-fara-nume .nav-links{margin-left:auto}
.hero-banner .hero-bg img{height:100%;top:0;transform:none;will-change:auto}

.hero-banner.hero-parallax .hero-bg{
  background-attachment:fixed;background-size:cover;background-position:center;
  background-repeat:no-repeat;background-color:transparent}
.hero-banner.hero-parallax .hero-bg img{display:none}
.hero-banner.hero-parallax .hero-bg .ph-tag{display:none}

@media (hover:none),(max-width:860px){
  .hero-banner.hero-parallax .hero-bg{background-attachment:scroll}}
.hero-banner.hero-glass .hero-glasspane{position:absolute;inset:0;width:auto;z-index:2;pointer-events:none;background:color-mix(in srgb,#F9F4ED 94%,transparent);box-shadow:none;
  
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 44%,rgba(0,0,0,.42) 72%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 44%,rgba(0,0,0,.42) 72%,rgba(0,0,0,0) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-banner.hero-glass .hero-glasspane{backdrop-filter:blur(18px) saturate(.92);-webkit-backdrop-filter:blur(18px) saturate(.92)}}
.hero-banner.hero-glass .hero-content{width:53%;box-sizing:border-box;padding:0 3.98% 0 13.35%;z-index:3;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hero-banner.hero-glass .hg-foot{position:absolute;left:25.19%;right:7.51%;bottom:59px}

.hero-banner{--nume-stanga:max(20px,13.35vw)}
.hero-banner.hero-glass{--nume-stanga:13.35%}

.hero-banner.hero-split{--nume-stanga:max(20px,13.35vw)}

.hero-banner.hero-fara-foto{--nume-stanga:max(20px,13.35vw)}
.hero-banner .hg-id{position:absolute;top:110px;left:var(--nume-stanga);right:50.98%;z-index:4}
.hero-banner .hg-name{display:block;font-family:var(--font-heading);font-weight:300;font-size:34px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--color-bg);text-decoration:none}
.hero-banner .hg-tagline{display:block;margin:6px 0 0;font-size:12.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--color-accent-300)}
.hero-banner.hero-glass .display{font-size:clamp(30px,2.233vw,46px);line-height:1.06;max-width:none;margin:0;color:var(--color-bg)}
.hero-banner.hero-glass .display .hg-accent{color:var(--color-accent-300)}
.hero-banner.hero-glass .hero-sub{font-size:20px;line-height:1.53;max-width:none;margin:40px 0 0;color:color-mix(in srgb,var(--color-bg) 88%,transparent)}
.hero-banner.hero-glass .hg-rule{display:block;height:1px;margin:0;background:color-mix(in srgb,var(--color-bg) 19%,transparent)}
.hero-banner.hero-glass .hg-meta{display:block;margin:24px 0 0;font-size:11px;line-height:1.2;letter-spacing:.26em;text-transform:uppercase;color:var(--color-bg)}

.hero-banner.hero-glass .hg-name{color:var(--color-text)}
.hero-banner.hero-glass .hg-tagline{color:var(--color-accent-700)}
.hero-banner.hero-glass .kicker.typed{color:var(--color-accent-700)}
.hero-banner.hero-glass .display{color:var(--color-text)}
.hero-banner.hero-glass .display .hg-accent{color:var(--color-accent-700)}
.hero-banner.hero-glass .hero-sub{color:color-mix(in srgb,var(--color-text) 84%,transparent)}
.hero-banner.hero-glass .hg-rule{background:color-mix(in srgb,var(--color-text) 26%,transparent)}
.hero-banner.hero-glass .hg-meta{color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.hero-banner.hero-glass .hero-navscrim{display:none}
@media (max-width:1200px){.hero-banner.hero-glass .hero-glasspane{width:100%;-webkit-mask-image:none;mask-image:none}.hero-banner.hero-glass{--nume-stanga:7.5%}.hero-banner.hero-glass .hero-content{width:100%;padding:0 7.5%}.hero-banner .hg-id{right:max(20px,3.3%)}.hero-banner.hero-glass .hg-foot{left:7.5%;right:7.5%}.hero-banner.hero-glass .display{font-size:30px}.hero-banner.hero-glass .hero-sub{font-size:17px}}
@media (max-width:860px){.hero-banner .hg-id{top:100px}}
@media (max-width:797px){.hero-banner .hg-id{top:141px}}
@media (max-width:614px){.hero-banner .hg-id{top:182px}}
@media (max-width:341px){.hero-banner .hg-id{top:223px}}

@media (min-width:1390px){.hero-banner .hg-id{top:16px;height:70px;display:flex;flex-direction:column;justify-content:center}}

@media (max-width:614px){.hero-banner.hero-glass .hero-content{padding-top:282px;padding-bottom:170px}}
@media (max-width:410px){.hero-banner.hero-glass .hero-content{padding-top:319px;padding-bottom:180px}}
@media (max-width:341px){.hero-banner.hero-glass .hero-content{padding-top:377px;padding-bottom:180px}}

.repere{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:32px;row-gap:0;align-items:start;padding-block:160px;
  
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  
  padding-inline:max(var(--edge),calc(50vw - 720px + var(--edge)));
  background-color:var(--color-bg);
  background-image:url("images/acasa-repere-fundal.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed}
@media (max-width:860px){.repere{background-attachment:scroll}}

.rp-voal{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  
  background:linear-gradient(to bottom,
    rgba(249,244,237,1) 0%,
    rgba(249,244,237,1) 46%,
    rgba(249,244,237,.62) 64%,
    rgba(249,244,237,.28) 82%,
    rgba(249,244,237,0) 100%);
}
.repere>*:not(.rp-voal){position:relative;z-index:1}

.repere.rp-animat .rp-voal{opacity:1}
.repere.rp-animat .rp-eyebrow,
.repere.rp-animat .rp-titlu{
  opacity:var(--t,1);
  transform:translateY(calc((1 - var(--t,1)) * 18px));
}
.repere.rp-animat .rp-lead{
  opacity:var(--l,1);
  transform:translateY(calc((1 - var(--l,1)) * 14px));
}
.repere.rp-animat .rp-perechi{
  opacity:var(--c,1);
  transform:translateY(calc((1 - var(--c,1)) * 12px));
}
.repere>*{min-width:0}
.repere .rp-eyebrow{grid-column:1 / -1;margin:0 0 32px;text-align:center}
.repere .rp-titlu{grid-column:1 / -1;text-align:center;
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(30px,3.194vw,46px);line-height:1.14;letter-spacing:-.015em;
  margin:0;color:var(--color-text)}
.repere .rp-lead{grid-column:1 / -1;text-align:center;
  font-size:18px;line-height:1.6;margin:40px auto 0;max-width:78ch;
  color:color-mix(in srgb,var(--color-text) 86%,transparent)}
.repere .rp-perechi{grid-column:1 / -1;margin-top:120px;
  display:grid;grid-template-columns:47.44% 47.44%;justify-content:space-between;
  column-gap:5.12%}
.repere .rp-linie{display:block;height:1px;margin:0 40px 0 0;background:#2E5D3A}
.repere .rp-eticheta{font-family:var(--font-heading);font-weight:500;
  font-size:28px;line-height:1.25;margin:56px 0 0;color:var(--color-text)}
.repere .rp-corp{font-size:18px;line-height:1.65;margin:20px 0 0;max-width:none;padding-right:40px;
  color:var(--color-text)}
.repere .rp-mentiune{font-family:var(--font-heading);font-style:italic;font-weight:500;padding-right:40px;
  font-size:18px;line-height:1.5;margin:20px 0 0;max-width:none;
  color:color-mix(in srgb,var(--color-text) 66%,transparent)}
.repere .rp-mentiune::before{content:"— "}

.repere.cu-reveal .rp-item{opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .62s cubic-bezier(.2,.7,.2,1)}
.repere.cu-reveal .rp-item:nth-child(2){transition-delay:.08s}
.repere.cu-reveal .rp-item.a-intrat{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .repere.cu-reveal .rp-item{opacity:1;transform:none;transition:none}}
@media (max-width:1024px){
  .repere{padding-block:112px}
  .repere .rp-titlu,.repere .rp-lead{grid-column:1 / -1}
  .repere .rp-lead{max-width:62ch}
  .repere .rp-perechi{margin-top:88px}
  .repere .rp-eticheta{font-size:24px}}
@media (max-width:760px){
  .repere{padding-block:88px}
  .repere .rp-titlu{font-size:30px}
  .repere .rp-titlu br{display:none}
  .repere .rp-perechi{grid-template-columns:1fr;row-gap:72px}
  .repere .rp-lead{font-size:17px}
  .repere .rp-eticheta{font-size:22px;margin-top:40px}
  .repere .rp-corp,.repere .rp-mentiune{font-size:16px;padding-right:0}
  .repere .rp-linie{margin-right:0}}

body.pag-servicii{background:url("images/servicii-fundal-02.jpg") center/cover fixed no-repeat,
  var(--color-neutral-700)}
html:has(body.pag-servicii){background:var(--color-neutral-700)}

.pag-servicii .card-alb{position:relative;z-index:1;background:#fff;
  width:min(1440px,100%);max-width:1440px;margin-inline:auto;
  margin-block:0 120px;border-radius:0;box-shadow:none;padding:0}

.pag-servicii .wrap{max-width:1440px;padding-inline:var(--edge)}
.pag-servicii section{padding:0}
.pag-servicii .tb.card-alb{margin-bottom:120px}
.pag-servicii section.tight.card-alb{padding:48px 30px}

.pag-servicii .card-intro{padding:56px 30px 60px}
.pag-servicii .wrap>section:first-of-type{margin-top:120px}
.pag-servicii .card-intro .kicker{margin:0 0 var(--space-3)}
.pag-servicii .card-intro .ci-titlu{font-family:var(--font-heading);font-weight:500;
  font-size:clamp(30px,2.6vw,40px);line-height:1.16;letter-spacing:-.01em;
  margin:0;max-width:30ch;color:var(--color-text)}
.pag-servicii .card-intro .ci-text{font-size:18px;line-height:1.7;max-width:60ch;
  margin:var(--leading) 0 0;color:color-mix(in srgb,var(--color-text) 86%,transparent)}
.pag-servicii .card-intro .ci-oferte{margin-top:calc(1.4*var(--leading));
  display:flex;flex-wrap:wrap;gap:12px}

body.pag-servicii>nav.nav,
body.pag-programari>nav.nav,
body.pag-resurse>nav.nav{position:sticky;top:0;left:auto;right:auto;
  width:100%;max-width:none;margin:0;z-index:20;
  
  padding-left:max(20px,5.2vw);
  padding-right:max(20px,3.3%);
  background:color-mix(in srgb,#2E5D3A 62%,transparent);
  backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95)}

body>nav.nav.nav-inchis.nav-verde .nav-links a{color:var(--color-bg)}
body>nav.nav.nav-inchis.nav-verde .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav.nav-inchis.nav-verde .nav-links a:hover{color:#F1833F}

body.pag-servicii>nav.nav,
body.pag-programari>nav.nav,
body.pag-resurse>nav.nav{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);height:auto;min-height:78px;padding-block:14px}
body.pag-servicii>nav.nav .hg-id,
body.pag-programari>nav.nav .hg-id,
body.pag-resurse>nav.nav .hg-id{position:static;display:flex;flex-direction:column;
  align-items:flex-start;padding:0;right:auto;top:auto;height:auto}

body.pag-servicii>nav.nav .hg-name,
body.pag-programari>nav.nav .hg-name,
body.pag-resurse>nav.nav .hg-name{display:block;font-family:var(--font-heading);
  font-weight:300;font-size:34px;line-height:1.1;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--color-bg)}
body.pag-servicii>nav.nav .hg-tagline,
body.pag-programari>nav.nav .hg-tagline,
body.pag-resurse>nav.nav .hg-tagline{display:block;margin:6px 0 0;
  font-size:12.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-300)}
body.pag-servicii>nav.nav .nav-links,
body.pag-programari>nav.nav .nav-links,
body.pag-resurse>nav.nav .nav-links{margin-left:auto}
@media (max-width:900px){
  body.pag-servicii>nav.nav,
  body.pag-programari>nav.nav,
  body.pag-resurse>nav.nav{flex-wrap:wrap}
  body.pag-servicii>nav.nav .hg-tagline,
  body.pag-programari>nav.nav .hg-tagline,
  body.pag-resurse>nav.nav .hg-tagline{display:none}}
.pag-servicii .card-cta{padding:0}
.pag-servicii .card-cta .patch{background:transparent;padding:48px 30px}

.pag-servicii .tb.card-alb{display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;margin-inline:auto;padding:0;overflow:hidden}
.pag-servicii .tb.card-alb .split{display:contents}
.pag-servicii .tb.card-alb .split>div:first-child{order:2;
  display:flex;flex-direction:column;justify-content:center;padding:48px 30px}
.pag-servicii .tb.card-alb .split>div:last-child{order:1;position:relative;min-height:100%}
.pag-servicii .tb.card-alb:nth-of-type(even) .split>div:first-child{order:1}
.pag-servicii .tb.card-alb:nth-of-type(even) .split>div:last-child{order:2}

.pag-servicii .tb.card-alb .figure{margin:0;height:100%;border-radius:0}
.pag-servicii .tb.card-alb .figure::before{content:"";display:block;padding-top:67.917%}
.pag-servicii .tb.card-alb .figure .ph{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0}
.pag-servicii .tb.card-alb .split>div:last-child{display:block}

.pag-servicii .hero-banner.pe-fundal{background:transparent;position:relative;z-index:1}
.pag-servicii .hero-banner.pe-fundal .hg-name,
.pag-servicii .hero-banner.pe-fundal .hero-content{color:var(--color-bg)}
.pag-servicii .hero-banner.pe-fundal .hero-content .kicker,
.pag-servicii .hero-banner.pe-fundal .hg-tagline{color:var(--color-accent-300)}
.pag-servicii footer{position:relative;z-index:1}
@media (max-width:860px){
  body.pag-servicii{background-attachment:scroll}
  .pag-servicii .tb.card-alb{grid-template-columns:1fr}
  .pag-servicii .tb.card-alb .split>div:first-child,
  .pag-servicii .tb.card-alb:nth-of-type(even) .split>div:first-child{order:2}
  .pag-servicii .tb.card-alb .split>div:last-child,
  .pag-servicii .tb.card-alb:nth-of-type(even) .split>div:last-child{order:1}
  .pag-servicii .card-alb{margin-bottom:64px}}

.pag-servicii .btn.btn-primary{transition:background-color .2s ease,color .2s ease}
.pag-servicii .btn.btn-primary:hover,
.pag-servicii .btn.btn-primary:focus-visible{
  background:#2E5D3A;color:var(--color-bg)}

.pag-servicii .btn.btn-ghost{
  background:var(--color-accent-100);
  color:var(--color-accent-700);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent) 45%,transparent);
  padding-inline:22px;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.pag-servicii .btn.btn-ghost:hover,
.pag-servicii .btn.btn-ghost:focus-visible{
  background:#B0CBB0;
  color:var(--color-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#2E5D3A 45%,transparent)}

body>a.cta-flotant{
  position:fixed; top:40%; right:-64px; transform:translateY(-50%); z-index:850;
  display:flex; align-items:center; justify-content:center;
  width:42px; min-height:148px; padding:18px 0; margin:0; max-width:none;
  background:var(--color-accent); color:var(--color-bg); text-decoration:none;
  border-radius:8px 0 0 8px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text) 12%,transparent),
             -6px 0 22px color-mix(in srgb,var(--color-text) 18%,transparent);
  font-family:var(--font-body);
  font-weight:500; font-size:16px; letter-spacing:.01em;
  opacity:0; pointer-events:none;
  transition:right .25s ease, opacity .25s ease, background-color .2s ease;
}
body>a.cta-flotant.is-visible{right:0; opacity:1; pointer-events:auto}
body>a.cta-flotant span{writing-mode:vertical-rl; transform:none; white-space:nowrap; line-height:1}
body>a.cta-flotant:hover{background:var(--color-accent-600);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text) 18%,transparent),
             -6px 0 26px color-mix(in srgb,var(--color-text) 26%,transparent)}
body>a.cta-flotant:focus-visible{outline:2px solid var(--color-accent-700); outline-offset:2px}
@media (max-width:560px){
  body>a.cta-flotant{width:36px; min-height:124px; font-size:14px; border-radius:7px 0 0 7px}
}
@media (prefers-reduced-motion:reduce){
  body>a.cta-flotant{transition:opacity .15s linear}
}

.hero-card-wrap{position:relative;z-index:5;margin-top:-96px;padding:0 var(--edge);display:flex;justify-content:center}
.hero-card{width:min(980px,100%);box-sizing:border-box;background:var(--color-bg);
  padding:56px clamp(28px,5vw,72px);text-align:center;border-radius:5px}
.hero-card .kicker{margin:0 0 var(--space-3)}
.hero-card .display{font-size:clamp(26px,2.6vw,44px);line-height:1.2;margin:0;max-width:none;color:var(--color-text)}
.hero-card-linie{display:block;width:min(420px,70%);height:1px;margin:var(--leading) auto 0;background:linear-gradient(to right,transparent 0,color-mix(in srgb,var(--color-accent) 55%,transparent) 18%,var(--color-accent) 38%,var(--color-accent) 62%,color-mix(in srgb,var(--color-accent) 55%,transparent) 82%,transparent 100%)}
@media (max-width:860px){.hero-card-wrap{margin-top:-56px}.hero-card{padding:40px 28px}}
.intro-sub-hero{margin:calc(2*var(--leading)) auto calc(0.5*var(--leading));max-width:900px;padding:0 var(--edge);text-align:center}
.intro-sub-hero p{font-family:var(--font-heading);font-weight:300;font-size:34px;line-height:1.4;letter-spacing:.005em;margin:0;max-width:none;color:#2E5D3A}

section.tight>.intro-sub-hero{max-width:1100px;
  
  margin-block:calc(2*var(--leading))}
@media (max-width:640px){.intro-sub-hero p{font-size:26px}}
.intro-semnat{max-width:820px;margin:-20px auto 0;text-align:center}
.intro-semnat p{font-size:20px;line-height:1.75;margin:0;max-width:none}
.intro-semnat .semnatura{margin-top:var(--leading);font-family:var(--font-body);font-size:15px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 62%,transparent)}
@media (max-width:860px){.intro-semnat p{font-size:17px}}

.quoteblock-simplu .qb-left{flex:0 0 100%}

.hero-banner.hero-fara-foto{min-height:0;background:var(--color-bg);display:block;overflow:visible}
.hero-banner.hero-fara-foto .hg-id{position:static;left:auto;right:auto;top:auto;height:auto;
  display:block;padding:38px var(--nume-stanga) 0}
.hero-banner.hero-fara-foto .hg-name{color:var(--color-text)}
.hero-banner.hero-fara-foto .hg-tagline{color:var(--color-accent-700)}
.hero-banner.hero-fara-foto .hero-content{position:static;width:auto;max-width:none;
  padding:calc(3*var(--leading)) var(--nume-stanga) calc(2.5*var(--leading));color:var(--color-text)}
.hero-banner.hero-fara-foto .hero-content .kicker{color:var(--color-accent-700)}
.hero-banner.hero-fara-foto .hero-content .display{color:var(--color-text)}
.hero-banner.hero-fara-foto .hero-sub{color:color-mix(in srgb,var(--color-text) 72%,transparent)}

body>nav.nav.nav-inchis{color:var(--color-text)}
body>nav.nav.nav-inchis .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav.nav-inchis .nav-links a:hover{color:var(--color-accent-800)}
@media (max-width:860px){.hero-banner.hero-fara-foto .hg-id{padding-top:24px}}

.hero-banner.hero-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  /* fotografia tine tot ecranul, nu o banda de 800px */
  height:100svh;min-height:640px;overflow:hidden;
  
  background:linear-gradient(to bottom,var(--color-neutral-100) 0 75%,var(--color-surface) 75% 100%)}
.hero-banner.hero-split .hero-navscrim{display:none}

.hero-banner.hero-split .hs-titlu{grid-column:1;grid-row:1;align-self:center;
  padding:0 max(20px,3.98vw) 0 var(--nume-stanga)}
.hero-banner.hero-split .hs-titlu .kicker{color:var(--color-accent-700);margin:0 0 var(--space-3)}
.hero-banner.hero-split .hs-titlu .display{color:var(--color-text);
  font-size:clamp(26px,2.6vw,44px);line-height:1.2;margin:0;max-width:none}
.hero-banner.hero-split .hg-name{color:var(--color-text)}
.hero-banner.hero-split .hg-tagline{color:var(--color-accent-700)}

.hero-banner.hero-split .hero-bg{grid-column:2;grid-row:1;position:relative;inset:auto;
  align-self:center;justify-self:center;
  aspect-ratio:1122/1402;height:min(640px,calc(100% - 120px));width:auto;
  max-width:calc(100% - 96px)}
@media (max-width:860px){
  .hero-banner.hero-split{grid-template-columns:1fr;height:auto;min-height:0}
  .hero-banner.hero-split .hs-titlu{grid-row:1;padding:170px var(--nume-stanga) calc(2*var(--leading))}
  .hero-banner.hero-split .hero-bg{grid-column:1;grid-row:2;justify-self:center;
    aspect-ratio:1122/1402;height:auto;width:min(420px,calc(100% - 48px));max-width:none;margin-bottom:var(--leading)}}

.hero-banner.hero-split .hs-stanga{grid-column:1;grid-row:1;align-self:center;
  padding:0 clamp(16px,2vw,40px) 0 var(--nume-stanga)}
.hero-banner.hero-split .hs-mare{font-family:var(--font-heading);font-weight:300;
  font-size:clamp(40px,5.6vw,112px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 calc(1.6*var(--leading));color:var(--color-text)}
.hero-banner.hero-split .hs-jos{display:grid;grid-template-columns:minmax(105px,19%) 1fr;
  column-gap:clamp(18px,1.8vw,34px);align-items:start}
.hero-banner.hero-split .hs-salut{font-family:var(--font-body);font-weight:700;
  font-size:clamp(18px,1.5vw,26px);line-height:1.25;margin:0;color:var(--color-text)}
.hero-banner.hero-split .hs-text{font-size:18px;line-height:1.62;
  margin:0;max-width:none;color:color-mix(in srgb,var(--color-text) 82%,transparent)}

.hero-banner.hero-split .hero-bg{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text) 14%,transparent)}

.bara-cta{display:grid;
  grid-template-columns:minmax(0,1fr) 384px;
  grid-template-rows:auto auto;
  align-items:start;
  column-gap:clamp(32px,4vw,72px);row-gap:14px;
  
  width:calc(100% + 2*var(--edge));max-width:none;
  margin-inline:calc(-1*var(--edge));margin-block:calc(2.5*var(--leading)) 0;
  min-height:200px;
  padding-block:56px;padding-inline:clamp(24px,4.4%,64px);
  background:var(--color-accent-100)}
.bara-cta .bc-titlu{grid-column:1;grid-row:1;
  font-family:var(--font-heading);font-weight:500;font-size:30px;
  line-height:1.25;color:var(--color-text)}

.bara-cta .bc-text{grid-column:1;grid-row:2;
  font-size:18px;line-height:1.6;margin:0;max-width:none;
  color:color-mix(in srgb,var(--color-text) 86%,transparent)}
.bara-cta .bc-buton{grid-column:2;grid-row:1 / span 2;align-self:center;
  justify-self:end;display:inline-flex;align-items:center;
  justify-content:space-between;gap:24px;
  width:100%;min-height:56px;padding:0 28px;
  background:var(--color-accent);color:var(--color-bg);text-decoration:none;
  font-family:var(--font-body);font-weight:600;font-size:17px;border-radius:0;
  transition:background-color .2s ease}
.bara-cta .bc-buton:hover{background:var(--color-accent-700);color:var(--color-bg)}
@media (max-width:1000px){
  .bara-cta{grid-template-columns:1fr;grid-template-rows:auto;row-gap:18px;
    padding-block:40px}
  .bara-cta .bc-text br{display:none}
  .bara-cta .bc-titlu,.bara-cta .bc-text,.bara-cta .bc-buton{
    grid-column:1;grid-row:auto}
  .bara-cta .bc-buton{justify-self:start;align-self:start;width:min(384px,100%)}}

body.pag-contact>nav.nav,
body.pag-despre>nav.nav{position:sticky;top:0;left:auto;right:auto;
  width:100%;max-width:none;margin:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);height:auto;min-height:78px;padding-block:14px;
  padding-left:max(20px,5.2vw);padding-right:max(20px,3.3%);
  background:color-mix(in srgb,var(--color-bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95)}
body.pag-contact>nav.nav .hg-id,
body.pag-despre>nav.nav .hg-id{position:static;display:flex;flex-direction:column;
  align-items:flex-start;padding:0;right:auto;top:auto;height:auto}
body.pag-contact>nav.nav .hg-name,
body.pag-despre>nav.nav .hg-name{display:block;font-family:var(--font-heading);
  font-weight:300;font-size:34px;line-height:1.1;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--color-text)}
body.pag-contact>nav.nav .hg-tagline,
body.pag-despre>nav.nav .hg-tagline{display:block;margin:6px 0 0;
  font-size:12.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-700)}
body.pag-contact>nav.nav .nav-links,
body.pag-despre>nav.nav .nav-links{margin-left:auto}
body>nav.nav.nav-inchis.nav-bej .nav-links a{color:#2F1505}
body>nav.nav.nav-inchis.nav-bej .nav-links a[aria-current="page"]{color:#F1833F}
body>nav.nav.nav-inchis.nav-bej .nav-links a:hover{color:#F1833F}
@media (max-width:900px){
  body.pag-contact>nav.nav,
  body.pag-despre>nav.nav{flex-wrap:wrap}
  body.pag-contact>nav.nav .hg-tagline,
  body.pag-despre>nav.nav .hg-tagline{display:none}}

.bloc-final{position:relative;padding-top:0;margin-top:0;padding-bottom:calc(2*var(--leading))}

.bf-banner .ph{background-image:url("images/despre-04-banner.jpg");
  background-attachment:scroll;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.bf-banner .ph img{display:none}

.bf-banner .ph-tag{display:none}
@media (hover:none),(max-width:860px){
  .bf-banner .ph{background-attachment:scroll}}
.bf-banner{position:relative;margin:0;width:100vw;max-width:100vw;
  margin-inline:calc(50% - 50vw);display:block}

.bf-banner .ph{aspect-ratio:1500/560;width:100%;border-radius:0}
.bf-banner .ph img{object-position:center top}
.bf-card{position:absolute;left:16.52%;width:66.96%;bottom:0;z-index:2;text-align:center;align-items:center;
  background:color-mix(in srgb,#2E5D3A 62%,transparent);
  backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95);
  padding:48px clamp(32px,3.2vw,56px);
  display:flex;flex-direction:column;justify-content:center}
.bf-titlu{font-family:var(--font-heading);font-weight:500;
  font-size:clamp(26px,2.3vw,36px);line-height:1.18;letter-spacing:-.01em;
  margin:0;color:var(--color-bg)}
.bf-corp{font-size:18px;line-height:1.7;margin:var(--leading) 0 0;max-width:none;
  color:color-mix(in srgb,var(--color-bg) 90%,transparent)}
@media (max-width:860px){
  .bf-corp br{display:none}
  .bf-card{position:static;left:auto;width:auto;margin-inline:var(--edge);
    margin-top:-64px;padding:32px 26px}
  .bf-titlu{font-size:26px}}

.banda-verde{
  
  background-color:#B0CBB0;
  background-image:url("images/despre-banda-fundal.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:clamp(48px,5vw,88px);
  padding-inline:max(var(--edge),calc(50vw - 648px))}
@media (max-width:860px){.banda-verde{background-attachment:scroll}}
.bv-scena{position:relative;width:100%;height:703px}

.bv-panou{position:absolute;left:calc(50% - 50vw);width:100vw;right:auto;
  top:50%;transform:translateY(-50%);height:200px;
  background:#2E5D3A;display:block}
.bv-foto{position:absolute;left:5.2%;top:0;margin:0;width:512px;max-width:39.8%;z-index:2}
.bv-foto .ph{aspect-ratio:1122/1402;width:100%;height:auto;border-radius:0}

.bv-card{position:absolute;right:0;top:74px;width:49.5%;height:627px;
  background:color-mix(in srgb,#2E5D3A 62%,transparent);
  backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95);
  display:flex;flex-direction:column;justify-content:center;
  padding:48px clamp(32px,3.2vw,56px)}
.bv-card .kicker{margin:0 0 var(--space-3);color:var(--color-accent-300)}
.bv-titlu{font-family:var(--font-heading);font-weight:500;
  font-size:clamp(24px,2vw,32px);line-height:1.2;letter-spacing:-.01em;
  margin:0;color:var(--color-bg)}
.bv-text{font-size:18px;line-height:1.7;margin:var(--leading) 0 0;max-width:46ch;
  color:color-mix(in srgb,var(--color-bg) 90%,transparent)}
.bv-buton{align-self:flex-start;margin-top:calc(1.4*var(--leading))}
@media (max-width:1100px){
  .bv-scena{height:auto;display:grid;grid-template-columns:1fr;gap:32px}
  .bv-panou{display:none}
  .bv-foto{position:static;width:100%;max-width:420px;margin-inline:auto}
  .bv-card{position:static;width:100%;height:auto;padding:40px 30px}}
@media (max-width:860px){
  .hero-banner.hero-split .hs-stanga{padding:170px var(--nume-stanga) calc(2*var(--leading))}
  .hero-banner.hero-split .hs-jos{grid-template-columns:1fr;row-gap:var(--space-4)}}

.hero-banner.hero-split .hs-banda{position:absolute;left:var(--nume-stanga);right:50%;
  bottom:0;height:25%;margin:0;display:flex;align-items:center;
  padding-right:clamp(20px,2.2vw,40px);
  font-family:var(--font-heading);font-weight:500;font-style:italic;
  font-size:clamp(16px,1.3vw,22px);line-height:1.5;
  color:color-mix(in srgb,var(--color-text) 78%,transparent)}
@media (max-width:860px){
  .hero-banner.hero-split .hs-banda{position:static;height:auto;right:auto;
    padding:var(--leading) var(--nume-stanga)}}

.hero-banner .hero-glasscard{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  box-sizing:border-box;max-width:min(100%,720px);
  background:color-mix(in srgb,#2E5D3A 62%,transparent);
  backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95);
  padding:48px clamp(32px,3.2vw,56px);
  pointer-events:auto;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-banner .hero-glasscard{background:color-mix(in srgb,#2E5D3A 84%,transparent)}
}
@media (max-width:860px){
  .hero-banner .hero-glasscard{padding:32px clamp(20px,5vw,32px)}
}

.hero-banner .hero-glasscard .hero-sub{
  margin:var(--space-3) 0 0;
  max-width:46ch;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.6;
  color:color-mix(in srgb,var(--color-bg) 88%,transparent);
}

.pag-resurse .hero-banner{--nume-stanga:5.2%}
.pag-resurse .hero-banner .hero-content{padding-left:var(--nume-stanga);padding-right:var(--nume-stanga)}

.pag-resurse .btn.btn-primary{transition:background-color .2s ease,color .2s ease}
.pag-resurse .btn.btn-primary:hover,
.pag-resurse .btn.btn-primary:focus-visible{
  background:#2E5D3A;color:var(--color-bg)}

.pag-programari .cal{
  background:var(--color-neutral-100);
  border:1px solid var(--color-neutral-300);
  border-radius:5px;
  padding:clamp(20px,2.2vw,30px);
  box-shadow:0 1px 2px rgba(32,30,29,.04), 0 10px 28px -20px rgba(32,30,29,.30);
}
.pag-programari .cal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--space-4);margin-bottom:var(--space-4);
  border-bottom:1px solid var(--color-neutral-300);
}
.pag-programari .cal-month{
  font-family:var(--font-heading);font-weight:500;
  font-size:19px;letter-spacing:.01em;color:var(--color-text);
}
.pag-programari .cal-nav{display:flex;gap:6px}
.pag-programari .cal-arrow{
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--color-neutral-300);border-radius:5px;
  background:transparent;color:var(--color-neutral-700);
  font:inherit;font-size:17px;line-height:1;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.pag-programari .cal-arrow:hover{background:var(--color-neutral-200);color:var(--color-text)}

.pag-programari .cal-grid{grid-template-columns:repeat(7,1fr);gap:4px}
.pag-programari .cal-dow{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-neutral-500);padding-bottom:10px;
}
.pag-programari .cal-dow.cal-we{color:var(--color-neutral-400)}

.pag-programari .day{
  position:relative;aspect-ratio:1;border-radius:50%;
  font-size:15px;font-weight:500;color:var(--color-text);
  background:transparent;border:0;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}

.pag-programari .day.free::after{
  content:"";position:absolute;left:50%;bottom:16%;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--color-accent-2);
}
.pag-programari .day:hover:not(.off):not(.on){background:var(--color-neutral-200)}
.pag-programari .day.azi{box-shadow:inset 0 0 0 1px var(--color-accent-500)}
.pag-programari .day.on{background:var(--color-accent);color:var(--color-bg);box-shadow:none}
.pag-programari .day.on::after{background:var(--color-bg)}
.pag-programari .day.off{color:var(--color-neutral-400);cursor:default;background:transparent}
.pag-programari .day.off::after{display:none}
.pag-programari .day:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:2px}

.pag-programari .cal-legenda{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:var(--space-4) 0 0;font-size:12.5px;color:var(--color-neutral-600);
}
.pag-programari .cal-pastila{
  width:5px;height:5px;border-radius:50%;background:var(--color-accent-2);flex:0 0 auto;
}
.pag-programari .cal-azi-mark{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;margin-left:14px;
  box-shadow:inset 0 0 0 1px var(--color-accent-500);
}

.pag-programari .cal-ore{
  margin-top:var(--space-5);padding-top:var(--space-5);
  border-top:1px solid var(--color-neutral-300);
}
.pag-programari .cal-ore-titlu{
  margin:0 0 var(--space-3);font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-neutral-600);
}
.pag-programari .cal-ore-titlu span{
  display:block;margin-top:4px;
  font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--color-text);
}
.pag-programari .slots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;margin-top:0;
}
.pag-programari .slot{
  border:1px solid var(--color-neutral-300);border-radius:5px;
  background:var(--color-bg);padding:11px 8px;
  font:inherit;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--color-text);cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.pag-programari .slot:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-200)}
.pag-programari .slot.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.pag-programari .slot:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:2px}

.pag-programari .cal .note{
  margin-top:var(--space-4);font-size:12.5px;line-height:1.55;
  color:var(--color-neutral-600);
}
@media (max-width:560px){
  .pag-programari .cal{padding:18px}
  .pag-programari .day{font-size:14px}
}

.rezervare{
  background:var(--color-neutral-100);
  width:min(1440px,100%);margin-inline:auto;
  padding:clamp(28px,3.2vw,56px);
}
.rz-cap{max-width:72ch;margin-bottom:clamp(28px,2.6vw,40px)}
.rz-cap .kicker{color:#2E5D3A}
.rz-titlu{
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(26px,2.4vw,36px);line-height:1.15;letter-spacing:-.01em;
  margin:6px 0 12px;color:var(--color-text);
}
.rz-lead{font-size:18px;line-height:1.65;margin:0;color:color-mix(in srgb,var(--color-text) 82%,transparent)}

.rz-scena{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(24px,2.6vw,44px);align-items:start;
}

.rz-cal{background:#fff;padding:clamp(18px,1.6vw,26px);border:1px solid var(--color-neutral-300)}
.rz-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.rz-cal-luna{
  font-family:var(--font-heading);font-weight:500;font-size:20px;line-height:1;
  color:#2E5D3A;text-transform:capitalize;letter-spacing:.005em;
}
.rz-arrow{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border:1px solid var(--color-neutral-300);background:#fff;border-radius:50%;
  color:#2E5D3A;cursor:pointer;padding:0;transition:background .15s,border-color .15s,opacity .15s;
}
.rz-arrow svg{width:18px;height:18px}
.rz-arrow:hover:not(:disabled){background:#B0CBB0;border-color:#B0CBB0}
.rz-arrow:disabled{opacity:.3;cursor:default}
.rz-arrow:focus-visible{outline:2px solid #2E5D3A;outline-offset:2px}

.rz-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.rz-dow span{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  color:var(--color-neutral-600);padding-bottom:4px;
}
.rz-dow span.we{color:var(--color-neutral-400)}

.rz-zile{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;justify-items:center}
.rz-zi{
  width:100%;max-width:56px;aspect-ratio:1;display:grid;place-items:center;position:relative;
  border:0;border-radius:50%;background:transparent;
  font:inherit;font-size:16px;line-height:1;color:var(--color-text);
  cursor:pointer;padding:0;transition:background .15s,color .15s;
}
.rz-zi-gol{cursor:default}
.rz-zi.libera{background:#B0CBB0;font-weight:600;color:var(--color-text)}
.rz-zi.libera:hover{background:#98b998}
.rz-zi.ocupata{color:var(--color-neutral-400);cursor:default;background:transparent}
.rz-zi.azi{box-shadow:inset 0 0 0 1px #2E5D3A}
.rz-zi.on{background:#2E5D3A;color:var(--color-bg);box-shadow:none}
.rz-zi.on:hover{background:#2E5D3A}
.rz-zi:focus-visible{outline:2px solid #2E5D3A;outline-offset:2px}

.rz-legenda{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:18px 0 0;font-size:13px;color:var(--color-neutral-600);
}
.rz-legenda .lg-pastila{width:12px;height:12px;border-radius:50%;background:#B0CBB0;display:inline-block}
.rz-legenda .lg-azi{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #2E5D3A;display:inline-block;margin-left:14px}

.rz-ore{background:#2E5D3A;color:var(--color-bg);padding:clamp(20px,1.8vw,28px);
  align-self:stretch;display:flex;flex-direction:column}
.rz-ore-titlu{
  font-family:var(--font-heading);font-weight:500;font-size:20px;line-height:1.25;
  margin:0 0 18px;color:var(--color-bg);
}
.rz-slots{display:grid;gap:8px}
.rz-slot{
  width:100%;text-align:left;
  border:1px solid color-mix(in srgb,var(--color-bg) 45%,transparent);
  background:transparent;color:var(--color-bg);
  font:inherit;font-size:17px;padding:13px 18px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.rz-slot:hover{background:color-mix(in srgb,var(--color-bg) 14%,transparent)}
.rz-slot.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);font-weight:600}
.rz-slot:focus-visible{outline:2px solid var(--color-bg);outline-offset:2px}
.rz-slots-gol{
  margin:0;font-size:15px;line-height:1.6;
  color:color-mix(in srgb,var(--color-bg) 72%,transparent);
}
.rz-fus{
  margin:28px 0 0;padding-top:16px;font-size:13px;
  border-top:1px solid color-mix(in srgb,var(--color-bg) 24%,transparent);
  color:color-mix(in srgb,var(--color-bg) 72%,transparent);
}

.rz-form{margin-top:clamp(24px,2.4vw,40px)}
.rz-sumar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  background:#B0CBB0;padding:16px 22px;margin-bottom:clamp(20px,2vw,32px);
}
.rz-sumar-eticheta{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 62%,transparent);
}
.rz-sumar-text{
  font-family:var(--font-heading);font-weight:500;font-size:20px;line-height:1.2;
  color:#1f3f29;
}

.rz-campuri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.rz-camp{display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0;min-width:0}
.rz-camp-lat{grid-column:1 / -1}
.rz-camp>span,.rz-camp>legend{
  font-size:14px;letter-spacing:.01em;color:color-mix(in srgb,var(--color-text) 78%,transparent);padding:0;
}
.rz-camp>span i{font-style:normal;color:var(--color-accent);margin-left:2px}
.rz-camp>span small{font-size:13px;color:var(--color-neutral-600)}
.rz-input{
  width:100%;font:inherit;font-size:16px;color:var(--color-text);
  background:#fff;border:1px solid var(--color-neutral-300);border-radius:0;
  padding:12px 14px;transition:border-color .15s;
}
.rz-input:hover{border-color:var(--color-neutral-400)}
.rz-input:focus{border-color:#2E5D3A;outline:none}
textarea.rz-input{resize:vertical;min-height:104px;line-height:1.6}

.rz-seg{display:flex;border:1px solid var(--color-neutral-300);background:#fff;overflow:hidden}
.rz-seg-opt{flex:1;position:relative;cursor:pointer}
.rz-seg-opt input{position:absolute;opacity:0;width:0;height:0}
.rz-seg-opt span{
  display:grid;place-items:center;min-height:47px;font-size:16px;
  color:var(--color-text);transition:background .15s,color .15s;
}
.rz-seg-opt+.rz-seg-opt span{border-left:1px solid var(--color-neutral-300)}
.rz-seg-opt:hover span{background:var(--color-neutral-200)}
.rz-seg-opt input:checked+span{background:#2E5D3A;color:var(--color-bg);font-weight:600}
.rz-seg-opt input:focus-visible+span{outline:2px solid #2E5D3A;outline-offset:-2px}

.rz-actiuni{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin-top:clamp(22px,2.2vw,32px);
}
.rz-trimite{
  font:inherit;font-size:17px;font-weight:600;line-height:1;
  background:var(--color-accent);color:var(--color-bg);
  border:0;border-radius:0;padding:18px 34px;cursor:pointer;
  transition:background .15s,opacity .15s;
}
.rz-trimite:hover:not(:disabled){background:#2E5D3A}
.rz-trimite:disabled{opacity:.42;cursor:not-allowed}
.rz-trimite:focus-visible{outline:2px solid #2E5D3A;outline-offset:3px}
.rz-nota{
  margin:0;flex:1 1 280px;font-size:13.5px;line-height:1.55;
  color:color-mix(in srgb,var(--color-text) 62%,transparent);
}
.rz-eroare{
  margin:16px 0 0;padding:12px 16px;font-size:15px;
  background:var(--color-accent-100);color:var(--color-accent-700);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent) 40%,transparent);
}

@media (max-width:960px){
  .rz-scena{grid-template-columns:minmax(0,1fr)}
  .rz-ore{align-self:auto}
  .rz-slots{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .rz-slot{text-align:center}
}
@media (max-width:640px){
  .rezervare{padding:20px 16px}
  .rz-campuri{grid-template-columns:minmax(0,1fr)}
  .rz-zi{font-size:14px}
  .rz-trimite{width:100%;text-align:center}
}

.servicii-acasa{padding-top:100px;padding-bottom:calc(2.5*var(--leading))}
.servicii-acasa .kicker{color:#2E5D3A}
.servicii-acasa>.kicker,.sa-titlu,.sa-lead{text-align:center}
.sa-lead{margin-inline:auto}
.sa-titlu{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(28px,3.05vw,44px);line-height:1.14;letter-spacing:-.012em;
  margin:6px 0 0;color:var(--color-text);
}
.sa-lead{
  margin:18px auto 0;max-width:62ch;font-size:18px;line-height:1.7;
  color:color-mix(in srgb,var(--color-text) 82%,transparent);
}

.sa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:calc(1.6*var(--leading))}

.sa-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#D6E4D3;border-radius:4px;
}
.sa-foto{display:block;width:100%;aspect-ratio:393/209;border-radius:0}
.sa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sa-foto-duo{position:relative;overflow:hidden}
.sa-foto-duo .sa-foto-color{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .45s ease;
}
.sa-foto-duo .sa-foto-color picture{display:block;width:100%;height:100%}
.sa-foto-duo .sa-foto-color img{width:100%;height:100%;object-fit:cover;display:block}
.sa-card:hover .sa-foto-duo .sa-foto-color,
.sa-card:focus-within .sa-foto-duo .sa-foto-color{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sa-foto-duo .sa-foto-color{transition:none}
}

.sa-corp{display:flex;flex-direction:column;flex:1;padding:44px 48px 48px;text-align:center}
.sa-nume{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:28px;line-height:1.22;letter-spacing:-.005em;
  margin:0;color:var(--color-text);
}
.sa-text{
  margin:28px 0 0;font-size:18px;line-height:2;
  color:color-mix(in srgb,var(--color-text) 88%,transparent);
}
.sa-buton{
  margin:38px auto 0;align-self:center;
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:291px;min-height:62px;padding:8px 22px;
  border:1px solid #D97D2F;border-radius:6px;background:transparent;
  font-size:15px;line-height:1.3;color:#D97D2F;text-decoration:none;
  transition:background .18s,color .18s;
}
.sa-buton:hover{background:#D97D2F;color:var(--color-bg)}
.sa-buton:focus-visible{outline:2px solid #2E5D3A;outline-offset:3px}

.sa-card .sa-text{flex:1}

.sa-lat{grid-column:1 / -1;display:grid;grid-template-columns:28.5% minmax(0,1fr);align-items:stretch}
.sa-lat-foto{position:relative;min-height:283px}
.sa-lat-foto .ph{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.sa-lat-foto .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sa-lat .sa-corp{
  text-align:left;justify-content:center;
  padding:56px clamp(40px,4.6vw,68px) 56px clamp(40px,4.6vw,68px);
}
.sa-lat .sa-text{margin-top:24px;max-width:66ch;flex:0 1 auto}
.sa-lat .sa-buton{margin:30px 0 0;align-self:flex-start}

@media (max-width:980px){
  .sa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-lat{grid-template-columns:34% minmax(0,1fr)}
}
@media (max-width:700px){
  .sa-grid{grid-template-columns:minmax(0,1fr)}
  .sa-lat{grid-template-columns:minmax(0,1fr)}
  .sa-lat-foto{min-height:0;aspect-ratio:393/209}
  .sa-lat .sa-corp{padding:26px 26px 34px;text-align:center}
  .sa-lat .sa-buton{align-self:center;margin-inline:auto}
  .sa-corp{padding:32px 28px 36px}
  .sa-nume{font-size:25px}
}

.svg-simboluri{position:absolute;width:0;height:0;overflow:hidden}

.citat-pictat{
  position:relative;display:grid;place-items:center;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:clamp(72px,9vw,140px) var(--edge);
  background:url("images/acasa-citat-fundal.jpg") center/cover no-repeat,#0E1B13;
}
.cp-corp{margin:0;max-width:700px;text-align:center}
.cp-text{
  margin:0;font-family:var(--font-heading);font-weight:500;
  font-size:clamp(22px,2.1vw,30px);line-height:1.42;letter-spacing:.005em;
  color:var(--color-bg);text-wrap:balance;
}
.cp-sursa{
  display:block;margin-top:clamp(28px,2.6vw,42px);
  font-family:var(--font-body);font-style:normal;font-weight:700;
  font-size:13px;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-bg) 86%,transparent);
}
.cp-sursa i{font-style:normal}

.ind{
  position:relative;overflow:hidden;padding-block:0;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  height:clamp(560px,42.04vw,750px);
  background:#2E5D3A;color:var(--color-bg);
  isolation:isolate;
}

.ind-fonduri{position:absolute;inset:0;z-index:0}
.ind-foto{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:opacity 200ms ease;
}
.ind-foto.pe{opacity:1}

.ind-intro{
  --v:4.94vw;
  --sus:1.5vw;
  position:relative;z-index:6;overflow:hidden;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  margin-top:0;margin-bottom:calc(-1 * (var(--v) + var(--sus)));
  padding:0;color:var(--color-bg);
}
.ii-linie{
  position:absolute;z-index:4;left:0;width:100%;
  height:var(--v);top:auto;bottom:var(--sus);
  fill:none;stroke:#B49A4E;stroke-width:1.25;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.ii-banda{
  position:relative;z-index:3;background:#394A3B;
  padding:100px var(--edge) calc(var(--v) + 100px);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--v)), 0 100%);
}
.ind-intro-in{
  max-width:820px;margin-inline:auto;text-align:center;
}
@media (max-width:860px){
  .ind-intro{--v:7vw}
  .ii-banda{padding:80px var(--edge) calc(var(--v) + 80px)}
}
.ind-titlu{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.2;letter-spacing:-.012em;
  color:var(--color-bg);
}

.ind-nav{
  position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:0;background:none;cursor:pointer;
  color:color-mix(in srgb,var(--color-bg) 80%,transparent);
  transition:color .18s,transform .18s;
}
.ind-nav svg{width:30px;height:30px}
.ind-nav:hover{color:var(--color-bg)}
.ind-inapoi{left:clamp(6px,1.23vw,22px)}
.ind-inainte{right:clamp(6px,1.23vw,22px)}
.ind-inapoi:hover{transform:translateY(-50%) translateX(-3px)}
.ind-inainte:hover{transform:translateY(-50%) translateX(3px)}
.ind-nav:focus-visible{outline:2px solid var(--color-bg);outline-offset:3px}

.ind-fereastra{position:absolute;inset:0;z-index:2;overflow:hidden}
.ind-pista{display:flex;height:100%;will-change:transform}
.ind-panou{
  flex:0 0 25vw;max-width:25vw;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(40px,5.7vw,102px);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--color-bg) 26%,transparent);
  cursor:pointer;
}
.ind-panou.on{cursor:default}

.ind-panou::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb,#2E5D3A 52%,transparent);
  opacity:0;transition:opacity 200ms ease;
}
.ind-panou.on::before{opacity:1}
.ip-jos{position:relative;z-index:1}

.ip-jos{padding-left:clamp(18px,4.03vw,72px);padding-right:clamp(14px,2vw,36px);text-align:left}
.ip-nume{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(17px,1.96vw,35px);line-height:1.18;letter-spacing:-.005em;
  color:var(--color-bg);
  text-shadow:0 1px 14px color-mix(in srgb,#14281B 55%,transparent);
}
.ind-panou.on .ip-nume{text-shadow:none}
.ip-text,.ip-link{display:none}

.ind-panou.on .ip-text{
  display:block;margin:clamp(14px,1.73vw,31px) 0 0;max-width:293px;
  font-size:18px;line-height:1.6;
  color:color-mix(in srgb,var(--color-bg) 92%,transparent);
}
.ind-panou.on .ip-link{
  display:inline-block;margin-top:clamp(18px,2.3vw,41px);
  font-size:18px;font-weight:700;line-height:1.3;
  color:var(--color-accent);text-decoration:none;
}
.ind-panou.on .ip-link span{display:inline-block;margin-left:8px;transition:transform .18s}
.ind-panou.on .ip-link:hover{color:var(--color-bg)}
.ind-panou.on .ip-link:hover span{transform:translateX(5px)}
.ip-link:focus-visible{outline:2px solid var(--color-bg);outline-offset:3px}

@media (max-width:900px){
  .ind{height:auto;min-height:520px}
  .ind-panou{flex:0 0 50vw;max-width:50vw}
}
@media (max-width:620px){
  .ind{min-height:460px}
  .ind-panou{flex:0 0 100vw;max-width:100vw}
  .ind-panou.on .ip-text{max-width:none}
}

.newsletter{
  position:relative;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:clamp(70px,8vw,129px) var(--edge) clamp(90px,10vw,166px);
  background:#D6E4D3;
}
.nl-card{
  position:relative;
  width:min(1200px,100%);margin-inline:auto;
  background:#FFFBF7;border-radius:10px;
  padding:clamp(48px,5.5vw,82px) clamp(24px,4.6vw,56px) clamp(90px,11vw,150px);
  text-align:center;
}
.nl-titlu{
  margin:0 auto;max-width:860px;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(23px,2.2vw,29px);line-height:1.26;letter-spacing:-.008em;
  color:var(--color-text);text-wrap:balance;
}
.nl-sub{
  margin:26px auto 0;max-width:640px;
  font-size:18px;line-height:1.5;color:color-mix(in srgb,var(--color-text) 88%,transparent);
}

.nl-rand{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;
  width:min(1005px,100%);margin:48px auto 0;
}
.nl-input{
  flex:1 1 220px;max-width:280px;min-width:0;
  height:66px;padding:0 22px;
  font:inherit;font-size:17px;color:var(--color-text);
  background:transparent;border:1px solid #E0E0E0;border-radius:4px;
  transition:border-color .16s;
}
.nl-input::placeholder{color:#ADADAD}
.nl-input:hover{border-color:#C8C8C8}
.nl-input:focus{border-color:#2E5D3A;outline:none}
.nl-buton{
  flex:0 0 auto;height:70px;min-width:128px;padding:0 22px;
  font:inherit;font-size:16px;font-weight:700;line-height:1;
  color:var(--color-text);background:transparent;
  border:2px solid var(--color-text);border-radius:4px;cursor:pointer;
  transition:background .18s,color .18s;
}
.nl-buton:hover{background:var(--color-text);color:#FFFBF7}
.nl-buton:focus-visible{outline:2px solid #2E5D3A;outline-offset:3px}

.nl-privacy{
  margin:46px auto 0;max-width:620px;
  font-size:13px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 72%,transparent);
}

.nl-frunza-st{
  position:absolute;top:clamp(70px,8vw,129px);
  right:calc(50% + 600px + 37px);
  width:197px;height:208px;color:#141414;pointer-events:none;
}
.nl-frunza-dr{
  position:absolute;right:4px;bottom:0;
  width:196px;height:176px;color:#141414;pointer-events:none;
}
@media (max-width:1560px){.nl-frunza-st{display:none}}
@media (max-width:760px){
  .nl-frunza-dr{width:140px;height:126px;opacity:.9}
  .nl-input{flex:1 1 100%;max-width:none}
  .nl-buton{width:100%}
  .nl-rand{gap:10px}
}

body.pag-programari{
  background-image:url("images/programari-fundal-02.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#2E5D3A;
}
html:has(body.pag-programari){background:#2E5D3A}

body.pag-programari .hero-banner.hero-fara-foto{background:transparent}
body.pag-programari .hero-banner.hero-fara-foto .hg-name{color:var(--color-bg)}
body.pag-programari .hero-banner.hero-fara-foto .hg-tagline,
body.pag-programari .hero-banner.hero-fara-foto .hero-content .kicker{color:var(--color-accent-300)}
body.pag-programari .hero-banner.hero-fara-foto .hero-content .display{color:var(--color-bg)}
body.pag-programari .hero-banner.hero-fara-foto .hero-sub{
  color:var(--color-bg)}

body.pag-programari .sec{color:var(--color-bg)}

body.pag-programari .blocks .card{
  background:var(--color-neutral-100);
  box-shadow:0 14px 34px color-mix(in srgb,#14281b 26%,transparent);
}
body.pag-programari .rezervare{
  box-shadow:0 18px 46px color-mix(in srgb,#14281b 30%,transparent);
}

@media (max-width:860px){
  body.pag-programari{background-attachment:scroll}
}

body.pag-programari>nav.nav .nav-links a,
body.pag-programari>nav.nav.nav-inchis .nav-links a,
body.pag-programari>nav.nav.nav-pe-fundal .nav-links a{color:var(--color-bg)}
body.pag-programari>nav.nav .nav-links a:hover,
body.pag-programari>nav.nav.nav-inchis .nav-links a:hover,
body.pag-programari>nav.nav .nav-links a[aria-current="page"],
body.pag-programari>nav.nav.nav-inchis .nav-links a[aria-current="page"],
body.pag-programari>nav.nav.nav-pe-fundal .nav-links a[aria-current="page"]{color:#F1833F}

body.pag-despre .hero-banner.hero-split{
  
  /* bara de meniu sta lipita sus; hero-ul ia exact restul ecranului, deci
     fotografia nu mai trece de marginea de jos */
  height:calc(100svh - var(--nav-h,88px));
  min-height:0;
  /* Fotografia are 40px de margine doar la stanga; la dreapta si jos atinge
     marginea ecranului, iar ce nu incape se taie doar de sus.
     `contain` ar fi micsorat-o pe toate laturile, asa ca latimea e data
     explicit, iar inaltimea urmeaza proportia. */
  background-image:image-set(url("images/despre-hero-v1-2495.webp") type("image/webp"),url("images/despre-hero-v1.jpg") type("image/jpeg"));
  background-size:calc(100% - 160px) auto;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-color:#E6DED1;
}

body>.urg{
  position:fixed;right:28px;bottom:28px;z-index:860;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  pointer-events:none;
}
.urg-badge{pointer-events:auto}
.urg.is-open .urg-panou{pointer-events:auto}

.urg-badge{
  --urg-h:56px;--urg-cerc:64px;--urg-varf:20px;
  display:inline-flex;align-items:center;
  border:0;background:none;padding:0;margin:0;font:inherit;cursor:pointer;
}
.urg-label{
  display:flex;align-items:center;overflow:hidden;
  height:var(--urg-h);max-width:0;padding:0;
  background:#2E5D3A;color:var(--color-bg);
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:19px;line-height:1;white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - var(--urg-varf)) 0, 100% 50%,
                    calc(100% - var(--urg-varf)) 100%, 0 100%);
  transition:max-width .34s cubic-bezier(.4,0,.2,1),padding .34s cubic-bezier(.4,0,.2,1);
}
.urg-badge:hover .urg-label,
.urg-badge:focus-visible .urg-label,
.urg.is-open .urg-label{max-width:340px;padding:0 calc(var(--urg-varf) + 16px) 0 24px}

.urg-cerc{
  width:var(--urg-cerc);height:var(--urg-cerc);flex:0 0 auto;
  margin-left:calc(-1*var(--urg-varf) + 4px);
  border-radius:50%;background:var(--color-accent);color:var(--color-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px color-mix(in srgb,var(--color-text) 26%,transparent);
  transition:transform .2s,background .2s;
}
.urg-cerc svg{width:46%;height:46%;display:block}
.urg-badge:hover .urg-cerc{transform:scale(1.06)}
.urg.is-open .urg-cerc{background:#2E5D3A}
.urg-badge:focus-visible{outline:2px solid #2E5D3A;outline-offset:4px;border-radius:40px}

.urg-panou{
  width:min(360px,calc(100vw - 56px));
  background:var(--color-bg);border-radius:10px;
  padding:22px 24px 24px;
  box-shadow:0 18px 44px color-mix(in srgb,var(--color-text) 26%,transparent),
             inset 0 0 0 1px color-mix(in srgb,#2E5D3A 18%,transparent);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:100% 100%;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.urg.is-open .urg-panou{opacity:1;visibility:visible;transform:none}
.urg-kicker{
  display:block;font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--color-accent-700);margin-bottom:10px;
}
.urg-panou p{
  margin:0;font-size:18px;line-height:1.65;
  color:color-mix(in srgb,var(--color-text) 88%,transparent);
}
.urg-panou p a{
  color:#2E5D3A;text-decoration:none;font-weight:700;white-space:nowrap;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,#2E5D3A 55%,transparent);
}
.urg-panou p a:hover{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent)}
.urg-suna{
  display:flex;align-items:center;justify-content:center;
  margin-top:18px;min-height:50px;padding:0 20px;
  background:var(--color-accent);color:var(--color-bg);text-decoration:none;
  border-radius:8px;font-size:16px;font-weight:600;transition:background .18s;
}
.urg-suna:hover{background:#2E5D3A;color:var(--color-bg)}

@media (max-width:760px){
  body>.urg{right:16px;bottom:16px}
  .urg-badge{--urg-h:52px;--urg-cerc:58px}
  .urg-label{font-size:18px}
  
  .urg-badge:hover .urg-label{max-width:0;padding:0}
  .urg.is-open .urg-label{max-width:340px;padding:0 calc(var(--urg-varf) + 16px) 0 24px}
}
@media (prefers-reduced-motion:reduce){
  .urg-label,.urg-panou,.urg-cerc{transition:none}
}

.poveste{
  --v:4.94vw;                       
  --sus:1.5vw;                      
  position:relative;z-index:4;overflow:hidden;padding:var(--sus) 0 0;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  
  margin-top:calc(-1 * (var(--v) + var(--sus)));
}

.pv-linie{
  position:absolute;z-index:4;left:0;width:100%;
  height:var(--v);bottom:auto;
  top:calc(2 * var(--sus));
  fill:none;stroke:#968733;stroke-width:3;vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.pv-banda{
  position:relative;z-index:3;
  background-color:#16351F;
  background-image:linear-gradient(to bottom,
                     color-mix(in srgb,#16351F 74%,transparent) 0%,
                     color-mix(in srgb,#16351F 62%,transparent) 50%,
                     color-mix(in srgb,#16351F 44%,transparent) 100%),
                   image-set(url("images/acasa-alaturi-fundal-1600.webp") type("image/webp"),
                             url("images/acasa-alaturi-fundal.jpg") type("image/jpeg"));
  background-size:auto,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-attachment:scroll,scroll;
  color:var(--color-bg);
  padding:calc(var(--v) + clamp(48px,5vw,96px)) var(--edge) clamp(56px,6vw,110px);
  clip-path:polygon(0 var(--v), 50% 0, 100% var(--v), 100% 100%, 0 100%);
}
.pv-in{max-width:940px;margin-inline:auto;text-align:center}

.pv-eyebrow{
  display:block;font-size:16px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:color-mix(in srgb,var(--color-accent) 12%,var(--color-bg));margin-bottom:clamp(18px,1.8vw,30px);
}

.pv-titlu{
  position:relative;margin:0;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(26px,2.9vw,50px);line-height:1.2;letter-spacing:-.012em;
  color:var(--color-bg);
}
.pv-titlu em{
  font-style:italic;font-weight:400;
  box-shadow:inset 0 -3px 0 var(--color-accent);
}

.pv-titlu::before,.pv-titlu::after{
  content:"";position:absolute;top:50%;width:100vw;height:1px;
  background:color-mix(in srgb,var(--color-bg) 46%,transparent);
}
.pv-titlu::before{right:calc(100% + clamp(24px,3vw,56px))}
.pv-titlu::after{left:calc(100% + clamp(24px,3vw,56px))}

.pv-text{
  margin:clamp(24px,2.6vw,42px) auto 0;max-width:52ch;
  font-size:18px;line-height:1.75;
  color:color-mix(in srgb,var(--color-bg) 94%,transparent);
}

@media (max-width:860px){
  .poveste{--v:7vw}
  .pv-banda{background-image:linear-gradient(to bottom,
                     color-mix(in srgb,#16351F 74%,transparent) 0%,
                     color-mix(in srgb,#16351F 62%,transparent) 50%,
                     color-mix(in srgb,#16351F 44%,transparent) 100%),
                   image-set(url("images/acasa-alaturi-fundal-1100.webp") type("image/webp"),
                             url("images/acasa-alaturi-fundal.jpg") type("image/jpeg"))}
  .pv-titlu::before,.pv-titlu::after{display:none}
}

h2.sec,
.repere .rp-titlu,
.sa-titlu,
.rz-titlu,
.nl-titlu,
.bv-titlu,
.bf-titlu,
.pag-servicii .card-intro .ci-titlu,
.ind-titlu{
  font-family:var(--font-heading);
  font-weight:var(--font-heading-weight);
  font-size:clamp(26px,2.9vw,50px);
  line-height:1.2;
  letter-spacing:-.012em;
}

.pag-servicii .card-alb{
  background:color-mix(in srgb,#16351F 58%,transparent);
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-bg) 14%,transparent);
  color:var(--color-bg);
}
.pag-servicii .card-alb h1,
.pag-servicii .card-alb h2,
.pag-servicii .card-alb h3,
.pag-servicii .card-intro .ci-titlu{color:var(--color-bg)}
.pag-servicii .card-alb p,
.pag-servicii .card-alb .lead,
.pag-servicii .card-intro .ci-text{color:color-mix(in srgb,var(--color-bg) 82%,transparent)}
.pag-servicii .card-alb .kicker{color:var(--color-accent-300)}
.pag-servicii .card-alb a:not(.btn){color:var(--color-accent-300)}
.pag-servicii .card-alb a:not(.btn):hover{color:#F1833F}

.pag-servicii .card-alb .tag{
  background:color-mix(in srgb,var(--color-bg) 14%,transparent);
  color:var(--color-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-bg) 22%,transparent)}
.pag-servicii .card-intro .tag-accent{
  background:color-mix(in srgb,var(--color-accent) 26%,transparent);
  color:var(--color-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent) 55%,transparent)}
.pag-servicii .card-intro .tag-accent-2{
  background:color-mix(in srgb,#B0CBB0 24%,transparent);
  color:var(--color-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#B0CBB0 50%,transparent)}

.pag-servicii .card-cta .patch,
.pag-servicii .card-cta .patch.warm{background:transparent}
.pag-servicii .btn.btn-primary:hover,
.pag-servicii .btn.btn-primary:focus-visible{background:#B0CBB0;color:var(--color-text)}
.pag-servicii .btn.btn-ghost{
  background:color-mix(in srgb,var(--color-bg) 10%,transparent);
  color:var(--color-bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-bg) 45%,transparent)}
.pag-servicii .btn.btn-ghost:hover,
.pag-servicii .btn.btn-ghost:focus-visible{
  background:#B0CBB0;color:var(--color-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#2E5D3A 45%,transparent)}

.hero-banner.hero-afis{align-items:stretch}

.hero-banner.hero-afis .hero-navscrim{
  display:block;position:absolute;left:0;right:0;top:0;height:50%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,24,16,.60) 0%,
    rgba(18,24,16,.50) 30%,
    rgba(18,24,16,.30) 62%,
    rgba(18,24,16,.12) 84%,
    rgba(18,24,16,0)   100%);
}

.afis .ha-bloc{
  position:absolute;left:0;top:0;bottom:0;width:31.4%;min-width:220px;
  z-index:2;background:transparent;pointer-events:none;
}
.afis .ha-card{
  position:absolute;z-index:3;left:5.2%;top:17.2%;bottom:10.6%;
  width:min(41%,580px);
  color:var(--color-bg);
}
/* sticla verde: strat separat, ca taietura de jos sa n-o prinda si pe rama,
   care iese in afara cardului spre dreapta */
.afis .ha-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:color-mix(in srgb,#16351F 58%,transparent);
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-bg) 14%,transparent);
}
.afis .ha-rama{
  position:absolute;left:5.4%;right:-21.6%;
  top:4.7%;bottom:4.7%;
  border:2px solid #968733;pointer-events:none;
}
.afis .ha-in{
  position:relative;z-index:1;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 11% 0 13%;text-align:center;
}
.afis .ha-titlu{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(23px,2.36vw,38px);line-height:1.14;letter-spacing:-.012em;
  color:var(--color-bg);
}
.afis .ha-scris{
  display:block;margin:12px 0 0;font-family:var(--font-heading);
  font-style:italic;font-weight:400;
  font-size:clamp(26px,2.85vw,46px);line-height:1.1;
  color:var(--color-accent-300);
}
.afis .ha-bara{
  align-self:center;margin:clamp(26px,3vw,46px) 0 0;padding:14px 22px;
  /* conturul preia verdele-masliniu al liniei diagonale (#968733, acelasi
     ca .pv-linie); interiorul ramane verde, dar mai
     putin transparent decat cardul. Acelasi #16351F suprapus peste el
     insusi nu se vedea (diferenta masurata 1.02), asa ca fondul e un
     verde mai adanc, #0C1E12 la 65%. */
  background:color-mix(in srgb,#0C1E12 65%,transparent);
  color:var(--color-bg);
  box-shadow:inset 0 0 0 2px #968733;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;line-height:1.2;
  transition:background-color .2s ease;
}
.afis .ha-bara{transition:background-color .2s ease,box-shadow .2s ease}
.afis .ha-bara:hover,.afis .ha-bara:focus-visible{
  background:color-mix(in srgb,#0C1E12 82%,transparent);
  box-shadow:inset 0 0 0 2px #BEAB41}
.afis .ha-meta{
  margin:18px 0 0;font-size:18px;line-height:1.6;max-width:none;
  color:color-mix(in srgb,var(--color-bg) 82%,transparent);
}

/* identitatea e identica cu cea de pe Despre: nume 34px / weight 300 /
   letter-spacing .08em, subtitlu 12.5px / weight 600, totul pe un rand.
   Containerul ia latimea textului (pe Despre masoara 451px), deci
   subtitlul nu se mai rupe. Efectul de tastare ramane neatins. */
.hero-afis .hg-id{z-index:5;top:16px;left:5.2%;right:auto;width:max-content;max-width:62%}
.hero-afis .hg-name{font-size:34px;white-space:nowrap;color:#F1EEE9}
.hero-afis .hg-tagline{color:#C9B187}

@media (max-width:1100px){
  .afis .ha-bloc{width:100%}
  .afis .ha-card{left:7.5%;right:7.5%;width:auto;top:20%;bottom:8%}
  .afis .ha-rama{right:5.4%}
  .afis .ha-in{padding:0 8%}
}

/* ── Contact: panou bej cu fotografia in arcada ────────────────────────────
   Fundalul e cremul paginii, nu verde, deci sectiunea nu mai e un bloc lipit
   peste pagina ci face parte din ea. Titlul sus-stanga cu firul auriu in
   continuarea lui; fotografia, 635x953, lipita de muchia din stanga-jos si
   taiata in arcada - semicerc perfect sus, raza 317.5px, exact jumatate din
   latimea ei, deci arcul nu deformeaza nimic. Datele in dreapta, fiecare cu
   bulina ei plina, verde cu simbol crem, ca in referinta. */
.ct-afis{
  position:relative;overflow:hidden;
  margin-top:calc(2.5*var(--leading));
  background:var(--color-bg);color:var(--color-text);
  display:flex;flex-direction:column;
  padding:clamp(44px,4.6vw,80px) clamp(40px,4.4vw,80px);
}
.ct-cap{
  padding-left:clamp(40px,4.4vw,80px);
  display:flex;align-items:center;gap:clamp(24px,3vw,56px);
  margin-bottom:clamp(36px,4vw,72px);
}
.ct-fir{flex:1 1 auto;height:1px;background:#968733}

/* Cardul: fotografia si datele de contact impreuna, pe un strat translucid
   verde deschis, centrat in sectiune, cu 60px de aer de jur imprejur.
   Fundalul de sub el se vede neatins - cardul doar il inmoaie sub el. */
.ct-card{
  position:relative;z-index:2;
  /* cardul sta centrat in mijlocul fotografiei */
  margin-inline:auto;
  display:grid;
  /* fotografia a iesit din card: ramane o singura coloana, cu datele de
     contact, iar cardul se ingusteaza la latimea textului */
  grid-template-columns:minmax(0,1fr);
  /* latimea creste cu cei 40px dusi in lateral, ca sa nu se ingusteze
     coloana de text si sa nu se rupa adresa pe doua randuri */
  width:min(490px,100%);
  align-items:stretch;
  /* Inaltimea fotografiei, de care atarna tot cardul: cat mai mult din ecran
     (fereastra minus titlu, padding de sus si cele 2x120px ale cardului), dar
     niciodata mai putin decat coloana de text, ca poza sa ajunga mereu jos. */
  --ct-h:max(clamp(407px,31.4vw,495px),
             min(calc(100svh - clamp(368px,28.6vw,445px)),760px));
  column-gap:clamp(36px,4.4vw,80px);
  --ct-pad:clamp(28px,3vw,40px);
  /* cat de departe se imprastie fumul in afara cardului */
  --ct-fum:clamp(72px,9vw,150px);
  /* cei 20px taiati de sus si de jos trec in lateral: paddingul devine egal
     pe toate laturile (40 + 20 = 60px la desktop) */
  padding:calc(var(--ct-pad) + 20px);
  /* cardul nu mai atinge nicio margine: toate cele patru colturi se rotunjesc */
  border-radius:var(--radius-lg);
}
/* Voalul si sticla stau pe un strat propriu, ca sa poata fi stinse spre
   margini: masca il tine plin pana la linia de continut (--ct-pad) si il duce
   la zero exact pe muchia cardului, deci marginile raman curat transparente. */
.ct-card::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  /* Chenar definit: stratul se opreste exact pe muchia cardului (inset:0),
     fara masca de stingere, deci marginea se citeste ca o linie, nu ca o
     imprastiere. Verdele e mai deschis decat #5e685e de dinainte, iar
     conturul e trasat cu un inset box-shadow, nu cu border, ca sa nu adauge
     1px peste dimensiunea cardului. */
  inset:0;
  border-radius:inherit;
  background:color-mix(in srgb,#7C8C72 23%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#F9F4ED 34%,transparent);
  /* opacitatea cardului venea din blur, nu din tenta: 30px matuia complet
     fotografia. La 6px se vede prin sticla, dar detaliul tot se inmoaie. */
  -webkit-backdrop-filter:blur(6px) saturate(1.22) brightness(1.05);
  backdrop-filter:blur(6px) saturate(1.22) brightness(1.05);
}
.ct-card > *{position:relative;z-index:1}

/* Pe telefon fotografia de sub card ocupa tot ecranul si e mult mai luminoasa
   decat pe desktop, asa ca tenta de 23% nu mai tine: scrisul crem se pierde
   in ea. Sub 860px trecem pe verdele inchis al sitului, mai dens, si inmuiem
   fotografia de dedesubt. Peste 860px cardul ramane exact cum era. */
@media (max-width:860px){
  .ct-card::before{
    background:color-mix(in srgb,#2E5D3A 72%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(1.05) brightness(.9);
    backdrop-filter:blur(10px) saturate(1.05) brightness(.9);
  }
}

/* Cardul fiind acum verde inchis (#5e685e), scrisul din el se inverseaza:
   text crem pe fond inchis, bulinele devin crem cu simbol verde. */
.ct-card .ct-scris{color:var(--color-bg)}
.ct-card .ct-rand{color:var(--color-bg)}
.ct-card .ct-date b{color:#FDF2E8}
.ct-card .ct-date a{
  color:var(--color-bg);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-bg) 55%,transparent);
}
.ct-card .ct-date a:hover{
  color:#FDF2E8;box-shadow:inset 0 -1px 0 #FDF2E8;
}
/* bulinele raman cele de baza: cerc verde #2E5D3A, simbol crem */
.ct-card .ct-meta{color:var(--color-bg)}
/* Fotografia coboara pana la marginea de jos a cardului - 0px dedesubt.
   Inaltimea ei e --ct-h plus paddingul de jos, pe care il anuleaza cu o marja
   negativa, iar latimea vine din raportul natural 635/953: cu cat e mai lunga,
   cu atat e mai lata, si cardul se readapteaza dupa ea. */
.ct-in{min-width:0;align-self:center}

.ct-titlu{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(30px,2.9vw,46px);line-height:1.1;letter-spacing:-.012em;
  color:var(--color-bg);
  /* titlul sta direct pe fotografie, fara voal: umbra ii tine conturul si
     peste petele luminoase din frunzis */
  /* fundalul nu mai e neclar, iar cerul din spatele titlului e luminos:
     umbra e intarita ca literele crem sa isi tina conturul peste el */
  text-shadow:0 1px 2px rgba(10,14,8,.85),
              0 2px 10px rgba(10,14,8,.70),
              0 0 24px rgba(10,14,8,.55);
}
.ct-scris{
  display:block;margin:0 0 clamp(28px,2.8vw,44px);font-family:var(--font-heading);
  font-style:normal;font-weight:500;
  font-size:calc(clamp(22px,2vw,32px) - 5px);line-height:1.2;
  color:#2E5D3A;
}
.ct-date{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(18px,1.9vw,30px);
}
.ct-date li{display:flex;align-items:center;gap:clamp(16px,1.5vw,24px)}
.ct-bulina{
  flex:0 0 auto;width:clamp(46px,3.6vw,58px);height:clamp(46px,3.6vw,58px);
  border-radius:50%;display:grid;place-items:center;
  background:#2E5D3A;color:var(--color-bg);
}
.ct-bulina svg{
  width:52%;height:52%;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.ct-rand{display:block;font-size:18px;line-height:1.45;color:var(--color-text)}
.ct-date b{
  display:block;margin-bottom:3px;font-family:var(--font-body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#5A2A08;
}
.ct-date a{
  color:var(--color-text);text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-text) 45%,transparent);
}
.ct-date a:hover{color:#B55C14;box-shadow:inset 0 -1px 0 #B55C14}
/* butonul a fost scos din sectiune; nota preia distanta pe care o tinea el,
   altfel ar fi lipita de ultimul rand din lista */
.ct-meta{
  margin:clamp(30px,3vw,46px) 0 0;font-size:14px;line-height:1.6;max-width:46ch;
  color:color-mix(in srgb,var(--color-text) 86%,transparent);
}
/* frunza din coltul de jos-dreapta, in locul ornamentului din referinta */
.ct-frunza{
  position:absolute;right:-10px;bottom:-14px;z-index:0;
  width:168px;height:196px;color:#2E5D3A;opacity:.12;
  pointer-events:none;
}

/* Sub 1240px panoul devine o singura coloana: titlul, fotografia in arcada
   (centrata, micsorata proportional daca ecranul e mai ingust decat ea) si
   datele dedesubt. */
@media (max-width:1240px){
  .ct-afis{padding:clamp(40px,6vw,64px) var(--edge)}
  .ct-cap{padding-left:0}
  .ct-card{
    grid-template-columns:100%;
    row-gap:clamp(32px,5vw,48px);
    justify-items:center;
    --ct-pad:clamp(28px,6vw,56px);
  }
  .ct-card{--ct-h:auto}
  .ct-in{width:100%}
  .ct-frunza{width:120px;height:140px}
}

.newsletter + footer{margin-top:0}

body>nav.nav.nav-inchis.nav-bej.nav-peste-foto .nav-links a{
  color:var(--color-bg);
  text-shadow:0 1px 3px rgba(20,16,12,.55),0 0 20px rgba(20,16,12,.40);
}
body>nav.nav.nav-inchis.nav-bej.nav-peste-foto .nav-links a[aria-current="page"],
body>nav.nav.nav-inchis.nav-bej.nav-peste-foto .nav-links a:hover{
  color:#F1833F;
  text-shadow:0 1px 3px rgba(20,16,12,.60),0 0 20px rgba(20,16,12,.45);
}


.deschidere{
  position:relative;height:200vh;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
}
.ds-lipit{
  position:sticky;top:0;height:100vh;
  display:grid;place-items:center;
}
.ds-card{
  position:relative;overflow:hidden;margin:0;
  
  width:calc(54rem + (100vw - 54rem) * var(--pe,0));
  height:calc((92 + 8 * var(--pe,0)) * 1vh);
  border-radius:calc((30 - 30 * var(--pe,0)) * 1px);
  background:#6F7F55;
  box-shadow:none;
  display:grid;place-items:center;
  will-change:width,height;
}
.ds-card .ds-poza{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0;
  background:none;box-shadow:none;
  transform:scale(calc(1.12 - .12 * var(--pe,0)));
  opacity:var(--pe,1);
  will-change:transform,opacity;
}
.ds-card .ds-poza img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* La descoperirea completa fotografia se vede intreaga, nedecupata: `contain`
   o incadreaza in cardul care are deja 100vh, deci nu depaseste ecranul si nu
   schimba inaltimea sectiunii. Marginile ramase se umplu cu verdele cardului.
   Doar pe ecrane late - pe telefon, unde cadrul e inalt si ingust, `contain`
   ar lasa poza foarte mica, asa ca acolo ramane `cover`. */
@media (min-width:1024px){
  .ds-card .ds-poza img{object-fit:contain}
}

.ds-card .ds-fisa{
  z-index:2;
  
  align-self:stretch;justify-self:stretch;margin:0;
  
  overflow:hidden;
  left:calc(16.52% * var(--pe,1));
  width:calc(100% - 33.04% * var(--pe,1));
  
  top:auto;bottom:0;height:auto;
  min-height:calc(100% - 100% * var(--pe,1));
  display:flex;flex-direction:column;justify-content:flex-start;
  
  padding-top:clamp(32px,3.2vw,48px);padding-bottom:clamp(32px,3.2vw,48px);
  
  background:#F5EFE6;
  opacity:clamp(0, calc((1 - var(--pe,0)) / .3), 1);
}

.ds-fisa .ds-poza-jos{
  display:block;position:relative;overflow:hidden;
  flex:1 1 auto;min-height:0;
  align-self:center;
  margin-top:calc(clamp(14px,1.5vw,22px) * (1 - var(--pe,0)));
  margin-inline:auto;
  width:auto;max-width:100%;aspect-ratio:635/953;border-radius:0;
  
  --stins:clamp(0, calc(1 - var(--p,0) / .6), 1);
  opacity:var(--stins);
  filter:saturate(var(--stins));
}
.ds-fisa .ds-poza-jos img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

.ds-supra{
  display:block;text-align:center;
  position:relative;width:fit-content;
  font-family:var(--font-heading);font-size:20px;font-weight:300;
  letter-spacing:.01em;text-transform:uppercase;line-height:1.3;
  /* fundalul sectiunii e acum o fotografie aproape alba */
  color:color-mix(in srgb,#2F2D29 72%,transparent);
  margin:0 auto var(--half);
}
.ds-supra::before,
.ds-supra::after{
  content:"";position:absolute;top:50%;width:50vw;height:1px;
  background:color-mix(in srgb,#2F2D29 38%,transparent);
}
.ds-supra::before{right:calc(100% + clamp(20px,2.4vw,44px))}
.ds-supra::after{left:calc(100% + clamp(20px,2.4vw,44px))}
.ds-fisa .bf-titlu{
  position:relative;width:fit-content;margin-inline:auto;white-space:nowrap;
  font-weight:300;letter-spacing:.01em;color:#2F2D29;
  font-size:clamp(26px,2.3vw,36px);line-height:1.18;
}
.ds-fisa .bf-corp{
  font-size:18px;line-height:1.5;
  margin-top:14px;max-width:none;
}

@media (max-width:720px){
  .ds-card .ds-fisa{
    left:calc(6% * var(--pe,1));
    width:calc(100% - 12% * var(--pe,1));
    padding:20px 24px 0;
  }
  .ds-card .ds-fisa .bf-corp br{display:none}
  .ds-supra{font-size:16px}
  .ds-fisa .bf-titlu{white-space:normal}
  .ds-supra::before,.ds-supra::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .deschidere{height:auto}
  .ds-lipit{position:static;height:auto;padding-block:clamp(48px,6vw,96px)}
}

html:has(body.pag-despre){background:#F5EFE6}
body.pag-despre{background:#F5EFE6}
.pag-despre .ds-card{background-color:#F5EFE6;background-image:none}
.pag-despre .drum2{background:#F5EFE6}
.pag-despre .intro-sub-hero p{color:var(--color-bg)}

.pag-despre section.tight:has(>.intro-sub-hero){
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:clamp(56px,6vw,96px);
  background:#E6DED1;
}
.pag-despre section.tight>.intro-sub-hero{margin-block:0;padding-inline:var(--edge)}
.pag-despre .intro-sub-hero p{color:#2E5D3A}


/* Acasa: paragraful de sub hero capata banda lui, pe toata latimea ecranului,
   in exact verdele cu care se termina hero-ul (#5e685e), deci cele doua se
   leaga fara cusatura - de aceea margin-top 0. Textul se inverseaza: crem pe
   verde, 4.9 contrast la 34px.
   Latimea plina se face din box-shadow intins in lateral si taiat pe
   verticala cu clip-path, nu din 100vw: asa nu depinde de cum e centrat
   .wrap si nu poate aparea bara de scroll orizontala. */
.scena > .intro-sub-hero{
  /* Latime plina: body are deja overflow-x:clip, deci 100vw nu poate scoate
     bara de scroll orizontala. Nu mai merge cu box-shadow, pentru ca o umbra
     intinde o culoare, nu o fotografie. */
  width:100vw;max-width:100vw;
  /* Fara margine jos: ea cadea in afara cutiei benzii, deci scena se
     termina cu 56px mai jos decat se termina banda. Cardul isi incheia
     scurtarea la capatul benzii, dar ramanea fixat inca 56px, timp in
     care textul continua sa urce - exact suprapunerea de 56px masurata.
     Aerul pana la blocul urmator il da oricum padding-ul lui de 160px. */
  margin:0 calc(50% - 50vw);
  padding-block:clamp(56px,6vw,96px);padding-inline:var(--edge);

  /* Banda nu are fotografie proprie: fotografia vine dintr-un singur strat,
     al scenei. Verdele revine, dar ca degrade, nu ca suprafata plina. */
  position:relative;
}
/* Valul verde #5e685e, acelasi ca inainte, dar stins in sus.
   Incepe cu 240px mai sus decat banda, adica din fotografia hero-ului, si
   urca la zero: la granita dintre cele doua blocuri opacitatea e deja mica,
   iar in varf e nula, deci nu exista nicio muchie unde sa se vada ca incepe
   ceva. Jos ajunge la 100%, adica exact #5e685e, plin - dar numai pe ultimii
   24px; de acolo in sus scade continuu, fara palier, pe toata inaltimea. */
.scena > .intro-sub-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-240px;
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(94,104,94,1)   0,
    rgba(94,104,94,1)   24px,
    rgba(94,104,94,.89) 22%,
    rgba(94,104,94,.56) 48%,
    rgba(94,104,94,.24) 74%,
    rgba(94,104,94,.06) 90%,
    rgba(94,104,94,0)   100%);
}
.scena > .intro-sub-hero p{
  position:relative;z-index:1;
  color:var(--color-bg);max-width:900px;margin-inline:auto;
  /* fara val verde, textul isi poarta propria umbra peste fotografie, exact
     ca numele si meniul din hero */
  text-shadow:0 1px 2px rgba(10,14,8,.92),
              0 0 8px rgba(10,14,8,.80),
              0 0 22px rgba(10,14,8,.62);
}


/* ── Acasa: scena fixata ───────────────────────────────────────────────────
   Hero-ul si banda de sub el sunt acum doua randuri ale aceleiasi scene, iar
   cardul a iesit din hero si sta intr-un strat propriu care le acopera pe
   amandoua. Stratul e sticky, deci cardul ramane pe loc cat timp fotografia
   si textul urca pe sub el, si se desprinde exact cand se termina banda - de
   acolo pagina merge mai departe normal, iar fundalul fixat nu mai are ce
   acoperi, deci parallax-ul se opreste si el in acelasi punct.
   De ce trebuia mutat cardul din hero: un element sticky nu poate ramane pe
   loc mai mult decat il tine blocul lui parinte, iar hero-ul are exact o
   inaltime de ecran - ar fi stat fixat 95px si atat. Sub noul parinte, care
   tine cat hero-ul plus banda, cursa devine de cateva sute de pixeli.
   Geometria cardului nu s-a schimbat: stratul are tot 100svh, deci aceleasi
   procente (5.2% stanga, 17.2% sus, 10.6% jos) cad unde cadeau si inainte. */
.scena{position:relative}
.scena-fix{
  position:absolute;top:0;left:0;right:0;height:100svh;
  z-index:4;pointer-events:none}
.scena-fix > .ha-card{pointer-events:auto}

@media (min-width:1101px){
  .scena{display:grid;grid-template-columns:100%}
  .scena > .hero-banner{grid-area:1/1}
  .scena > .intro-sub-hero{grid-area:2/1}
  .scena > .scena-fix{
    grid-row:1/3;grid-column:1;
    position:sticky;top:0;align-self:start;height:100svh}
}
/* Cu miscarea redusa, cardul nu mai e fixat: sta peste hero, ca inainte. */
@media (prefers-reduced-motion:reduce){
  .scena > .scena-fix{position:absolute;top:0;height:100svh}
}


/* Cardul se scurteaza pe masura ce scrolezi, nu din start.
   Masurat: paragraful benzii are 143px, iar banda are deasupra lui padding de
   clamp(56px,6vw,96px). Ca randurile lui sa nu mai intre niciodata sub card,
   muchia de jos a cardului trebuie sa stea cu exact atat deasupra capatului
   scenei - de aici bottom:calc(padding + 143px), adica 229px la 1440x900
   (25.5%), 239px la 1920. Cardul ramane intre 443px si 655px inaltime, peste
   continutul lui real de 352-399px, deci nu se taie nimic din text.
   Scurtarea e legata de intrarea benzii in ecran: incepe cand banda atinge
   marginea de jos si se termina exact cand cardul se desprinde. La scroll
   inapoi se desface singura.
   Nota: 143px de scurtare, cat suprapunerea masurata, nu ar fi fost de ajuns -
   si muchia cardului, si randul de text se misca in acelasi timp, deci ar fi
   ramas 47px de suprapunere. Valoarea care o inchide complet e aceasta. */
.scena-fix .ha-card{
  bottom:10.6%;
  --ha-plus:max(0px,calc(clamp(56px,6vw,96px) + 203px - 10.6svh));
}
@keyframes afis-sticla{
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(0 0 var(--ha-plus) 0)}
}
@keyframes afis-rama{
  from{top:4.7%;bottom:4.7%}
  to{top:calc(4.7% - var(--ha-plus) * 0.047);
     bottom:calc(4.7% + var(--ha-plus) * 0.953)}
}
@keyframes afis-text{
  from{transform:translateY(0)}
  to{transform:translateY(calc(var(--ha-plus) / -2))}
}
@supports (animation-timeline:view()) and (timeline-scope:--x){
  .scena{timeline-scope:--banda}
  .scena > .intro-sub-hero{view-timeline-name:--banda}
  .scena-fix .ha-card::before,
  .scena-fix .ha-card .ha-rama,
  .scena-fix .ha-card .ha-in{
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--banda;
    animation-range:entry 0% entry 100%;
  }
  .scena-fix .ha-card::before{animation-name:afis-sticla}
  .scena-fix .ha-card .ha-rama{animation-name:afis-rama}
  .scena-fix .ha-card .ha-in{animation-name:afis-text}
}
.scena-fix .ha-card::before{clip-path:inset(0 0 var(--ha-plus) 0)}
.scena-fix .ha-card .ha-rama{
  top:calc(4.7% - var(--ha-plus) * 0.047);
  bottom:calc(4.7% + var(--ha-plus) * 0.953);
}
.scena-fix .ha-card .ha-in{transform:translateY(calc(var(--ha-plus) / -2))}
@media (prefers-reduced-motion:reduce){
  .scena-fix .ha-card::before,
  .scena-fix .ha-card .ha-rama,
  .scena-fix .ha-card .ha-in{animation:none}
}

.banda-bej{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:clamp(56px,6vw,96px);
  min-height:clamp(160px,16vw,260px);
  padding-inline:max(var(--edge),calc(50vw - 720px + var(--edge)));
  background:#E3DBC7;
  display:grid;place-items:center;
}
.bb-citat{
  margin:0;max-width:62ch;text-align:center;
  font-family:var(--font-heading);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.7vw,26px);line-height:1.55;
  color:#2E5D3A;
}

.pag-despre .hero-banner.hero-split .hs-stanga{

  align-self:center;
  width:fit-content;max-width:100%;
  margin:0 0 0 40px;
  padding:clamp(36px,3.4vw,56px) clamp(30px,3vw,48px)
          clamp(36px,3.4vw,56px) calc(var(--nume-stanga) - 40px);
  /* fara blur: fotografia de sub panou ramane curata. Panoul urca la 88%,
     altfel textul inchis ar cadea sub pragul de contrast peste fotografie. */
  background:color-mix(in srgb,#E6DED1 62%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  border-radius:0 6px 0 0;
}
@media (max-width:860px){
  .pag-despre .hero-banner.hero-split .hs-stanga{
    margin:0 var(--edge) 0 0;
    padding:clamp(28px,6vw,40px) clamp(22px,5vw,32px) clamp(28px,6vw,40px) var(--edge)}
}

.pag-despre .hero-banner.hero-split .hs-mare{
  font-size:60px;
  white-space:nowrap;
}

.pag-despre .hero-banner.hero-split .hs-jos{
  grid-template-columns:1fr;
  row-gap:8px;
}
.pag-despre .hero-banner.hero-split .hs-mare{margin-bottom:21px}
.pag-despre .hero-banner.hero-split .hs-salut{white-space:nowrap}
.pag-despre .hero-banner.hero-split .hs-text{max-width:40ch}

.fisa-final{
  position:relative;
  
  padding:0;margin-block:0;
  
  overflow:hidden;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  display:grid;
  grid-template-columns:50.4% 1fr;
  grid-template-rows:minmax(0,1fr);
  height:clamp(560px,46vw,760px);
  background:transparent;
}
/* Fundalul sectiunii: aceeasi fotografie, inmuiata, peste care sta acelasi
   bej (#E3DBC7) - doar ca translucid, cu sticla, in loc de culoare plina. */
.fisa-final::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.fisa-final::after{
  background:color-mix(in srgb,#E6DED1 80%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.02);
  backdrop-filter:blur(26px) saturate(1.02);
}
.ff-foto,.ff-panou,.ff-subsol{position:relative;z-index:1}

.ff-foto{grid-column:1;grid-row:1;position:relative;overflow:hidden;margin-block:100px}
.ff-foto .ph{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0}
.ff-foto .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

.ff-panou{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  
  padding:10% max(var(--edge),calc(50vw - 720px + var(--edge))) 8% 8%;
  text-align:right;
}
.ff-titlu{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(30px,4.55vw,72px);line-height:.98;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--color-text);
}
.ff-sub{
  
  margin:0 0 40px auto;max-width:22ch;
  
  font-family:var(--font-heading);font-style:italic;font-weight:400;
  font-size:40px;line-height:1.3;letter-spacing:-.005em;
  color:var(--color-accent-700);
}

.ff-subsol{
  grid-column:1 / -1;grid-row:2;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:max(var(--edge),calc(50vw - 720px + var(--edge)));
  border-top:1px solid color-mix(in srgb,var(--color-text) 18%,transparent);
  font-family:var(--font-body);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
  color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
.ff-dreapta{color:inherit;text-decoration:none;transition:color .2s ease}
.ff-dreapta:hover{color:var(--color-accent)}

@media (max-width:860px){
  .fisa-final{
    grid-template-columns:1fr;
    grid-template-rows:clamp(240px,42vw,360px) auto auto;
    height:auto;
  }
  .ff-foto{grid-column:1;grid-row:1}
  .ff-panou{grid-column:1;grid-row:2;text-align:left;
    padding:clamp(32px,7vw,56px) var(--edge);gap:clamp(20px,4vw,32px)}
  .ff-sub{margin-left:0}
  .ff-subsol{grid-column:1;grid-row:3;flex-wrap:wrap;gap:12px 24px;
    padding-block:20px}
}

.fisa-final + .bara-cta{margin-top:0}

.pag-despre .bara-cta{
  background:#E6DED1;
  width:auto;max-width:none;
  margin-inline:0;
  
  margin-block:100px;
  padding-block:40px;
  padding-inline:clamp(24px,4.4%,64px);
  min-height:0;
  align-items:center;
}
/* Butonul din bara de CTA pe Despre mine: verde de iarba, in locul teracotei.
   Alb pe #4F7A2E are contrast 5.05:1, iar varianta de hover e cu un ton mai
   inchisa, ca miscarea sa se vada. */
.pag-despre .bara-cta .bc-buton{background:#4F7A2E}
.pag-despre .bara-cta .bc-buton:hover{background:#3E6224}


.fisa-final.ff-anim .ff-foto,
.fisa-final.ff-anim .ff-panou{
  transition:transform .9s cubic-bezier(.22,.7,.2,1),opacity .7s ease;
  will-change:transform,opacity;
}
.fisa-final.ff-anim .ff-foto{transform:translateX(-102%);opacity:0}
.fisa-final.ff-anim .ff-panou{transform:translateX(102%);opacity:0}
.fisa-final.ff-anim.ff-intrat .ff-foto,
.fisa-final.ff-anim.ff-intrat .ff-panou{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .fisa-final.ff-anim .ff-foto,
  .fisa-final.ff-anim .ff-panou{transform:none;opacity:1;transition:none}
}

/* Caseta de newsletter: acelasi card crem translucid ca in hero - aceeasi
   culoare si aceeasi densitate, fara blur, deci iarba se intrevede prin el.
   Scrisul se inverseaza, din crem in cerneala. */
.pag-resurse .patch{background:rgba(249,244,237,.82)}
.pag-resurse .patch h2.sec{color:#825040;font-size:36px}
.pag-resurse .patch .lead{color:color-mix(in srgb,var(--color-text) 86%,transparent)}
.pag-resurse .patch .input{
  color:var(--color-text);
  border-color:color-mix(in srgb,var(--color-text) 38%,transparent);
  background:color-mix(in srgb,#F9F4ED 55%,transparent);
}
.pag-resurse .patch .input::placeholder{color:color-mix(in srgb,var(--color-text) 56%,transparent)}
.pag-resurse .patch .input:hover{border-color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.pag-resurse .patch .input:focus{border-color:var(--color-text);outline:none}
.pag-resurse .patch > div{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,3vw,48px);
}
.pag-resurse .patch .pt-loc{position:relative;align-self:stretch}
@media (min-width:861px){
  .pag-resurse .patch .pt-loc{left:30px;top:-15px}
}
.pag-resurse .patch .pt-card{
  position:absolute;left:50%;transform:translateX(-50%);top:-24px;bottom:-24px;
  width:auto;aspect-ratio:2 / 3;margin:0;
  container-type:inline-size;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.pag-resurse .patch .pt-card .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.pag-resurse .patch .pt-card picture{display:block;width:100%;height:100%}
.pag-resurse .patch .pt-card img{width:100%;height:100%;object-fit:cover;display:block}
.pag-resurse .patch .pt-card .rsc-ov{inset:11%;padding:6% 7%}
.pag-resurse .patch .pt-card .rsc-ov-sus,
.pag-resurse .patch .pt-card .rsc-ov-jos{font-size:3.6cqw;letter-spacing:.08em}
.pag-resurse .patch .pt-card .rsc-ov-mijloc b{font-size:9cqw}
.pag-resurse .patch .pt-card .rsc-ov-mijloc i{font-size:4.2cqw;margin-top:6%}
@media (max-width:860px){
  .pag-resurse .patch > div{grid-template-columns:minmax(0,1fr)}
  .pag-resurse .patch .pt-card{display:none}
}

.pag-404 .nf-bloc{text-align:center;padding-block:clamp(120px,16vh,220px)}
.nf-titlu{margin:var(--half) 0 0;font-family:var(--font-heading);
  font-weight:var(--font-heading-weight);font-size:clamp(30px,4vw,56px);
  line-height:1.15;letter-spacing:-.012em;color:var(--color-text)}
.nf-text{margin:var(--leading) auto 0;max-width:56ch;font-size:18px;line-height:1.7;
  color:color-mix(in srgb,var(--color-text) 84%,transparent)}
.nf-linkuri{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin:calc(1.6*var(--leading)) 0 0}
.ds-card{
  --ds-w0:min(54rem,calc(100vw - 2*clamp(16px,5vw,40px)));
  width:calc(var(--ds-w0) + (100vw - var(--ds-w0))*var(--pe,0));
}
@media (max-width:720px){
  .ds-fisa .ds-poza-jos{margin-inline:-24px}
}

.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.blocks{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}

@media (max-width:860px){
  .repere{grid-template-columns:1fr;column-gap:0}
}

@media (max-width:520px){
  .hero-banner .hg-name,
  body.pag-servicii>nav.nav .hg-name,
  body.pag-programari>nav.nav .hg-name,
  body.pag-resurse>nav.nav .hg-name,
  body.pag-contact>nav.nav .hg-name,
  body.pag-despre>nav.nav .hg-name{font-size:clamp(20px,7vw,34px);letter-spacing:.06em}
}

@media (max-width:700px){
  .hero-afis .hg-id{left:7.5%;right:7.5%;width:auto}
  .hero-afis .hg-name{font-size:clamp(20px,5.6vw,30px)}
}

@media (max-width:400px){
  .patch{padding-inline:18px}
  .seg{flex-wrap:wrap}
}
@media (max-width:1100px){
  .hero-afis .hg-id{top:86px;left:7.5%;right:7.5%;width:auto}
  .afis .ha-card{top:200px}
}
@media (max-width:700px){
  .hero-afis .hg-id{top:97px}
  .afis .ha-card{top:170px;bottom:5%}
}

@media (max-width:860px){
  .fisa-final .ff-foto{margin-block:0}
}

@media (max-width:700px){
  .pag-despre .hero-banner.hero-split .hs-jos{
    grid-template-columns:1fr;row-gap:var(--space-4)}
}

/* ==========================================================
   Imagini responsive pentru fundalurile din CSS.
   Regula url() de mai sus ramane ca rezerva pentru browserele
   care nu cunosc image-set(); restul primesc WebP la marimea
   potrivita ecranului.
   ========================================================== */

.if-1{background-image:url("images/carusel-01-anxietate.jpg")}
.if-1{background-image:image-set(url("images/carusel-01-anxietate-2000.webp") type("image/webp"),url("images/carusel-01-anxietate.jpg") type("image/jpeg"))}
.if-2{background-image:url("images/carusel-02-tristete.jpg")}
.if-2{background-image:image-set(url("images/carusel-02-tristete-2000.webp") type("image/webp"),url("images/carusel-02-tristete.jpg") type("image/jpeg"))}
.if-3{background-image:url("images/carusel-03-emotii.jpg")}
.if-3{background-image:image-set(url("images/carusel-03-emotii-2000.webp") type("image/webp"),url("images/carusel-03-emotii.jpg") type("image/jpeg"))}
.if-4{background-image:url("images/carusel-04-relatii.jpg")}
.if-4{background-image:image-set(url("images/carusel-04-relatii-2000.webp") type("image/webp"),url("images/carusel-04-relatii.jpg") type("image/jpeg"))}
.if-5{background-image:url("images/carusel-05-stres.jpg")}
.if-5{background-image:image-set(url("images/carusel-05-stres-2000.webp") type("image/webp"),url("images/carusel-05-stres.jpg") type("image/jpeg"))}

.repere{background-image:image-set(url("images/acasa-repere-fundal-1000.webp") type("image/webp"),url("images/acasa-repere-fundal.jpg") type("image/jpeg"))}
.citat-pictat{background-image:image-set(url("images/acasa-citat-fundal-1800.webp") type("image/webp"),url("images/acasa-citat-fundal.jpg") type("image/jpeg"))}
.banda-verde{background-image:image-set(url("images/despre-banda-fundal-1800.webp") type("image/webp"),url("images/despre-banda-fundal.jpg") type("image/jpeg"))}
body.pag-despre .hero-banner.hero-split{background-image:image-set(url("images/despre-hero-v1-2495.webp") type("image/webp"),url("images/despre-hero-v1.jpg") type("image/jpeg"))}
body.pag-servicii{background-image:image-set(url("images/servicii-fundal-02-1171.webp") type("image/webp"),url("images/servicii-fundal-02.jpg") type("image/jpeg"))}
.bf-banner .ph{background-image:image-set(url("images/despre-04-banner-1800.webp") type("image/webp"),url("images/despre-04-banner.jpg") type("image/jpeg"))}
body.pag-programari{background-image:image-set(url("images/programari-fundal-02-1449.webp") type("image/webp"),url("images/programari-fundal-02.jpg") type("image/jpeg"))}

@media (max-width:1200px){
  .if-1{background-image:image-set(url("images/carusel-01-anxietate-1100.webp") type("image/webp"),url("images/carusel-01-anxietate.jpg") type("image/jpeg"))}
  .if-2{background-image:image-set(url("images/carusel-02-tristete-1100.webp") type("image/webp"),url("images/carusel-02-tristete.jpg") type("image/jpeg"))}
  .if-3{background-image:image-set(url("images/carusel-03-emotii-1100.webp") type("image/webp"),url("images/carusel-03-emotii.jpg") type("image/jpeg"))}
  .if-4{background-image:image-set(url("images/carusel-04-relatii-1100.webp") type("image/webp"),url("images/carusel-04-relatii.jpg") type("image/jpeg"))}
  .if-5{background-image:image-set(url("images/carusel-05-stres-1100.webp") type("image/webp"),url("images/carusel-05-stres.jpg") type("image/jpeg"))}
  .repere{background-image:image-set(url("images/acasa-repere-fundal-1000.webp") type("image/webp"),url("images/acasa-repere-fundal.jpg") type("image/jpeg"))}
  .citat-pictat{background-image:image-set(url("images/acasa-citat-fundal-1100.webp") type("image/webp"),url("images/acasa-citat-fundal.jpg") type("image/jpeg"))}
  .banda-verde{background-image:image-set(url("images/despre-banda-fundal-1100.webp") type("image/webp"),url("images/despre-banda-fundal.jpg") type("image/jpeg"))}
  body.pag-despre .hero-banner.hero-split{background-image:image-set(url("images/despre-hero-v1-1430.webp") type("image/webp"),url("images/despre-hero-v1.jpg") type("image/jpeg"))}
  body.pag-servicii{background-image:image-set(url("images/servicii-fundal-02-1100.webp") type("image/webp"),url("images/servicii-fundal-02.jpg") type("image/jpeg"))}
  .bf-banner .ph{background-image:image-set(url("images/despre-04-banner-1100.webp") type("image/webp"),url("images/despre-04-banner.jpg") type("image/jpeg"))}
  body.pag-programari{background-image:image-set(url("images/programari-fundal-02-1100.webp") type("image/webp"),url("images/programari-fundal-02.jpg") type("image/jpeg"))}
}

@media (max-width:760px){
  .if-1{background-image:image-set(url("images/carusel-01-anxietate-700.webp") type("image/webp"),url("images/carusel-01-anxietate.jpg") type("image/jpeg"))}
  .if-2{background-image:image-set(url("images/carusel-02-tristete-700.webp") type("image/webp"),url("images/carusel-02-tristete.jpg") type("image/jpeg"))}
  .if-3{background-image:image-set(url("images/carusel-03-emotii-700.webp") type("image/webp"),url("images/carusel-03-emotii.jpg") type("image/jpeg"))}
  .if-4{background-image:image-set(url("images/carusel-04-relatii-700.webp") type("image/webp"),url("images/carusel-04-relatii.jpg") type("image/jpeg"))}
  .if-5{background-image:image-set(url("images/carusel-05-stres-700.webp") type("image/webp"),url("images/carusel-05-stres.jpg") type("image/jpeg"))}
  .repere{background-image:image-set(url("images/acasa-repere-fundal-700.webp") type("image/webp"),url("images/acasa-repere-fundal.jpg") type("image/jpeg"))}
  .citat-pictat{background-image:image-set(url("images/acasa-citat-fundal-700.webp") type("image/webp"),url("images/acasa-citat-fundal.jpg") type("image/jpeg"))}
  .banda-verde{background-image:image-set(url("images/despre-banda-fundal-700.webp") type("image/webp"),url("images/despre-banda-fundal.jpg") type("image/jpeg"))}
  body.pag-despre .hero-banner.hero-split{background-image:image-set(url("images/despre-hero-v1-900.webp") type("image/webp"),url("images/despre-hero-v1.jpg") type("image/jpeg"))}
  body.pag-servicii{background-image:image-set(url("images/servicii-fundal-02-700.webp") type("image/webp"),url("images/servicii-fundal-02.jpg") type("image/jpeg"))}
  .bf-banner .ph{background-image:image-set(url("images/despre-04-banner-700.webp") type("image/webp"),url("images/despre-04-banner.jpg") type("image/jpeg"))}
  body.pag-programari{background-image:image-set(url("images/programari-fundal-02-700.webp") type("image/webp"),url("images/programari-fundal-02.jpg") type("image/jpeg"))}
}

/* <picture> nu trebuie sa creeze o cutie proprie: altfel img-ul cu
   width/height:100% se raporteaza la <picture>, nu la parintele real,
   si imaginea se strange la zero. */
picture{display:contents}


/* Rama in rama. Aceeasi fotografie de doua ori: o data marita si neclara,
   pe tot ecranul, si o data clara, mai mica, asezata ca un decupaj peste ea.
   Cardul cade pe granita dintre cele doua, asa ca pare taiat din imagine.
   Castigul tehnic: caseta decupajului e mai ingusta decat raportul pozei,
   deci imaginea da pe dinafara pe orizontala si object-position o poate
   muta lateral - lucru imposibil cand fotografia acoperea tot ecranul.
   Asa poate fi in acelasi timp mai mica (0.74-1.00x, deci mai "in spate")
   si mai la dreapta. */
/* ── Fotografia scenei ─────────────────────────────────────────────────────
   O singura fotografie pentru hero si banda, pusa pe scena, nu pe fiecare in
   parte: asa nu mai pot sa nu se potriveasca intre ele.
   Nu mai e background-attachment:fixed, ci acelasi strat sticky ca al
   cardului. Diferenta se vede exact in punctul cerut: cu "fixed", fotografia
   ramanea pe loc si dupa ce scena se termina, deci hero-ul si blocul doi
   pareau ca aluneca peste ea la nesfarsit. Sticky o tine pe loc cat tine
   scena - acolo e parallax-ul - si o elibereaza in aceeasi clipa cu cardul,
   de unde hero-ul, banda si fotografia urca impreuna. */
.scena::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:image-set(url("images/acasa-01-portret-1100.webp") type("image/webp"),
             url("images/acasa-01-portret.jpg") type("image/jpeg"));
  background-size:cover;background-position:50% 35%;background-repeat:no-repeat;
}
/* pe desktop fundalul se intinde pe toata latimea ecranului, deci are nevoie
   de sursa mare; pe telefon ar fi fost 181KB degeaba, de aceea doua praguri */
@media (min-width:1101px){
  .scena::before{
    background-image:image-set(url("images/acasa-01-portret-2000.webp") type("image/webp"),
               url("images/acasa-01-portret.jpg") type("image/jpeg"));
  }
}
@media (min-width:1101px){
  .scena::before{
    position:sticky;grid-row:1/3;grid-column:1;align-self:start;
    inset:auto;top:0;height:100svh;
  }
}
/* Fotografia din fata a fost scoasa: ramane doar imaginea de fundal, pe toata
   latimea ecranului. Elementul ei nu mai e afisat, deci nici nu se descarca a
   doua oara. Neclaritatea ramane doar in banda de sus, data de valul de sub
   meniu. */
.hero-banner.hero-afis .hero-bg{display:none}


/* Afisul de pe Acasa, revizuit: cardul s-a ingustat de la 47.4%/660px la
   41%/580px si s-a mutat de la 5.9% la 5.2%, ca sa ramana mai multa
   fotografie la vedere. Culorile nu mai vin din tokenii site-ului, ci sunt
   esantionate din fotografia din spate:
     #2C372A  blocul   - coniferul din stanga
     #F1EEE9  cardul   - nuanta frunzelor de toamna, dusa in deschis
     #A3834D  rama     - frunza uscata
     #364233  butonul  - frunzisul verde din dreapta
     #846533  citatul  - lumina calda din fundal
     #C9B187  subtitlul de pe bloc
   Contrast verificat: titlu 13.9, citat 4.7, nota 5.9, buton 9.2. */

/* Cardul afisului trece pe ocru (#A98E59, cerut) si blocul din spatele lui
   devine transparent, deci fotografia se vede pe toata latimea.
   Pe ocru, culorile dinainte nu mai aveau contrast (citat 1.7, nota 2.2,
   rama 1.1), asa ca au fost coborate: citat #2C3F27 (3.6), nota #21291E
   (4.8), rama crem #F1EEE9 - se citeste si peste fotografie, acolo unde
   rama iese din card. Titlul ramane #1C231A (5.1). */

/* Afisul preia acum sistemul de culoare din sectiunea de pe Servicii
   (.pag-servicii .card-alb): sticla verde #16351F la 58% cu blur 18px,
   muchie de 1px din crem la 14%, text crem, eticheta/citatul in
   --color-accent-300 si butonul exact ca .tag-accent (accent 26% cu
   contur 55%). Blocul din spate ramane transparent. */

/* Fara voal peste fotografie. Masurat, voalul de 17% taia 17% din contrast
   (51.3 -> 42.5) si din saturatie (28.4 -> 23.6) pe banda de sus, adica
   exact adancimea originalului. In schimb, textul isi poarta propria umbra:
   intuneca doar pixelii din jurul literelor, nu imaginea. */
/* Neclaritatea a ramas doar sus, sub meniu.
   Fasia de jos a fost scoasa: de cand fotografia curge mai departe in banda
   de sub hero, o estompare care se opreste exact pe granita dintre sectiuni
   taia imaginea in doua - sus neclara, jos clara, pe aceeasi poza. Iarba
   uscata din prim-plan ramane oricum potolita de valul verde de 70%, care
   acum e acelasi de-o parte si de alta a granitei.
   Raza e 12px, iar trecerea de 143px - de peste zece ori raza - deci blur-ul
   nu mai lasa conturul dublu de dinainte, cand avea raza 26px pe o trecere
   de aceeasi marime. */
.hero-banner.hero-afis::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:0;left:0;right:0;height:215px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0,#000 72px,rgba(0,0,0,0) 215px);
  mask-image:linear-gradient(to bottom,
    #000 0,#000 72px,rgba(0,0,0,0) 215px);
}
/* Un singur element, doua gradiente, niciun blur - un gradient nu poate
   produce contur dublu, pentru ca nu suprapune doua versiuni ale aceleiasi
   imagini. Asa blur-ul ramane mic si contrastul meniului intact.
   Sus: intunecarea de sub meniu, 200px.
   Jos: talpa verde #5e685e la 70%, aceeasi opacitate ca valul de pe banda de
   dedesubt, deci cele doua se continua fara treapta; stinsa complet la 252px. Iarba uscata din prim-plan, deja neclara, intra in verde
   si hero-ul se termina pe o culoare, nu pe un maro spalacit. */
.hero-banner.hero-afis .hero-navscrim{
  /* height:auto e obligatoriu: regula de baza .hero-banner .hero-navscrim
     fixeaza height:320px, care ar birui bottom:0 din inset si ar lasa
     elementul la 320px, deci talpa verde ar cadea la mijlocul hero-ului */
  display:block;position:absolute;inset:0;height:auto;
  z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(10,14,8,.62) 0px,
      rgba(10,14,8,.52) 68px,
      rgba(10,14,8,.26) 136px,
      rgba(10,14,8,.08) 176px,
      rgba(10,14,8,0)   200px,
      rgba(10,14,8,0)   100%);
}

/* umbra densa si stransa, ca literele sa aiba contur propriu peste frunzis */
body>nav.nav.nav-peste-foto .nav-links a,
.hero-afis .hg-name,
.hero-afis .hg-tagline{
  text-shadow:0 1px 2px rgba(10,14,8,.92),
              0 0 8px rgba(10,14,8,.80),
              0 0 22px rgba(10,14,8,.62);
}


/* ── Contact: totul intr-un ecran, fara scroll ─────────────────────────────
   Sectiunea se inchide la inaltimea ferestrei, iar fotografia nu mai are
   latime fixa: primeste inaltimea ramasa dupa titlu si padding, iar latimea
   rezulta din raportul ei (0.6663), deci nu se taie si nu se deformeaza.
   Coloana din stanga trece pe auto ca sa se stranga odata cu ea.
   Arcada e scrisa in procente - raza orizontala 50% din latime, cea verticala
   33.31% din inaltime - pentru ca 0.6663/2 = 0.3331: la orice marime arcul
   ramane semicerc, nu elipsa.
   Doar de la 1241px in sus; sub prag blocurile stau unul sub altul si nu au
   cum sa incapa intr-un ecran. */
@media (min-width:1241px){
  .ct-afis{min-height:100svh}
  /* cardul urca in partea de sus a fotografiei: exact 60px de la marginea
     de sus a sectiunii. Marja scade paddingul de sus al sectiunii, ca spatiul
     sa ramana 60px la orice latime. */
  .ct-card{margin-top:calc(60px - clamp(44px,4.6vw,80px));margin-bottom:auto}
}

/* ── Proba: fundal cu fotografia neclara pe toata latimea ecranului ────────
   Sectiunea insasi devine de latimea ferestrei, iar continutul ramane pe
   coloana paginii prin padding - acelasi tipar ca .repere si footer. Asa
   stratul neclar sta in interiorul sectiunii, nu iese din ea, si overflow:
   hidden poate taia maririle de 1.09 fara sa produca scroll orizontal.
   Peste fotografie, un voal crem, ca textul inchis sa ramana lizibil.
   Bloc separat, usor de scos. */
.ct-afis{
  --ct-col:max(var(--edge),calc(50vw - 720px + var(--edge)));
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  background:transparent;
  padding:clamp(44px,4.6vw,80px) var(--ct-col) 0;
}
.ct-afis::before,
.ct-afis::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.ct-afis::before{
  background-image:image-set(url("images/contact-04-fundal-02-1536.webp") type("image/webp"),
                    url("images/contact-04-fundal-02.jpg") type("image/jpeg"));
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
@media (max-width:1100px){
  .ct-afis::before{
    background-image:image-set(url("images/contact-04-fundal-02-1100.webp") type("image/webp"),
                      url("images/contact-04-fundal-02.jpg") type("image/jpeg"));
  }
}
@media (min-width:1601px){
  .ct-afis::before{
    background-image:image-set(url("images/contact-04-fundal-02-1536.webp") type("image/webp"),
                      url("images/contact-04-fundal-02.jpg") type("image/jpeg"));
  }
}
/* Fundalul de la contact: fotografia sta pe loc, intreaga, la 80% din latimea
   ferestrei. Parallax-ul il face cardul: el urca mai lent decat pagina, deci
   culiseaza fata de fotografie. Asa efectul se vede fara sa taiem din poza. */
.ct-afis::before{
  background-attachment:scroll;
  background-size:80% auto;
  background-position:50% 50%;
}
@keyframes ct-card-parallax{
  from{transform:translateY(110px)}
  to{transform:translateY(-50px)}
}
@media (min-width:1241px){
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      /* timeline-ul se ia de pe sectiune: sectiunea are overflow:hidden, deci
         un `view()` pus pe un copil ar ramane blocat la un progres fix */
      .ct-afis{view-timeline:--ct-vedere block}
      .ct-card{
        animation:ct-card-parallax linear both;
        animation-timeline:--ct-vedere;
        animation-range:entry 0% exit 100%;
        will-change:transform;
      }
    }
  }
}

/* doar z-index, nu si position: frunza e deja absoluta, iar daca o faceam
   relativa intra in flux si lungea sectiunea cu 196px */
.ct-cap,.ct-card{position:relative;z-index:2}
.ct-frunza{z-index:1}
@media (max-width:1240px){
  .ct-afis{padding:clamp(40px,6vw,64px) var(--edge) 0}
}


/* ===========================================================================
   Acasa — continut nou dupa documentul Web_2:
   citatul din banda cu teme, fisele care se deschid din "Citeste mai mult",
   sectiunea "Abordarea mea terapeutica" (acronime cu explicatie la hover) si
   sectiunea "Reperele mele in terapie" cu cele patru repere.
   =========================================================================== */

/* citatul de sub titlul benzii cu teme */
.ind-citat{
  /* aceeasi tipografie ca .sa-lead: Karla, drept, 400, 18px / 1.7 */
  margin:14px 0 0;font-family:var(--font-body);font-style:normal;font-weight:400;
  font-size:18px;line-height:1.7;
  color:color-mix(in srgb,var(--color-bg) 88%,transparent);
}

/* "Citeste mai mult" e acum buton, nu link: aceleasi forme ca linkul */
.ind-panou .ip-link{border:0;background:none;padding:0;font-family:inherit;cursor:pointer}

/* fisa temei: acopera banda cand e deschisa */
.ind-detalii{position:absolute;inset:0;z-index:5;pointer-events:none}
.ind-fisa{
  position:absolute;inset:0;overflow:auto;pointer-events:auto;
  background:color-mix(in srgb,#14281B 86%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  padding:clamp(28px,3.4vw,56px) clamp(20px,4.03vw,72px);
  color:var(--color-bg);
}
.ind-fisa[hidden]{display:none}
.if-in{max-width:980px;margin-inline:auto}
.if-inchide{
  position:absolute;top:clamp(12px,1.4vw,22px);right:clamp(12px,1.4vw,22px);
  width:40px;height:40px;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;line-height:1;
  font-size:30px;color:color-mix(in srgb,var(--color-bg) 80%,transparent);
  transition:color .18s;
}
.if-inchide:hover{color:var(--color-bg)}
.if-inchide:focus-visible{outline:2px solid var(--color-bg);outline-offset:3px}
.if-tema{
  display:block;font-size:16px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--color-accent-300);margin-bottom:12px;
}
.if-titlu{
  margin:0 0 14px;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(22px,2.1vw,34px);line-height:1.2;color:var(--color-bg);
}
.if-text{
  margin:0;font-size:18px;line-height:1.65;max-width:72ch;
  color:color-mix(in srgb,var(--color-bg) 90%,transparent);
}
.if-casete{
  list-style:none;margin:clamp(18px,2vw,30px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.if-casete li{
  font-size:clamp(12px,.85vw,14px);line-height:1.2;padding:9px 14px;
  border-radius:999px;background:color-mix(in srgb,var(--color-bg) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-bg) 26%,transparent);
}
.if-eticheta{
  display:block;margin:clamp(20px,2.2vw,32px) 0 10px;
  font-size:16px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent-300);
}

/* ---- Abordarea mea terapeutica ---- */
.ab-eyebrow{
  display:block;margin:56px 0 18px;
  font-size:16px;line-height:1.25;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent-700);
}
.abordare .ab-eyebrow + .rp-eticheta{margin-top:0}
.abordare .rp-perechi{margin-top:20px}
.abordare .ab-subsol{margin-top:clamp(80px,6vw,96px)}
@media (max-width:1024px){.abordare .rp-perechi{margin-top:32px}}
.abordare .rp-perechi .rp-item:nth-child(2)>.rp-eticheta{margin-top:94px}
@media (max-width:760px){.abordare .rp-perechi .rp-item:nth-child(2)>.rp-eticheta{margin-top:40px}}
.abordare{--vv:4.94vw;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--vv)),50% 100%,0 calc(100% - var(--vv)))}
@media (max-width:860px){.abordare{--vv:7vw}}
/* ---- Principii si tehnici: slideshow cu file pe orizontala ----
   Cardul e crem translucid, cu sticla, peste fotografia cu floarea-soarelui.
   Se schimba singur la 6s, cu o bara subtire care arata cat mai tine slide-ul. */
.ab-slide{margin-top:28px;padding-right:40px}
.ab-acronime{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px;
}
.ab-cod{
  border:0;cursor:pointer;font-family:var(--font-body);
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;letter-spacing:.14em;font-weight:700;
  padding:12px 22px;border-radius:999px;
  background:color-mix(in srgb,#2E5D3A 10%,transparent);
  color:#2E5D3A;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#2E5D3A 30%,transparent);
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.ab-cod:hover{transform:translateY(-2px)}
.ab-cod.pe{
  background:#2E5D3A;color:var(--color-bg);
  box-shadow:inset 0 0 0 1px #2E5D3A, 0 8px 18px color-mix(in srgb,#2E5D3A 26%,transparent);
}
.ab-cod:focus-visible{outline:2px solid #2E5D3A;outline-offset:3px}
.ab-fr{width:17px;height:17px;flex:none;color:#8FC177;transition:color .2s}
.ab-cod.pe .ab-fr{color:#B6DCA2}

.ab-carusel{
  position:relative;margin-top:16px;overflow:hidden;display:grid;
  border-radius:var(--radius-lg);
  /* crem translucid cu sticla: fotografia se simte prin el, fara sa inghita textul */
  background:color-mix(in srgb,#2E5D3A 10%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.08) brightness(1.2);
  backdrop-filter:blur(26px) saturate(1.08) brightness(1.2);
  box-shadow:0 18px 44px color-mix(in srgb,var(--color-text) 20%,transparent),
             inset 0 0 0 1px color-mix(in srgb,#2E5D3A 30%,transparent);
}
.ab-bara{
  position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:color-mix(in srgb,#2E5D3A 16%,transparent);
}
.ab-bara i{display:block;height:100%;width:0;background:#2E5D3A;transition:width .2s linear}
.ab-expl{
  grid-area:1/1;position:relative;
  padding:22px 26px;
  color:var(--color-text);font-size:18px;line-height:1.6;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .34s ease,transform .34s ease,visibility .34s;
}
.ab-expl[hidden]{display:block}
.ab-expl.pe{opacity:1;visibility:visible;transform:none}
.ab-expl b{position:relative;z-index:1;display:block;margin-bottom:10px;font-size:20px;line-height:1.3;color:#2E5D3A}
.ab-expl span{position:relative;z-index:1}
.ab-frunza{
  position:absolute;right:-10px;bottom:-16px;z-index:0;
  width:120px;height:140px;color:#2E5D3A;opacity:.16;pointer-events:none;
}
@media (max-width:620px){
  .ab-slide{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .ab-expl{transition:none}
  .ab-bara{display:none}
}

.ab-subsol{
  grid-column:1 / -1;justify-self:center;
  margin:clamp(56px,6vw,96px) 0 0;text-align:center;
  width:fit-content;min-width:0;max-width:100%;
  padding:14px 30px;border-radius:10px;
  background:color-mix(in srgb,#2E5D3A 44%,transparent);
  color:var(--color-bg);
  font-size:15px;letter-spacing:.2em;line-height:1.5;font-weight:700;
}

/* ---- Reperele mele in terapie ----
   Acelasi limbaj vizual ca banda "Alaturi de tine": compozitie centrata,
   titlu serif cu cele doua fire subtiri care pleaca spre marginile ecranului,
   text ingust si centrat. Culoarea sectiunii ramane cremul paginii. */
.valori{
  /* aceeasi mecanica de crestatura in V ca la "Alaturi de tine": sectiunea
     urca peste blocul de deasupra, iar taietura lasa fotografia sa se vada */
  --v:4.94vw;
  --sus:1.5vw;
  position:relative;overflow:hidden;padding:var(--sus) 0 0;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  margin-top:calc(-1 * (var(--v) + var(--sus)));
  background:transparent;
}
/* linia aurie de accent, paralela cu muchia si putin deasupra ei */
.vl-linie{
  position:absolute;z-index:2;left:0;width:100%;
  height:var(--v);bottom:auto;top:0;
  fill:none;stroke:#968733;stroke-width:3;vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.vl-banda{
  position:relative;z-index:3;
  background:var(--color-bg);color:var(--color-text);
  padding:calc(var(--v) + clamp(72px,7vw,120px)) var(--edge)
          calc(var(--v) + clamp(72px,7vw,120px));
  clip-path:polygon(0 0, 50% var(--v), 100% 0, 100% 100%, 0 100%);
}
.vl-in{max-width:1296px;margin-inline:auto;text-align:center}
.vl-titlu{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(24px,3vw,56px);
  position:relative;margin:0;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(26px,2.9vw,50px);line-height:1.2;letter-spacing:-.012em;
  color:var(--color-text);
}
.vl-titlu::before,.vl-titlu::after{
  content:"";flex:1 1 0;min-width:0;height:1px;
  background:color-mix(in srgb,var(--color-text) 38%,transparent);
}
.vl-grid{
  list-style:none;margin:clamp(48px,5vw,84px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(24px,3.2vw,56px);row-gap:clamp(40px,4vw,64px);
  text-align:left;
}
.vl-nume{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(20px,1.6vw,26px);line-height:1.25;letter-spacing:-.008em;
  color:var(--color-text);
}
.vl-text{
  margin:clamp(12px,1.2vw,18px) 0 0;max-width:34ch;
  font-size:18px;line-height:1.75;
  color:color-mix(in srgb,var(--color-text) 86%,transparent);
}
@media (max-width:1100px){
  .vl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  /* acelasi prag ca la "Alaturi de tine": crestatura se adanceste, iar firele
     din titlu dispar, altfel ar taia cuvintele pe ecran ingust */
  .valori{--v:7vw}
  .vl-titlu::before,.vl-titlu::after{display:none}
}
@media (max-width:620px){
  .vl-grid{grid-template-columns:1fr}
  .ab-slide{padding-right:0}
  .if-casete li{font-size:12px}
}
@media (max-width:620px){
  .pv-banda{background-image:linear-gradient(to bottom,
                     color-mix(in srgb,#16351F 74%,transparent) 0%,
                     color-mix(in srgb,#16351F 62%,transparent) 50%,
                     color-mix(in srgb,#16351F 44%,transparent) 100%),
                   image-set(url("images/acasa-alaturi-fundal-700.webp") type("image/webp"),
                             url("images/acasa-alaturi-fundal.jpg") type("image/jpeg"))}
}
body > .sv-detalii{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  max-width:none;margin:0;
}
.sv-detalii .ind-fisa{
  position:fixed;top:0;bottom:0;left:auto;right:auto;
  width:50vw;
  --if-rama:clamp(20px,3.4%,56px);
  padding:0;overflow:hidden;
  display:flex;flex-direction:column;
}
.sv-detalii .ind-fisa[hidden]{display:none}
.sv-detalii .ind-fisa.fisa-dreapta{right:0}
.sv-detalii .ind-fisa.fisa-stanga{left:0}
@media (prefers-reduced-motion:no-preference){
  .sv-detalii .ind-fisa.fisa-dreapta{animation:fisa-dreapta .42s cubic-bezier(.22,.61,.36,1)}
  .sv-detalii .ind-fisa.fisa-stanga{animation:fisa-stanga .42s cubic-bezier(.22,.61,.36,1)}
}
@keyframes fisa-dreapta{from{transform:translateX(100%)}to{transform:none}}
@keyframes fisa-stanga{from{transform:translateX(-100%)}to{transform:none}}
.if-foto{margin:0;overflow:hidden;
  flex:1 1 auto;min-height:clamp(120px,16vh,180px);
  padding:var(--if-rama) var(--if-rama) 0;
  display:flex;align-items:center;justify-content:center}
.if-foto img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center}
.if-foto picture{display:block;width:100%;height:100%}
.sv-detalii .if-in{
  max-width:none;margin:0;flex:0 0 auto;
  display:flex;flex-direction:column;
  padding:clamp(18px,2vw,36px) var(--if-rama) clamp(22px,2.4vw,44px);
}
.sv-detalii .if-text{max-width:66ch}
.sv-detalii .if-inchide{
  background:color-mix(in srgb,#14281B 52%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;color:var(--color-bg);
}
@media (max-width:860px){
  .sv-detalii .ind-fisa{width:100vw}
}
@media (max-height:700px){
  .if-foto{min-height:clamp(90px,14vh,140px)}
  .sv-detalii .if-in{overflow:auto}
}
body.fisa-deschisa{overflow:hidden}
.sv-mai-mult{
  border:0;background:none;padding:0;font:inherit;cursor:pointer;
  color:var(--color-accent-300);font-weight:600;
  /* sublinierea apare doar la hover; culoarea si sageata raman cum erau */
  text-decoration:none;text-underline-offset:4px;
}
.sv-mai-mult span{display:inline-block;margin-left:6px;transition:transform .18s}
.sv-mai-mult:hover{text-decoration:underline}
.sv-mai-mult:hover span{transform:translateX(5px)}
.sv-mai-mult:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}
body.fisa-deschisa > *:not(.sv-detalii):not(.para):not(script){
  opacity:0;visibility:hidden;
  transition:opacity .32s ease,visibility .32s;
}
body > *:not(.sv-detalii):not(script){transition:opacity .32s ease,visibility .32s}

/* ══════════════════════════════════════════════════════════════════════
   RESURSE — fundalul paginii: continuarea fotografiei din hero. Este acelasi
   cadru, cu patura si cele doua persoane scoase, si are ultimul rand identic
   cu ultimul rand al fotografiei - de aceea se leaga de hero fara nicio linie
   vizibila. Placa e dublata in oglinda pe verticala, deci se repeta la
   nesfarsit fara cusatura. Pozitia pe verticala e calculata: bara de meniu
   plus inaltimea heroului, adica exact randul unde se termina fotografia.
   ══════════════════════════════════════════════════════════════════════ */
html:has(body.pag-resurse){background:#314711}
body.pag-resurse{
  --h:max(620px,min(56.25vw,calc(100svh - 96px)));
  --hs:calc((100vw - var(--sbw)) * 1087 / 1447);
  background:#314711;
  background-image:image-set(url("images/resurse-continuare-v1-1447.webp") type("image/webp"),
           url("images/resurse-continuare-v1.jpg") type("image/jpeg"));
  background-size:100% auto;
  background-position:center calc(var(--nav-h,88px) + (var(--h) + var(--hs)) / 2);
  background-repeat:repeat-y;
}
@media (max-width:1000px){
  body.pag-resurse{background-position:center top}
}


body.pag-resurse .hero-banner.hero-resurse{
  --h:max(620px,min(56.25vw,calc(100svh - 96px)));
  position:relative;display:block;overflow:visible;
  --hs:calc((100vw - var(--sbw)) * 1087 / 1447);
  --hy:calc((var(--h) - var(--hs)) / 2);
  min-height:0;height:calc((var(--h) + var(--hs)) / 2);padding:0;
  background-image:
    image-set(url("images/resurse-hero-v1-1447.webp") type("image/webp"),
              url("images/resurse-hero-v1.jpg") type("image/jpeg"));
  background-size:100% auto;
  background-position:center var(--hy);
  background-repeat:no-repeat;
  color:var(--color-text);
}
.hero-resurse .hero-navscrim{display:none}
.hr-scena{position:absolute;left:0;right:0;top:0;height:var(--h);z-index:1}

/* jumatatea ramasa in stanga fotografiei; blocul de text sta centrat in ea */
.hr-rama{
  position:absolute;z-index:2;box-sizing:border-box;
  left:0;right:var(--content-inset);
  top:0;bottom:0;transform:none;
  padding:0 clamp(24px,3vw,56px) 0 var(--content-inset);border:0;background:none;
  display:flex;align-items:center;justify-content:flex-start;
}
.hr-text{position:relative;z-index:4;min-width:0;width:100%;max-width:720px}
.hr-text::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(66px,6.6vw,116px));
  bottom:calc(-1 * clamp(66px,6.6vw,116px));
  left:calc(-1 * var(--content-inset));
  right:calc(-1 * clamp(64px,6.4vw,128px));
  background:rgba(249,244,237,.82);
  /* masca lucreaza doar pe orizontala: cardul se pierde in fotografie spre
     dreapta, dar sus si jos are muchie dreapta, ca orice card */
  --hr-masca:linear-gradient(to right,#000 0,#000 54%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--hr-masca);mask-image:var(--hr-masca);
}


.hr-script{
  margin:0;font-family:var(--font-heading);font-style:italic;font-weight:400;
  font-size:28px;line-height:1.3;letter-spacing:-.005em;text-transform:none;
  white-space:nowrap;color:#825040;
}
.hr-titlu{
  margin:var(--half) 0 0;
  font-family:var(--font-heading);font-style:normal;font-weight:var(--font-heading-weight);
  font-size:clamp(30px,3.6vw,60px);line-height:1.12;letter-spacing:-.015em;
  white-space:nowrap;color:#825040;
}
.hr-sub{
  margin:var(--leading) 0 0;
  font-family:var(--font-body);font-weight:400;
  font-size:22px;line-height:1.6;max-width:72ch;text-wrap:pretty;
  color:color-mix(in srgb,var(--color-text) 88%,transparent);
}
.hr-frunze{display:none}


@media (max-width:1000px){
  body.pag-resurse .hero-banner.hero-resurse{
    height:auto;min-height:0;
    padding:calc(86px + clamp(28px,6vw,56px)) var(--edge) clamp(44px,7vw,72px);
  }
  .hero-resurse .hg-id{position:static;right:auto;left:auto;top:auto;margin:0 0 clamp(44px,10vw,64px)}
  .hr-scena{position:static;height:auto}
  .hr-rama{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;
    width:auto;display:block;padding:0;
  }
  body.pag-resurse .hero-banner.hero-resurse{
    background-position:center center;
    background-size:cover;
  }
  .hr-text::before{
    left:calc(-1 * var(--edge));right:calc(-1 * var(--edge));
    --hr-masca:linear-gradient(to right,rgba(0,0,0,0) 0,#000 9%,#000 91%,rgba(0,0,0,0) 100%);
  }
  .hr-script{font-size:24px;white-space:normal;line-height:1.3}
  .hr-titlu{font-size:clamp(26px,5.4vw,40px);white-space:normal;margin-top:var(--half)}
  .hr-text{max-width:none}
  .hr-sub{font-size:19px;line-height:1.6;margin-top:var(--leading);max-width:none}
}
@media (max-width:1080px){
  .hr-rupe{display:none}
}

body.pag-resurse>nav.nav{
  background:color-mix(in srgb,var(--color-bg) 82%,transparent);
}
body.pag-resurse>nav.nav .hg-name{color:var(--color-text)}
body.pag-resurse>nav.nav .hg-tagline{color:#825040}
body.pag-resurse>nav.nav .nav-links a,
body.pag-resurse>nav.nav.nav-inchis .nav-links a{color:#2F1505}
body.pag-resurse>nav.nav .nav-links a[aria-current="page"],
body.pag-resurse>nav.nav.nav-inchis .nav-links a[aria-current="page"]{
  color:#825040;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
body.pag-resurse>nav.nav .nav-links a:hover,
body.pag-resurse>nav.nav.nav-inchis .nav-links a:hover{color:#643312}

body.pag-resurse .resurse-grila{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:calc(3 * var(--leading)) var(--content-inset) calc(2.8 * var(--leading));
  /* fara fundal propriu: se vede textura de iarba a paginii */
  background:none;
  /* grila urca peste hero, deci sectiunea trebuie sa fie deasupra lui:
     heroul e position:relative, iar un element nepozitionat ar ramane
     dedesubt oricat de jos ar fi in pagina */
  position:relative;z-index:2}
/* Grila urca 40px peste marginea de jos a heroului. Marginea negativa
   anuleaza intai cei 84px de padding de sus ai sectiunii (3 x --leading) si
   abia apoi ridica grila cu cei 40px ceruti; un simplu -40px ar fi micsorat
   doar spatiul, fara nicio suprapunere. Cardurile raman aliniate intre ele,
   sunt mutate ca un singur bloc si nu li se schimba nimic altceva. */
body.pag-resurse .rsc-grid{margin-top:calc(-3 * var(--leading) - 40px)}
body.pag-resurse .rsc-eticheta{color:color-mix(in srgb,var(--color-bg) 76%,transparent)}
body.pag-resurse .rsc-titlu{color:var(--color-bg)}
body.pag-resurse .rsc-text{color:color-mix(in srgb,var(--color-bg) 88%,transparent)}
body.pag-resurse .rsc-buton{color:var(--color-bg)}
body.pag-resurse .rsc-buton:hover{color:#EBD9A8}
body.pag-resurse .rsc-buton:focus-visible{outline-color:#EBD9A8}

.rsc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,4.2vw,60px);row-gap:clamp(56px,5.6vw,86px)}
.rsc{display:flex;flex-direction:column;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.rsc-foto{position:relative;margin:0;container-type:inline-size}
.rsc-foto .ph{aspect-ratio:2 / 3;border-radius:0}
.rsc-foto .ph-tag{justify-content:flex-start;padding-top:12px;gap:4px}
.rsc-foto .ph-tag b{font-size:11px}
.rsc-foto .ph-tag small{font-size:11px;max-width:26ch}
.rsc-foto .ph-tag i{display:none}
.rsc-ov{position:absolute;inset:13%;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5.5% 7%;background:rgba(255,255,255,.78);color:var(--color-text)}
.rsc-ov-sus,.rsc-ov-jos{font-family:var(--font-body);font-size:max(10px,3.1cqw);line-height:1.3;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.rsc-ov-mijloc{display:block;margin:auto 0;width:100%}
.rsc-ov-mijloc b{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:max(22px,7.4cqw);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.rsc-ov-mijloc i{display:block;margin-top:5%;font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:max(12px,3.5cqw);line-height:1.35;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.rsc-corp{display:flex;flex-direction:column;flex:1;padding:0}
.rsc-eticheta{margin-top:var(--leading);font-family:var(--font-body);font-size:16px;line-height:1.3;font-weight:400;letter-spacing:.04em;text-transform:none;color:color-mix(in srgb,var(--color-text) 48%,transparent)}
.rsc-titlu{margin:var(--half) 0 0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(26px,2.3vw,34px);line-height:1.14;letter-spacing:-.015em;color:var(--color-text);text-wrap:balance}
.rsc-text{margin:18px 0 26px;font-family:var(--font-body);font-size:18px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 78%,transparent);text-wrap:pretty}
.rsc-buton{align-self:flex-start;margin-top:auto;display:inline-block;padding:0;border:0;border-radius:0;background:none;font-family:var(--font-body);font-size:18px;line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none;color:var(--color-text);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .18s ease}
.rsc-buton:hover{background:none;border:0;color:#8c491a;text-decoration-thickness:2px}
.rsc-buton:focus-visible{outline:2px solid #8c491a;outline-offset:3px}
@media (max-width:1100px){.rsc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
  .rsc-grid{grid-template-columns:1fr;column-gap:0;row-gap:48px}
  .rsc-titlu{font-size:27px}
}

body.pag-articol{background:var(--color-bg)}
.art{display:block}
.art-hero{position:relative;margin:0;width:100%;overflow:hidden;background:var(--color-neutral-200)}
.art-hero img,.art-hero picture{display:block;width:100%;height:100%;object-fit:cover}
.art-hero{height:clamp(380px,64svh,720px)}
.art-cap{position:relative;z-index:2;margin:-72px auto 0;width:min(1022px,calc(100% - 2 * var(--edge)));
  box-sizing:border-box;padding:clamp(34px,3.4vw,54px) clamp(28px,3.2vw,56px) clamp(28px,2.8vw,44px);
  background:var(--color-bg)}
.art-ancora{display:block;height:0;scroll-margin-top:0}
.art-eticheta{display:block;font-family:var(--font-body);font-size:16px;line-height:1.3;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#8c491a}
.art-titlu{margin:var(--half) 0 0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(32px,4.2vw,56px);line-height:1.08;letter-spacing:-.02em;color:var(--color-text);text-wrap:balance}
.art-deck{margin:var(--leading) 0 0;font-family:var(--font-body);font-size:21px;line-height:1.6;
  max-width:60ch;color:color-mix(in srgb,var(--color-text) 76%,transparent);text-wrap:pretty}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:calc(1.1 * var(--leading)) 0 0;
  font-family:var(--font-body);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 52%,transparent)}
.art-punct{color:color-mix(in srgb,var(--color-text) 30%,transparent)}

.art-coloane{display:grid;grid-template-columns:230px minmax(0,720px);gap:72px;
  margin:calc(2.2 * var(--leading)) auto 0;width:min(1022px,calc(100% - 2 * var(--edge)))}
.art-corp{margin:0;width:auto;min-width:0}
.art-corp h2{scroll-margin-top:112px}

.art-cuprins{position:sticky;top:112px;align-self:start;max-height:calc(100svh - 150px);overflow:auto}
.art-cuprins-titlu{display:block;margin:0 0 var(--leading);padding-left:26px;font-family:var(--font-body);
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.art-cuprins-lista{list-style:none;margin:0;padding:0;counter-reset:none}
.art-cuprins-lista li{border-left:2px solid color-mix(in srgb,var(--color-text) 16%,transparent);
  transition:border-color .18s ease}
.art-cuprins-lista a{display:block;padding:18px 0 18px 26px;font-family:var(--font-body);font-size:17px;
  line-height:1.5;color:color-mix(in srgb,var(--color-text) 62%,transparent);text-decoration:none;
  transition:color .18s ease}
.art-cuprins-lista a:hover{color:var(--color-text)}
.art-cuprins-lista li.e-activ{border-left-color:#D97D2F}
.art-cuprins-lista li.e-activ a{color:#825040;font-weight:600}
.art-cuprins-lista a:focus-visible{outline:2px solid #8c491a;outline-offset:-2px}
.art-corp p{margin:0 0 var(--leading);font-family:var(--font-body);font-size:19px;line-height:1.72;
  color:color-mix(in srgb,var(--color-text) 86%,transparent);text-wrap:pretty}
.art-corp em{font-style:italic}
.art-corp h2{margin:calc(2.1 * var(--leading)) 0 var(--leading);font-family:var(--font-heading);
  font-weight:var(--font-heading-weight);font-size:clamp(25px,2.6vw,33px);line-height:1.18;
  letter-spacing:-.015em;color:#825040}
.art-replica{margin:0 0 var(--leading);padding:2px 0 2px clamp(18px,2vw,26px);
  border-left:2px solid color-mix(in srgb,#825040 42%,transparent);
  font-family:var(--font-heading);font-style:italic;font-size:21px;line-height:1.5;
  color:#6b4232}
.art-cheie{margin:calc(1.6 * var(--leading)) 0;padding:clamp(26px,2.6vw,38px) clamp(24px,2.4vw,36px);
  border-top:2px solid color-mix(in srgb,#968733 70%,transparent);
  border-bottom:2px solid color-mix(in srgb,#968733 70%,transparent);
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(23px,2.5vw,30px);line-height:1.3;letter-spacing:-.012em;
  text-align:center;color:#825040;text-wrap:balance}

.art-final{margin:calc(2.4 * var(--leading)) auto 0;width:min(720px,calc(100% - 2 * var(--edge)));
  box-sizing:border-box;padding:clamp(30px,3vw,44px);text-align:center;
  background:color-mix(in srgb,#ffe1d0 55%,var(--color-bg))}
.art-final-text{margin:0;font-family:var(--font-body);font-size:19px;line-height:1.62;
  color:color-mix(in srgb,var(--color-text) 84%,transparent);text-wrap:pretty}
.art-final-buton{display:inline-block;margin-top:calc(1.2 * var(--leading));padding:15px 30px;
  border:1px solid #D97D2F;border-radius:6px;background:transparent;font-family:var(--font-body);
  font-size:15px;letter-spacing:.06em;color:#D97D2F;text-decoration:none;
  transition:background .18s ease,color .18s ease}
.art-final-buton:hover{background:#D97D2F;color:var(--color-bg)}
.art-inapoi{margin:calc(2 * var(--leading)) auto calc(2.6 * var(--leading));
  width:min(720px,calc(100% - 2 * var(--edge)))}
.art-inapoi a{font-family:var(--font-body);font-size:17px;color:#825040;text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}
.art-inapoi a:hover{color:#643312}

@media (min-width:1101px){
  .art-cap{padding-left:302px;padding-right:0}
}
@media (min-width:1240px){
  .art-coloane{grid-template-columns:230px 1fr minmax(0,720px);gap:0;
    width:calc(50% + 511px);margin-left:0;margin-right:auto}
  .art-cuprins{grid-column:1}
  .art-corp{grid-column:3}
}
@media (max-width:1100px){
  .art-cap{padding-left:0;padding-right:0}
  .art-coloane{display:block}
  .art-cuprins{position:static;max-height:none;overflow:visible;margin:0 0 calc(2.2 * var(--leading));
    padding:0 0 calc(.6 * var(--leading))}
  .art-cuprins-lista a{font-size:17px}
}
@media (max-width:860px){
  .art-hero{height:clamp(300px,48svh,460px)}
  .art-cap{margin-top:-48px;width:calc(100% - 2 * var(--edge))}
  .art-deck{font-size:19px}
  .art-corp p{font-size:18px}
  .art-replica{font-size:19px}
}

@property --sbw{syntax:"<length>";inherits:true;initial-value:0px}
:root{
  --container-max:1440px;
  --sbw:calc(100vw - 100%);
  --content-inset:max(var(--edge),calc((100vw - var(--sbw) - var(--container-max)) / 2 + var(--edge)));
}

.nav{padding-inline:var(--content-inset)}
body>nav.nav{left:0;right:0;padding-inline:var(--content-inset)}
body.pag-servicii>nav.nav,
body.pag-programari>nav.nav,
body.pag-resurse>nav.nav,
body.pag-contact>nav.nav,
body.pag-despre>nav.nav{padding-left:var(--content-inset);padding-right:var(--content-inset)}

.hero-banner,
.hero-banner.hero-glass,
.hero-banner.hero-split,
.hero-banner.hero-fara-foto,
.hero-banner.hero-afis{--nume-stanga:var(--content-inset)}
@media (max-width:1200px){
  .hero-banner.hero-glass{--nume-stanga:var(--content-inset)}
}
.afis .ha-card{left:var(--content-inset)}
.hero-afis .hg-id{left:var(--content-inset)}

/* heroul Resurse se aliniaza prin .hr-scena (margin-inline:var(--content-inset)) */

.art{box-sizing:border-box;padding-inline:var(--edge)}
.art-cap{width:min(1022px,100%);margin-left:0;margin-right:auto}
.art-coloane{width:min(1022px,100%);margin-left:0;margin-right:auto}
@media (min-width:1240px){
  .art-coloane{grid-template-columns:230px minmax(0,720px);gap:72px;
    width:min(1022px,100%);margin-left:0;margin-right:auto}
  .art-cuprins{grid-column:auto}
  .art-corp{grid-column:auto}
}
@media (max-width:1100px){
  .art-cap,.art-coloane,.art-final,.art-inapoi{width:100%}
}


/* ===========================================================================
   Drum 2 — varianta pe doua planuri a caruselului "Un drum construit din
   experiente diferite". In stanga un teanc de titluri, in dreapta un teanc
   de texte; rasfoirea le schimba simultan, deci fiecare titlu isi aduce tot
   textul capitolului intr-un singur card, nu imprastiat pe doua-trei.
   Fisele din spate stau usor rotite, ca paginile unei carti; cea citita
   pleaca spre exterior - spre stanga in teancul din stanga, spre dreapta in
   cel din dreapta, de aceea "doua planuri".
   =========================================================================== */
/* Sagetile si numaratoarea: clase mostenite de la caruselul 3D care a fost
   scos din pagina (copie in _backup/drum-carusel-3d). Sectiunea .drum2 le
   foloseste, deci regulile au ramas aici. */
.drum-sageata{
  width:48px;height:48px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--color-bg) 55%,transparent);
  background:transparent;color:var(--color-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;
  transition:background-color .25s,border-color .25s,color .25s,transform .25s;
}
.drum-sageata:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.drum-sageata:active{transform:scale(.96)}
.drum-pag{
  font-size:13px;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--color-bg) 78%,transparent);
}
.drum-pag strong{color:var(--color-bg);font-weight:700}
@media (max-width:560px){
  .drum-sageata{width:42px;height:42px}
}
.drum2{
  position:relative;overflow:hidden;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:clamp(29px,calc(4.75vw - 20px),60px);
  background:#6F7F55;color:var(--color-bg);
}
.dr2-cap{
  width:min(1080px,100% - 2*var(--edge));margin:0 auto 70px;
  /* taie firele de 50vw la latimea continutului */
  overflow:hidden;
}
/* Titlul sectiunii, in acelasi tipar ca "Omul din spatele profesiei":
   serif centrat, cu cate un fir subtire in stanga si in dreapta. Scris normal,
   nu cu majuscule. Firele au 50vw si sunt taiate de .dr2-cap, deci se opresc
   la marginea continutului, exact cat tin cardurile. */
/* supratitlul, cu majuscule, deasupra titlului sectiunii */
/* Romina, 21 oct 2026: supratitlul preia tipografia titlului de dedesubt —
   Newsreader (--font-heading), weight 300, letter-spacing .01em — dar ramane
   cu majuscule. Marimea (20px) si culoarea raman cele de aici.
   Firele subtiri din stanga/dreapta au trecut de pe titlu pe supratitlu, deci
   elementul are nevoie de position:relative (ancora pentru ::before/::after)
   si de width:fit-content, altfel firele ar porni de la marginile blocului,
   nu de la marginile textului. margin devine 0 auto ca sa ramana centrat. */
.dr2-cap-supra{
  display:block;text-align:center;
  position:relative;width:fit-content;
  font-family:var(--font-heading);font-size:15px;font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
  /* fundalul blocului e o fotografie aproape alba: scrisul crem ar disparea */
  color:color-mix(in srgb,var(--dr2-cerneala,#2F2D29) 72%,transparent);
  margin:0 auto 26px;
  opacity:0;
}
.dr2-cap-supra::before,
.dr2-cap-supra::after{
  content:"";position:absolute;top:50%;width:50vw;height:1px;
  background:color-mix(in srgb,var(--dr2-cerneala,#2F2D29) 38%,transparent);
  transform:scaleX(0);
}
.dr2-cap-supra::before{right:calc(100% + clamp(20px,2.4vw,44px));transform-origin:right center}
.dr2-cap-supra::after{left:calc(100% + clamp(20px,2.4vw,44px));transform-origin:left center}
.dr2-cap-titlu{
  position:relative;width:fit-content;margin:0 auto;white-space:nowrap;
  font-family:var(--font-heading);font-weight:300;
  font-size:clamp(28px,2.5vw,44px);line-height:1.15;letter-spacing:.01em;
  color:var(--dr2-cerneala,#2F2D29);
  opacity:0;
}
/* Firele au urcat pe .dr2-cap-supra (vezi mai sus). Al doilea rand — titlul —
   ramane fara ele. */
/* animatia porneste cand blocul ajunge in ecran (clasa .vazut din script) */
@keyframes dr2-cap-intra{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes dr2-cap-fir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dr2-cap.vazut .dr2-cap-supra{
  animation:dr2-cap-intra .62s .16s cubic-bezier(.22,.82,.2,1) both;
}
.dr2-cap.vazut .dr2-cap-titlu{
  animation:dr2-cap-intra .72s .28s cubic-bezier(.22,.82,.2,1) both;
}
.dr2-cap.vazut .dr2-cap-supra::before,
.dr2-cap.vazut .dr2-cap-supra::after{
  animation:dr2-cap-fir .9s .56s cubic-bezier(.22,.82,.2,1) both;
}
@media (max-width:720px){
  .dr2-cap-supra{font-size:13px}
  .dr2-cap-titlu{white-space:normal;text-align:center}
  .dr2-cap-supra::before,.dr2-cap-supra::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dr2-cap-titlu,.dr2-cap-supra{opacity:1}
  .dr2-cap.vazut .dr2-cap-supra,
  .dr2-cap.vazut .dr2-cap-titlu,
  .dr2-cap.vazut .dr2-cap-supra::before,
  .dr2-cap.vazut .dr2-cap-supra::after{animation:none}
  .dr2-cap-supra::before,.dr2-cap-supra::after{transform:scaleX(1)}
}
/* =========================================================================
   Trecerea dintre sectiunea de deasupra si blocul cu capitolele.
   Panoul de sus nu se misca si nu se mai transforma: se stinge pe loc, lipit
   de marginea de jos. Iluzia ca el "cade" aici e facuta in intregime de
   animatia de mai jos, care porneste din marginea de sus a acestui bloc.

   Sincronizarea nu e reglata din constante, ci prin constructie:
   --pe ajunge la 1 exact cand marginea de jos a sectiunii .deschidere atinge
   baza ecranului, adica exact cand marginea de sus a lui .drum2 ajunge acolo.
   Panoul e la opacitate 0 fix in acel punct, iar cronologia de mai jos
   porneste la `cover 0px`, adica acelasi punct. Nu ramane niciun gol.
   ========================================================================= */
@keyframes dr2-prabusire{
  0%{
    /* intrat pe sub marginea de sus a blocului (taiata de overflow:hidden),
       intins pe verticala, ca o masa care tocmai a fost impinsa inauntru */
    transform:translateY(-260px) scaleY(2);
    opacity:0;
  }
  10%{opacity:1}
  72%{
    /* a ajuns jos si se striveste putin sub propria greutate */
    transform:translateY(0) scaleY(.9);
    opacity:1;
  }
  100%{transform:none;opacity:1}
}
@supports (animation-timeline:view()){
  .drum2{view-timeline:--dr2-vedere block}
  .dr2-cap{
    transform-origin:top center;
    animation:dr2-prabusire linear both;
    animation-timeline:--dr2-vedere;
    /* porneste cand muchia de sus a blocului atinge baza ecranului si tine
       420px de derulare */
    animation-range:cover 0px cover 420px;
  }
  /* cu cronologia de derulare, animatia pe clasa .vazut nu mai e folosita */
  .dr2-cap-supra,.dr2-cap-titlu{opacity:1}
  .dr2-cap-supra::before,.dr2-cap-supra::after{transform:scaleX(1)}
  .dr2-cap.vazut .dr2-cap-supra,
  .dr2-cap.vazut .dr2-cap-titlu,
  .dr2-cap.vazut .dr2-cap-supra::before,
  .dr2-cap.vazut .dr2-cap-supra::after{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .dr2-cap{animation:none !important;transform:none !important}
}
.dr2-scena{
  /* Ansamblul din specificatie: 440 + 24 + 620 = 1084px, deci coloanele pastreaza
     raportul 440:620 si golul e fix, 24px. */
  width:min(1080px,100% - 2*var(--edge));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,440fr) minmax(0,620fr);
  gap:24px;
  perspective:1700px;
  position:relative;
  --dr2-auriu:#C8A66A;
  --dr2-verde:#5C6B46;
  --dr2-crem:#E6DED1;
  --dr2-ivoriu:#EEE7D7;
  --dr2-cerneala:#2F2D29;
  --dr2-salvie:#A7B295;
  /* linia aurie de pe muchia de sus, 4px, ca prim strat de fundal pe fiecare
     card. Nu pe un ::before: acolo sta filtrul de sticla. */
  --dr2-fir-auriu:linear-gradient(to right,
      #B38F4E 0,var(--dr2-auriu) 28%,#E7D2A2 50%,var(--dr2-auriu) 72%,#B38F4E 100%)
      top/100% 4px no-repeat;
}
.dr2-teanc{
  position:relative;height:clamp(640px,40vw,700px);
  transform-style:preserve-3d;cursor:pointer;
}
.dr2-f{
  --k:0;
  position:absolute;inset:0;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-start;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);
  transition:transform .62s cubic-bezier(.22,.82,.2,1),opacity .42s ease;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  z-index:calc(20 - var(--k));
  opacity:1;
}
.dr2-f[data-stare="dus"],
.dr2-f[data-stare="ascuns"]{opacity:0;pointer-events:none}
/* Sticla, doar pe cardul verde. Sta pe ::before, fiindca backdrop-filter
   aplicat direct pe o fisa rotita in 3D o scoate din contextul preserve-3d. */
.dr2-teanc-titlu .dr2-f{transform:none}
.dr2-teanc-titlu .dr2-f[data-stare="teanc"],
.dr2-teanc-titlu .dr2-f[data-stare="ascuns"],
.dr2-teanc-titlu .dr2-f[data-stare="dus"]{opacity:0}

/* Rasfoirea ramane neschimbata ca mecanica: fisa care intra vine din adancime,
   cea care pleaca iese spre stanga. Difera doar ca fisele din teanc nu se mai
   vad - specificatia cere fara straturi decorative in spatele cardului crem. */
.dr2-teanc-text .dr2-f{
  transform-origin:left center;
  transform:translateX(calc(var(--k) * 62px)) translateZ(calc(var(--k) * -110px)) rotateY(calc(var(--k) * -9deg));
}
.dr2-teanc-text .dr2-f[data-stare="dus"]{
  opacity:0;transform:translateX(-34px) translateZ(70px) scale(1.015);
}
/* Evantaiul: fisele din teanc raman vizibile in spatele celei din fata, cu
   acelasi decalaj, aceeasi adancime si aceeasi rotatie ca inainte.
   Continutul lor ramane ascuns: cu o diferenta mica de adancime planurile se
   intersecteaza, iar Chrome le sorteaza pe fragmente, asa ca textul din spate
   ar razbate peste cel din fata. */
.dr2-teanc-text .dr2-f:not([data-stare="fata"]) .dr2-corp{opacity:0}
/* pe paginile din teanc nu apar nici firul auriu, nici nufarul - doar hartia */
.dr2-teanc-text .dr2-f[data-stare="teanc"]{background:var(--dr2-crem)}

/* --- cardul din stanga: verde translucid, 440 x 690 --- */
.dr2-f-titlu{
  padding:42px;
  background:var(--dr2-fir-auriu),
    color-mix(in srgb,var(--dr2-verde) 82%,transparent);
  color:var(--dr2-ivoriu);
  box-shadow:0 16px 40px rgba(0,0,0,.16),
             inset 0 0 0 1px color-mix(in srgb,var(--dr2-salvie) 55%,transparent);
}
.dr2-titlu{
  /* Titlul porneste de la 42px de padding, textul din dreapta de la 56px, iar
     interliniile difera (1.05 fata de 1.72). Diferenta e adaugata aici, ca
     prima linie din cele doua carduri sa cada optic pe aceeasi inaltime. */
  position:relative;z-index:1;
  margin:calc(1.08 * clamp(18px,1.25vw,20px) - 20px) 0 0;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:max(24px,calc(clamp(34px,3.2vw,56px) - 20px));
  line-height:1.05;letter-spacing:-.012em;
  color:var(--dr2-cerneala);text-wrap:pretty;
}
/* firul auriu, acum vertical, in stanga titlului: pe fotografie se vede mai
   bine asezat vertical decat ca linie orizontala sub text. Inalt cat randurile
   titlului, la 22px de litere, deci la 20px de marginea cardului. */
.dr2-titlu::before,.dr2-titlu::after{
  content:"";position:absolute;margin:0;
  background:var(--dr2-auriu);
}
/* bratul orizontal, deasupra primului rand */
.dr2-titlu::before{left:-22px;top:-22px;width:48px;height:3px}
/* bratul vertical, in stanga; impreuna formeaza coltul */
.dr2-titlu::after{left:-22px;top:-22px;width:3px;height:48px}
/* elementul botanic din coltul de jos-stanga al cardului verde */
.dr2-botanic{
  /* fotografia acopera tot cardul; fiind lata (1331x749) si cadrul inalt,
     decupajul e tinut pe floare, nu pe centru */
  position:absolute;inset:0;
  width:auto;height:auto;aspect-ratio:auto;max-height:none;
  border-radius:inherit;overflow:hidden;
  pointer-events:none;z-index:0;opacity:1;
}
.dr2-botanic img,
.dr2-botanic picture{position:absolute;inset:0;width:100%;height:100%;display:block}
.dr2-botanic img{object-fit:cover;object-position:50% 50%}

/* --- cardul din dreapta: crem cald, mat, 620 x 690 --- */
.dr2-f-text{
  --dr2-nufar-l:140px;--dr2-nufar-i:107px;
  padding:56px 56px 52px;
  background:var(--dr2-fir-auriu),var(--dr2-crem);
  color:var(--dr2-cerneala);
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}
.dr2-f-text::after{
  content:"";position:absolute;right:28px;bottom:24px;
  width:var(--dr2-nufar-l);height:var(--dr2-nufar-i);
  background:url("images/nufar-ornament-v1.png") center/contain no-repeat;
  pointer-events:none;opacity:.42;z-index:0;
}
.dr2-teanc-text .dr2-f:not([data-stare="fata"])::after{opacity:0}
.dr2-corp{max-width:52ch;position:relative;z-index:1}
.dr2-corp p{
  margin:0 0 1.35em;font-family:var(--font-body);
  font-size:clamp(18px,1.25vw,20px);line-height:1.72;
  color:var(--dr2-cerneala);
  text-wrap:pretty;
}
.dr2-corp p:last-child{margin-bottom:0}

.dr2-ctrl{
  width:min(1000px,100% - 2*var(--edge));margin:calc(2*var(--leading)) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

@media (max-width:1000px){
  .dr2-scena{grid-template-columns:1fr;gap:20px}
  .dr2-teanc-titlu{height:clamp(180px,26vw,240px)}
  .dr2-teanc-text{height:clamp(420px,62vw,520px)}
  .dr2-f-text{--dr2-nufar-l:112px;--dr2-nufar-i:86px}
  .dr2-f{padding:clamp(28px,5vw,40px)}
}
/* Animatia continutului la fiecare slide: numarul, titlul si paragrafele
   intra decalat, dupa ce fisa a ajuns in fata (tranzitia fisei tine .62s).
   Se reporneste de fiecare data cand o fisa redevine "fata". */
@keyframes dr2-intra{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.dr2-f[data-stare="fata"] .dr2-titlu{animation:dr2-intra .58s .26s both cubic-bezier(.22,.82,.2,1)}
.dr2-f[data-stare="fata"] .dr2-corp p{animation:dr2-intra .52s both cubic-bezier(.22,.82,.2,1)}
.dr2-f[data-stare="fata"] .dr2-corp p:nth-child(1){animation-delay:.22s}
.dr2-f[data-stare="fata"] .dr2-corp p:nth-child(2){animation-delay:.30s}
.dr2-f[data-stare="fata"] .dr2-corp p:nth-child(3){animation-delay:.38s}
.dr2-f[data-stare="fata"] .dr2-corp p:nth-child(4){animation-delay:.46s}
.dr2-f[data-stare="fata"] .dr2-corp p:nth-child(n+5){animation-delay:.54s}
/* continutul fisei care pleaca se stinge rapid, ca sa nu se citeasca in rotatie */
.dr2-f[data-stare="dus"] .dr2-titlu,
.dr2-f[data-stare="dus"] .dr2-corp p{opacity:0;transition:opacity .18s ease}

@media (prefers-reduced-motion:reduce){
  .dr2-f{transition:none}
  .dr2-f[data-stare="fata"] .dr2-nr,
  .dr2-f[data-stare="fata"] .dr2-titlu,
  .dr2-f[data-stare="fata"] .dr2-corp p{animation:none}
}


/* Formularul si fisele laterale, pe paleta site-ului: crem pe fundalul
   paginii, cerneala pentru text, teracota doar pe buton. */
.pag-contact .ctp-form{
  background:#F9F4ED;
  border-radius:var(--radius-lg);
  padding:clamp(28px,2.8vw,44px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--color-text) 8%,transparent),
             0 18px 40px rgba(0,0,0,.06);
}
.pag-contact .ctp-form-titlu{
  margin:clamp(10px,1vw,14px) 0 0;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(24px,2.2vw,32px);line-height:1.15;letter-spacing:-.012em;
  color:var(--color-text);
}
.pag-contact .ctp-form-text{
  margin:var(--half) 0 var(--leading);
  font-family:var(--font-body);font-size:18px;line-height:1.55;
  color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
.pag-contact .ctp-form .input{
  background:#FFFDFA;
  border-color:color-mix(in srgb,var(--color-text) 20%,transparent);
}
.pag-contact .ctp-form .input:hover{border-color:color-mix(in srgb,var(--color-text) 38%,transparent)}
.pag-contact .ctp-form .input:focus{border-color:#2E5D3A;outline:none}
.pag-contact .ctp-form .btn-block{margin-top:var(--leading)}



.pag-contact .ctp-hero{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  display:grid;align-items:center;
  padding:0;
}
.pag-contact .ctp-foto{
  grid-area:1 / 1;justify-self:center;
  margin:0;width:min(82vw,100%);
  border-radius:var(--radius-lg);
  overflow:hidden;background:#E6DED1;
}
.pag-contact .ctp-foto picture{display:block}
.pag-contact .ctp-foto img{display:block;width:100%;height:auto}
.pag-contact .ctp-hero .ctp-form{
  grid-area:1 / 1;justify-self:end;z-index:2;
  margin-right:0;
  width:clamp(340px,34vw,520px);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}


/* Sub 1024px banda se desface: fotografia pe toata latimea, formularul dedesubt */
@media (max-width:1280px){
  .pag-contact .ctp-hero{display:block}
  .pag-contact .ctp-foto{width:100%;border-radius:0}
  .pag-contact .ctp-hero .ctp-form{
    width:auto;margin:calc(1.2 * var(--leading)) var(--edge) 0;
  }
}

.pag-contact .ctp-hero .ctp-form{
  padding:30px;
}
.pag-contact .ctp-hero .ctp-form .grid.g2{gap:clamp(6px,.6vw,8px)}
.pag-contact .ctp-hero .ctp-form .field + .field,
.pag-contact .ctp-hero .ctp-form .grid.g2 + .field,
.pag-contact .ctp-hero .ctp-form .field{margin-top:clamp(6px,.6vw,8px)}
.pag-contact .ctp-hero .ctp-form .grid.g2 .field{margin-top:0}
.pag-contact .ctp-hero .ctp-form-titlu{margin-top:0;font-size:clamp(20px,1.7vw,25px)}
.pag-contact .ctp-hero .ctp-form-text{margin:5px 0 clamp(10px,1vw,14px);font-size:16px;line-height:1.45}
.pag-contact .ctp-hero .ctp-form .field label{margin-bottom:2px}
.pag-contact .ctp-hero .ctp-form textarea.input{min-height:0;height:clamp(48px,4vw,62px)}
.pag-contact .ctp-hero .ctp-form .btn-block{margin-top:clamp(8px,.8vw,11px)}
.pag-contact .ctp-hero .ctp-form .note{margin-top:clamp(6px,.6vw,9px);font-size:13px;line-height:1.4}
@media (max-width:1280px){
  .pag-contact .ctp-hero .ctp-form textarea.input{height:auto;min-height:120px}
}

@media (min-width:1281px){
  .pag-contact .ctp-hero{margin-top:-88px}
  .pag-contact .ctp-hero .ctp-form{margin-top:88px}
}

.pag-contact .ctp-hero .ctp-form-text + .ctp-form-text{margin-top:6px;color:#825040;font-weight:500}
.pag-contact .ctp-hero .ctp-form-text a{
  color:var(--color-text);text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-text) 45%,transparent);
}
.pag-contact .ctp-hero .ctp-form-text a:hover{color:#B55C14;box-shadow:inset 0 -1px 0 #B55C14}

.sa-card{transition:background-color .45s ease}
.sa-card:hover,
.sa-card:focus-within{background:color-mix(in srgb,#D6E4D3 92%,#2E5D3A)}
@media (prefers-reduced-motion:reduce){
  .sa-card{transition:none}
}


/* Consimtamant prelucrare date — formular contact + formular programari */
.cns{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin-top:18px;cursor:pointer;
}
.cns > input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;margin:1px 0 0;flex:none;
  display:grid;place-content:center;
  background:#fff;border:1px solid color-mix(in srgb,var(--color-text) 38%,transparent);
  border-radius:2px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cns > input[type="checkbox"]::before{
  content:"";width:10px;height:10px;background:#fff;transform:scale(0);
  transition:transform .12s ease-out;
  clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,85% 4%,38% 70%);
}
.cns > input[type="checkbox"]:checked{background:#2E5D3A;border-color:#2E5D3A}
.cns > input[type="checkbox"]:checked::before{transform:scale(1)}
.cns > input[type="checkbox"]:hover{border-color:#2E5D3A}
.cns > input[type="checkbox"]:focus-visible{outline:2px solid #2E5D3A;outline-offset:2px}
.cns-text{
  font-size:13.5px;line-height:1.55;
  color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
.cns-text i{font-style:normal;color:#B55C14;margin-left:2px}
@media (prefers-reduced-motion:reduce){
  .cns > input[type="checkbox"],
  .cns > input[type="checkbox"]::before{transition:none}
}
.pag-contact .ctp-hero .ctp-form .cns{margin-top:clamp(10px,1vw,13px)}
.pag-contact .ctp-hero .ctp-form .cns-text{font-size:12.5px;line-height:1.45}
.pag-programari .rz-form .cns{margin-top:clamp(18px,1.8vw,26px)}


/* =========================================================================
   FIȘE DE LUCRU — card, fereastră cu deblocare prin email, ofertă
   ========================================================================= */

/* --- butonul din card (acelasi aspect ca .rsc-buton, dar <button>) ------- */
button.rsc-buton{-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;
  font-size:18px;line-height:1.4;text-align:left}

/* --- insigna de pe fotografia fisei ------------------------------------- */
.rsc-foto{overflow:visible}
.rsc-insigna{
  position:absolute;z-index:3;top:0;left:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;background:var(--color-bg);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#2E5D3A;
  box-shadow:0 2px 14px rgba(20,28,14,.18);
}
.rsc-insigna::before{content:"";width:9px;height:9px;flex:none;
  border-left:2px solid #B55C14;border-top:2px solid #B55C14}

/* --- cardul in pregatire ------------------------------------------------ */
.rsc-curand .rsc-titlu,.rsc-curand .rsc-text{opacity:.82}
.rsc-curand .rsc-stare{
  align-self:flex-start;margin-top:auto;
  font-family:var(--font-body);font-size:16px;letter-spacing:.11em;
  text-transform:uppercase;color:color-mix(in srgb,var(--color-bg) 62%,transparent);
}

/* =========================  fereastra  ================================== */
/* specificitate (0,1,1) ca sa bata `body>*:not(.para)` de mai sus, care altfel
   ar face fereastra `position:relative` si ar prinde-o in curgerea paginii */
body>.fx[hidden]{display:none}
body>.fx{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:24px;max-width:none;margin:0}
.fx-fundal{position:absolute;inset:0;background:rgba(22,31,15,.74);
  backdrop-filter:blur(6px) saturate(.9);animation:fx-apare .25s ease both}
.fx-panou{
  position:relative;z-index:1;display:grid;grid-template-columns:38% 1fr;
  width:min(980px,100%);max-height:min(86vh,860px);
  background:var(--color-bg);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 90px rgba(12,20,8,.45);
  animation:fx-urca .34s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes fx-apare{from{opacity:0}to{opacity:1}}
@keyframes fx-urca{from{opacity:0;transform:translateY(22px) scale(.985)}
                   to{opacity:1;transform:none}}

.fx-foto{position:relative;margin:0;background:#E6DED1;overflow:hidden}
.fx-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fx-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(26,40,20,.05) 0%,rgba(26,40,20,.3) 100%)}

.fx-x{
  position:absolute;z-index:4;top:14px;right:14px;
  width:38px;height:38px;display:grid;place-items:center;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  border:0;border-radius:50%;background:rgba(249,244,237,.9);
  font:400 22px/1 var(--font-body);color:#2E5D3A;
  transition:background .16s ease,transform .16s ease;
}
.fx-x:hover{background:#D6E4D3;transform:rotate(90deg)}
.fx-x:focus-visible{outline:2px solid #2E5D3A;outline-offset:2px}

.fx-corp{position:relative;overflow-y:auto;padding:42px 44px 40px}
.fx-pas[hidden]{display:none}
.fx-pas{animation:fx-intra .34s ease both}
@keyframes fx-intra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.fx-eticheta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#825040;
}
.fx-eticheta::before{content:"";width:13px;height:13px;flex:none;
  border-left:2px solid #2E5D3A;border-top:2px solid #2E5D3A}

.fx-titlu{
  margin:16px 0 0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(25px,2.3vw,33px);line-height:1.12;letter-spacing:-.015em;
  color:var(--color-text);text-wrap:balance;
}
.fx-text{margin:14px 0 0;font-size:17px;line-height:1.58;
  color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.fx-meta{margin:12px 0 0;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 52%,transparent)}

.fx-form{margin-top:24px}
.fx-form .field + .field{margin-top:12px}
.fx-form .field label{display:block;margin-bottom:5px;font-size:15.5px;
  color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.fx-form .input{
  width:100%;font:inherit;font-size:16.5px;padding:12px 14px;
  background:#fff;color:var(--color-text);
  border:1px solid color-mix(in srgb,var(--color-text) 20%,transparent);
  border-radius:3px;transition:border-color .15s ease,box-shadow .15s ease;
}
.fx-form .input::placeholder{color:color-mix(in srgb,var(--color-text) 38%,transparent)}
.fx-form .input:focus{outline:0;border-color:#2E5D3A;
  box-shadow:0 0 0 3px color-mix(in srgb,#2E5D3A 16%,transparent)}
.fx-form .cns{margin-top:16px}
.fx-form .cns-text{font-size:13px;line-height:1.5}

.fx-trimite,.fx-descarca,.fx-revendica{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:18px;padding:16px 22px;
  -webkit-appearance:none;appearance:none;cursor:pointer;border:0;border-radius:3px;
  font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1;
  text-decoration:none;transition:background .18s ease,transform .18s ease;
}
.fx-trimite{background:#2E5D3A;color:var(--color-bg)}
.fx-trimite:hover{background:#24472D}
.fx-trimite:disabled{opacity:.5;cursor:progress}
.fx-descarca{background:#2E5D3A;color:var(--color-bg)}
.fx-descarca:hover{background:#24472D;color:var(--color-bg)}  /* a:hover (0,1,1) de mai sus ar schimba altfel culoarea textului */
.fx-revendica{background:#B55C14;color:#fff;margin-top:16px}
.fx-revendica:hover{background:#9A4C0E}
.fx-trimite:focus-visible,.fx-descarca:focus-visible,.fx-revendica:focus-visible{
  outline:2px solid #2E5D3A;outline-offset:3px}

.fx-nota{margin:14px 0 0;font-size:13px;line-height:1.5;
  color:color-mix(in srgb,var(--color-text) 58%,transparent)}
.fx-eroare{margin:14px 0 0;padding:11px 14px;font-size:14.5px;border-radius:3px;
  background:#F6E2D4;color:#8C3A10}
.fx-eroare[hidden]{display:none}

/* --- pasul de reusita --------------------------------------------------- */
.fx-reusita{text-align:center;padding-top:6px}
.fx-sigiliu{width:84px;height:84px;margin:0 auto 20px;position:relative}
.fx-sigiliu svg{width:100%;height:100%;overflow:visible}
.fx-sigiliu .inel{fill:none;stroke:#2E5D3A;stroke-width:3;
  stroke-dasharray:226;stroke-dashoffset:226;
  animation:fx-inel .66s cubic-bezier(.3,.9,.3,1) .06s forwards}
.fx-sigiliu .disc{fill:#D6E4D3;transform-origin:50% 50%;transform:scale(0);
  animation:fx-disc .42s cubic-bezier(.2,1.5,.4,1) .18s forwards}
.fx-sigiliu .bifa{fill:none;stroke:#2E5D3A;stroke-width:5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;
  animation:fx-bifa .4s cubic-bezier(.3,.8,.3,1) .5s forwards}
@keyframes fx-inel{to{stroke-dashoffset:0}}
@keyframes fx-disc{to{transform:scale(1)}}
@keyframes fx-bifa{to{stroke-dashoffset:0}}

.fx-reusita .fx-titlu{margin-top:0}
.fx-reusita .fx-text{margin-left:auto;margin-right:auto;max-width:44ch}

/* --- caseta ofertei ----------------------------------------------------- */
.fx-oferta{
  margin-top:30px;padding:28px 30px 30px;text-align:left;
  background:#E6DED1;border-radius:4px;position:relative;overflow:hidden;
}
.fx-oferta::before{content:"";position:absolute;right:-30px;top:-30px;
  width:120px;height:120px;border-radius:50%;
  background:color-mix(in srgb,#B55C14 14%,transparent)}
.fx-oferta-et{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#B55C14}
.fx-oferta-et::before{content:"";width:11px;height:11px;flex:none;
  border-left:2px solid #B55C14;border-top:2px solid #B55C14}
.fx-oferta h3{position:relative;margin:13px 0 0;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(21px,1.9vw,27px);line-height:1.18;color:#5A2A08;text-wrap:balance}
.fx-oferta p{position:relative;margin:11px 0 0;font-size:15.5px;line-height:1.55;
  color:color-mix(in srgb,#3B2415 86%,transparent)}
.fx-oferta .fx-revendica{position:relative}

/* --- pasul final -------------------------------------------------------- */
.fx-final{text-align:center}
.fx-final .fx-pasi{margin:22px 0 0;padding:0;list-style:none;text-align:left}
.fx-final .fx-pasi li{position:relative;padding:0 0 0 34px;margin-top:14px;
  font-size:16px;line-height:1.55;color:color-mix(in srgb,var(--color-text) 82%,transparent)}
.fx-final .fx-pasi li::before{
  counter-increment:fxp;content:counter(fxp);position:absolute;left:0;top:1px;
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:#D6E4D3;color:#2E5D3A;font-size:12.5px;font-weight:700}
.fx-final .fx-pasi{counter-reset:fxp}
.fx-legatura{display:inline-block;margin-top:24px;font-size:16.5px;
  color:var(--color-text);text-decoration:underline;text-underline-offset:5px}
.fx-legatura:hover{color:#B55C14}

/* --- confeti ------------------------------------------------------------ */
.fx-confeti{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

/* --- mobil -------------------------------------------------------------- */
@media (max-width:860px){
  body>.fx{padding:0}
  .fx-panou{grid-template-columns:1fr;max-height:100vh;height:100vh;
    border-radius:0;align-content:start;overflow-y:auto}
  .fx-foto{height:200px}
  .fx-foto img{object-position:center 35%}
  .fx-corp{overflow:visible;padding:30px 24px 40px}
  .fx-oferta{padding:24px 22px 26px}
}
@media (prefers-reduced-motion:reduce){
  .fx-fundal,.fx-panou,.fx-pas,
  .fx-sigiliu .inel,.fx-sigiliu .disc,.fx-sigiliu .bifa{animation:none}
  .fx-sigiliu .inel{stroke-dashoffset:0}
  .fx-sigiliu .disc{transform:none}
  .fx-sigiliu .bifa{stroke-dashoffset:0}
  .fx-x:hover{transform:none}
}


/* Textul explicativ din banda „Alături de tine" a fost scos. Inaltimea benzii
   si decupajul fotografiei raman neschimbate: inaltimea paragrafului se
   intoarce in padding-ul de jos, ca titlul sa stea exact unde statea. */
.pv-banda{padding-bottom:calc(clamp(56px,6vw,110px) + clamp(150px,10vw,168px))}
@media (max-width:580px){
  .pv-banda{padding-bottom:calc(clamp(56px,6vw,110px) + 182px)}
}
@media (max-width:460px){
  .pv-banda{padding-bottom:calc(clamp(56px,6vw,110px) + 244px)}
}


/* ── Cardul de contact: aceeasi proportie fata de fotografie la orice latime ─
   Fotografia e pusa cu `background-size:80% auto`, deci creste si scade odata
   cu fereastra. Cardul era insa fix (490px latime, text 18px, bulinele 58px),
   asa ca pe un ecran mai mic ocupa o felie mai mare din poza si cobora peste
   scaune: 35,4% din latimea pozei la 1728px, dar 40,5% la 1512px.
   Toate masurile cardului devin acum fractiuni din latimea ferestrei,
   calibrate pe 1728px (16"), deci raportul fata de poza ramane acelasi pe 14",
   15" si 16". Fotografia nu se atinge. */
@media (min-width:1241px){
  .ct-card{
    width:clamp(408px,28.356vw,595px);            /* 490px la 1728 */
    /* 20px mai scurt sus si 20px mai scurt jos: 60 -> 40px la 1728.
       Lateral ramane neschimbat, deci latimea cardului nu se misca. */
    padding:clamp(33px,2.315vw,49px) clamp(50px,3.472vw,73px);
    margin-top:calc(clamp(50px,3.472vw,73px) - clamp(44px,4.6vw,80px));
  }
  .ct-card .ct-scris{
    font-size:calc(clamp(27px,1.852vw,39px) - 5px);    /*  27px la 1728 */
    margin-bottom:clamp(37px,2.546vw,53px);       /*  44px la 1728 */
  }
  .ct-card .ct-date{gap:clamp(25px,1.736vw,36px)}       /* 30px */
  .ct-card .ct-date li{gap:clamp(20px,1.389vw,29px)}    /* 24px */
  .ct-card .ct-bulina{
    width:clamp(48px,3.356vw,70px);height:clamp(48px,3.356vw,70px);   /* 58px */
  }
  .ct-card .ct-rand{font-size:clamp(15px,1.042vw,22px)} /* 18px */
  .ct-card .ct-date b{
    font-size:clamp(9px,.637vw,13px);             /* 11px */
    margin-bottom:clamp(2px,.174vw,4px);          /*  3px */
  }
}
/* cursa parallaxului urmeaza aceeasi scara, ca sa culiseze la fel fata de poza */
@keyframes ct-card-parallax{
  from{transform:translateY(clamp(92px,6.366vw,134px))}
  to{transform:translateY(calc(-1 * clamp(42px,2.894vw,61px)))}
}


/* ── Programari: textul sta la fel fata de fotografie, pe orice ecran ───────
   Fotografia paginii era dimensionata diferit de la un ecran la altul:
   peste 860px cu `background-attachment:fixed` + `cover`, deci fata de
   fereastra (1294px inaltime la 1728x960, dar 1132px la 1512x830), iar sub
   860px cu `scroll` + `cover`, deci fata de toata inaltimea paginii - acolo
   ajungea umflata la peste 6700px latime, din care se vedea doar un petic.
   Textul statea insa mereu la acelasi numar de pixeli de sus, asa ca pe
   ecranele mici cobora pe poza, spre linia copacilor.

   Acum fotografia e masurata o singura data - `--prog-poza` e inaltimea la
   care `cover` o deseneaza fata de o fereastra - si totul atarna de ea:
   pozitia textului (26,203% din inaltimea pozei, cat este la 16") si corpul
   de litera. Sub 860px fundalul primeste aceeasi geometrie prin
   background-size/position, fara `fixed`, care pe iOS nu functioneaza. */
body.pag-programari{
  --prog-lat:max(calc(100vw - var(--sbw,0px)), 133.548svh);   /* 1449 / 1085 */
  --prog-poza:calc(var(--prog-lat) / 1.33548);
}
@media (max-width:860px){
  body.pag-programari{
    background-size:var(--prog-lat) auto;
    background-position:center calc((100svh - var(--prog-poza)) / 2);
    background-repeat:no-repeat;
  }
}
body.pag-programari .hero-banner.hero-fara-foto .hero-content{
  padding-top:max(40px, calc((100svh - var(--prog-poza)) / 2
               + .26203 * var(--prog-poza) - var(--nav-h,87.6px)));
  padding-bottom:clamp(44px, calc(.0541 * var(--prog-poza)), 78px);    /* 70px */
}
body.pag-programari .hero-banner.hero-fara-foto .hero-content .kicker{
  font-size:clamp(12px, calc(.012366 * var(--prog-poza)), 18px);       /* 16px */
  margin-bottom:clamp(10px, calc(.010202 * var(--prog-poza)), 15px);   /* 13,2px */
}
body.pag-programari .hero-banner.hero-fara-foto .hero-content .display{
  font-size:clamp(22px, calc(.026278 * var(--prog-poza)), 38px);       /* 34px */
}
body.pag-programari .hero-banner.hero-fara-foto .hero-sub{
  font-size:clamp(16px, calc(.017003 * var(--prog-poza)), 24px);       /* 22px */
  margin-top:clamp(10px, calc(.010202 * var(--prog-poza)), 15px);      /* 13,2px */
}


/* ── Articole: masura textului ramane cea aprobata si sub 1100px ───────────
   Peste 1240px articolul e o grila de doua coloane (cuprins 230px + text
   720px), deci randul are ~85 de caractere. Sub 1100px `.art-coloane` devine
   `display:block`, cuprinsul urca deasupra si textul se intindea pe toata
   latimea containerului: 922px la 1024px, adica ~112 caractere pe rand —
   mai lung decat pe desktopul de care ar trebui sa se apropie.
   Pastram aceeasi latime de coloana (720px) si sub prag; sub ~860px
   containerul e oricum mai ingust, deci regula nu se mai aplica. Nimic de la
   1101px in sus nu se schimba. */
@media (max-width:1100px){
  .art-corp{max-width:720px}
}

/* >>> MOBIL-RECONSTRUCTIE-2026-10-27 >>> */

/* =========================================================================
   MOBIL — reconstructie (27.10.2026)

   Tot ce urmeaza traieste sub 1000px. Desktopul aprobat (1001px in sus)
   nu se atinge: nicio regula de aici nu se aplica acolo.

   Problema de fond gasita la masuratori: mai multe titluri si panouri au
   marimi fixe in px si `white-space:nowrap` fara nicio regula pentru ecrane
   mici, deci ramaneau la dimensiunea de desktop si erau retezate de
   parintii cu `overflow:hidden`. Scrisul nu disparea din DOM — disparea
   din ecran, ceea ce o masuratoare de `scrollWidth` nu vede.
   ========================================================================= */


/* --- 1. Hero-ul paginii "Despre mine" -----------------------------------
   `.hs-mare` avea `font-size:60px` + `white-space:nowrap`, peste
   `clamp(40px,5.6vw,112px)` din regula de baza. 60px nowrap = 401px latime,
   intr-o fereastra de 390px. Panoul `.hs-stanga` fiind `width:fit-content`,
   se facea si el de 401px si scotea afara si salutul, si paragraful.
   Pastram 60px pe desktop si legam marimea de latime sub 860px. */
@media (max-width:860px){
  .pag-despre .hero-banner.hero-split .hs-stanga{
    width:auto;max-width:100%;
  }
  .pag-despre .hero-banner.hero-split .hs-mare{
    font-size:clamp(34px,10.2vw,60px);
    white-space:normal;
    margin-bottom:clamp(14px,3.6vw,21px);
  }
  .pag-despre .hero-banner.hero-split .hs-salut{white-space:normal}
  .pag-despre .hero-banner.hero-split .hs-text{max-width:100%}
}


/* --- 2. Sectiunea de incheiere, "Cred in intalniri sincere…" -------------
   `.ff-sub` era 40px fix, fara nicio regula sub desktop: la 390px randul
   "…fiecare dintre noi" se taia la "no". */
@media (max-width:860px){
  .ff-sub{
    font-size:clamp(23px,6.1vw,34px);
    max-width:100%;
    margin-bottom:clamp(22px,5vw,40px);
  }
}


/* --- 3. Teancul de fise "Un drum construit din experiente diferite" ------
   `.dr2-teanc-text` avea inaltime fixa `clamp(420px,62vw,520px)`, potrivita
   de la ~760px in sus. Pe telefon fisa cea mai lunga are nevoie de 947px la
   320 si 761px la 390 — deci 187–527px de text erau taiate de
   `.drum2{overflow:hidden}`.
   In loc de o inaltime ghicita, asezam fisele una peste alta in aceeasi
   celula de grila: randul ia inaltimea celei mai inalte fise, iar toate
   fisele raman egale intre ele (grila le intinde). Se potriveste singur
   daca textul se schimba. La 760px rezultatul e 472px fata de 471px de
   acum, adica nimic. */
@media (max-width:1000px){
  .dr2-teanc-text{height:auto;min-height:0;display:grid}
  .dr2-teanc-text .dr2-f{position:relative;inset:auto;grid-area:1/1;width:100%}
}

/* Evantaiul: fisele din spate sunt decalate cu 62px una fata de alta. Pe
   desktop teancul sta intr-o coloana de 620px dintr-un ansamblu de 1080px,
   deci decalajul incape. Pe o coloana cat ecranul, fisa a treia ajungea la
   460px intr-o fereastra de 390px si textul ei era retezat. Strangem doar
   decalajul pe orizontala; adancimea si rotatia raman, deci teancul arata
   la fel, doar mai stramt. */
@media (max-width:700px){
  .dr2-teanc-text .dr2-f{
    transform:translateX(calc(var(--k) * 20px))
              translateZ(calc(var(--k) * -110px))
              rotateY(calc(var(--k) * -9deg));
  }
}


/* --- 4. Blocul de contact de pe prima pagina ----------------------------
   Bulina de 46px + golul de 16px lasau 190px pentru un rand de 18px, iar
   adresa de email are 249px: se taia. Strangem bulina si golul, coboram
   randul la 16px si lasam adresa sa se rupa daca tot nu incape. */
@media (max-width:520px){
  .ct-afis .ct-date li{gap:12px}
  .ct-afis .ct-bulina{width:42px;height:42px}
  .ct-afis .ct-rand{font-size:16px;overflow-wrap:anywhere}
  .ct-afis .ct-rand a{overflow-wrap:anywhere}
}


/* --- 5. Antetul pe telefon: meniu in sertar -----------------------------
   `.nav-links` e un rand flex cu `flex-wrap:wrap`: cele cinci legaturi se
   rupeau pe doua randuri si umflau bara de la 88px (desktop) la 153px, iar
   pe 404, cu sapte legaturi, la 181px — adica aproape un sfert din ecranul
   unui telefon, pe toata durata derularii. Nu exista niciun meniu de telefon.
   Sub 860px bara ramane de 58px, iar legaturile trec intr-un sertar care
   coboara de sub ea. Niciuna nu se pierde. Peste 860px nu se schimba nimic. */
.nav-buton{display:none}

@media (max-width:860px){
  body>nav.nav{height:auto;min-height:58px;flex-wrap:nowrap;align-items:center;row-gap:0}
  /* paginile cu nume mare in bara isi pun singure `flex-wrap:wrap` printr-o
     regula la (0,2,2); o egalam, altfel butonul cade pe randul doi */
  body.pag-contact>nav.nav,body.pag-despre>nav.nav,
  body.pag-servicii>nav.nav,body.pag-programari>nav.nav,body.pag-resurse>nav.nav{
    flex-wrap:nowrap;height:auto;min-height:58px;row-gap:0;gap:12px;
  }

  .nav-buton{
    position:relative;z-index:3;
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    flex:0 0 auto;margin-left:auto;
    width:44px;height:44px;padding:0 8px;
    -webkit-appearance:none;appearance:none;border:0;background:none;
    color:inherit;cursor:pointer;
  }
  .nav-buton i{display:block;height:2px;background:currentColor;border-radius:2px;
    transition:transform .26s ease,opacity .18s ease}
  .nav-buton[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-buton[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav-buton[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  body>nav.nav .nav-links{
    position:fixed;left:0;right:0;top:0;z-index:2;
    display:grid;align-content:start;gap:0;
    margin:0;padding:76px var(--edge) 30px;
    background:#2E5D3A;
    /* Umbra se vede doar cu sertarul deschis. Inchis, el sta la
       translateY(-101%), chiar deasupra marginii de sus — dar umbra, fiind
       coborata cu 18px si intinsa pe 40px, cadea inapoi in pagina si lasa o
       banda intunecata peste primii ~60px din fiecare pagina. */
    transform:translateY(-101%);
    transition:transform .34s cubic-bezier(.22,.9,.3,1);
  }
  body.meniu-deschis>nav.nav .nav-links{
    transform:none;box-shadow:0 18px 40px rgba(12,20,8,.28);}

  body>nav.nav .nav-links a,
  body>nav.nav.nav-inchis .nav-links a,
  body>nav.nav.nav-pe-fundal .nav-links a{
    display:block;padding:15px 2px;
    font-family:var(--font-heading);font-weight:400;font-size:21px;line-height:1.25;
    border-bottom:1px solid color-mix(in srgb,var(--color-bg) 22%,transparent);
  }
  body>nav.nav .nav-links a:last-child{border-bottom:0}

  /* Culoarea legaturilor din bara e stabilita de zece reguli diferite, cate
     una pentru fiecare fel de bara (peste fotografie, pe bej, pe verde…),
     cea mai tare la (0,7,3). In sertar fondul e mereu acelasi verde, deci
     culoarea trebuie sa fie mereu aceeasi crem. A o impune prin specificitate
     ar cere un lant de selectori mai lung decat toate cele zece la un loc;
     `!important` pe exact aceste doua declaratii e mai scurt si mai usor de
     citit. Se aplica doar cu sertarul deschis, sub 860px. */
  body.meniu-deschis>nav.nav .nav-links a{color:var(--color-bg) !important}
  body.meniu-deschis>nav.nav .nav-links a[aria-current="page"]{color:#F1833F !important}

  /* numele si butonul stau peste sertar, nu sub el */
  body>nav.nav .hg-id,body>nav.nav .nav-id{position:relative;z-index:3;min-width:0}
  /* Pagina 404 are, pe langa legaturi, si un buton "Programeaza-te" in bara.
     Cu bara pe un singur rand nu mai incape: la 320px iesea 85px in afara.
     Il scoatem de pe telefon — duce la programari.html, care e oricum in
     sertar, deci nu se pierde nimic. */
  body>nav.nav>.btn{display:none}

  /* cu sertarul deschis, numele sta pe verde: trece pe crem */
  body.meniu-deschis>nav.nav .hg-name,
  body.meniu-deschis>nav.nav .nav-brand,
  body.meniu-deschis>nav.nav .hg-tagline{color:var(--color-bg)}
  body.meniu-deschis>nav.nav .nav-buton{color:var(--color-bg)}
}


/* --- 6. Butoanele plutitoare -------------------------------------------
   Eticheta verticala "Programeaza-te" statea la `top:40%` lipita de marginea
   din dreapta, adica fix peste coloana de text: 363 de suprapuneri masurate
   peste paragrafe, titluri si butoane. Bulina de telefon, la 16px de coltul
   de jos, acoperea inclusiv butonul "Rezerva acum". Pe telefon le coboram
   pe amandoua intr-o bara de jos: eticheta se intinde orizontal, bulina sta
   la capatul ei. Peste 760px raman exact cum erau. */
@media (max-width:760px){
  body>a.cta-flotant{
    top:auto;bottom:0;left:0;right:0;
    width:auto;min-height:0;height:56px;padding:0 74px 0 20px;
    justify-content:flex-start;border-radius:0;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.22,.9,.3,1),background .18s ease;
  }
  body>a.cta-flotant.is-visible{right:0;transform:none}
  body>a.cta-flotant span{
    writing-mode:horizontal-tb;font-size:16px;letter-spacing:.02em}

  body>.urg{right:10px;bottom:3px;z-index:870}
  .urg-badge{--urg-cerc:50px}

  /* Subsolul isi face loc pentru bara, ca ultimele randuri sa nu ramana sub
     ea. Nu atingem `padding`-ul lui, ca sa nu pierdem valoarea de acum:
     adaugam o fasie goala dupa continut, de inaltimea barei. */
  footer::after{content:"";display:block;height:56px}
}

/* Bara de jos se retrage cat timp se deruleaza in jos (vezi meniu.js), ca sa
   nu stea peste randul de text care tocmai se citeste. Revine cand omul se
   opreste sau urca. */
@media (max-width:760px){
  body.bara-ascunsa>a.cta-flotant.is-visible{transform:translateY(100%)}
  body>.urg{transition:transform .32s cubic-bezier(.22,.9,.3,1)}
  body.bara-ascunsa>.urg{transform:translateY(130%)}
}

/* <<< MOBIL-RECONSTRUCTIE-2026-10-27 <<< */

/* >>> HERO-ACASA-2026-10-28 >>> */
/* =========================================================================
   HERO ACASA — asezare pe tablete si telefoane (28.10.2026)

   Masurat inainte: peste 1101px cardul are 30–41% din ecran si persoana se
   vede intreaga. Exact la 1100px regula veche
       @media (max-width:1100px){ .afis .ha-card{left:7.5%;right:7.5%} }
   il facea de 87.5% din ecran, adica acoperea persoana cu 459px la 1080,
   344px la 810 si 166px la 390. De la 1101px in sus nu se schimba nimic.

   Fotografia e 16:9 (1600x900), cu persoana intre 50% si 80% din latimea ei.
   De aici cele doua praguri de mai jos: pana unde mai incape si cardul, si
   ea, tinem compozitia de desktop; sub acel punct trecem pe coloana.
   ========================================================================= */


/* --- A. Tablete in peisaj, 861–1100px (include iPad gen. 9: 1080x810) -----
   Cardul revine la proportia de desktop, plafonat la 470px: la 1080 se
   termina la ~497px, iar persoana incepe la ~540px, deci raman ~43px intre
   ele. Rama aurie ramane in interiorul cardului (regula de la max-width:1100),
   nu iese spre dreapta ca pe desktop, fiindca acolo ar cadea peste ea. */
@media (min-width:861px) and (max-width:1100px){
  .afis .ha-card{
    left:var(--content-inset);right:auto;
    width:min(41%,470px);
    top:clamp(112px,16%,200px);
    bottom:9%;
  }
}


/* --- B. Sub 861px: coloana ------------------------------------------------
   Ordinea: bara de meniu, cardul verde, apoi fotografia intreaga sub el.
   Sub aceasta latime nu mai incap unul langa altul: la 810px persoana ar
   ramane taiata de marginea ecranului chiar si cu cardul ingustat. */
/* Numele in bara, doar pe coloana. Pe desktop bara de pe Acasa e
   `nav-fara-nume`: numele sta in hero, deci aici il tinem ascuns. */
body>nav.nav.nav-fara-nume > .hg-id{display:none}

@media (max-width:860px){
  body>nav.nav.nav-fara-nume > .hg-id{
    position:static;z-index:3;
    display:flex;flex-direction:column;justify-content:center;
    margin-right:auto;min-width:0;
  }
  body>nav.nav.nav-fara-nume .hg-name{
    display:block;font-family:var(--font-heading);font-weight:300;
    font-size:clamp(19px,5vw,26px);line-height:1.1;letter-spacing:.08em;
    text-transform:uppercase;text-decoration:none;
    color:var(--color-text);white-space:nowrap;text-shadow:none;
  }
  /* cu sertarul deschis, bara e pe verde */
  body.meniu-deschis>nav.nav.nav-fara-nume .hg-name{color:var(--color-bg)}
}

@media (max-width:860px){

  .scena.afis{display:flex;flex-direction:column}

  /* Fotografia nu mai e fundalul intregii scene; o preia .hero-banner, ca
     element propriu in coloana (vezi mai jos). */
  .scena.afis::before{display:none}

  /* 1. Cardul — primul, in curgerea paginii, inaltime dupa continut. */
  .scena.afis > .scena-fix{
    order:1;
    position:static;height:auto;
    padding:clamp(92px,24vw,112px) var(--edge) clamp(24px,6vw,38px);
  }
  .afis .ha-card{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    width:auto;height:auto;
  }
  /* Scurtarea cardului la derulare se sprijina toata pe --ha-plus: clip-ul
     sticlei, deplasarea ramei si ridicarea textului. Pus pe zero, cele trei
     straturi raman pe loc, iar animatiile pornesc si se opresc in acelasi
     punct, deci nu se mai vede nimic din ele. */
  .scena-fix .ha-card{--ha-plus:0px}
  .scena-fix .ha-card::before,
  .scena-fix .ha-card .ha-rama,
  .scena-fix .ha-card .ha-in{animation:none}

  /* Peste fotografie, sticla de 58% dadea verdele adanc al cardului. In
     coloana, sub card e crem, nu fotografie, deci aceeasi transparenta ar
     da un verde spalacit si scrisul crem nu s-ar mai citi. Urcam tenta la
     90% din acelasi #16351F: aceeasi culoare, doar mai plina. */
  .scena-fix .ha-card::before{
    background:var(--ha-verde);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  /* Toata zona in care sta cardul primeste exact verdele cardului, ca sa nu
     mai ramana crem nici deasupra lui, nici pe laturi, nici intre el si
     fotografie. Valoarea e culoarea cu care cardul se vede pe ecran, luata
     de pe ecran: #16351F la 90% peste crem da #2D4834. Cardul insusi trece
     pe aceeasi valoare, opac: lasat la 90% transparenta, asezat acum peste
     verde si nu peste crem, s-ar fi inchis la #18371F, adica alt verde
     decat imprejurimile. Asa cele doua sunt identice prin constructie, iar
     cardul ramane exact cum arata. */
  .scena.afis{--ha-verde:#2D4834}
  .scena.afis > .scena-fix{background:var(--ha-verde)}

  /* Bara de sus sta acum pe verde, nu pe crem: numele si butonul trec pe
     crem. Doar pe Acasa (`nav-fara-nume`). */
  body>nav.nav.nav-fara-nume .hg-name,
  body>nav.nav.nav-fara-nume .nav-buton{color:var(--color-bg)}
  .afis .ha-in{
    height:auto;
    padding:clamp(30px,8vw,46px) clamp(24px,6.5vw,38px);
  }

  /* 2. Fotografia — intreaga, in proportia ei reala, fara decupaj.
     Cutia are exact 16:9, cat originalul, deci `cover` nu taie nimic. */
  .scena.afis > .hero-banner.hero-afis{
    order:2;
    min-height:0;height:auto;
    aspect-ratio:16/9;
    background-image:image-set(url("images/acasa-01-portret-1100.webp") type("image/webp"),
                     url("images/acasa-01-portret.jpg") type("image/jpeg"));
    background-size:cover;
    background-position:50% 35%;
    background-repeat:no-repeat;
  }
  /* Cele doua straturi decorative de peste fotografie sunt calibrate pentru
     un hero cat ecranul: `::after` estompeaza primii 215px, iar
     `.hero-navscrim` aduce intunecarea de sub meniu si talpa verde de 252px.
     Pe o fasie de 16:9 — 219px la 390px latime — ele acopera aproape toata
     imaginea, lasa o dunga orizontala peste umerii ei si ii inchid chipul.
     Pe coloana nu mai au ce servi: meniul nu mai sta peste fotografie, iar
     numele isi poarta oricum propria umbra. */
  .scena.afis > .hero-banner.hero-afis::after{display:none}
  .scena.afis > .hero-banner.hero-afis .hero-navscrim{display:none}
  .scena.afis > .hero-banner.hero-afis .ha-bloc{display:none}

  /* Numele e parte din bara de meniu, nu din fotografie. Pe desktop sta
     peste hero, cum a fost aprobat; in coloana iese din fotografie si intra
     in bara, langa buton, ca pe toate celelalte pagini. */
  .scena.afis > .hero-banner.hero-afis .hg-id{display:none}

  /* 3. Paragraful de sub fotografie. Valul verde urca 240px peste fotografie,
     masura potrivita pentru un hero inalt; pe fasia de 16:9 (219px la 390px
     latime) ar acoperi-o toata, deci il scurtam. */
  .scena.afis > .intro-sub-hero{order:3}
  .scena.afis > .intro-sub-hero::before{top:-72px}
}

/* <<< HERO-ACASA-2026-10-28 <<< */
/* >>> HERO-DESPRE-2026-10-28 >>> */
/* =========================================================================
   HERO DESPRE — coloana pe tablete si telefoane (28.10.2026)

   Aceeasi logica ca pe Acasa. Masurat inainte, la 390px: sectiunea are toata
   inaltimea ecranului (772px), panoul de text e centrat pe verticala, deci
   raman 209px goi deasupra titlului (391px la 810px latime), iar fotografia
   statea ca fundal lipit de marginea de jos, lata cat ecranul minus 160px —
   adica 230x153px, o bucatica in coltul de jos.

   Sub 861px: panoul de text sus, sub bara, iar fotografia dedesubt, pe toata
   latimea si in proportia ei reala (3:2, 2495x1663). Peste 861px nu se
   schimba nimic.
   ========================================================================= */
@media (max-width:860px){
  body.pag-despre .hero-banner.hero-split{
    height:auto;min-height:0;
    display:flex;flex-direction:column;
    /* fotografia trece pe ::after, ca sa poata sta sub text */
    background-image:none;
  }

  /* Panoul de text: sus, pe toata latimea, inaltime dupa continut.
     Sticla lui lucra peste fotografie; aici nu mai are ce sa estompeze, deci
     ramane bejul plin #E6DED1 — exact culoarea pe care o avea oricum acolo
     unde fotografia nu ajungea. */
  .pag-despre .hero-banner.hero-split .hs-stanga{
    order:1;align-self:stretch;
    width:auto;max-width:none;margin:0;
    padding:clamp(26px,7vw,44px) var(--edge) clamp(28px,8vw,46px);
    background:#E6DED1;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-radius:0;
  }

  /* Fotografia, sub text, intreaga: cutia are exact proportia originalului,
     deci `cover` nu taie nimic. */
  body.pag-despre .hero-banner.hero-split::after{
    content:"";order:2;display:block;width:100%;
    aspect-ratio:3/2;
    background-image:image-set(url("images/despre-hero-v1-900.webp") type("image/webp"),
                     url("images/despre-hero-v1.jpg") type("image/jpeg"));
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
  }
}

/* <<< HERO-DESPRE-2026-10-28 <<< */

/* >>> NAV-SUBTITLU-2026-10-28 >>> */
/* =========================================================================
   SUBTITLUL DIN BARA PE TELEFON (28.10.2026)

   "Psiholog clinician · Psihoterapie cognitiv-comportamentala" era ascuns
   sub 900px pe toate paginile. Fiind parte din identitate, revine pe telefon
   sub nume, pe doua randuri, ca sa incapa langa butonul de meniu.

   Masurat: textul are 451px la 12.5px. Langa buton raman 294px la 390px
   latime si 224px la 320px, deci la 12.5px s-ar rupe in doua randuri la 390
   dar in trei la 320. De aceea marimea coboara usor pe ecranele inguste:
   `clamp(10px,3.1vw,12.5px)` da 12px la 390 si 10px la 320 — doua randuri la
   amandoua. Peste 861px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){
  body>nav.nav .hg-tagline,
  body.pag-contact>nav.nav .hg-tagline,
  body.pag-despre>nav.nav .hg-tagline,
  body.pag-servicii>nav.nav .hg-tagline,
  body.pag-programari>nav.nav .hg-tagline,
  body.pag-resurse>nav.nav .hg-tagline,
  body>nav.nav.nav-fara-nume .hg-tagline{
    display:block;
    margin:4px 0 0;
    font-size:clamp(10px,3.1vw,12.5px);
    line-height:1.3;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:600;
    white-space:normal;
  }
  /* bara isi face loc pentru al doilea rand */
  body>nav.nav{min-height:66px;padding-block:9px}

  /* O singura marime pentru nume pe toate paginile. Era 19,5px pe Acasa si
     27,3px pe celelalte (la 390px latime) — prea mic, respectiv prea mare.
     Masurat cat loc ramane langa buton si cat ocupa textul: incape pana la
     28px la 390, 26px la 375, 25px la 360 si 21px la 320. `6vw` da 23,4px la
     390 — exact intre cele doua de dinainte — si ramane sub limita la
     fiecare latime: 19,2px la 320, 22,5px la 375, 25,8px la 430. */
  body>nav.nav .hg-name,
  body>nav.nav.nav-fara-nume .hg-name,
  body.pag-contact>nav.nav .hg-name,
  body.pag-despre>nav.nav .hg-name,
  body.pag-servicii>nav.nav .hg-name,
  body.pag-programari>nav.nav .hg-name,
  body.pag-resurse>nav.nav .hg-name{
    font-size:clamp(19px,6vw,26px);
  }

  /* Acasa: bara sta pe verdele hero-ului, deci subtitlul ia nuanta deschisa,
     ca pe fotografie; pe celelalte pagini isi pastreaza culoarea proprie. */
  body>nav.nav.nav-fara-nume .hg-tagline{color:var(--color-accent-300)}
  body.meniu-deschis>nav.nav .hg-tagline{color:var(--color-accent-300)}
}

/* <<< NAV-SUBTITLU-2026-10-28 <<< */

/* >>> CARUSEL-ACASA-2026-10-28 >>> */
/* =========================================================================
   CARUSELUL DE PE ACASA — continutul pe telefon (28.10.2026)

   Masurat la 390px: panoul are 460px inaltime, sagetile stau la y 208–252
   (mijloc 230 = 50%), cea din stanga se termina la x=50, cea din dreapta
   incepe la x=340. Blocul de text statea lipit de jos (y 256–420), adica sub
   sageti; la 320px urca la y 227 si intra peste ele, iar titlul ajungea la
   x=306 peste sageata din dreapta, care incepe la 270.

   Acum titlul sta pe linia sagetilor, intre ele, iar textul si linkul curg
   sub el. Titlul primeste 56px de margine la stanga si la dreapta — 44px cat
   sageata, 6px marginea ei si 6px joc — deci se rupe pe doua randuri in loc
   sa treaca peste sageti. Totul centrat.
   Peste 621px, unde panourile sunt doua pe ecran, nu se schimba nimic.
   ========================================================================= */
@media (max-width:620px){
  .ind-panou{justify-content:flex-start;padding-bottom:0}

  .ip-jos{
    position:absolute;left:0;right:0;
    top:50%;
    /* jumatatea casetei titlului (doua randuri a 24px), ca titlul sa cada
       exact pe linia sagetilor */
    margin-top:-24px;
    padding-left:20px;padding-right:20px;
    text-align:center;
  }

  /* Caseta titlului tine mereu doua randuri, si cand textul incape pe unul.
     Asa titlul e centrat pe sageti la orice fisa, iar textul de sub el
     incepe la aceeasi inaltime pe toate — continutul nu mai sare de la o
     fisa la alta. */
  .ip-nume{
    font-size:20px;line-height:1.2;
    min-height:48px;
    display:flex;align-items:center;justify-content:center;
    /* 20px (din .ip-jos) + 36px = 56px, cat sa stea in dreptul golului
       dintre sageti; ce nu incape trece pe randul doi */
    padding-left:36px;padding-right:36px;
  }

  /* textul si linkul sunt deja sub sageti, deci nu au nevoie de ocolire */
  .ind-panou.on .ip-text{margin-top:14px;max-width:none}
  .ind-panou.on .ip-link{margin-top:16px}
}

/* <<< CARUSEL-ACASA-2026-10-28 <<< */

/* >>> CENTRAT-ACASA-2026-10-28 >>> */
/* =========================================================================
   ACASA — continut centrat pe telefon in "Reperele mele in terapie" si
   "Abordarea mea terapeutica" (28.10.2026)

   Titlurile celor doua sectiuni erau deja centrate, dar reperele si textele
   de sub ele raman aliniate la stanga: `.vl-grid` are `text-align:left`
   (pentru randul de patru coloane de pe desktop), iar `.rp-eticheta` si
   `.rp-corp` mostenesc alinierea sectiunii.

   Fiecare sectiune se centreaza de la latimea la care trece pe o singura
   coloana — masurat: 620px pentru "Reperele", 760px pentru "Abordarea".
   Peste acele praguri raman doua sau patru coloane, unde textul centrat ar
   arata dezlipit, deci acolo nu se schimba nimic.
   ========================================================================= */

/* --- Reperele mele in terapie (Siguranta, Intelegere, Colaborare, Autonomie) */
@media (max-width:620px){
  .vl-grid{text-align:center}
  /* paragraful are max-width:34ch; fara margini automate ar sta lipit de
     stanga chiar si cu textul centrat */
  .vl-text{margin-inline:auto}
}

/* --- Abordarea mea terapeutica (CBT si principiile integrate) ------------- */
@media (max-width:760px){
  .abordare .ab-eyebrow,
  .abordare .rp-eticheta,
  .abordare .rp-corp{text-align:center}
}

/* <<< CENTRAT-ACASA-2026-10-28 <<< */

/* >>> NAV-TABLETA-2026-10-29 >>> */
/* =========================================================================
   BARA DE MENIU PE TABLETA, 861–1100px (29.10.2026)

   Masurat inainte, pe Despre/Servicii/Contact/Programari/Resurse:
   numele singur are 371px la 34px, randul de legaturi 519–537px, iar golul
   dintre ele 26px — in total 916–934px, peste cei 775px (la 861) sau 922px
   (la 1024) disponibili. De aceea `flex-wrap` arunca legaturile pe randul
   doi si bara creste de la 88px la 120–142px: de acolo vine si senzatia ca
   meniul se strica.

   Subtitlul trece pe doua randuri, numele coboara proportional, iar
   legaturile primesc aer intre ele. Peste 1101px nu se schimba nimic.
   ========================================================================= */
@media (min-width:861px) and (max-width:1100px){

  /* subtitlul pe doua randuri: ingusteaza blocul de identitate de la 451px */
  body>nav.nav .hg-tagline,
  body.pag-contact>nav.nav .hg-tagline,
  body.pag-despre>nav.nav .hg-tagline,
  body.pag-servicii>nav.nav .hg-tagline,
  body.pag-programari>nav.nav .hg-tagline,
  body.pag-resurse>nav.nav .hg-tagline{
    display:block;
    max-width:34ch;
    font-size:11.5px;letter-spacing:.07em;
    white-space:normal;
    line-height:1.35;
  }

  /* numele urmeaza latimea ecranului, in loc sa ramana fix la 34px */
  body>nav.nav .hg-name,
  body.pag-contact>nav.nav .hg-name,
  body.pag-despre>nav.nav .hg-name,
  body.pag-servicii>nav.nav .hg-name,
  body.pag-programari>nav.nav .hg-name,
  body.pag-resurse>nav.nav .hg-name{
    font-size:clamp(21px,2.45vw,30px);
    white-space:nowrap;
  }

  /* aer intre elementele de meniu */
  body>nav.nav .nav-links{gap:clamp(16px,2.1vw,26px);flex-wrap:nowrap}
  body>nav.nav .nav-links a{font-size:16.5px;white-space:nowrap}

  /* bara ramane pe un singur rand */
  body>nav.nav,
  body.pag-contact>nav.nav,
  body.pag-despre>nav.nav,
  body.pag-servicii>nav.nav,
  body.pag-programari>nav.nav,
  body.pag-resurse>nav.nav{
    flex-wrap:nowrap;
    gap:clamp(20px,2.4vw,30px);
  }


  /* --- Acasa: identitatea din hero -------------------------------------
     Pe Acasa numele si subtitlul nu stau in bara, ci in hero, deci reparatia
     de mai sus nu-i atingea. Peste asta, o regula veche —
       @media (max-width:1100px){ .hero-afis .hg-id{top:86px;left:7.5%;right:7.5%;width:auto} }
     — ramasa de pe vremea cardului lat cat ecranul, ii dadea toata latimea
     si il cobora la 86px, adica exact peste muchia de sus a cardului (care
     incepe la 123–130px). Asa subtitlul se intindea pe 534–682px in loc de
     451px si trecea peste card.
     Il readucem sus, pe aceeasi coloana cu cardul, si rupem subtitlul pe
     doua randuri, ca pe celelalte pagini. */
  .hero-afis .hg-id{
    top:16px;
    left:var(--content-inset);right:auto;
    width:max-content;max-width:62%;
  }
  .hero-afis .hg-tagline{
    max-width:34ch;
    white-space:normal;
    line-height:1.35;
  }
}

/* <<< NAV-TABLETA-2026-10-29 <<< */
/* >>> CARD-DESPRE-TABLETA-2026-10-29 >>> */
/* =========================================================================
   DESPRE MINE — panoul din hero, pe tableta (861–1100px), 29.10.2026

   Masurat inainte: pe tableta titlul ramanea la 60px cu `white-space:nowrap`
   (ca pe desktop), iar panoul ajungea 474x386px la 1080. Pe telefon acelasi
   titlu are ~40px si se rupe normal, iar marginile interioare sunt 27/20/31
   in loc de 37/32/37.

   Aici panoul primeste marimile de pe telefon. Pozitia ramane neatinsa:
   acelasi `margin-left:40px`, acelasi `align-self:center`, iar marginea din
   stanga a textului ramane legata de `--nume-stanga`, deci scrisul sta mai
   departe pe coloana de continut a paginii, nu la o distanta fixa.
   Peste 1101px nu se schimba nimic.
   ========================================================================= */
@media (min-width:861px) and (max-width:1100px){

  .pag-despre .hero-banner.hero-split .hs-stanga{
    /* sus/dreapta/jos ca pe telefon; stanga ramane pe grila paginii */
    padding:clamp(24px,2.8vw,30px)
            clamp(22px,2.6vw,28px)
            clamp(26px,3vw,32px)
            calc(var(--nume-stanga) - 40px);
  }

  /* titlul: marimea de pe telefon si voie sa se rupa pe randuri */
  .pag-despre .hero-banner.hero-split .hs-mare{
    font-size:40px;
    white-space:normal;
    margin-bottom:16px;
  }

  /* coloana de text cat pe telefon (350px la 390px latime), nu 40ch */
  .pag-despre .hero-banner.hero-split .hs-text{max-width:34ch}

  /* acelasi aer intre salut si paragraf ca pe telefon */
  .pag-despre .hero-banner.hero-split .hs-jos{row-gap:16px}
}

/* <<< CARD-DESPRE-TABLETA-2026-10-29 <<< */


/* >>> CONTACT-MOBIL-2026-10-30 >>> */
/* =========================================================================
   Contact pe telefon — fotografia si cardul, fiecare in fasia lui (30.10.2026)

   Pana acum fotografia era fundalul sectiunii: `::before` asezat absolut
   peste toata sectiunea, cu `background-size:80% auto`. La 390px latime asta
   inseamna o bucata de 312x208px pusa fix in mijlocul sectiunii, adica exact
   sub card. Nu se citea ca fotografie, ci ca o pata inchisa care razbatea
   prin sticla cardului. Sub 860px o scoatem din fundal si o facem prima fasie
   a sectiunii, intreaga, cat latimea ecranului; cardul vine sub ea, pe crem.
   Peste 860px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){

  .ct-afis{
    /* sectiunea era deja flex-coloana; acum are doi copii, in ordine */
    padding:0 0 clamp(36px,9vw,56px);
    background:var(--color-bg);
  }

  /* 1. Fotografia — element in curgerea sectiunii, nu fundal. Cutia are 3:2,
     exact proportia fisierului (1536x1024), deci `cover` nu taie nimic. */
  .ct-afis::before{
    position:static;order:1;
    display:block;width:100%;height:auto;
    aspect-ratio:3/2;
    background-size:cover;
    background-position:50% 50%;
  }

  /* 2. Cardul — fasie separata, sub fotografie, cu aer de jur imprejur. */
  .ct-card{
    order:2;
    margin:clamp(26px,7vw,40px) var(--edge) 0;
    width:auto;
  }

  /* Sticla isi lua verdele din fotografia de dedesubt, deci cardul se vedea
     ca un degrade: masurat, intre #2E4A2D peste pata inchisa si #608065 peste
     restul, cu media la #507155. Sub card e acum crem, nu fotografie, asa ca
     aceeasi transparenta ar da alt verde, mai spalacit. Punem direct media
     masurata, opaca: cardul isi pastreaza greutatea de acum si nu mai lasa
     nimic sa razbata prin el. Conturul crem de 1px ramane (e pe box-shadow). */
  .ct-card::before{
    background:#507155;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
/* <<< CONTACT-MOBIL-2026-10-30 <<< */


/* >>> SERVICII-SUS-2026-10-30 >>> */
/* =========================================================================
   Acasa, "Servicii" — golul fata de banda de deasupra, pe telefon (30.10.2026)

   `.servicii-acasa` are `padding-top:100px`, fix, la orice latime. Masurat,
   intre muchia de jos a benzii cu fotografia si primul rand de scris
   ("SERVICII") sunt exact acei 100px — nimic altceva nu se aduna acolo.
   Pe telefon il injumatatim. Peste 860px ramane 100px.
   ========================================================================= */
@media (max-width:860px){
  .servicii-acasa{padding-top:50px}
}
/* <<< SERVICII-SUS-2026-10-30 <<< */


/* >>> FUNDAL-ABORDARE-2026-10-30 >>> */
/* =========================================================================
   "Abordarea mea terapeutica" — fotografia de fundal pe telefon si tableta
   (30.10.2026)

   Fotografia (floarea-soarelui, 1000x667, adica 3:2) e pusa cu
   `background-size:cover` pe o sectiune de latimea ecranului. Pe desktop
   sectiunea e mai lata decat inalta si acoperirea cade bine. Pe telefon si
   tableta sectiunea se inalta pe masura ce continutul se aseaza pe o coloana:
   masurat, 390x1384 (raport 0.28), 768x1123, 1024x1026. `cover` o scaleaza
   atunci dupa inaltime, deci la 390px fotografia e desenata la 2075x1384:
   marita de doua ori peste un fisier de 1000px, din care se vede doar fasia
   din mijloc, 19% din latime. Acolo nu e floarea-soarelui, ci frunzele din
   dreapta ei — de aceea se vede o pata verde neclara, nu o fotografie.

   Sub 1100px o lasam in proportia ei reala, pe toata latimea, asezata la
   baza sectiunii: la 390px iese 390x260, desenata dintr-un fisier de 1000px,
   deci micsorata, nu marita — clara, si cu toata compozitia in cadru.
   Voalul crem, care pana acum se stingea dupa procente din inaltimea
   sectiunii, se leaga si el de muchia de sus a fotografiei, ca sa nu ramana
   o linie orizontala acolo unde incepe ea.
   Peste 1100px nu se schimba nimic.
   ========================================================================= */
@media (max-width:1100px){

  /* `fixed` raporteaza procentele la fereastra, nu la sectiune: fotografia
     ar ramane lipita de marginea de jos a ecranului in timpul derularii.
     Sub 860px era deja `scroll`; acum si pe tablete. */
  .repere{
    background-attachment:scroll;
    background-size:100% auto;
    background-position:50% 100%;
  }

  /* Inaltimea fasiei cu fotografia: latimea sectiunii impartita la 1.4993
     (1000/667). `--sbw` scoate bara de derulare, ca sa nu iasa cu cativa px. */
  .rp-voal{
    --foto:calc((100vw - var(--sbw)) / 1.4993);
    background:linear-gradient(to top,
      rgba(249,244,237,0)   0,
      rgba(249,244,237,0)   calc(var(--foto) * .70),
      rgba(249,244,237,.45) calc(var(--foto) * .86),
      rgba(249,244,237,1)   var(--foto),
      rgba(249,244,237,1)   100%);
  }
}
/* <<< FUNDAL-ABORDARE-2026-10-30 <<< */
/* >>> DR2-TITLU-AURIU-2026-10-30 >>> */
/* =========================================================================
   "Un drum construit din experiente diferite" — titlul de pe fotografie
   (30.10.2026)

   `.dr2-titlu` e scris cu cerneala cardului crem (#2F2D29) direct peste
   fotografie. Pe desktop cardul e inalt si ingust, iar titlul cade peste
   cerul deschis din partea de sus a imaginii. Sub 1000px cardul devine o
   banda lata si scunda (acolo isi schimba `.dr2-scena` coloanele), titlul se
   muta peste munti, si cerneala inchisa nu se mai citeste.
   Acolo il scriem cu auriul cardului — acelasi `--dr2-auriu` din coltul de
   fir auriu de langa el. Peste 1000px ramane cerneala.
   ========================================================================= */
@media (max-width:1000px){
  .dr2-f-titlu .dr2-titlu{color:var(--dr2-auriu)}
}
/* <<< DR2-TITLU-AURIU-2026-10-30 <<< */


/* >>> DRUM2-MOBIL-2026-10-30 >>> */
/* =========================================================================
   "Un drum construit din experiente diferite" — carusel pe ecrane mici
   (30.10.2026)

   Masurat la 390px inainte: banda cu fotografia 180px, cardul de text 761px,
   golul 20px, sagetile la 56px sub el — 1003px pentru o fereastra de 844px,
   din care meniul lipicios ia 90px. Niciodata nu se vedeau deodata textul si
   sagetile, deci nu se intelegea ca e un carusel.

   Doua cauze, nu una:
   1. Cele cinci fise stau una peste alta in aceeasi celula de grila, deci
      randul ia inaltimea celei mai lungi (fisa 04, 705px de text la 390px).
      Fisa din ecran avea 334px de text si statea intr-o cutie de 761px.
   2. Fotografia si textul erau doua carduri separate, cu gol intre ele.

   Aici: cele doua carduri devin unul singur — fotografia cu titlul ca banda
   de sus, textul dedesubt, fara gol si cu colturile rotunjite doar in afara;
   cardul pastreaza aceeasi inaltime la toate cele cinci fise (cea a fisei
   celei mai lungi), iar scrisul se strange atat cat sa incapa in ecran; si
   sagetile urca langa card. Peste 1000px nu se schimba nimic.
   ========================================================================= */
@media (max-width:1000px){

  /* --- 1. un singur card: banda cu fotografia + textul --- */
  .dr2-scena{gap:0}
  .dr2-f-titlu{
    border-radius:12px 12px 0 0;
    /* fara umbra proiectata: ar cadea peste cardul de text lipit dedesubt */
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dr2-salvie) 55%,transparent);
  }
  .dr2-f-text{border-radius:0 0 12px 12px}

  /* --- 2. toate fisele, aceeasi inaltime --- */
  /* Cele cinci fise stau una peste alta in aceeasi celula de grila: randul ia
     inaltimea celei mai lungi si o da tuturor, deci cardul nu-si mai schimba
     marimea de la o fisa la alta. Cu scrisul strans de mai jos, fisa cea mai
     lunga masoara 439px la 390px latime, deci incape intreaga in ecran. */
  .dr2-teanc-text{height:auto;min-height:0;display:grid}
  .dr2-teanc-text .dr2-f{position:relative;inset:auto;grid-area:1/1;width:100%}

  /* --- 3. sagetile si numarul, langa card si vizibile --- */
  .dr2-ctrl{margin-top:18px}
  /* Sagetile sunt mostenite de la un carusel care statea pe verde inchis:
     contur si sageata in crem (--color-bg), numarul la fel. Sectiunea asta
     are fundal #F5EFE6, deci crem pe crem — nu se vedea nici conturul, nici
     cifra, deci nici ca exista un carusel. Le trecem pe cerneala cardului.
     (--dr2-cerneala e declarat pe .dr2-scena, iar .dr2-ctrl ii e frate, deci
     nu-l mosteneste: scriem valoarea.) */
  .drum2 .drum-sageata{
    color:#2F2D29;
    border-color:color-mix(in srgb,#2F2D29 38%,transparent);
    background:color-mix(in srgb,#FFFFFF 50%,transparent);
  }
  .drum2 .drum-sageata:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
  .drum2 .drum-pag{color:color-mix(in srgb,#2F2D29 70%,transparent)}
  .drum2 .drum-pag strong{color:#2F2D29}
}

/* Pe telefon, in plus: banda cu fotografia se strange cat tine titlul pe
   doua randuri, scrisul coboara la 16px/1.6 si marginile cardului se string,
   ca fisa cea mai lunga sa incapa in ecran fara derulare. */
@media (max-width:700px){
  .dr2-teanc-titlu{height:clamp(84px,24vw,120px)}
  .dr2-f-titlu{padding:20px 22px}
  .dr2-titlu{font-size:max(21px,calc(clamp(34px,3.2vw,56px) - 24px))}
  /* coltul de fir auriu se strange odata cu marginea, ca sa nu iasa din card */
  .dr2-titlu::before{left:-14px;top:-14px;width:36px}
  .dr2-titlu::after{left:-14px;top:-14px;height:36px}

  .dr2-f-text{padding:22px}
  /* Randurile la 1.3 si paragrafele lipite, fara gol intre ele: cardul se
     strange cu inca ~110px pe fisa cea mai lunga. */
  .dr2-corp p{font-size:16px;line-height:1.3;margin-bottom:0}
  .dr2-ctrl{margin-top:14px}
}
/* <<< DRUM2-MOBIL-2026-10-30 <<< */


/* >>> CTA-DESPRE-MOBIL-2026-10-30 >>> */
/* =========================================================================
   Despre mine — aerul din jurul cardului "Prima sedinta este gratuita"
   (30.10.2026)

   `.pag-despre .bara-cta` are `margin-block:100px`, aceeasi valoare la orice
   latime. Masurat, intre fotografia de deasupra si card, si intre card si
   subsol, sunt exact acei 100px — nimic altceva nu se aduna acolo.
   Pe telefon si tableta mica ii injumatatim. Peste 860px raman 100px.
   ========================================================================= */
@media (max-width:860px){
  .pag-despre .bara-cta{margin-block:50px}
}
/* <<< CTA-DESPRE-MOBIL-2026-10-30 <<< */


/* >>> HERO-DESPRE-CENTRAT-2026-10-30 >>> */
/* =========================================================================
   Despre mine — hero pe telefon: continut centrat, titlu cu 10px mai mic
   (30.10.2026)

   Titlul venea din reconstructia pentru telefon cu `clamp(34px,10.2vw,60px)`,
   adica 39.8px la 390px latime. Scadem 10px din valoarea calculata, la orice
   latime, ca sa ramana legat de ecran. Peste 860px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){
  .pag-despre .hero-banner.hero-split .hs-stanga{text-align:center}
  .pag-despre .hero-banner.hero-split .hs-text{margin-inline:auto}
  .pag-despre .hero-banner.hero-split .hs-mare{
    font-size:calc(clamp(34px,10.2vw,60px) - 10px);
  }

  /* Pe coloana, cardul sta pe aceeasi hartie bej (#E6DED1) ca banda cu
     paragraful de sub fotografie, unde scrisul e verde #2E5D3A. Tot ce e in
     card trece pe acelasi verde, ca cele doua blocuri sa se citeasca la fel.
     Peste 860px cardul sta peste fotografie si ramane cu cerneala lui. */
  .pag-despre .hero-banner.hero-split .hs-mare,
  .pag-despre .hero-banner.hero-split .hs-salut,
  .pag-despre .hero-banner.hero-split .hs-text{color:#2E5D3A}
}
/* <<< HERO-DESPRE-CENTRAT-2026-10-30 <<< */


/* >>> SERVICII-GOL-CARDURI-2026-10-30 >>> */
/* =========================================================================
   Servicii — golul dintre cardurile de serviciu (30.10.2026)

   Vine din `.pag-servicii .tb.card-alb{margin-bottom:120px}` si e acelasi la
   orice latime (masurat: 120px intre toate cele cinci carduri, de la 390px
   pana la 1920px). Il reducem cu trei sferturi: 30px.

   Ultimul card isi pastreaza cei 120px: acolo nu mai e un gol intre carduri,
   ci distanta pana la blocul "Nu esti sigur unde te incadrezi?".
   ========================================================================= */
.pag-servicii section.tight > .tb.card-alb{margin-bottom:30px}
.pag-servicii section.tight > .tb.card-alb:last-child{margin-bottom:120px}
/* <<< SERVICII-GOL-CARDURI-2026-10-30 <<< */


/* >>> FUNDAL-SERVICII-2026-10-30 >>> */
/* =========================================================================
   Servicii — fotografia de fundal (30.10.2026)

   Fundalul paginii era `center/cover fixed` pe <body>. Pe un browser care
   respecta `fixed`, `cover` se raporteaza la fereastra si iese la scara
   fisierului. Pe iOS (iPhone si iPad) fundalul fixat nu se comporta asa:
   cutia de fundal ramane documentul, deci `cover` se raporteaza la toata
   pagina. Iar pagina de Servicii are 6860px la 390px latime si 4644px la
   1024px: masurat, fotografia era desenata la 10286x6860 pe telefon, adica
   marita de 8.8 ori peste un fisier de 1171x781, din care se vedea fasia din
   mijloc — 3.8% din latimea ei. De aici pata verde neclara, si pe telefon si
   pe tableta. Sub 860px fundalul fusese deja trecut pe `scroll`, ceea ce da
   acelasi rezultat din alt motiv: cu `scroll`, cutia de fundal e <body>.

   Fotografia se muta pe un strat propriu, `position:fixed`, cat fereastra:
   `cover` se raporteaza iar la fereastra (1265x844 la 390px, 1152x768 la
   1024px — practic marimea fisierului), stratul sta pe loc la derulare si nu
   mai depinde deloc de `background-attachment`. Pe desktop rezultatul e
   acelasi lucru pe care `fixed` il facea corect, deci nu se schimba nimic
   acolo; pe iOS e singurul fel in care iese la scara.
   Culoarea de dedesubt ramane pe <html>, unde era si pana acum.
   ========================================================================= */

/* Pragul: 1366px e latimea in CSS a celui mai mare iPad in peisaj, deci
   stratul acopera toate telefoanele si toate tabletele. Peste el pagina
   ramane exact pe mecanismul aprobat pe desktop, unde `fixed` lucreaza
   corect si nu e nimic de reparat. */
@media (max-width:1366px){

  /* de pe <body> fotografia pleaca: acolo cutia de fundal e pagina, nu
     fereastra. Si culoarea pleaca: fundalul lui <body> se picteaza peste
     stratul de mai jos (care are z-index negativ) si ar acoperi fotografia.
     Verdele inchis ramane pe <html>, din `html:has(body.pag-servicii)`. */
  body.pag-servicii{background-image:none;background-color:transparent}

  body.pag-servicii::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:image-set(url("images/servicii-fundal-02-1100.webp") type("image/webp"),url("images/servicii-fundal-02.jpg") type("image/jpeg"));
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
  }
}
/* acelasi fisier mai mic ca pana acum pe telefoane */
@media (max-width:760px){
  body.pag-servicii::before{background-image:image-set(url("images/servicii-fundal-02-700.webp") type("image/webp"),url("images/servicii-fundal-02.jpg") type("image/jpeg"))}
}
/* <<< FUNDAL-SERVICII-2026-10-30 <<< */


/* >>> FISA-SERVICII-MOBIL-2026-10-30 >>> */
/* =========================================================================
   Servicii — fisa care se deschide din "Citeste mai mult" (30.10.2026)

   Panoul e `position:fixed` de sus pana jos, cu `overflow:hidden`, si o
   coloana flex din doua bucati: fotografia (`flex:1 1 auto`) si textul
   (`flex:0 0 auto`). Asezarea asta a fost gandita pentru jumatate de ecran
   pe desktop, unde totul incape fara derulare. Pe ecrane mici iese pe dos:

   1. Textul nu incape, iar `overflow:hidden` il taie fara nicio derulare —
      masurat la 390x844, panoul are 866px de continut intr-o cutie de 844,
      si mai mult pe un ecran de telefon real, unde bara browserului scade
      inaltimea.
   2. Fotografia, fiind `flex:1 1 auto`, ia ce ramane: pe telefon se strange
      la minimul ei si se vede o fasie de 350x115, iar pe tableta creste la
      860x657. Aceeasi fotografie, doua marimi fara nicio legatura intre ele.

   Sub 1000px: panoul se deruleaza, iar fotografia devine o banda de 16:9 in
   capul fisei, cat latimea panoului, la fel la orice ecran. Peste 1000px nu
   se schimba nimic.
   ========================================================================= */
@media (max-width:1000px){

  .sv-detalii .ind-fisa{
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    /* derularea se opreste in panou, nu trece la pagina de dedesubt */
    overscroll-behavior:contain;
  }

  /* fotografia nu mai imparte inaltimea ramasa: are forma ei, fixa */
  .sv-detalii .if-foto{
    flex:0 0 auto;min-height:0;display:block;
  }
  .sv-detalii .if-foto img{
    width:100%;height:auto;max-height:none;
    aspect-ratio:16/9;object-fit:cover;object-position:center;
  }

  /* aer sub ultimul rand, ca sa nu se opreasca lipit de marginea de jos */
  .sv-detalii .if-in{
    padding-bottom:calc(clamp(22px,2.4vw,44px) + 40px + env(safe-area-inset-bottom,0px));
  }
}

/* Butonul de inchidere trebuie sa ramana pe ecran cat timp se deruleaza.
   `position:fixed` nu ajuta: `.ind-fisa` are `backdrop-filter`, iar un filtru
   de fundal face din element blocul de referinta si pentru descendentii
   `fixed` — masurat, butonul ajungea la -215px, adica pleca odata cu textul.
   Il facem lipicios: intra in curgere ca primul element al coloanei, cu
   marginea de jos negativa cat locul pe care l-ar ocupa, deci nu impinge
   fotografia, si ramane la 22px de muchia de sus a panoului. */
@media (max-width:1000px){
  .sv-detalii .if-inchide{
    --if-colt:clamp(12px,1.4vw,22px);
    position:sticky;top:var(--if-colt);right:auto;left:auto;
    align-self:flex-end;z-index:3;
    /* intrat in curgere, butonul devine element flex si se strange: masurat,
       cei 40px declarati ajungeau 32, iar marginea negativa trage atunci cu
       8px prea mult si fotografia iese peste muchia de sus. */
    flex:0 0 auto;
    margin:var(--if-colt) var(--if-colt) calc(-40px - var(--if-colt)) 0;
  }
}
/* <<< FISA-SERVICII-MOBIL-2026-10-30 <<< */


/* >>> FISA-TITLU-RUPE-2026-10-30 >>> */
/* =========================================================================
   Servicii, fisa "Emotii intense" — titlul pe telefon (30.10.2026)

   "Când ceea ce simți devine greu de dus." se rupea dupa "greu", lasand
   "de dus." singur pe randul doi. Legam "greu de dus." intr-o singura
   bucata: nemaiputand fi taiata, trece intreaga pe randul doi.
   Fara <br>: daca textul sau latimea se schimba, randul se aseaza singur.
   Peste 860px, unde titlul incape pe un rand, nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){
  /* `body{text-wrap:pretty}` se mosteneste si aici, iar `pretty` evita randul
     scurt de la sfarsit: cobora "devine" pe randul doi ca sa echilibreze, si
     iesea "Când ceea ce simți / devine greu de dus.". Pe acest titlu trecem
     pe rupere simpla, din aproape in aproape. */
  .if-titlu{text-wrap:wrap}
  .if-titlu .if-rupe{white-space:nowrap}
}
/* <<< FISA-TITLU-RUPE-2026-10-30 <<< */


/* >>> SERVICII-TITLU-CARD-2026-10-30 >>> */
/* =========================================================================
   Servicii — titlul din cardurile de serviciu, pe ecrane mici (30.10.2026)

   `.tb .sub` e 36px/1.18, acelasi la orice latime. Pe desktop sta pe o
   coloana de 588px si e in regula; pe telefon coloana scade la 290px la
   390px latime si la 220px la 320px, deci acelasi corp de 36px ocupa trei
   randuri si striveste textul de sub el.
   Sub 860px coboara la 26px, o singura valoare pe toate ecranele mici, asa
   cum ai cerut. Doar cardurile de serviciu de pe Servicii; celelalte
   titluri `.sub` din sit raman neatinse. Peste 860px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){
  .pag-servicii .tb.card-alb .sub{font-size:26px;line-height:1.2}
}
/* <<< SERVICII-TITLU-CARD-2026-10-30 <<< */


/* >>> PROGRAMARI-SPATII-2026-10-30 >>> */
/* =========================================================================
   Programari — aerul din pagina pe telefon si ecrane mici (30.10.2026)

   Masurat la 390px: sectiunea cu calendarul are 42px de padding sus si jos,
   sectiunea "Ce e bine sa stii inainte" are 70px sus si jos, iar subsolul
   adauga 56px marja si 81.6px padding. Golurile vizibile ies deci asa:
     - de la hero la cardul de rezervare: 42px
     - intre card si "Ce e bine sa stii inainte": 42 + 70 = 112px
     - de la ultimul card pana la scrisul din subsol: 70 + 56 + 81.6 = 208px

   Aici:
     - continutul urca 30px (42 -> 12 sus);
     - golul dinainte de "Ce e bine sa stii inainte" se injumatateste
       (112 -> 56, cate jumatate din fiecare parte);
     - golul pana la subsol scade la un sfert (208 -> 52, fiecare din cele
       trei bucati la un sfert).
   Peste 860px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){

  /* 1. continutul urca 30px, si jumatate din golul de dinainte de titlu */
  .pag-programari #calendar{padding-top:12px;padding-bottom:21px}

  /* 2. cealalta jumatate a golului dinainte de titlu, si un sfert din golul
        de la finalul paginii */
  .pag-programari .wrap > section:not(.tight){padding-top:35px;padding-bottom:18px}

  /* 3. restul golului pana la subsol, tot la un sfert */
  .pag-programari footer{margin-top:14px;padding-top:20px}
}
/* <<< PROGRAMARI-SPATII-2026-10-30 <<< */


/* >>> FUNDAL-PROGRAMARI-TABLETA-2026-10-30 >>> */
/* =========================================================================
   Programari — fotografia de fundal pe tablete (30.10.2026)

   Sub 860px pagina isi deseneaza deja fundalul singura, prin
   `background-size:var(--prog-lat) auto` si pozitia calculata din
   `--prog-poza`, adica exact cat ar iesi `cover` fata de o fereastra, fara
   `background-attachment:fixed` — tocmai pentru ca pe iOS fixat nu
   functioneaza. Peste 860px ramasese pe `fixed`, si acolo iPad-ul face ce
   face si pe Servicii: cutia de fundal ramane documentul, nu fereastra, deci
   `cover` se raporteaza la toata inaltimea paginii si fotografia iese
   umflata. Pe un browser de desktop `fixed` lucreaza corect, de aceea se
   vedea bine peste tot in afara de tablete.

   Intre 861 si 1366px (1366 = latimea in CSS a celui mai mare iPad in
   peisaj) tableta primeste aceeasi geometrie ca telefonul. De la 1367px in
   sus nu se schimba nimic.
   ========================================================================= */
@media (min-width:861px) and (max-width:1366px){
  body.pag-programari{
    background-attachment:scroll;
    background-size:var(--prog-lat) auto;
    background-position:center calc((100svh - var(--prog-poza)) / 2);
    background-repeat:no-repeat;
  }
}
/* <<< FUNDAL-PROGRAMARI-TABLETA-2026-10-30 <<< */


/* >>> FISA-LINK-WEB-2026-10-30 >>> */
/* =========================================================================
   Resurse — randul de sub butonul de descarcare (30.10.2026)

   Aceeasi fisa are acum si o pagina web, care curge pe latimea telefonului.
   Legatura sta sub buton, discreta, ca butonul sa ramana actiunea principala.
   ========================================================================= */
.fx-citeste-rand{margin:12px 0 0;text-align:center}
.fx-citeste{
  font-size:15px;line-height:1.5;
  color:color-mix(in srgb,var(--color-text) 72%,transparent);
  text-decoration:none;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--color-text) 34%,transparent);
  transition:color .18s,box-shadow .18s;
}
.fx-citeste:hover{color:#B55C14;box-shadow:inset 0 -1px 0 #B55C14}
/* <<< FISA-LINK-WEB-2026-10-30 <<< */


/* >>> PAGINI-LEGALE-2026-10-31 >>> */
/* =========================================================================
   Confidentialitate, Termeni, Cookies — pagini de text lung
   Aceeasi identitate ca restul sitului: bara de sus verde ca pe Servicii si
   Programari, subsolul pe toata latimea, cuprins lipit in stanga care arata
   unde esti in document.
   ========================================================================= */
.pag-legal{background:var(--color-bg)}

/* --- bara de sus: acelasi lockup si aceeasi bara verde ca pe Servicii si
   Programari. Aici nu e fotografie dedesubt, deci verdele e plin. --- */
body.pag-legal>nav.nav{position:sticky;top:0;left:auto;right:auto;
  width:100%;max-width:none;margin:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);height:auto;min-height:78px;padding-block:14px;
  padding-left:var(--content-inset);padding-right:var(--content-inset);
  background:#2E5D3A;backdrop-filter:none;-webkit-backdrop-filter:none}
body.pag-legal>nav.nav .hg-id{position:static;display:flex;flex-direction:column;
  align-items:flex-start;padding:0;right:auto;top:auto;height:auto}
body.pag-legal>nav.nav .hg-name{display:block;font-family:var(--font-heading);
  font-weight:300;font-size:34px;line-height:1.1;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--color-bg)}
body.pag-legal>nav.nav .hg-tagline{display:block;margin:6px 0 0;
  font-size:12.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-300)}
body.pag-legal>nav.nav .nav-links{margin-left:auto}
@media (max-width:900px){
  body.pag-legal>nav.nav{flex-wrap:wrap}
  body.pag-legal>nav.nav .hg-tagline{display:none}}

/* --- subsolul: `body>*:not(.para){max-width:1440px}` (0,1,1) ii taia latimea
   si il aducea la mijloc, fiindca aici nu sta intr-un `.wrap`. --- */
body.pag-legal>footer{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}

/* --- antetul paginii --- */
/* `body > :not(.para){max-width:1440px}` are specificitatea (0,1,1) si bate o
   singura clasa, deci antetul si coloana de text se scriu cu parintele in fata. */
body.pag-legal > .lg-cap{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:clamp(40px,7vw,86px) var(--content-inset) clamp(28px,4vw,48px);
  background:#E6DED1;
}
.lg-cap .kicker{display:block;color:var(--color-accent-700);margin-bottom:14px}
.lg-titlu{
  margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.012em;
  color:var(--color-text);max-width:20ch;
}
.lg-data{margin:18px 0 0;font-size:15px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}

/* --- corpul: sub 1100px o singura coloana, cu cuprinsul deasupra --- */
/* Coloana de text incepe pe aceeasi linie din stanga ca titlul paginii si ca
   numele din bara de sus (--content-inset), nu centrata; latimea randului o
   da .lg-text, nu containerul. */
body.pag-legal > .lg-corp{max-width:none;
  margin:clamp(34px,5vw,64px) 0 clamp(56px,8vw,104px);
  padding-inline:var(--content-inset);font-size:17px;line-height:1.72}
.lg-corp h2{
  margin:clamp(38px,5vw,60px) 0 14px;font-family:var(--font-heading);font-weight:500;
  font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:#24472D;scroll-margin-top:108px}
.lg-corp h3{margin:28px 0 8px;font-family:var(--font-heading);font-weight:600;
  font-size:19px;line-height:1.3;color:#24472D}
.lg-corp p{margin:0 0 1.05em}
.lg-corp ul,.lg-corp ol{margin:0 0 1.2em;padding-left:1.35em}
.lg-corp li{margin-bottom:.5em}
.lg-corp a{color:#2E5D3A;text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,#2E5D3A 45%,transparent)}
.lg-corp a:hover{color:#B55C14;box-shadow:inset 0 -1px 0 #B55C14}
.lg-corp strong{font-weight:700}
.lg-text{min-width:0;max-width:62ch}
.lg-cuprins{max-width:62ch}
.lg-text > h2:first-child{margin-top:0}

/* cuprinsul, varianta ingusta: caseta deasupra textului */
.lg-cuprins{margin:0 0 clamp(30px,4vw,48px);padding:22px 24px;background:#F1EDE4;
  border-left:3px solid #968733}
.lg-cuprins h2{margin:0 0 10px;font-size:17px;font-family:var(--font-body);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)}
.lg-cuprins ol{margin:0;padding-left:1.3em;font-size:16px;line-height:1.6}
.lg-cuprins li{margin-bottom:.25em}
.lg-cuprins a{color:#2E5D3A;text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,#2E5D3A 30%,transparent)}
.lg-cuprins a:hover{color:#B55C14;box-shadow:inset 0 -1px 0 #B55C14}
/* sectiunea in care te afli */
.lg-cuprins a.e-activ{color:#B55C14;font-weight:700;box-shadow:none}

/* --- de la 1100px cuprinsul trece intr-o coloana proprie, lipita in stanga,
   pe aceeasi linie cu titlul paginii si cu numele din bara de sus. Ramane pe
   ecran cat timp citesti si arata sectiunea curenta. --- */
@media (min-width:1100px){
  body.pag-legal > .lg-corp{
    width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
    padding-inline:var(--content-inset);
    display:flex;align-items:flex-start;gap:clamp(40px,4.4vw,72px);
  }
  .lg-cuprins{
    flex:0 0 clamp(206px,18vw,262px);
    position:sticky;top:104px;
    margin:0;padding:2px 0 2px 18px;background:none;
    border-left:1px solid color-mix(in srgb,#2E5D3A 26%,transparent);
    max-height:calc(100svh - 136px);overflow-y:auto;
  }
  .lg-cuprins h2{font-size:12.5px;letter-spacing:.14em;margin-bottom:14px}
  .lg-cuprins ol{font-size:14.5px;line-height:1.45;padding-left:1.45em}
  .lg-cuprins li{margin-bottom:0}
  .lg-cuprins a{position:relative;display:block;padding:6px 0;box-shadow:none;
    color:color-mix(in srgb,var(--color-text) 72%,transparent);
    transition:color .15s ease}
  .lg-cuprins a:hover{color:#2E5D3A;box-shadow:none}
  /* semnul de pe linia din stanga, exact peste bordura coloanei */
  .lg-cuprins a.e-activ{color:#2E5D3A;font-weight:700}
  /* semnul sta pe linia verticala a coloanei, nu peste numerotare:
     1.45em este exact `padding-left`-ul listei, 19px distanta pana la linie. */
  .lg-cuprins a.e-activ::before{content:"";position:absolute;
    left:calc(-1.45em - 19px);top:4px;bottom:4px;width:3px;
    background:#968733;border-radius:2px}
  .lg-text{flex:1 1 auto;max-width:62ch}
}

/* locurile ramase de completat */
.lg-gol{
  display:inline;background:#FBE7C6;color:#5A2A08;
  padding:1px 7px;border-radius:3px;font-size:.94em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#B55C14 40%,transparent);
}

/* caseta de atentionare. Pe ecrane inguste marginile interioare se string,
   altfel randul ramane cu 28 de semne la 320px si se citeste greu. */
.lg-nota{margin:26px 0;padding:20px 22px;background:#D6E4D3;border-radius:4px}
@media (max-width:420px){ .lg-nota{padding:16px 15px} }
/* Sub 360px randul ajunge la mai putin de 30 de semne si se citeste greu.
   Corpul scade cu un punct, ceea ce aduce randul inapoi peste prag. */
@media (max-width:360px){
  body.pag-legal > .lg-corp{font-size:16px}
  .lg-nota{padding:14px 13px}
}
.lg-nota p:last-child{margin-bottom:0}
.lg-nota strong{color:#24472D}

/* tabelul de scopuri */
.lg-tabel{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:15.5px}
.lg-tabel th,.lg-tabel td{text-align:left;vertical-align:top;padding:11px 12px;
  border-bottom:1px solid color-mix(in srgb,#2E5D3A 22%,transparent)}
.lg-tabel th{font-family:var(--font-body);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:#24472D;
  border-bottom-width:1.5px}
@media (max-width:640px){
  .lg-tabel,.lg-tabel tbody,.lg-tabel tr,.lg-tabel td{display:block;width:100%}
  .lg-tabel thead{display:none}
  .lg-tabel tr{padding:14px 0;border-bottom:1px solid color-mix(in srgb,#2E5D3A 22%,transparent)}
  .lg-tabel td{border:0;padding:3px 0}
  .lg-tabel td::before{content:attr(data-et) " · ";font-weight:700;color:#24472D}
}

/* randul de legaturi legale din subsol. `padding-block` mareste zona de
   atins pe telefon pana peste pragul comod, fara sa mute scrisul: marginea
   de sus scade cu exact cat creste inaltimea randului. */
/* Randul de legaturi legale, sub drepturile de autor. Una sub alta, nu
   infasurate pe doua randuri. `padding-block` tine zona de atins peste
   pragul comod pe telefon, fara sa mute scrisul. */
.flegal{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  margin-top:10px}
.flegal a{display:inline-block;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  color:color-mix(in srgb,var(--color-bg) 78%,transparent);
  padding-block:6px}
.flegal a:hover{color:var(--color-bg);text-decoration:underline}
/* --- bara de sus pe ecrane mici: exact aceleasi trepte ca pe celelalte pagini --- */
@media (min-width:861px) and (max-width:1100px){
  body.pag-legal>nav.nav .hg-tagline{display:block;max-width:34ch;
    font-size:11.5px;letter-spacing:.07em;white-space:normal;line-height:1.35}
  body.pag-legal>nav.nav .hg-name{font-size:clamp(21px,2.45vw,30px);white-space:nowrap}
}
@media (max-width:860px){
  /* bara pe un singur rand, cu butonul de meniu in dreapta — exact ca pe
     Servicii, Programari, Despre si Contact. */
  body.pag-legal>nav.nav{flex-wrap:nowrap;align-items:center;row-gap:0;gap:12px}
  body.pag-legal>nav.nav .hg-tagline{display:block;margin:4px 0 0;
    font-size:clamp(10px,3.1vw,12.5px);line-height:1.3;letter-spacing:.08em;
    text-transform:uppercase;font-weight:600;white-space:normal}
  body.pag-legal>nav.nav .hg-name{font-size:clamp(19px,6vw,26px)}
}
/* <<< PAGINI-LEGALE-2026-10-31 <<< */

/* ===== WHATSAPP-BUTON-2026-10-31 — inceput ===== */
/* Un al doilea canal, langa formularul de pe Contact si langa cererea de
   programare. Butonul secundar are exact cutia celui principal de pe pagina
   lui: pe Programari colturi drepte (1px de contur + 17px de spatiu = aceiasi
   53px ca .rz-trimite), pe Contact pastila .btn-block. */

/* --- Contact: sub nota formularului, ca alternativa la email --- */
.pag-contact .ctp-form .ctp-whats{
  margin-top:clamp(10px,1vw,14px);
  color:#2E5D3A;
  border-color:color-mix(in srgb,#2E5D3A 45%,transparent);
}
.pag-contact .ctp-form .ctp-whats:hover{
  background:color-mix(in srgb,#2E5D3A 9%,transparent);
  border-color:#2E5D3A;
}

/* --- Programari: eticheta plutitoare, verde (restul paginilor raman portocalii) --- */
body.pag-programari>a.cta-flotant{background:#25D366;color:#06361F}
body.pag-programari>a.cta-flotant:hover{background:#1EBE5A;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text) 18%,transparent),
             -6px 0 26px color-mix(in srgb,var(--color-text) 26%,transparent)}
body.pag-programari>a.cta-flotant:focus-visible{outline-color:#06361F}
/* ===== WHATSAPP-BUTON-2026-10-31 — sfarsit ===== */

/* >>> HERO-ACASA-MOBIL-2026-11-04 >>> */
/* =========================================================================
   Acasa — hero-ul pe telefon (04.11.2026)

   1. Bara de meniu nu mai sta peste fotografie: are fundal verde plin, cat
      latimea ecranului, si isi ocupa propriul loc in pagina — acelasi
      #2E5D3A ca bara celorlalte pagini si ca sertarul care se deschide din
      ea. Ramane lipita sus la derulare.
   2. Fotografia vine imediat sub bara, prima in coloana, inaintea cardului.
   3. Fotografia e Hero_Home_Mobile si e mai inalta: inaltimea o da ecranul
      (44svh, intre 260 si 460px), nu o proportie fixa. La 390x844 are 371px
      fata de 260px cat avea; `cover` taie atunci din latime, nu din
      inaltime, si lasa la vedere ~70% din latimea fotografiei — figura ei
      sta intre 36% si 70%, deci intra intreaga.
   4. Cardul nu mai e primul, deci nu mai are nevoie de cei 92-112px care
      faceau loc barei.
   5. Banda cu paragraful ramane ultima si preia verdele cardului: valul ei
      era construit sa urce peste fotografie, iar acum deasupra ei e cardul.
   Peste 860px nu se schimba nimic.
   ========================================================================= */
@media (max-width:860px){

  /* 1. bara: verde plin, pe toata latimea, lipita sus */
  body>nav.nav.nav-fara-nume{
    position:sticky;top:0;left:auto;right:auto;
    width:100%;max-width:none;margin:0;z-index:20;
    background:#2E5D3A;
    padding-left:var(--content-inset);padding-right:var(--content-inset);
  }

  /* 2. + 3. fotografia, imediat sub bara */
  .scena.afis > .hero-banner.hero-afis{
    order:1;
    aspect-ratio:auto;
    height:clamp(260px,44svh,460px);
    background-image:image-set(url("images/Hero_Home_Mobile-1100.webp") type("image/webp"),
                     url("images/Hero_Home_Mobile.jpeg") type("image/jpeg"));
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
  }

  /* 4. cardul, dupa fotografie */
  .scena.afis > .scena-fix{
    order:2;
    padding-top:clamp(26px,7vw,44px);
  }

  /* 5. paragraful face trecerea intre blocul de deasupra si cel de dedesubt.
     Masurate, cele trei culori erau #2D4834 (cardul), #5e685e (banda) si
     #394A3B (banda de sub ea), deci banda sarea mai deschisa intre doua
     verzuri inchise si lasa doua muchii taiate drept. Acum porneste exact
     din verdele cardului, trece prin #5e685e la mijloc, acolo unde sta
     scrisul, si ajunge exact in verdele benzii urmatoare: ambele muchii
     dispar. Contrast crem: 5,3 la mijloc, 6,2 la capatul de jos al textului
     — peste prag pe toata inaltimea, deci umbra scrisului, facuta ca sa-l
     desprinda de fotografie, dispare. */
  .scena.afis > .intro-sub-hero{
    background:linear-gradient(to bottom,
      #2D4834 0,        /* exact verdele cardului de deasupra: muchia dispare */
      #5e685e 40%,
      #5e685e 58%,
      #394A3B 100%);    /* exact verdele benzii de dedesubt */
  }
  .scena.afis > .intro-sub-hero::before{display:none}
  .scena.afis > .intro-sub-hero p{text-shadow:none}
}
/* <<< HERO-ACASA-MOBIL-2026-11-04 <<< */

/* >>> SPATIU-CARD-FOTO-2026-11-04 >>> */
/* =========================================================================
   Acasa — banda de contact: linia de sus si spatiul pana la sectiunea de
   servicii (04.11.2026)

   1. Linia. `#contact{border-top:1px solid var(--color-divider)}` (linia 424)
      tragea o dunga pe toata latimea ecranului deasupra fotografiei. Scoasa.
   2. Spatiul. Masurat la 390px: cardul se termina la 7282, fotografia incepe
      la 7422 — 140px, din care 70px `padding-bottom` la sectiunea de servicii
      si 70px `margin-top` la banda de contact, amandoua
      `calc(2.5 * var(--leading))`.
        - pe telefon si tablete mici: fiecare scade la o treime, deci ~47px;
        - de la 861px in sus: marginea benzii scade cu 40px, deci golul
          ajunge la 100px.
   ========================================================================= */
#contact{border-top:0}

@media (max-width:860px){
  .servicii-acasa{padding-bottom:calc(2.5 * var(--leading) / 3)}
  .ct-afis{margin-top:calc(2.5 * var(--leading) / 3)}
}
@media (min-width:861px){
  .ct-afis{margin-top:calc(2.5 * var(--leading) - 40px)}
}
/* <<< SPATIU-CARD-FOTO-2026-11-04 <<< */

/* >>> MULTUMESC-2026-11-04 >>> */
/* =========================================================================
   Fereastra de multumire, dupa trimiterea oricarui formular (04.11.2026)
   Aceeasi pentru newsletter, programare si contact. Fisele de lucru isi
   pastreaza confirmarea lor, in panoul care se deschide oricum.
   ========================================================================= */
/* `body>*:not(.para)` are specificitatea (0,1,1) si pune `position:relative`
   pe orice copil direct al lui body — adica si pe fereastra asta, prinzand-o
   in curgerea paginii. Scrisa cu parintele in fata, regula ajunge la (0,1,1)
   si trece. Acelasi tipar ca la fereastra fiselor (`body>.fx`). */
body>.mt-fond{
  position:fixed;inset:0;z-index:1200;
  max-width:none;margin:0;
  display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,#0E1B13 62%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s ease;
}
body>.mt-fond.e-vizibil{opacity:1}
.mt-panou{
  width:min(440px,100%);box-sizing:border-box;
  background:var(--color-bg);color:var(--color-text);
  border-radius:6px;padding:clamp(28px,5vw,40px);
  box-shadow:0 24px 60px rgba(12,20,8,.34);
  text-align:center;
  transform:translateY(10px) scale(.985);
  transition:transform .26s cubic-bezier(.22,.9,.3,1);
}
body>.mt-fond.e-vizibil .mt-panou{transform:none}
.mt-titlu{
  margin:0 0 12px;font-family:var(--font-heading);
  font-weight:var(--font-heading-weight);
  font-size:clamp(24px,3.2vw,30px);line-height:1.2;color:#24472D;
}
.mt-text{
  margin:0;font-size:17px;line-height:1.6;
  color:color-mix(in srgb,var(--color-text) 86%,transparent);
}
.mt-ok{
  margin-top:clamp(22px,3vw,28px);
  font:inherit;font-size:16px;font-weight:600;line-height:1;
  background:var(--color-accent);color:var(--color-bg);
  border:0;border-radius:999px;padding:15px 34px;cursor:pointer;
  transition:background .15s ease;
}
.mt-ok:hover{background:var(--color-accent-600)}
.mt-ok:focus-visible{outline:2px solid #2E5D3A;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  body>.mt-fond,.mt-panou{transition:none}
  .mt-panou{transform:none}
}
/* cat timp fereastra e deschisa, pagina de dedesubt nu se deruleaza */
body.mt-deschis{overflow:hidden}
/* <<< MULTUMESC-2026-11-04 <<< */