/* ===== Source style block 1: anonymous ===== */

:root {
  --green-950:#08271f;
  --green-900:#0d3b2e;
  --green-800:#14533f;
  --green-700:#1f6b4f;
  --green-600:#2d8b63;
  --green-500:#3eaa78;
  --green-100:#e6f4ed;
  --green-50:#f3faf6;
  --ink:#14201b;
  --muted:#68746e;
  --line:#dfe8e3;
  --white:#fff;
  --shadow:0 20px 60px rgba(8,39,31,.12);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 14px;z-index:1000}.skip-link:focus{left:10px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(223,232,227,.75)}
.nav-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:150px;height:58px;object-fit:contain;object-position:left center}
.main-nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:700}.main-nav>a:not(.btn){padding:8px 0}.main-nav>a:not(.btn):hover{color:var(--green-700)}
.lang-toggle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer}
.menu-toggle{display:none;border:0;background:none;padding:8px;cursor:pointer}.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--green-700);background:var(--green-700);color:#fff;font-weight:800;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-2px);background:var(--green-800);box-shadow:0 10px 25px rgba(20,83,63,.2)}
.btn-small{min-height:42px;padding:0 16px;font-size:13px}.btn-ghost{background:transparent;color:var(--green-900);border-color:#bfd4c8}.btn-ghost:hover{background:#fff;color:var(--green-900)}
.hero{position:relative;overflow:hidden;padding:92px 0 72px;background:linear-gradient(135deg,#f6fbf8 0%,#eef8f2 52%,#fff 100%)}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,83,63,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,83,63,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 75%);pointer-events:none}
.hero-glow{position:absolute;border-radius:50%;filter:blur(12px);opacity:.45}.hero-glow-1{width:420px;height:420px;background:#cbead8;right:-120px;top:-150px}.hero-glow-2{width:280px;height:280px;background:#def1e7;left:18%;bottom:-180px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.eyebrow{margin:0 0 16px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:var(--green-700)}
.hero h1,.section h2{font-size:clamp(42px,5vw,72px);line-height:1.02;letter-spacing:-.045em;margin:0}.hero h1 span{color:var(--green-700)}
.hero-lead{font-size:19px;color:#53615b;max-width:700px;margin:25px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;gap:30px;margin-top:46px}.hero-trust span{display:flex;flex-direction:column}.hero-trust b{font-size:20px;color:var(--green-900)}.hero-trust small{font-size:12px;color:var(--muted)}
.hero-card{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:30px;box-shadow:var(--shadow);overflow:hidden}.hero-card-top{padding:16px 22px;background:var(--green-900);color:#fff;display:flex;gap:10px;align-items:center;font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#7dedad;box-shadow:0 0 0 5px rgba(125,237,173,.12)}.hero-card-body{padding:34px}.mini-label{font-size:12px;font-weight:800;color:var(--green-700);text-transform:uppercase;letter-spacing:.08em}.hero-card h2{font-size:34px;line-height:1.08;margin:8px 0 24px;letter-spacing:-.035em}.check-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}.check-list li{position:relative;padding-left:28px;color:#52615a}.check-list li:before{content:"✓";position:absolute;left:0;top:0;color:var(--green-700);font-weight:900}.phone-link{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,340px);height:62px;border:1.5px solid rgba(13,117,82,.28);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(8,75,54,.08);color:var(--green-900);text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease,background .32s ease;overflow:visible}.phone-link:hover{transform:translateY(-2px);border-color:rgba(13,117,82,.46);box-shadow:0 12px 28px rgba(8,75,54,.12);background:#fff}.phone-link:focus-visible{outline:3px solid rgba(36,185,120,.22);outline-offset:3px}.phone-link:active{transform:scale(.982);box-shadow:0 4px 13px rgba(8,75,54,.10)}.phone-icon{position:absolute;left:-1.5px;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#178d63,#0a654a);color:#fff;border:1.5px solid rgba(255,255,255,.72);box-shadow:0 5px 13px rgba(8,75,54,.18);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease}.phone-link:active .phone-icon{transform:translateY(-50%) scale(.94) rotate(-6deg);box-shadow:0 3px 8px rgba(8,75,54,.16)}.phone-icon svg{width:24px;height:24px;fill:currentColor}.phone-text{display:block;width:100%;padding:0 18px 0 66px;text-align:center}.phone-number{display:block;font-size:28px;line-height:1;font-weight:900;letter-spacing:-.035em;white-space:nowrap}.phone-hint{display:none}@media(max-width:560px){.phone-link{width:100%;height:60px}.phone-icon{width:60px;height:60px}.phone-number{font-size:25px}.phone-text{padding-left:64px;padding-right:12px}}
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-grid div{padding:24px 28px;border-right:1px solid var(--line)}.trust-grid div:first-child{padding-left:0}.trust-grid div:last-child{border-right:0}.trust-grid strong,.trust-grid span{display:block}.trust-grid strong{font-size:14px}.trust-grid span{font-size:12px;color:var(--muted);margin-top:3px}
.section{padding:100px 0}.section-soft{background:var(--green-50)}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}.section-heading h2{font-size:clamp(36px,4vw,58px)}.section-heading.centered{text-align:center;max-width:780px;margin:0 auto 52px}.section-heading.centered p:last-child{color:var(--muted);font-size:17px;margin:20px auto 0;max-width:680px}.copy{font-size:18px;color:#53615b}.copy p:first-child{margin-top:4px}.coverage-card{margin-top:30px;padding:24px 28px;border-left:4px solid var(--green-600);background:var(--green-50);border-radius:0 18px 18px 0}.coverage-card span,.coverage-card strong{display:block}.coverage-card span{font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.1em;color:var(--green-700)}.coverage-card strong{font-size:22px;color:var(--green-900);margin:3px 0}.coverage-card p{font-size:14px;margin:0;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;min-height:260px;transition:.2s}.service-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(8,39,31,.08);border-color:#bfd7ca}.service-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--green-100);color:var(--green-800);font-size:12px;font-weight:900}.service-card h3{font-size:22px;margin:22px 0 10px;letter-spacing:-.025em}.service-card p{font-size:14px;color:var(--muted);margin:0}
.b2b-section{padding-top:0}.b2b-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;padding:52px 56px;background:linear-gradient(120deg,var(--green-950),var(--green-700));color:#fff;border-radius:30px;box-shadow:var(--shadow)}.b2b-card h2{font-size:44px;max-width:720px}.b2b-card p:not(.eyebrow){max-width:750px;color:#d5e7df}.eyebrow.light{color:#9ee0bc}.btn-light{background:#fff;color:var(--green-900);border-color:#fff}.btn-light:hover{background:#f4faf6;color:var(--green-900)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:50px}.process-step{padding-top:24px;border-top:2px solid var(--line)}.process-step span{font-size:12px;font-weight:900;color:var(--green-700)}.process-step h3{font-size:20px;margin:10px 0 8px}.process-step p{font-size:14px;color:var(--muted);margin:0}
.form-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}.form-copy h2{font-size:48px;letter-spacing:-.04em;line-height:1.08;margin:0 0 20px}.form-copy>p:not(.eyebrow){color:var(--muted)}.contact-mini{display:grid;gap:14px;margin-top:32px}.contact-mini a{display:flex;flex-direction:column;padding:16px 14px;border-bottom:1px solid var(--line);border-radius:16px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .28s ease,box-shadow .28s ease}.contact-mini a:hover{background:rgba(19,118,82,.04);transform:translateY(-1px)}.contact-mini a:active{transform:scale(.988);background:rgba(19,118,82,.07);box-shadow:inset 0 0 0 1px rgba(19,118,82,.10)}.contact-mini a:focus-visible{outline:3px solid rgba(36,185,120,.22);outline-offset:3px}.contact-mini a strong,.contact-mini a span{-webkit-user-select:none;user-select:none;pointer-events:none}.contact-mini strong{font-size:16px;color:var(--green-900)}.contact-mini span{font-size:12px;color:var(--muted)}.form-section-label{margin:12px 0 14px}
.visit-form{background:#fff;border:1px solid var(--line);padding:34px;border-radius:26px;box-shadow:0 18px 50px rgba(8,39,31,.06)}.visit-form label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#405048;margin-bottom:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.visit-form input,.visit-form select,.visit-form textarea{width:100%;border:1px solid #cedbd4;background:#fbfdfc;border-radius:12px;padding:13px 14px;color:var(--ink);outline:none}.visit-form input:focus,.visit-form select:focus,.visit-form textarea:focus{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.13)}.visit-form textarea{resize:vertical}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px!important;font-weight:500!important;color:var(--muted)!important}.check input{width:16px;height:16px;margin-top:3px}.hidden{display:none!important}.form-submit{width:100%;border:0}.form-note{font-size:11px;color:var(--muted);text-align:center;margin:12px 0 0}
.phone-field{display:grid;gap:7px;margin-bottom:16px}.phone-field>span{font-size:12px;font-weight:800;color:#405048}.phone-input-group{display:flex;width:100%;border:1px solid #cedbd4;background:#fbfdfc;border-radius:12px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.phone-input-group:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.13);background:#fff}.phone-input-group .dial-code{flex:0 0 116px;width:116px;border:0!important;border-right:1px solid #d8e2dd!important;border-radius:0!important;background:#f2f8f5!important;padding:13px 28px 13px 12px!important;font-weight:800;color:var(--green-900);outline:none;box-shadow:none!important;cursor:pointer}.phone-input-group input[type=tel]{flex:1;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:13px 14px!important}.phone-input-group input[type=tel]:focus{box-shadow:none!important}.phone-input-group .dial-code:focus{box-shadow:none!important}.phone-input-group .dial-code option{color:#17211d;background:#fff}.phone-field-hint{font-size:10px;color:#7b8983;font-weight:500;margin-top:-2px}@media(max-width:420px){.phone-input-group .dial-code{flex-basis:108px;width:108px;padding-left:10px!important;padding-right:22px!important}.phone-input-group input[type=tel]{padding-left:12px!important}}
.contact-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;padding:44px;border:1px solid var(--line);border-radius:26px}.contact-panel h2{font-size:38px}.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.contact-links a,.contact-links div{display:flex;flex-direction:column}.contact-links a{position:relative;padding:16px 0 14px;border-radius:16px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .28s ease,box-shadow .28s ease}.contact-links a:hover{background:rgba(19,118,82,.04);transform:translateY(-1px)}.contact-links a:active{transform:scale(.988);background:rgba(19,118,82,.07);box-shadow:inset 0 0 0 1px rgba(19,118,82,.10)}.contact-links a:focus-visible{outline:3px solid rgba(36,185,120,.22);outline-offset:3px}.contact-links a strong,.contact-links a span{-webkit-user-select:none;user-select:none}.contact-links span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.contact-links strong{font-size:15px;margin-top:5px;color:var(--green-900)}
.site-footer{background:#071d17;color:#d8e5df;padding:60px 0 22px}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr;gap:45px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer-brand img{width:130px;background:#fff;border-radius:10px;padding:7px}.footer-brand p{margin:0;font-size:13px}.footer-grid strong{color:#fff;margin-bottom:6px}.footer-grid a,.footer-grid span{font-size:13px;color:#aebfb7}.footer-grid a:hover{color:#fff}.muted{opacity:.68}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#93a69d}
.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.18);border:4px solid #fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:980px){.nav-wrap{justify-content:flex-start;gap:12px}.menu-toggle{display:block;margin-left:2px;flex:0 0 auto}.mobile-lang-dropdown{display:flex!important;align-items:center;margin-left:auto;margin-right:0;flex:0 0 auto;position:relative;z-index:4}.main-nav{display:none;position:absolute;top:82px;left:20px;right:20px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav .btn{text-align:center}.main-nav .lang-switch{display:none}.hero{padding-top:62px}.hero-grid,.split,.form-grid,.contact-panel{grid-template-columns:1fr;gap:34px}.hero-grid{max-width:760px}.hero-card{max-width:620px}.trust-grid{grid-template-columns:1fr 1fr}.trust-grid div:nth-child(2){border-right:0}.trust-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)}.trust-grid div{padding:20px}.service-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.b2b-card{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:640px){.container{width:min(100% - 28px,1160px)}.site-header .nav-wrap{min-height:72px}.brand img{width:128px;height:50px}.mobile-lang-trigger{height:38px;min-width:82px;padding:0 10px}.mobile-lang-menu{width:198px}.main-nav{top:72px;left:14px;right:14px}.hero{padding:48px 0}.hero h1{font-size:44px}.hero-lead{font-size:16px}.hero-actions .btn{width:100%}.hero-trust{gap:18px;justify-content:space-between}.hero-trust b{font-size:17px}.hero-trust small{font-size:10px}.hero-card-body{padding:25px}.hero-card h2{font-size:28px}.trust-grid{grid-template-columns:1fr}.trust-grid div{border-right:0!important;border-bottom:1px solid var(--line)!important;padding:18px 0}.trust-grid div:last-child{border-bottom:0!important}.section{padding:58px 0}.section-heading.centered{margin:0 auto 34px}.section-heading h2,.form-copy h2{font-size:38px}.service-grid,.process-grid,.field-row,.contact-links,.footer-grid{grid-template-columns:1fr}.service-card{min-height:auto}.b2b-card{padding:30px 26px}.b2b-card h2{font-size:34px}.visit-form{padding:22px}.contact-panel{padding:24px 24px 28px;gap:24px}.contact-mini{margin-top:22px;gap:10px}.contact-mini a{padding:12px 14px}.form-section-label{margin:4px 0 10px}.contact-links{gap:8px}.contact-links a,.contact-links div{padding:10px 0 8px}.site-footer{padding:42px 0 18px}.footer-grid{gap:26px}.footer-bottom{flex-direction:column;margin-top:28px;padding-top:18px}.floating-whatsapp{width:54px;height:54px;right:16px;bottom:16px}}


/* ============================
   Clean4U V2 visual refinements
   ============================ */
body{background:#f3f7f4}
.site-header{background:rgba(247,250,248,.90)}
.hero{background:linear-gradient(135deg,#eef8f2 0%,#e5f3ea 50%,#f9fcfa 100%)}
.hero:after{background-image:linear-gradient(rgba(20,83,63,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,83,63,.06) 1px,transparent 1px)}
.section:not(.section-soft){background:rgba(255,255,255,.42)}
.section-soft{background:linear-gradient(180deg,#eaf5ef 0%,#f0f8f3 100%)}

.lang-switch{display:flex;align-items:center;gap:4px;padding:4px;background:#eef5f1;border:1px solid #d9e6df;border-radius:999px}
.lang-choice{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#52615a;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900;cursor:pointer;transition:.2s ease}
.lang-choice .flag{font-size:15px;line-height:1}
.lang-choice:hover{color:var(--green-800);background:rgba(255,255,255,.65)}
.lang-choice.is-active{background:#fff;color:var(--green-800);box-shadow:0 2px 8px rgba(8,39,31,.09)}.mobile-lang-dropdown{display:none;position:relative;z-index:150}.mobile-lang-trigger{height:40px;min-width:86px;border:1px solid #d9e6df;background:#fff;border-radius:999px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green-900);font:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 6px 18px rgba(8,39,31,.06);-webkit-tap-highlight-color:transparent;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}.mobile-lang-trigger:hover,.mobile-lang-trigger[aria-expanded='true']{background:#f5faf7;box-shadow:0 8px 22px rgba(8,39,31,.09)}.mobile-lang-trigger:active{transform:scale(.98)}.mobile-lang-trigger .lang-trigger-flag{font-size:17px;line-height:1}.mobile-lang-trigger .lang-trigger-code{letter-spacing:.03em}.mobile-lang-trigger svg{width:14px;height:14px;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.mobile-lang-trigger[aria-expanded='true'] svg{transform:rotate(180deg)}.mobile-lang-menu{position:absolute;right:0;top:calc(100% + 9px);width:210px;background:rgba(255,255,255,.99);border:1px solid rgba(16,106,75,.15);border-radius:16px;padding:7px;box-shadow:0 22px 55px rgba(7,48,35,.16);transform-origin:top right;animation:langMenuIn .2s cubic-bezier(.2,.8,.2,1);overflow:hidden}.mobile-lang-menu[hidden]{display:none}.mobile-lang-option{width:100%;border:0;background:transparent;border-radius:11px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;padding:10px 11px;color:#26332e;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s ease,transform .16s ease}.mobile-lang-option:hover,.mobile-lang-option:focus-visible{background:#eff8f3;outline:none}.mobile-lang-option:active{transform:scale(.99)}.mobile-lang-option.is-selected{background:#e6f5ed;color:var(--green-900)}.mobile-lang-option .lang-option-flag{font-size:19px;line-height:1}.mobile-lang-option .lang-option-name{font-size:13px;font-weight:800}.mobile-lang-option .lang-option-code{font-size:11px;font-weight:900;color:#6b7d75}.mobile-lang-option.is-selected .lang-option-code{color:var(--green-700)}@keyframes langMenuIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.contact-mini a[href^='mailto'],.contact-mini a[href^='tel'],.contact-links a[href^='mailto'],.contact-links a[href^='tel']{-webkit-tap-highlight-color:transparent}

.hero h1 .hero-result{color:var(--green-700)}
.hero-pro{display:inline-block;background:linear-gradient(120deg,#0a4f38 0%,#169365 42%,#6ed49b 58%,#0b6244 100%);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 7px 24px rgba(31,107,79,.17);filter:drop-shadow(0 1px 0 rgba(255,255,255,.65));font-weight:950;letter-spacing:-.055em;animation:proShine 5.5s ease-in-out infinite}
@keyframes proShine{0%,72%,100%{background-position:0% 50%}84%{background-position:100% 50%}}
.trust-check{font-size:25px!important;line-height:1;color:var(--green-600)!important}

.trust-strip{background:rgba(255,255,255,.82)}
.trust-grid{align-items:stretch}
.trust-grid div{padding:25px 24px!important;border-right:1px solid var(--line);display:flex;min-height:96px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.trust-grid div:first-child{padding-left:24px!important}
.trust-grid strong{font-size:14px;min-height:22px;display:flex;align-items:center;justify-content:center}
.trust-grid span{font-size:12px;line-height:1.35;max-width:205px;min-height:34px;display:flex;align-items:flex-start;justify-content:center}

.eyebrow.emphasis{display:inline-flex;align-items:center;justify-content:center;font-size:15px;letter-spacing:.155em;font-weight:950;color:#13704f;padding:8px 14px;border-radius:999px;border:1px solid rgba(45,139,99,.18);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(220,242,230,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 25px rgba(31,107,79,.07);margin-bottom:20px}
.section-heading.centered .eyebrow.emphasis{margin-inline:auto}

.service-grid{gap:22px}
.service-card{padding:18px 20px 25px;min-height:390px;border-color:#d7e4dc;background:rgba(255,255,255,.94);box-shadow:0 8px 28px rgba(8,39,31,.035)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(8,39,31,.11);border-color:#b8d4c5}
.service-media{position:relative;height:112px;margin-bottom:20px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#d9eee2,#eef8f2);isolation:isolate}
.service-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,38,29,.02),rgba(7,38,29,.13));z-index:1;pointer-events:none}
.service-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(.96);transition:transform .45s ease,filter .45s ease}
.service-card:hover .service-media img{transform:scale(1.035);filter:saturate(.98) contrast(1)}
.service-number{position:absolute;left:12px;bottom:10px;z-index:2;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.91);backdrop-filter:blur(8px);color:var(--green-800);font-size:12px;font-weight:950;box-shadow:0 7px 22px rgba(8,39,31,.14);border:1px solid rgba(255,255,255,.9)}
.service-card h3{font-size:22px;margin:0 0 10px}
.service-card p{font-size:14px;line-height:1.62}

.form-copy .eyebrow.emphasis{font-size:16px}
.visit-form{border-color:#d5e4dc;background:rgba(255,255,255,.96)}
.contact-panel{background:rgba(255,255,255,.66)}

.floating-whatsapp{transition:.2s ease}
.floating-whatsapp:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px rgba(0,0,0,.22)}
.floating-whatsapp svg{width:29px;height:29px;fill:currentColor;display:block}

@media (max-width:980px){
  .main-nav .lang-switch{align-self:flex-start}
  .trust-grid div:first-child{padding-left:20px!important}
  .service-card{min-height:380px}
}
@media (max-width:640px){
  .lang-switch{width:max-content}
  .hero h1{font-size:43px}
  .trust-grid div,.trust-grid div:first-child{padding:18px 0!important;min-height:84px}
  .trust-grid span{min-height:auto}
  .service-card{min-height:auto;padding:16px 17px 22px}
  .service-media{height:106px}
  .eyebrow.emphasis,.form-copy .eyebrow.emphasis{font-size:13px;letter-spacing:.12em;padding:7px 11px}
}


/* ===== Clean4U V3 refinements ===== */
body{
  background:#f5f6f4;
}
.hero{
  background:
    radial-gradient(circle at 86% 14%, rgba(45,139,99,.10), transparent 28%),
    linear-gradient(135deg,#fbfcfb 0%,#f5f7f5 55%,#ffffff 100%);
}
.hero:after{
  opacity:.62;
}
.hero-glow-1{background:#cfe7d8;opacity:.32}
.hero-glow-2{background:#e3efe8;opacity:.34}
.section:not(.section-soft){background:#f5f6f4}
.section-soft{
  background:linear-gradient(180deg,#eef1ef 0%,#f4f5f3 100%);
}
.trust-strip{background:#ffffff}
.hero-card,.service-card,.visit-form,.contact-panel{
  box-shadow:0 18px 46px rgba(8,39,31,.075);
}
.service-card{border-color:#d8e1dc}
.contact-panel{background:#fff}

/* Large, clean green section labels: no pills / bubbles */
.eyebrow{
  font-size:17px;
  line-height:1.25;
  letter-spacing:.075em;
  font-weight:950;
  color:#1a7d58;
  text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow.emphasis,
.form-copy .eyebrow.emphasis{
  display:block;
  width:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:22px;
  line-height:1.2;
  letter-spacing:.075em;
  font-weight:950;
  color:#1a7d58;
  margin:0 0 20px;
}
.section-heading.centered .eyebrow.emphasis{margin-inline:auto}
.section-heading .eyebrow:not(.emphasis){font-size:18px}
.b2b-card .eyebrow.light{
  color:#a5edc2;
  font-size:19px;
  letter-spacing:.075em;
  margin-bottom:15px;
}
.hero-card .mini-label{
  font-size:14px;
  letter-spacing:.075em;
  color:#1a7d58;
}
.contact-panel .eyebrow{
  font-size:21px;
  margin-bottom:13px;
}

/* Keep the full word PROfesională together on its own line */
.hero h1{
  font-size:clamp(46px,4.65vw,68px);
}
.hero-professional{
  display:inline-block;
  white-space:nowrap;
}
.hero-pro{
  padding-right:.02em;
}

/* More polished / symmetric advantage strip */
.trust-grid{
  align-items:stretch;
}
.trust-grid div{
  min-height:106px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px 26px;
}
.trust-grid div:first-child{padding-left:26px}
.trust-grid strong{
  min-height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.trust-grid span{
  max-width:220px;
  min-height:36px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  line-height:1.45;
}

/* Service cards: a little more visual hierarchy */
.service-card{
  min-height:390px;
  padding:17px 18px 27px;
}
.service-media{
  height:124px;
  margin-bottom:23px;
}
.service-card h3,.service-card p{
  padding-inline:10px;
}
.service-card h3{font-size:23px}

/* Temporary before/after visual for textile card: same real upholstery image,
   with a deliberately dirtier left half so the concept is immediately readable. */
.textile-split:before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  bottom:0;
  width:50%;
  background:
    radial-gradient(circle at 24% 45%, rgba(80,54,31,.30) 0 10%, transparent 24%),
    radial-gradient(circle at 68% 66%, rgba(72,50,31,.24) 0 8%, transparent 23%),
    linear-gradient(rgba(73,57,40,.26),rgba(89,66,42,.22));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.textile-split:after{
  content:"";
  position:absolute;
  z-index:3;
  top:10px;
  bottom:10px;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(8,39,31,.10);
  pointer-events:none;
}
.textile-split .service-number{z-index:4}

/* Slightly stronger process styling */
.process-step{
  border-top:2px solid #cfdad4;
  background:rgba(255,255,255,.36);
  border-radius:0 0 18px 18px;
  padding:24px 18px 18px;
}
.process-step span{
  font-size:13px;
  color:#1a7d58;
}

@media (max-width:980px){
  .trust-grid div:first-child{padding-left:20px!important}
  .hero h1{font-size:clamp(45px,7vw,62px)}
}
@media (max-width:640px){
  .hero h1{font-size:41px}
  .hero-professional{white-space:nowrap}
  .eyebrow{font-size:15px}
  .section-heading .eyebrow:not(.emphasis){font-size:16px}
  .eyebrow.emphasis,.form-copy .eyebrow.emphasis{font-size:18px;letter-spacing:.065em;padding:0}
  .contact-panel .eyebrow{font-size:18px}
  .service-card{min-height:auto}
  .service-media{height:112px}
}


/* ===== Clean4U V4 refinements ===== */
/* Robust language flags */
.flag-svg{display:inline-flex;width:22px;height:15px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,32,27,.12);flex:0 0 auto}
.flag-svg svg{display:block;width:100%;height:100%}
.lang-choice{gap:6px}

/* Keep only PRO accented; the rest of the word remains ink-black */
.hero-professional{color:var(--ink)!important}
.hero-professional .hero-pro{color:transparent!important}

/* Hero micro-proof row: equal rhythm, aligned labels */
.hero-trust{display:grid;grid-template-columns:repeat(3,minmax(118px,1fr));gap:22px;max-width:500px;align-items:stretch}
.hero-trust>span{display:grid;grid-template-rows:34px 38px;align-items:start;min-width:0}
.hero-trust b{height:34px;display:flex;align-items:center;font-size:20px;color:var(--green-900);line-height:1}
.hero-trust small{height:38px;display:flex;align-items:flex-start;font-size:12px;line-height:1.35;color:var(--muted)}
.trust-mark{font-size:23px!important;color:var(--green-600)!important;filter:drop-shadow(0 4px 10px rgba(45,139,99,.2))}

/* Emerald advantage band */
.trust-strip{border:0;background:linear-gradient(120deg,#08291f 0%,#0f4937 48%,#126447 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.12)}
.trust-grid{gap:0}
.trust-grid div{position:relative;border-right:1px solid rgba(255,255,255,.16)!important;border-bottom:0!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));min-height:112px;padding:23px 26px!important}
.trust-grid div:before{content:"";position:absolute;top:0;left:24%;right:24%;height:2px;background:linear-gradient(90deg,transparent,rgba(126,239,176,.68),transparent)}
.trust-grid div:last-child{border-right:0!important}
.trust-grid strong{color:#fff;font-size:15px}
.trust-grid span{color:#d2e7dd;font-size:12px}

/* Tiny brand mark beside the about label */
.about-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.about-mini-logo{display:inline-block;width:auto;height:22px;max-width:76px;object-fit:contain;object-position:left center;opacity:.9;transform:translateY(1px)}

/* Process: four distinct, polished cards */
.process-grid{gap:18px;margin-top:52px}
.process-step{position:relative;overflow:hidden;border:1px solid #d7e2dc;background:rgba(255,255,255,.92);border-radius:20px;padding:28px 24px 24px;box-shadow:0 10px 30px rgba(8,39,31,.055);transition:.22s ease}
.process-step:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#0d3b2e,#2d8b63,#6fcea0)}
.process-step:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(8,39,31,.09);border-color:#bfd5c8}
.process-step span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#0d3b2e,#24805c);color:#fff;font-size:12px;font-weight:950;box-shadow:0 8px 20px rgba(13,59,46,.18)}
.process-step h3{font-size:20px;margin:18px 0 8px}
.process-step p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}

/* Image framing: slightly cleaner crop for first and before/after third card */
.service-card:nth-child(1) .service-media img{object-position:center 48%}
.service-card:nth-child(3) .service-media img{object-position:center center;filter:saturate(.92) contrast(.98)}

@media (max-width:980px){
  .trust-grid div:nth-child(2){border-right:0!important}
  .trust-grid div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)!important}
  .hero-trust{max-width:520px}
}
@media (max-width:640px){
  .hero-trust{grid-template-columns:repeat(3,1fr);gap:10px;max-width:100%}
  .hero-trust>span{grid-template-rows:31px auto}
  .hero-trust b{font-size:18px;height:31px}
  .hero-trust small{height:auto;font-size:10px;line-height:1.3}
  .trust-mark{font-size:20px!important}
  .trust-grid div{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;padding:20px 0!important;min-height:88px}
  .trust-grid div:last-child{border-bottom:0!important}
  .about-mini-logo{height:19px;max-width:66px}
  .process-step{padding:24px 21px 22px}
}


/* ===== Clean4U V4.1 micro-refinements ===== */
/* Text marker instead of decorative icon */
.trust-mark-text{
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:.055em;
  color:var(--green-700)!important;
  filter:none!important;
}

/* Finish the emerald band as four clearly separated, identical panels */
.trust-strip{
  padding:10px 0;
  background:linear-gradient(180deg,
    #f3f7f4 0%,
    #dfe9e3 6px,
    #0a3227 14px,
    #0d4635 50%,
    #0a3227 calc(100% - 14px),
    #dfe9e3 calc(100% - 6px),
    #f3f7f4 100%
  );
}
.trust-grid{
  gap:12px;
}
.trust-grid div,
.trust-grid div:first-child{
  padding:22px 24px!important;
  min-height:106px;
  border:1px solid rgba(180,238,205,.20)!important;
  border-radius:15px;
  background:linear-gradient(145deg,#124f3c 0%,#0b3d2f 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 8px 22px rgba(3,27,20,.16);
}
.trust-grid div:before{
  left:24%;
  right:24%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(126,239,176,.62),transparent);
}
.trust-grid div:last-child{
  border-right:1px solid rgba(180,238,205,.20)!important;
}

@media (max-width:980px){
  .trust-grid{gap:10px}
  .trust-grid div,
  .trust-grid div:first-child,
  .trust-grid div:nth-child(2),
  .trust-grid div:nth-child(-n+2){
    border:1px solid rgba(180,238,205,.20)!important;
    padding:20px!important;
  }
}
@media (max-width:640px){
  .trust-strip{padding:12px 0}
  .trust-grid{gap:9px}
  .trust-grid div,
  .trust-grid div:first-child,
  .trust-grid div:last-child{
    min-height:84px;
    border:1px solid rgba(180,238,205,.20)!important;
    padding:18px 14px!important;
  }
}


/* ===== Clean4U V4.2 mobile polish ===== */
/* Main CTA: the same emerald moving-light language used on “PRO”,
   translated to a button surface rather than text. */
.btn-hero-shine{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:#0b6648;
  background:linear-gradient(112deg,#0b513b 0%,#16845e 34%,#43b67d 50%,#117351 64%,#0a4b37 100%);
  background-size:220% 100%;
  box-shadow:0 12px 30px rgba(11,82,59,.20), inset 0 1px 0 rgba(255,255,255,.18);
  animation:ctaEmeraldShine 5.5s ease-in-out infinite;
}
.btn-hero-shine::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-45%;
  bottom:-45%;
  width:24%;
  left:-38%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  filter:blur(.2px);
  animation:ctaGlassSweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
.btn-hero-shine:hover{
  background:linear-gradient(112deg,#0a4a36 0%,#147a57 35%,#3daa74 51%,#0f684a 66%,#083f30 100%);
  background-size:220% 100%;
  box-shadow:0 15px 34px rgba(11,82,59,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
@keyframes ctaEmeraldShine{
  0%,72%,100%{background-position:0% 50%}
  84%{background-position:100% 50%}
}
@keyframes ctaGlassSweep{
  0%,73%{left:-38%;opacity:0}
  76%{opacity:.15}
  84%{left:118%;opacity:.55}
  88%,100%{left:118%;opacity:0}
}

/* Advantage band: make every panel feel like a finished card, especially on phones. */
.trust-grid strong,
.trust-grid span{
  width:100%;
  text-align:center;
}
.trust-grid strong{
  line-height:1.22;
  letter-spacing:-.01em;
}
.trust-grid span{
  align-items:center;
  line-height:1.38;
}

@media (max-width:980px){
  .trust-strip{padding:18px 0}
  .trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .trust-grid div,
  .trust-grid div:first-child,
  .trust-grid div:nth-child(2),
  .trust-grid div:nth-child(-n+2),
  .trust-grid div:last-child{
    box-sizing:border-box;
    width:100%;
    min-height:112px;
    padding:22px 18px!important;
    display:grid;
    grid-template-rows:auto auto;
    align-content:center;
    justify-items:center;
    row-gap:8px;
    border:1px solid rgba(181,239,206,.24)!important;
    border-radius:18px;
    background:linear-gradient(145deg,rgba(20,84,64,.96) 0%,rgba(10,57,44,.98) 100%)!important;
  }
  .trust-grid strong{
    min-height:0;
    font-size:15px;
  }
  .trust-grid span{
    min-height:0;
    max-width:245px;
    font-size:12px;
  }
}

@media (max-width:640px){
  .trust-strip{
    padding:8px 0;
    background:linear-gradient(180deg,
      #f5f8f6 0%,
      #e7efea 4px,
      #0a3528 10px,
      #0d4836 50%,
      #0a3528 calc(100% - 10px),
      #e7efea calc(100% - 4px),
      #f5f8f6 100%
    );
  }
  .trust-strip>.container{
    width:min(100% - 24px,520px);
  }
  .trust-grid{
    grid-template-columns:1fr;
    gap:12px;
    justify-items:center;
  }
  .trust-grid div,
  .trust-grid div:first-child,
  .trust-grid div:nth-child(2),
  .trust-grid div:nth-child(-n+2),
  .trust-grid div:last-child{
    width:100%;
    min-height:106px;
    padding:20px 22px!important;
    border-radius:18px;
    border:1px solid rgba(185,241,210,.26)!important;
    background:linear-gradient(145deg,#13533f 0%,#0a3b2d 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 9px 22px rgba(3,27,20,.15);
  }
  .trust-grid div:before{
    left:31%;
    right:31%;
  }
  .trust-grid strong{
    font-size:15.5px;
    line-height:1.2;
  }
  .trust-grid span{
    max-width:285px;
    font-size:12.5px;
    line-height:1.35;
  }
}

@media (prefers-reduced-motion:reduce){
  .btn-hero-shine,.btn-hero-shine::after{animation:none!important}
}


/* ===== Clean4U V4.3 WhatsApp CTA polish ===== */
.btn-whatsapp-main{
  position:relative;
  overflow:hidden;
  gap:10px;
  color:#fff;
  background:linear-gradient(135deg,#20bd5a 0%,#25D366 48%,#18ad4f 100%);
  border-color:#20bd5a;
  box-shadow:0 10px 26px rgba(37,211,102,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-whatsapp-main:hover{
  color:#fff;
  background:linear-gradient(135deg,#18ad4f 0%,#25D366 50%,#159746 100%);
  border-color:#18ad4f;
  box-shadow:0 14px 30px rgba(37,211,102,.30),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-whatsapp-main svg{
  width:21px;
  height:21px;
  flex:0 0 21px;
  fill:currentColor;
}

/* Floating WhatsApp: first prompt shortly after entry, then at a calmer interval. */
.floating-whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  width:58px;
  height:58px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  border:4px solid #fff;
  box-sizing:border-box;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transform-origin:right center;
  transition:width .88s cubic-bezier(.4,0,.2,1),transform .28s ease,box-shadow .28s ease;
}
.floating-whatsapp svg{
  position:absolute;
  left:50%;
  top:50%;
  width:29px;
  height:29px;
  min-width:29px;
  transform:translate(-50%,-50%);
  fill:currentColor;
  display:block;
  transition:left .88s cubic-bezier(.4,0,.2,1),transform .88s cubic-bezier(.4,0,.2,1);
}
.floating-whatsapp .wa-float-label{
  position:absolute;
  left:56px;
  top:50%;
  transform:translate(10px,-50%);
  opacity:0;
  pointer-events:none;
  font-size:14px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.01em;
  transition:opacity .42s ease .24s,transform .62s cubic-bezier(.4,0,.2,1) .16s;
}
.floating-whatsapp.is-expanded{width:246px}
.floating-whatsapp.is-expanded svg{
  left:16px;
  transform:translate(0,-50%);
}
.floating-whatsapp.is-expanded .wa-float-label{
  opacity:1;
  transform:translate(0,-50%);
}
.floating-whatsapp.is-suppressed{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.94)!important;transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s!important}
.floating-whatsapp:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
@media (max-width:640px){
  .floating-whatsapp{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
  }
  .floating-whatsapp svg{width:29px;height:29px;min-width:29px}
  .floating-whatsapp .wa-float-label{font-size:14px;left:55px}
  .floating-whatsapp.is-expanded{width:calc(100vw - 32px)}
  .floating-whatsapp.is-expanded svg{left:13px}
}
@media (prefers-reduced-motion:reduce){
  .floating-whatsapp,.floating-whatsapp svg,.floating-whatsapp .wa-float-label{transition:none!important}
}


.form-card-wrap{display:grid;gap:10px;align-self:start}
.form-card-wrap .form-section-label{margin:8px 0;padding-left:8px}
.contact-links{align-items:start}
.contact-link-block{display:flex;flex-direction:column;gap:10px;padding:8px 0 10px}.contact-email-block{display:flex;flex-direction:column;gap:10px}
.contact-link-block>span{font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900;margin:0}
.contact-link-block>strong{font-size:16px;line-height:1.22;color:var(--green-900);margin:0}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.contact-action-btn{display:inline-flex;align-items:center;justify-content:center;min-width:112px;height:40px;padding:0 18px;border-radius:999px;border:1px solid #cfe0d8;background:#fff;color:var(--green-900);text-decoration:none;font-size:14px;font-weight:900;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 18px rgba(8,39,31,.05);transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .22s ease,box-shadow .22s ease,border-color .22s ease}
.contact-action-btn:hover{background:#f6fbf8;border-color:#b8d5c7;box-shadow:0 8px 18px rgba(8,39,31,.06);transform:translateY(-1px)}
.contact-action-btn:active{transform:scale(.985)}
.contact-action-btn.whatsapp{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,#16bf57 0%,#25d366 38%,#58e78f 50%,#21cb61 63%,#14ac4f 100%);background-size:220% 100%;border-color:#a8dbbd;color:#083b2d;box-shadow:0 10px 24px rgba(18,168,79,.16), inset 0 1px 0 rgba(255,255,255,.26);animation:ctaEmeraldShine 5.5s ease-in-out infinite}
.contact-action-btn.whatsapp::after{content:'';position:absolute;z-index:0;top:-45%;bottom:-45%;width:24%;left:-38%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);filter:blur(.2px);animation:ctaGlassSweep 5.5s ease-in-out infinite;pointer-events:none}
.contact-action-btn.whatsapp span,.contact-action-btn.whatsapp{position:relative;z-index:1}
.contact-action-btn.whatsapp:hover{background:linear-gradient(112deg,#14b14f 0%,#21c95f 39%,#4dde84 51%,#1bb95a 64%,#129247 100%);background-size:220% 100%;box-shadow:0 12px 28px rgba(18,168,79,.22), inset 0 1px 0 rgba(255,255,255,.28)}
.contact-phone-block>strong,.contact-link-block:not(.contact-email-block)>strong{padding-top:2px}
.contact-phone-block .contact-actions{padding-top:2px}
.contact-email-block .contact-inline-link{padding:16px 20px 16px 28px}
.contact-inline-link{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:14px;background:rgba(19,118,82,.04);text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;box-sizing:border-box;overflow-wrap:anywhere;word-break:break-word;transition:background-color .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.contact-inline-link:hover{background:rgba(19,118,82,.07);transform:translateY(-1px)}
.contact-inline-link strong{font-size:15px;line-height:1.22;margin:0;color:var(--green-900);display:block}
.contact-inline-link small{font-size:12px;line-height:1.22;color:var(--muted);display:block}
@media (max-width:980px){.b2b-section{padding-bottom:36px}#proces.section{padding-top:44px;padding-bottom:42px}#vizionare.section{padding-top:42px;padding-bottom:14px}#despre.section{padding-bottom:42px}#servicii.section{padding-top:42px}.form-grid{gap:22px}#contact.section{padding-top:14px;padding-bottom:18px}.site-footer{margin-top:14px;padding-top:14px}.form-card-wrap{gap:22px}.form-card-wrap .form-section-label{margin:0;padding-left:10px}}
@media (max-width:640px){.b2b-section{padding-bottom:28px}#proces.section{padding-top:34px;padding-bottom:30px}#vizionare.section{padding-top:30px;padding-bottom:12px}#despre.section{padding-bottom:30px}#servicii.section{padding-top:30px}.form-grid{gap:18px}#contact.section{padding-top:12px;padding-bottom:24px}.site-footer{margin-top:0;padding-top:12px}.form-card-wrap{gap:18px}.form-card-wrap .form-section-label{margin:0;padding-left:10px}.contact-panel{gap:20px}.contact-links{gap:6px}.contact-link-block{padding:4px 0 8px}.contact-actions{gap:8px}.contact-action-btn{min-width:104px;height:40px;padding:0 16px}.contact-inline-link{padding:14px 16px}.contact-email-block .contact-inline-link{padding:16px 18px 16px 24px}.b2b-section + #proces,.section#despre + #servicii{margin-top:-8px}}



/* v4.30 - refine emerald band spacing and seamless transitions */
.trust-strip{
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  padding:18px 0;
  background:linear-gradient(180deg,
    #f4f7f5 0,
    #eef3f0 4px,
    #0c3b2d 10px,
    #0d4635 18px,
    #0d4635 calc(100% - 18px),
    #0c3b2d calc(100% - 10px),
    #eef3f0 calc(100% - 4px),
    #f4f7f5 100%
  );
}

@media (max-width:640px){
  .hero{
    padding-top:48px;
    padding-bottom:36px;
  }
  .trust-strip{
    padding:18px 0;
    margin-top:0;
    margin-bottom:0;
    background:linear-gradient(180deg,
      #f5f8f6 0,
      #edf3ef 3px,
      #0b3a2c 8px,
      #0d4635 14px,
      #0d4635 calc(100% - 14px),
      #0b3a2c calc(100% - 8px),
      #edf3ef calc(100% - 3px),
      #f5f8f6 100%
    );
  }
  .trust-strip>.container{
    width:min(100% - 28px,520px);
  }
  #despre.section{
    padding-top:34px;
    padding-bottom:30px;
  }
}



/* v4.31 - services section deep emerald backdrop with seamless transitions */
#servicii.section{
  padding-bottom:20px;
}
.services-stage{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin-top:24px;
  padding:18px max(20px, calc((100vw - 1160px) / 2)) 22px;
  overflow:hidden;
  background:linear-gradient(180deg,
    #f5f7f5 0%,
    #eef3f0 4px,
    #dfe7e2 8px,
    #0c3b2d 16px,
    #0d4635 22px,
    #0d4635 calc(100% - 30px),
    #124f3c calc(100% - 18px),
    #dfe7e2 calc(100% - 8px),
    #f5f7f5 100%
  );
  box-shadow:
    inset 0 20px 34px rgba(255,255,255,.10),
    inset 0 -16px 28px rgba(255,255,255,.06);
}
.services-stage:before,
.services-stage:after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
}
.services-stage:before{
  top:0;
  height:22px;
  background:linear-gradient(180deg,
    rgba(245,247,245,1) 0%,
    rgba(241,244,241,.92) 18%,
    rgba(227,235,230,.66) 42%,
    rgba(12,59,45,.92) 82%,
    rgba(13,70,53,1) 100%
  );
}
.services-stage:after{
  bottom:0;
  height:30px;
  background:linear-gradient(180deg,
    rgba(13,70,53,1) 0%,
    rgba(14,74,56,.92) 28%,
    rgba(205,216,210,.62) 78%,
    rgba(245,247,245,1) 100%
  );
}
.services-stage .service-grid{
  position:relative;
  z-index:1;
  max-width:1160px;
  margin:0 auto;
}
.b2b-section{
  padding-top:6px;
}
@media (max-width:980px){
  #servicii.section{padding-bottom:16px}
  .services-stage{margin-top:20px;padding-top:16px;padding-bottom:18px}
  .b2b-section{padding-top:4px}
}
@media (max-width:640px){
  #servicii.section{padding-top:24px;padding-bottom:12px}
  .services-stage{
    margin-top:18px;
    padding:14px 18px 16px;
    background:linear-gradient(180deg,
      #f5f7f5 0%,
      #edf2ef 3px,
      #dfe7e2 6px,
      #0b3a2c 12px,
      #0d4635 16px,
      #0d4635 calc(100% - 22px),
      #114d3a calc(100% - 14px),
      #dfe7e2 calc(100% - 6px),
      #f5f7f5 100%
    );
  }
  .services-stage:before{height:16px}
  .services-stage:after{height:22px}
  .b2b-section{padding-top:2px;padding-bottom:24px}
}



/* v4.32 - smoother services transitions and balanced spacing */
.services-stage{background:#0d4635!important;box-shadow:none!important}
.services-stage:before{
  height:42px!important;
  background:linear-gradient(180deg,
    rgba(245,247,245,1) 0%,
    rgba(245,247,245,.96) 12%,
    rgba(238,243,240,.84) 28%,
    rgba(210,222,216,.54) 48%,
    rgba(88,141,118,.34) 68%,
    rgba(13,70,53,.78) 86%,
    rgba(13,70,53,1) 100%
  )!important;
}
.services-stage:after{
  height:54px!important;
  background:linear-gradient(180deg,
    rgba(13,70,53,1) 0%,
    rgba(16,82,61,.96) 26%,
    rgba(29,102,76,.82) 46%,
    rgba(84,146,120,.44) 68%,
    rgba(216,226,220,.72) 88%,
    rgba(245,247,245,1) 100%
  )!important;
}
.services-stage .service-grid{gap:24px!important}
.b2b-section{
  padding-top:18px!important;
  background:linear-gradient(180deg,
    rgba(16,82,61,.18) 0%,
    rgba(45,116,88,.10) 22%,
    rgba(245,247,245,0) 58px
  )!important;
}
@media (max-width:980px){
  .services-stage{margin-top:24px!important;padding-top:22px!important;padding-bottom:24px!important}
  .services-stage:before{height:34px!important}
  .services-stage:after{height:44px!important}
  .b2b-section{padding-top:20px!important}
}
@media (max-width:640px){
  .services-stage{
    margin-top:26px!important;
    padding:26px 18px 28px!important;
  }
  .services-stage .service-grid{gap:26px!important}
  .services-stage:before{
    height:38px!important;
    background:linear-gradient(180deg,
      rgba(245,247,245,1) 0%,
      rgba(244,246,244,.96) 10%,
      rgba(236,241,238,.86) 24%,
      rgba(214,225,219,.60) 44%,
      rgba(112,159,138,.32) 68%,
      rgba(13,70,53,.76) 88%,
      rgba(13,70,53,1) 100%
    )!important;
  }
  .services-stage:after{
    height:48px!important;
    background:linear-gradient(180deg,
      rgba(13,70,53,1) 0%,
      rgba(18,88,66,.96) 22%,
      rgba(38,111,84,.86) 44%,
      rgba(92,149,125,.52) 68%,
      rgba(220,228,223,.74) 90%,
      rgba(245,247,245,1) 100%
    )!important;
  }
  .b2b-section{
    padding-top:24px!important;
    padding-bottom:24px!important;
    background:linear-gradient(180deg,
      rgba(17,83,61,.20) 0%,
      rgba(57,124,96,.10) 26%,
      rgba(245,247,245,0) 72px
    )!important;
  }
}



/* v4.33 - top short recessed, bottom long smooth white transition */
.services-stage{
  background:#0d4635!important;
  box-shadow:inset 0 16px 24px rgba(255,255,255,.08)!important;
}
.services-stage .service-grid{gap:26px!important}
.services-stage:before{
  height:20px!important;
  background:linear-gradient(180deg,
    rgba(245,247,245,1) 0%,
    rgba(242,245,243,.95) 24%,
    rgba(229,236,232,.72) 52%,
    rgba(94,143,122,.34) 82%,
    rgba(13,70,53,1) 100%
  )!important;
}
.services-stage:after{
  height:64px!important;
  background:linear-gradient(180deg,
    rgba(13,70,53,1) 0%,
    rgba(16,81,60,.95) 16%,
    rgba(32,100,77,.80) 34%,
    rgba(82,143,119,.46) 56%,
    rgba(188,204,196,.22) 78%,
    rgba(255,255,255,.86) 92%,
    rgba(255,255,255,1) 100%
  )!important;
}
.b2b-section{
  padding-top:24px!important;
  background:#fff!important;
}
@media (max-width:980px){
  .services-stage{margin-top:24px!important;padding-top:24px!important;padding-bottom:26px!important}
  .services-stage .service-grid{gap:24px!important}
  .services-stage:before{height:18px!important}
  .services-stage:after{height:56px!important}
  .b2b-section{padding-top:22px!important}
}
@media (max-width:640px){
  .services-stage{
    margin-top:26px!important;
    padding:26px 18px 28px!important;
    box-shadow:inset 0 14px 22px rgba(255,255,255,.08)!important;
  }
  .services-stage .service-grid{gap:26px!important}
  .services-stage:before{
    height:18px!important;
    background:linear-gradient(180deg,
      rgba(245,247,245,1) 0%,
      rgba(242,245,243,.96) 24%,
      rgba(230,237,233,.74) 54%,
      rgba(101,147,127,.34) 82%,
      rgba(13,70,53,1) 100%
    )!important;
  }
  .services-stage:after{
    height:62px!important;
    background:linear-gradient(180deg,
      rgba(13,70,53,1) 0%,
      rgba(16,82,61,.95) 14%,
      rgba(34,103,79,.82) 32%,
      rgba(84,144,120,.50) 56%,
      rgba(197,210,204,.24) 78%,
      rgba(255,255,255,.88) 92%,
      rgba(255,255,255,1) 100%
    )!important;
  }
  .b2b-section{
    padding-top:24px!important;
    padding-bottom:24px!important;
    background:#fff!important;
  }
}



/* ===== Clean4U V4.34 final fixes ===== */
/* Services backdrop: TOP = short/deep/recessed exactly like the first emerald band;
   BOTTOM = long, smooth, unrecessed fade into pure white. */
#servicii.section{padding-bottom:0!important;}
.services-stage{
  background:#0d4635!important;
  box-shadow:inset 0 13px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08)!important;
  margin-bottom:0!important;
  padding-top:46px!important;
  padding-bottom:154px!important;
}
.services-stage .service-grid{gap:26px!important;}
.services-stage:before{
  top:0!important;
  height:16px!important;
  background:linear-gradient(180deg,
    #f5f8f6 0%,
    #edf3ef 3px,
    #0a3528 10px,
    #0d4836 16px
  )!important;
  box-shadow:0 7px 14px rgba(4,34,25,.16)!important;
}
.services-stage:after{
  bottom:0!important;
  height:122px!important;
  background:linear-gradient(180deg,
    rgba(13,70,53,1) 0%,
    rgba(15,79,59,.98) 12%,
    rgba(25,94,70,.90) 27%,
    rgba(56,119,92,.70) 45%,
    rgba(102,153,131,.48) 60%,
    rgba(162,190,177,.28) 74%,
    rgba(221,231,226,.14) 87%,
    #ffffff 100%
  )!important;
  box-shadow:none!important;
}
.b2b-section{
  padding-top:28px!important;
  background:#fff!important;
}

/* One custom language dropdown on both desktop and mobile. */
.lang-switch{display:none!important;}
.mobile-lang-dropdown{
  display:flex!important;
  align-items:center;
  position:relative;
  z-index:260;
  flex:0 0 auto;
}
.lang-flag-img,.dial-flag-img{
  display:block;
  width:24px;
  height:18px;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(8,39,31,.10);
}
.lang-trigger-flag,.lang-option-flag,.dial-selected-flag,.dial-option-flag{
  display:flex!important;
  align-items:center;
  justify-content:center;
}
@media (min-width:981px){
  .brand{order:1;}
  .main-nav{order:2;margin-left:auto;}
  .mobile-lang-dropdown{order:3;margin-left:0;}
  .menu-toggle{order:4;}
  .mobile-lang-trigger{height:42px;min-width:88px;}
  .main-nav .btn-small.btn-hero-shine{overflow:hidden;}
}

/* Custom form dropdowns must overlay all following form controls. */
.visit-form{overflow:visible!important;}
.field-row{position:relative;overflow:visible!important;}
.form-custom-select{position:relative;z-index:30;}
.form-custom-select.is-open{z-index:700!important;}
.form-custom-select.is-open .form-select-menu{z-index:710!important;}

/* Contact desktop: give the long direct email enough room and keep it on one line. */
@media (min-width:981px){
  .contact-panel{grid-template-columns:.68fr 1.32fr!important;gap:42px!important;}
  .contact-links{grid-template-columns:minmax(135px,.85fr) minmax(270px,1.6fr) minmax(135px,.85fr)!important;gap:14px!important;}
  .contact-email-block .contact-inline-link strong{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    font-size:13.5px!important;
  }
}

@media (max-width:980px){
  .mobile-lang-dropdown{margin-left:auto;margin-right:0;}
  .services-stage{padding-top:44px!important;padding-bottom:142px!important;}
  .services-stage:after{height:114px!important;}
  .b2b-section{padding-top:26px!important;}
}
@media (max-width:640px){
  .services-stage{
    margin-top:26px!important;
    padding:44px 18px 146px!important;
    box-shadow:inset 0 13px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  .services-stage .service-grid{gap:26px!important;}
  .services-stage:before{
    height:16px!important;
    background:linear-gradient(180deg,#f5f8f6 0%,#edf3ef 3px,#0a3528 10px,#0d4836 16px)!important;
    box-shadow:0 7px 14px rgba(4,34,25,.16)!important;
  }
  .services-stage:after{
    height:118px!important;
    background:linear-gradient(180deg,
      rgba(13,70,53,1) 0%,
      rgba(15,79,59,.98) 12%,
      rgba(25,94,70,.90) 27%,
      rgba(56,119,92,.70) 45%,
      rgba(102,153,131,.48) 60%,
      rgba(162,190,177,.28) 74%,
      rgba(221,231,226,.14) 87%,
      #ffffff 100%
    )!important;
    box-shadow:none!important;
  }
  .b2b-section{padding-top:28px!important;padding-bottom:24px!important;background:#fff!important;}
  .contact-email-block .contact-inline-link strong{white-space:normal;overflow:visible;text-overflow:clip;font-size:15px!important;}
}



/* ===== Clean4U V4.35 — bottom services fade only =====
   Keep V4.34 TOP exactly as-is. Bottom becomes a long, flat, seamless fade to pure white. */
.services-stage{
  padding-bottom:300px!important;
}
.services-stage:after{
  bottom:0!important;
  height:270px!important;
  box-shadow:none!important;
  filter:none!important;
  background:linear-gradient(180deg,
    #0d4635 0%,
    #124d3b 10%,
    #1a5945 21%,
    #2b6854 33%,
    #477d69 45%,
    #679485 57%,
    #8eaca0 68%,
    #b4c6bf 78%,
    #d3ddda 86%,
    #e9eeec 93%,
    #f7f9f8 97%,
    #ffffff 100%
  )!important;
}
.b2b-section{
  padding-top:30px!important;
  background:#fff!important;
  box-shadow:none!important;
}
@media (max-width:980px){
  .services-stage{padding-bottom:270px!important;}
  .services-stage:after{height:242px!important;}
  .b2b-section{padding-top:28px!important;}
}
@media (max-width:640px){
  .services-stage{
    padding:44px 18px 252px!important;
  }
  .services-stage:after{
    height:226px!important;
    box-shadow:none!important;
    filter:none!important;
    background:linear-gradient(180deg,
      #0d4635 0%,
      #124d3b 10%,
      #1a5945 21%,
      #2b6854 33%,
      #477d69 45%,
      #679485 57%,
      #8eaca0 68%,
      #b4c6bf 78%,
      #d3ddda 86%,
      #e9eeec 93%,
      #f7f9f8 97%,
      #ffffff 100%
    )!important;
  }
  .b2b-section{
    padding-top:28px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
}



/* ===== Clean4U V4.36 — balance B2B card vertically in the pure-white zone ===== */
@media (min-width:981px){
  .b2b-section{
    padding-top:58px!important;
    padding-bottom:0!important;
    background:#fff!important;
  }
  #proces.section{
    padding-top:58px!important;
  }
}
@media (min-width:641px) and (max-width:980px){
  .b2b-section{
    padding-top:46px!important;
    padding-bottom:0!important;
    background:#fff!important;
  }
  #proces.section{
    padding-top:46px!important;
  }
}
@media (max-width:640px){
  .b2b-section{
    padding-top:34px!important;
    padding-bottom:0!important;
    background:#fff!important;
  }
  #proces.section{
    padding-top:34px!important;
  }
}



/* v4.37 - shiny process markers + aligned form section labels */
.process-step:before{
  background:linear-gradient(90deg,#0b513b 0%,#16845e 30%,#59d99b 48%,#a5f3c7 54%,#2ea572 64%,#0d5a41 100%)!important;
  background-size:240% 100%!important;
  animation:processLineShine 5.5s ease-in-out infinite;
}
.process-step span{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(112deg,#0b513b 0%,#16845e 34%,#43b67d 50%,#117351 64%,#0a4b37 100%)!important;
  background-size:220% 100%!important;
  box-shadow:0 8px 20px rgba(13,59,46,.20),inset 0 1px 0 rgba(255,255,255,.16)!important;
  animation:ctaEmeraldShine 5.5s ease-in-out infinite;
}
.process-step span:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-45%;
  bottom:-45%;
  width:28%;
  left:-42%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:processBadgeSweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes processLineShine{
  0%,72%,100%{background-position:0% 50%}
  84%{background-position:100% 50%}
}
@keyframes processBadgeSweep{
  0%,73%{left:-42%;opacity:0}
  76%{opacity:.15}
  84%{left:118%;opacity:.58}
  88%,100%{left:118%;opacity:0}
}
.form-grid>.form-copy>.eyebrow.emphasis,
.form-grid>.form-card-wrap>.form-section-label{
  margin-top:0!important;
}
.form-grid>.form-card-wrap>.form-section-label{
  margin-bottom:18px!important;
  padding-top:0!important;
  transform:translateY(-1px);
}
@media (max-width:980px){
  .form-grid>.form-card-wrap>.form-section-label{transform:none;margin-bottom:10px!important}
}
@media (prefers-reduced-motion:reduce){
  .process-step:before,.process-step span,.process-step span:after{animation:none!important}
}



/* v4.38 WhatsApp styling superseded by v4.43 clean block */
#vizionare.section{padding-bottom:6px!important}
#contact.section{padding-top:6px!important}
@media (max-width:980px){
  #vizionare.section{padding-bottom:5px!important}
  #contact.section{padding-top:5px!important}
}
@media (max-width:640px){
  #vizionare.section{padding-bottom:4px!important}
  #contact.section{padding-top:4px!important}
}
@media (prefers-reduced-motion:reduce){
  .btn-whatsapp-main,.btn-whatsapp-main::after{animation:none!important}
}





/* ===== V4.69 — mobile contact / careers polish ===== */

@media (max-width:640px){
  /* Give the fixed WhatsApp pill a cleaner breathing gap around process cards. */
  #proces .process-grid{
    gap:28px!important;
  }

  /* Align EMAIL with the rest of the contact column on mobile. */
  .contact-email-block > span,
  .contact-phone-block > span{
    padding-left:0!important;
    margin-left:0!important;
    text-align:left!important;
  }

  /* Keep the contact card content perfectly left-aligned on phones. */
  .contact-email-block,
  .contact-phone-block{
    align-items:stretch!important;
  }
}

/* Careers upload: remove the ugly blue mobile tap/selection flash and keep it smooth. */
.cv-upload,
.cv-upload *,
.contact-copy-phone,
.contact-copy-phone *{
  -webkit-tap-highlight-color:transparent!important;
}

.cv-upload,
.cv-upload *,
.cv-upload-copy,
.cv-upload-copy *,
.cv-file-name{
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
}

.cv-upload::selection,
.cv-upload *::selection{
  background:transparent!important;
  color:inherit!important;
}

.cv-upload:focus-within{
  background:rgba(30,143,98,.075)!important;
  border-color:rgba(18,112,78,.42)!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.12), 0 8px 18px rgba(8,39,31,.045)!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}

.cv-upload:active{
  transform:scale(.995)!important;
}

/* Cleaner copy bubble. */
.copy-phone-feedback{
  letter-spacing:0!important;
}



/* ===== V5.38 — direct form submission + inline confirmation ===== */
.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.form-send-status,
.careers-status{
  display:none;
  margin:14px 0 0;
  padding:13px 15px;
  border-radius:14px;
  font-size:12px;
  line-height:1.45;
  font-weight:750;
  text-align:left;
}
.form-send-status.is-visible,
.careers-status.is-visible{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  opacity:1!important;
  transform:none!important;
}
.form-send-status::before,
.careers-status::before{
  content:'';
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
  margin-top:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:12px 12px;
}
.form-send-status.is-success,
.careers-status.is-success{
  color:#14533f;
  background:#edf8f2;
  border:1px solid #bfe3ce;
}
.form-send-status.is-success::before,
.careers-status.is-success::before{
  background-color:#2d8b63;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.3 11.5 13 4.8' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form-send-status.is-error,
.careers-status.is-error{
  color:#8b2f2f;
  background:#fff3f3;
  border:1px solid #edcaca;
}
.form-send-status.is-error::before,
.careers-status.is-error::before{
  background-color:#b94a4a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 12h.01' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-submit.is-sending,
.careers-submit.is-sending{
  pointer-events:none;
  opacity:.72;
  cursor:wait;
}

/* V5.60 — temporary GDPR/privacy lock for both form submissions */
.form-submit.is-temporarily-disabled,
.careers-submit.is-temporarily-disabled,
.form-submit:disabled,
.careers-submit:disabled{
  pointer-events:none!important;
  cursor:not-allowed!important;
  opacity:.48!important;
  filter:saturate(.55)!important;
  transform:none!important;
  box-shadow:none!important;
}



/* ===== V6.11 — mobile contact-form label spacing: one source of truth =====
   On phones, the wrapper grid gap is the only vertical spacing between the
   “Formular de contact” label and the form. This prevents the old gap +
   margin-bottom values from stacking. The same 18px rhythm is used above
   and below the label. */
@media (max-width:640px){
  .form-grid{gap:18px!important;}
  .form-card-wrap{gap:18px!important;}
  .form-grid>.form-card-wrap>.form-section-label{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    transform:none!important;
  }
}


/* ===== Source style block 2: anonymous ===== */

/* V4.11 — searchable international dial-code picker */
.phone-field{position:relative;display:grid;gap:7px;margin-bottom:16px;min-width:0}
.phone-field>label{font-size:12px;font-weight:800;color:#405048}
.phone-input-group{position:relative;display:flex;width:100%;border:1px solid #cedbd4;background:#fbfdfc;border-radius:12px;overflow:visible;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.phone-input-group:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.13);background:#fff}
.phone-input-group input[type=tel]{flex:1;min-width:0;border:0!important;border-radius:0 12px 12px 0!important;background:transparent!important;box-shadow:none!important;padding:13px 14px!important}
/* Custom in-page dropdowns for form fields */
.form-custom-select{position:relative;width:100%;z-index:24}
.form-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:0!important;bottom:0!important;padding:0!important;border:0!important}
.form-select-trigger{width:100%;min-height:46px;border:1px solid #cedbd4;background:#fbfdfc;border-radius:12px;padding:0 13px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .18s ease}
.form-select-trigger:hover{border-color:#adcdbd;background:#fff}
.form-select-trigger[aria-expanded="true"]{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.13);background:#fff}
.form-select-trigger:active{transform:scale(.995)}
.form-select-trigger:focus-visible{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.16)}
.form-custom-select.is-invalid .form-select-trigger{border-color:#c66;box-shadow:0 0 0 3px rgba(190,70,70,.10)}
.form-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-select-value.is-placeholder{color:#7b8882}
.form-select-chevron{width:17px;height:17px;flex:0 0 auto;color:#688078;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.form-select-trigger[aria-expanded="true"] .form-select-chevron{transform:rotate(180deg)}
.form-select-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:180;background:rgba(255,255,255,.99);border:1px solid rgba(16,106,75,.15);border-radius:15px;padding:6px;box-shadow:0 20px 50px rgba(7,48,35,.15);transform-origin:top center;animation:formSelectIn .2s cubic-bezier(.2,.8,.2,1);max-height:310px;overflow-y:auto;overscroll-behavior:contain}
.form-custom-select[data-custom-select="service"] .form-select-menu{padding-right:18px;scrollbar-width:none;-ms-overflow-style:none}
.form-custom-select[data-custom-select="service"] .form-select-menu::-webkit-scrollbar{width:0;height:0}
.other-service-field{max-height:0;opacity:0;overflow:hidden;transform:translateY(-10px);margin:-4px 0 0;pointer-events:none;transition:max-height .48s cubic-bezier(.2,.8,.2,1),opacity .28s ease,transform .48s cubic-bezier(.2,.8,.2,1),margin .48s cubic-bezier(.2,.8,.2,1)}
.other-service-field.is-visible{max-height:190px;opacity:1;transform:translateY(0);margin:10px 0 18px;pointer-events:auto}
.other-service-card{display:grid!important;gap:9px!important;margin:0!important;padding:16px 16px 17px!important;border:1px solid rgba(18,145,95,.28);border-left:4px solid #12865d;border-radius:16px;background:linear-gradient(135deg,rgba(230,247,238,.94),rgba(246,252,248,.98));box-shadow:0 10px 25px rgba(8,75,54,.07),inset 0 1px 0 rgba(255,255,255,.8)}
.other-service-card .other-service-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#0b6849;letter-spacing:.015em}
.other-service-card .other-service-label:before{content:'+';width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#1a9a6b,#0d6c4e);color:#fff;font-size:15px;line-height:1;box-shadow:0 4px 10px rgba(8,75,54,.16)}
.other-service-card textarea{min-height:78px;background:rgba(255,255,255,.92)!important;border-color:rgba(18,134,93,.26)!important;resize:vertical}
.other-service-card textarea:focus{background:#fff!important;border-color:var(--green-600)!important;box-shadow:0 0 0 3px rgba(62,170,120,.13)!important}

.service-scroll-track{position:absolute;z-index:190;right:7px;top:calc(100% + 16px);width:5px;height:286px;border-radius:999px;background:rgba(14,95,68,.11);pointer-events:none;opacity:0;transform:scaleY(.96);transform-origin:center;transition:opacity .18s ease,transform .18s ease}
.service-scroll-track.is-visible{opacity:1;transform:scaleY(1)}
.service-scroll-thumb{position:absolute;left:0;right:0;top:var(--service-thumb-top,0px);height:var(--service-thumb-height,64px);border-radius:999px;background:linear-gradient(180deg,#1a9a6b,#0d6c4e);box-shadow:0 1px 4px rgba(8,75,54,.22);transition:top .08s linear}
@media(max-width:640px){.service-scroll-track{height:256px;right:7px;top:calc(100% + 16px)}}
.form-select-menu[hidden]{display:none}
.form-select-option{width:100%;border:0;background:transparent;border-radius:10px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#26332e;font:inherit;font-size:13px;font-weight:750;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s ease,transform .16s ease,color .16s ease}
.form-select-option:hover,.form-select-option:focus-visible{background:#eff8f3;color:var(--green-900);outline:none}
.form-select-option:active{transform:scale(.992)}
.form-select-option.is-selected{background:#e6f5ed;color:var(--green-900)}
.form-select-option.is-selected:after{content:'✓';font-size:13px;font-weight:950;color:var(--green-700)}
@keyframes formSelectIn{from{opacity:0;transform:translateY(-5px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){.form-select-menu{max-height:280px}.form-select-option{padding:12px}}
.dial-picker{position:relative;flex:0 0 128px;z-index:35}
.dial-trigger{width:100%;height:100%;min-height:46px;border:0;border-right:1px solid #d8e2dd;background:linear-gradient(180deg,#f6faf8,#eef7f2);border-radius:11px 0 0 11px;padding:0 10px;display:grid;grid-template-columns:26px 1fr 15px;align-items:center;gap:6px;color:var(--green-900);font:inherit;font-weight:850;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .22s ease,color .22s ease}
.dial-trigger:hover,.dial-trigger[aria-expanded="true"]{background:#e8f5ee}
.dial-selected-flag{font-size:20px;line-height:1;filter:saturate(.92)}
.dial-selected-code{text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.dial-chevron{width:15px;height:15px;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.dial-trigger[aria-expanded="true"] .dial-chevron{transform:rotate(180deg)}
.dial-menu{position:absolute;left:0;top:calc(100% + 9px);width:min(420px,calc(100vw - 42px));background:rgba(255,255,255,.985);border:1px solid rgba(16,106,75,.16);border-radius:18px;box-shadow:0 24px 60px rgba(7,48,35,.18);overflow:hidden;z-index:120;transform-origin:top left;animation:dialMenuIn .2s cubic-bezier(.2,.8,.2,1)}
@keyframes dialMenuIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.dial-search{margin:12px;display:flex;align-items:center;gap:9px;border:1px solid #d8e4de;background:#f7fbf9;border-radius:12px;padding:0 12px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.dial-search:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(62,170,120,.11);background:#fff}
.dial-search svg{width:18px;height:18px;color:#668079;flex:0 0 auto}
.dial-search input{width:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:11px 0!important;font-size:14px!important;outline:none!important}
.dial-list{max-height:286px;overflow:auto;padding:0 7px 7px;scrollbar-width:thin;scrollbar-color:#b7c9c0 transparent}
.dial-group-title{padding:9px 10px 5px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7b8b84;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(5px);z-index:1}
.dial-option{width:100%;border:0;background:transparent;border-radius:11px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;color:#26332e;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s ease,transform .16s ease}
.dial-option:hover,.dial-option:focus-visible{background:#eff8f3;outline:none}
.dial-option:active{transform:scale(.99)}
.dial-option.is-selected{background:#e6f5ed;color:var(--green-900)}
.dial-option-flag{font-size:20px;line-height:1}
.dial-option-name{font-size:13px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-option-code{font-size:12px;font-weight:900;color:#557069;font-variant-numeric:tabular-nums;white-space:nowrap}
.dial-empty{padding:22px 14px;text-align:center;color:#73827c;font-size:13px}
.dial-custom-wrap{border-top:1px solid #e6eeea;padding:7px;background:#fbfdfc}
.dial-custom-toggle{width:100%;border:0;background:transparent;border-radius:11px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:10px;color:#31433b;font:inherit;cursor:pointer;text-align:left;transition:background .16s ease}
.dial-custom-toggle:hover{background:#eff8f3}
.dial-custom-title{font-size:13px;font-weight:800}
.dial-custom-plus{font-size:17px;font-weight:900;color:var(--green-700)}
.dial-custom-editor{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 8px 5px}
.dial-custom-input-wrap{display:flex;align-items:center;border:1px solid #cedbd4;background:#fff;border-radius:10px;padding-left:11px;color:var(--green-900);font-weight:900}
.dial-custom-input{width:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:9px 8px!important;font-weight:850!important;letter-spacing:.04em}
.dial-custom-apply{border:0;border-radius:10px;background:linear-gradient(135deg,#137653,#0b5f43);color:#fff;padding:0 13px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 7px 18px rgba(13,117,82,.16);transition:transform .16s ease,box-shadow .16s ease}
.dial-custom-apply:active{transform:scale(.97);box-shadow:0 4px 10px rgba(13,117,82,.13)}
@media(max-width:520px){.dial-picker{flex-basis:122px}.dial-menu{position:fixed;left:14px;right:14px;top:auto;bottom:16px;width:auto;max-height:min(70vh,530px);border-radius:22px;transform-origin:bottom center;animation:dialMenuMobileIn .24s cubic-bezier(.2,.8,.2,1)}.dial-list{max-height:min(43vh,310px)}@keyframes dialMenuMobileIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}}

/* ===== V4.43 — clean two-stage WhatsApp shine (no conflicting !important animation properties) ===== */
.btn-whatsapp-main,
.contact-action-btn.whatsapp{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(112deg,
    #119744 0%,
    #20bf59 33%,
    #55e98c 49%,
    #25d366 57%,
    #18ae50 70%,
    #0f843c 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  border-color:#1eb857;
  box-shadow:0 10px 26px rgba(37,211,102,.22),inset 0 1px 0 rgba(255,255,255,.22);
  animation:ctaEmeraldShine 5.5s ease-in-out infinite;
}
.btn-whatsapp-main::after,
.contact-action-btn.whatsapp::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-45%;
  bottom:-45%;
  width:24%;
  left:-38%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.08) 22%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.08) 78%,
    transparent 100%);
  filter:blur(.2px);
  pointer-events:none;
  animation:ctaGlassSweep 5.5s ease-in-out infinite;
}
.btn-whatsapp-main > *,
.contact-action-btn.whatsapp > *{
  position:relative;
  z-index:3;
}
.btn-whatsapp-main:hover,
.contact-action-btn.whatsapp:hover{
  color:#fff;
}
.contact-action-btn.whatsapp span{
  color:#fff;
  font-family:inherit;
  font-style:normal;
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
}

/* Floating WhatsApp: exact width from rendered label; equal outer margins. */
.floating-whatsapp{
  --wa-expanded-width:285px;
}
.floating-whatsapp.is-expanded{
  width:min(var(--wa-expanded-width),calc(100vw - 20px))!important;
}
.floating-whatsapp.is-expanded svg{
  left:14px!important;
  transform:translate(0,-50%)!important;
}
.floating-whatsapp .wa-float-label{
  left:57px!important;
  right:14px!important;
  width:auto!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:left!important;
}
@media(max-width:640px){
  .floating-whatsapp{right:10px!important}
  .floating-whatsapp.is-expanded svg{left:12px!important}
  .floating-whatsapp .wa-float-label{
    left:54px!important;
    right:12px!important;
    font-size:13.5px!important;
  }
}


/* ===== V4.44 — clearer email cards + aligned EMAIL heading ===== */
.contact-email-block > span{
  padding-left:28px;
}
.contact-email-block .contact-inline-link{
  background:linear-gradient(135deg,
    rgba(25,130,90,.085) 0%,
    rgba(25,130,90,.060) 100%);
  border:1px solid rgba(18,112,78,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 5px 14px rgba(8,39,31,.025);
}
.contact-email-block .contact-inline-link:hover{
  background:linear-gradient(135deg,
    rgba(25,130,90,.115) 0%,
    rgba(25,130,90,.080) 100%);
  border-color:rgba(18,112,78,.11);
}
@media(max-width:640px){
  .contact-email-block > span{
    padding-left:24px;
  }
}


/* ===== V4.45 — desktop contact rhythm + true two-phase process badge animation ===== */

/* Desktop contact: more breathing room and shared vertical rhythm. */
@media (min-width:981px){
  .contact-panel{
    grid-template-columns:.55fr 1.45fr!important;
    gap:56px!important;
  }

  .contact-links{
    grid-template-columns:minmax(180px,.9fr) minmax(330px,1.45fr) minmax(190px,.9fr)!important;
    column-gap:32px!important;
    row-gap:0!important;
    align-items:start!important;
  }

  .contact-phone-block,
  .contact-email-block{
    display:grid!important;
    grid-template-rows:18px 30px 56px 56px;
    row-gap:11px!important;
    align-content:start;
    padding:8px 0 10px!important;
  }

  .contact-phone-block > span,
  .contact-email-block > span{
    grid-row:1;
    align-self:start;
  }

  .contact-phone-block > strong{
    grid-row:2;
    align-self:start;
    padding-top:0!important;
    margin:0!important;
  }

  /* Let the two phone action buttons become rows 3 and 4 of the same grid. */
  .contact-phone-block .contact-actions{
    display:contents!important;
  }

  .contact-phone-block .contact-action-btn{
    width:100%!important;
    min-width:0!important;
    height:56px!important;
    margin:0!important;
    padding:0 18px!important;
    box-sizing:border-box;
  }

  .contact-email-block > span{
    padding-left:28px!important;
  }

  .contact-email-block .contact-inline-link{
    min-height:56px!important;
    margin:0!important;
    padding:12px 20px 12px 28px!important;
    justify-content:center!important;
    box-sizing:border-box;
  }

  .contact-email-block .contact-inline-link:nth-of-type(1){
    grid-row:3;
  }

  .contact-email-block .contact-inline-link:nth-of-type(2){
    grid-row:4;
  }

  .contact-email-block .contact-inline-link strong{
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:14px!important;
  }

  .contact-link-block:not(.contact-phone-block):not(.contact-email-block){
    padding:8px 0 10px!important;
  }
}

/* Process badges: two clearly separated motions.
   Phase 1 = emerald background travel.
   Phase 2 = glass highlight sweeps across afterwards. */
@keyframes processBadgeBgPhase{
  0%,70%,100%{background-position:0% 50%}
  80%{background-position:100% 50%}
  84%{background-position:100% 50%}
  88%{background-position:0% 50%}
}
@keyframes processBadgeGlassPhase{
  0%,84%{left:-44%;opacity:0}
  86%{left:-44%;opacity:.16}
  91%{opacity:.62}
  95%{left:118%;opacity:.58}
  98%,100%{left:118%;opacity:0}
}

.process-step span{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(112deg,
      #0a4936 0%,
      #126e50 29%,
      #3eaa75 47%,
      #72dba4 53%,
      #21875f 67%,
      #093f30 100%)!important;
  background-size:230% 100%!important;
  background-position:0% 50%;
  animation:processBadgeBgPhase 5.5s ease-in-out infinite!important;
}

/* The previous pseudo-element sat behind the badge background.
   Keep it above the background so the second movement is actually visible. */
.process-step span::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  top:-48%!important;
  bottom:-48%!important;
  width:30%!important;
  left:-44%!important;
  transform:skewX(-18deg)!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 22%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.08) 78%,
    rgba(255,255,255,0) 100%)!important;
  mix-blend-mode:screen;
  pointer-events:none!important;
  animation:processBadgeGlassPhase 5.5s ease-in-out infinite!important;
}

@media (prefers-reduced-motion:reduce){
  .process-step span,
  .process-step span::after{
    animation:none!important;
  }
}


/* ===== V4.46 — contact restructure + robust two-stage numbered badge animation ===== */

/* Contact intro */
.contact-intro .eyebrow{
  margin-bottom:12px!important;
}
.contact-schedule{
  margin:0!important;
  max-width:260px;
  font-size:26px!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
  color:var(--ink)!important;
}

/* "Formular de contact" fills the visual slot opposite the phone number. */
.contact-form-jump{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  width:max-content!important;
  max-width:100%;
  padding:0 15px!important;
  margin:0!important;
  border:1px solid rgba(18,112,78,.16)!important;
  border-radius:999px!important;
  background:rgba(25,130,90,.065)!important;
  color:var(--green-900)!important;
  text-decoration:none!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:background .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
.contact-form-jump:hover{
  background:rgba(25,130,90,.105)!important;
  border-color:rgba(18,112,78,.24)!important;
  transform:translateY(-1px);
}
.contact-form-jump:active{
  transform:scale(.985);
}

/* Desktop contact becomes two roomy columns: phone + email.
   Every item is put on the same four-row rhythm. */
@media (min-width:981px){
  .contact-panel{
    grid-template-columns:minmax(200px,.42fr) minmax(0,1.58fr)!important;
    gap:54px!important;
    align-items:start!important;
  }

  .contact-links{
    grid-template-columns:minmax(200px,.82fr) minmax(360px,1.18fr)!important;
    column-gap:54px!important;
    row-gap:0!important;
    align-items:start!important;
  }

  .contact-phone-block,
  .contact-email-block{
    display:grid!important;
    grid-template-rows:18px 36px 56px 56px!important;
    row-gap:11px!important;
    align-content:start!important;
    padding:8px 0 10px!important;
    min-width:0!important;
  }

  .contact-phone-block > span,
  .contact-email-block > span{
    grid-row:1!important;
    align-self:start!important;
    padding:0!important;
    margin:0!important;
  }

  .contact-phone-block > strong{
    grid-row:2!important;
    align-self:center!important;
    padding:0!important;
    margin:0!important;
    font-size:17px!important;
    line-height:1!important;
  }

  .contact-email-block .contact-form-jump{
    grid-row:2!important;
    align-self:center!important;
    justify-self:start!important;
  }

  .contact-phone-block .contact-actions{
    display:contents!important;
  }

  .contact-phone-block .contact-action-btn{
    width:100%!important;
    min-width:0!important;
    height:56px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .contact-email-block .contact-inline-link{
    min-height:56px!important;
    margin:0!important;
    padding:12px 22px 12px 26px!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }

  .contact-email-block .contact-inline-link:nth-of-type(2){
    grid-row:3!important;
  }
  .contact-email-block .contact-inline-link:nth-of-type(3){
    grid-row:4!important;
  }

  .contact-email-block .contact-inline-link strong{
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:14px!important;
  }
}

/* Mobile/tablet: keep the natural stacked layout and a compact schedule. */
@media (max-width:980px){
  .contact-schedule{
    max-width:none;
    font-size:24px!important;
  }
  .contact-form-jump{
    margin:8px 0!important;
  }
}
@media (max-width:640px){
  .contact-schedule{
    font-size:22px!important;
  }
}

/* Numbered PROCESS badges:
   One element, two background layers, one keyframe.
   This avoids all earlier pseudo-element / z-index conflicts.

   Layer 1 = narrow white glass stripe (second movement)
   Layer 2 = emerald gradient body (first movement)
*/
@keyframes processBadgeTwoStage{
  0%,64%{
    background-position:-95% 50%, 0% 50%;
  }
  /* Movement 1: emerald body travels */
  76%{
    background-position:-95% 50%, 100% 50%;
  }
  80%{
    background-position:-95% 50%, 100% 50%;
  }
  /* Movement 2: glass stripe crosses AFTER the body movement */
  92%{
    background-position:185% 50%, 100% 50%;
  }
  96%{
    background-position:185% 50%, 0% 50%;
  }
  100%{
    background-position:-95% 50%, 0% 50%;
  }
}

.process-step span{
  position:relative!important;
  overflow:hidden!important;
  color:#fff!important;
  background-image:
    linear-gradient(108deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 31%,
      rgba(255,255,255,.12) 42%,
      rgba(255,255,255,.66) 50%,
      rgba(255,255,255,.12) 58%,
      rgba(255,255,255,0) 69%,
      rgba(255,255,255,0) 100%),
    linear-gradient(112deg,
      #084531 0%,
      #11694c 28%,
      #39a36f 44%,
      #78dda8 52%,
      #238860 65%,
      #073a2b 100%)!important;
  background-size:42% 220%, 235% 100%!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:-95% 50%,0% 50%;
  box-shadow:
    0 8px 20px rgba(13,59,46,.20),
    inset 0 1px 0 rgba(255,255,255,.17)!important;
  animation:processBadgeTwoStage 5.5s cubic-bezier(.4,0,.2,1) infinite!important;
}

/* Disable the old generated shine layer entirely so it cannot fight the new animation. */
.process-step span::after{
  content:none!important;
  animation:none!important;
}

/* Do not suppress these badges through older reduced-motion overrides.
   The site's other animation rules remain untouched. */
@media (prefers-reduced-motion:reduce){
  .process-step span{
    animation:processBadgeTwoStage 5.5s cubic-bezier(.4,0,.2,1) infinite!important;
  }
}


/* ===== V4.47 — isolated process animation + copy-phone bubble ===== */

/* Schedule: no separator; two deliberate lines. */
.contact-schedule{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.contact-schedule > span{
  display:block!important;
}

/* Phone number now mirrors the "Formular de contact" bubble. */
.contact-copy-phone{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  min-height:34px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:0 15px!important;
  margin:0!important;
  border:1px solid rgba(18,112,78,.16)!important;
  border-radius:999px!important;
  background:rgba(25,130,90,.065)!important;
  color:var(--green-900)!important;
  font:inherit!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:background .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
.contact-copy-phone:hover{
  background:rgba(25,130,90,.105)!important;
  border-color:rgba(18,112,78,.24)!important;
  transform:translateY(-1px)!important;
}
.contact-copy-phone:active{
  transform:scale(.985)!important;
}
.copy-phone-feedback{
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  transform:translate(-50%,5px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:8px;
  background:#0b4c38;
  color:#fff;
  font-size:10px;
  font-weight:850;
  box-shadow:0 6px 14px rgba(8,39,31,.16);
  transition:opacity .18s ease,transform .18s ease;
}
.contact-copy-phone.is-copied .copy-phone-feedback{
  opacity:1;
  transform:translate(-50%,0);
}

/* Keep the phone bubble and form-jump bubble on the same desktop row and scale. */
@media (min-width:981px){
  .contact-phone-block .contact-copy-phone{
    grid-row:2!important;
    align-self:center!important;
    justify-self:start!important;
  }
  .contact-email-block .contact-form-jump{
    grid-row:2!important;
    align-self:center!important;
    justify-self:start!important;
  }
  .contact-phone-block,
  .contact-email-block{
    grid-template-rows:18px 36px 56px 56px!important;
  }
}

/* ----------------------------------------------
   PROCESS 01–04: fresh, isolated two-motion setup
   ---------------------------------------------- */

/* Base badge. Old .process-step span rules may still exist, but this selector is
   more specific and all animation is moved to two separate pseudo-elements. */
.process-step .process-number{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
  overflow:hidden!important;
  background:#0b513b!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(13,59,46,.20),inset 0 1px 0 rgba(255,255,255,.16)!important;
  animation:none!important;
}

.process-step .process-number > b{
  position:relative!important;
  z-index:5!important;
  display:block!important;
  color:#fff!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.10);
}

/* Motion 1: emerald gradient visibly travels across the whole badge. */
.process-step .process-number::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  top:0!important;
  bottom:0!important;
  left:-78%!important;
  width:190%!important;
  border-radius:inherit!important;
  background:linear-gradient(112deg,
    #084531 0%,
    #0c5940 18%,
    #17805b 36%,
    #56c88e 50%,
    #87e3b1 56%,
    #278f66 68%,
    #0a4936 84%,
    #073a2b 100%)!important;
  transform:translateX(0)!important;
  opacity:1!important;
  pointer-events:none!important;
  animation:processEmeraldPass 5.8s cubic-bezier(.35,0,.22,1) infinite!important;
}

/* Motion 2: distinct white glass strip, starts AFTER the emerald movement. */
.process-step .process-number::after{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  top:-40%!important;
  bottom:-40%!important;
  left:-52%!important;
  width:24%!important;
  border-radius:50%!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.10) 74%,
    rgba(255,255,255,0) 100%)!important;
  transform:skewX(-18deg)!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:processGlassPass 5.8s cubic-bezier(.35,0,.22,1) infinite!important;
}

@keyframes processEmeraldPass{
  0%,59%{
    transform:translateX(0);
  }
  72%{
    transform:translateX(42%);
  }
  78%{
    transform:translateX(42%);
  }
  79%{
    opacity:1;
  }
  80%{
    opacity:0;
    transform:translateX(0);
  }
  82%,100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes processGlassPass{
  0%,81%{
    left:-52%;
    opacity:0;
  }
  83%{
    left:-52%;
    opacity:.18;
  }
  91%{
    left:118%;
    opacity:.68;
  }
  95%,100%{
    left:118%;
    opacity:0;
  }
}

/* Explicitly beat all older reduced-motion rules for these four badges only. */
@media (prefers-reduced-motion:reduce){
  .process-step .process-number::before{
    animation:processEmeraldPass 5.8s cubic-bezier(.35,0,.22,1) infinite!important;
  }
  .process-step .process-number::after{
    animation:processGlassPass 5.8s cubic-bezier(.35,0,.22,1) infinite!important;
  }
}


/* ===== V4.48 — verified isolated process animation + contact polish ===== */

/* Requested black labels. */
.contact-phone-block > span,
.contact-email-block > span{
  color:var(--ink)!important;
}

/* Same dark tone as the "Formular de contact" bubble. */
.contact-copy-phone,
.contact-copy-phone .copy-phone-value{
  color:var(--green-900)!important;
}

/* Smoother, clearer clipboard confirmation. */
.copy-phone-feedback{
  bottom:calc(100% + 11px)!important;
  min-width:max-content!important;
  padding:9px 13px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0a4634,#12694d)!important;
  color:#fff!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  box-shadow:0 12px 30px rgba(8,39,31,.22)!important;
  opacity:0!important;
  transform:translate(-50%,10px) scale(.92)!important;
  filter:blur(2px)!important;
  transition:
    opacity .30s cubic-bezier(.2,.8,.2,1),
    transform .38s cubic-bezier(.16,1,.3,1),
    filter .30s ease!important;
}
.contact-copy-phone.is-copied{
  background:rgba(25,130,90,.105)!important;
  border-color:rgba(18,112,78,.25)!important;
  box-shadow:0 0 0 3px rgba(45,139,99,.07)!important;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .22s ease!important;
}
.contact-copy-phone.is-copied .copy-phone-feedback{
  opacity:1!important;
  transform:translate(-50%,0) scale(1)!important;
  filter:blur(0)!important;
}

/* ------------------------------------------------------------------
   PROCESS 01–04
   Old pseudo-element animations are completely disabled.
   Animation now lives on NEW child layers that no previous CSS targets.
   ------------------------------------------------------------------ */
.process-step .process-number{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:13px!important;
  background:#0b513b!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(13,59,46,.20),inset 0 1px 0 rgba(255,255,255,.18)!important;
  animation:none!important;
}

/* Remove every legacy generated animation layer. */
.process-step .process-number::before,
.process-step .process-number::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* Movement 1 — EXACT ctaEmeraldShine keyframes used by the working hero CTA. */
.process-badge-bg{
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    112deg,
    #0b513b 0%,
    #16845e 34%,
    #43b67d 50%,
    #117351 64%,
    #0a4b37 100%
  );
  background-size:220% 100%;
  background-position:0% 50%;
  pointer-events:none;
  animation:ctaEmeraldShine 5.5s ease-in-out infinite;
}

/* Movement 2 — EXACT ctaGlassSweep keyframes used by the working hero CTA. */
.process-badge-glass{
  position:absolute;
  z-index:3;
  top:-45%;
  bottom:-45%;
  width:24%;
  left:-38%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  filter:blur(.2px);
  opacity:0;
  pointer-events:none;
  animation:ctaGlassSweep 5.5s ease-in-out infinite;
}

.process-step .process-number > b{
  position:relative!important;
  z-index:5!important;
  display:block!important;
  color:#fff!important;
  font:inherit!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
  text-shadow:0 1px 2px rgba(0,0,0,.10);
}


/* ===== V4.49 — services top transition: hard white→green + recessed shadow only ===== */

/* Keep the service field itself solid emerald. */
.services-stage{
  background:#0d4635!important;
  box-shadow:
    inset 0 18px 20px -18px rgba(0,24,17,.78),
    inset 0 7px 10px -8px rgba(0,0,0,.28)!important;
}

/* Remove ONLY the upper color gradient. The bottom transition stays untouched. */
.services-stage::before{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Same idea on tablet/mobile: direct edge, slightly tighter shadow. */
@media(max-width:980px){
  .services-stage{
    box-shadow:
      inset 0 17px 19px -17px rgba(0,24,17,.76),
      inset 0 6px 9px -7px rgba(0,0,0,.27)!important;
  }
}

@media(max-width:640px){
  .services-stage{
    box-shadow:
      inset 0 15px 18px -16px rgba(0,24,17,.74),
      inset 0 6px 9px -7px rgba(0,0,0,.25)!important;
  }
}


/* ===== V4.50 — same hard recessed transition for trust strip + footer ===== */

/* Trust strip: solid emerald, no gradient; recessed under white both top and bottom. */
.trust-strip{
  border:0!important;
  background:#0d4635!important;
  box-shadow:
    inset 0 18px 20px -18px rgba(0,24,17,.78),
    inset 0 -18px 20px -18px rgba(0,24,17,.70),
    inset 0 7px 10px -8px rgba(0,0,0,.24),
    inset 0 -7px 10px -8px rgba(0,0,0,.20)!important;
}

/* Footer: hard white → dark green edge, with green visually sitting below the white section. */
.site-footer{
  border-top:0!important;
  background:#071d17!important;
  box-shadow:
    inset 0 20px 22px -20px rgba(0,12,9,.88),
    inset 0 7px 10px -8px rgba(0,0,0,.34)!important;
}

@media(max-width:980px){
  .trust-strip{
    box-shadow:
      inset 0 17px 19px -17px rgba(0,24,17,.76),
      inset 0 -17px 19px -17px rgba(0,24,17,.68),
      inset 0 6px 9px -7px rgba(0,0,0,.23),
      inset 0 -6px 9px -7px rgba(0,0,0,.19)!important;
  }
  .site-footer{
    box-shadow:
      inset 0 18px 20px -18px rgba(0,12,9,.86),
      inset 0 6px 9px -7px rgba(0,0,0,.32)!important;
  }
}

@media(max-width:640px){
  .trust-strip{
    box-shadow:
      inset 0 15px 18px -16px rgba(0,24,17,.74),
      inset 0 -15px 18px -16px rgba(0,24,17,.66),
      inset 0 6px 9px -7px rgba(0,0,0,.22),
      inset 0 -6px 9px -7px rgba(0,0,0,.18)!important;
  }
  .site-footer{
    box-shadow:
      inset 0 16px 18px -16px rgba(0,12,9,.84),
      inset 0 6px 9px -7px rgba(0,0,0,.30)!important;
  }
}


/* ===== V4.51 — smooth company field + localized validation ===== */

/* Unlike .hidden, this can animate in both directions. */
.company-field{
  display:grid!important;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-10px);
  margin:-4px 0 0!important;
  padding:0;
  pointer-events:none;
  visibility:hidden;
  transition:
    max-height .48s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease,
    transform .48s cubic-bezier(.2,.8,.2,1),
    margin .48s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .48s;
}

.company-field.is-visible{
  max-height:110px;
  opacity:1;
  transform:translateY(0);
  margin:10px 0 16px!important;
  pointer-events:auto;
  visibility:visible;
  transition:
    max-height .48s cubic-bezier(.2,.8,.2,1),
    opacity .30s ease .06s,
    transform .48s cubic-bezier(.2,.8,.2,1),
    margin .48s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

/* Tiny green contextual accent, analogous to the special "Alt serviciu" field,
   but quieter because this is a normal B2B branch of the form. */
.company-field.is-visible{
  padding:12px 14px 14px;
  border:1px solid rgba(18,145,95,.16);
  border-left:3px solid rgba(18,134,93,.72);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(237,249,243,.78),rgba(250,253,251,.94));
}

.company-field.is-visible > span{
  color:#285b48;
}

@media(max-width:640px){
  .company-field.is-visible{
    max-height:120px;
  }
}


/* ===== V4.52 — company field fix + refined contact typography ===== */

/* Company field: same smooth contextual reveal philosophy as "Alt serviciu".
   Padding, border and background now transition too, so nothing pops abruptly. */
.company-field{
  display:grid!important;
  gap:0!important;
  max-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  transform:translateY(-10px)!important;
  margin:-4px 0 0!important;
  padding:0 14px!important;
  border:1px solid transparent!important;
  border-left:3px solid transparent!important;
  border-radius:14px!important;
  background:rgba(247,252,249,0)!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transition:
    max-height .50s cubic-bezier(.2,.8,.2,1),
    opacity .30s ease,
    transform .50s cubic-bezier(.2,.8,.2,1),
    margin .50s cubic-bezier(.2,.8,.2,1),
    padding .50s cubic-bezier(.2,.8,.2,1),
    border-color .34s ease,
    background-color .38s ease,
    visibility 0s linear .50s!important;
}

.company-field.is-visible{
  gap:9px!important;
  max-height:150px!important;
  opacity:1!important;
  transform:translateY(0)!important;
  margin:10px 0 16px!important;
  padding:13px 14px 15px!important;
  border-color:rgba(18,145,95,.18)!important;
  border-left-color:#12865d!important;
  background:rgba(241,250,245,.92)!important;
  pointer-events:auto!important;
  visibility:visible!important;
  transition:
    max-height .50s cubic-bezier(.2,.8,.2,1),
    opacity .32s ease .05s,
    transform .50s cubic-bezier(.2,.8,.2,1),
    margin .50s cubic-bezier(.2,.8,.2,1),
    padding .50s cubic-bezier(.2,.8,.2,1),
    border-color .34s ease .04s,
    background-color .38s ease .04s,
    visibility 0s linear 0s!important;
}

.company-field > span{
  transition:color .28s ease,opacity .28s ease!important;
}
.company-field.is-visible > span{
  color:#285b48!important;
}

/* Contact hierarchy: labels are now crisp/readable, while CONTACT stays clearly larger. */
.contact-phone-block > span,
.contact-email-block > span{
  font-size:14px!important;
  line-height:1.2!important;
  letter-spacing:.075em!important;
  font-weight:900!important;
  color:#111915!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.contact-panel .contact-intro .eyebrow{
  font-size:24px!important;
  line-height:1.15!important;
  letter-spacing:.075em!important;
  font-weight:950!important;
}

@media(max-width:640px){
  .company-field.is-visible{
    max-height:160px!important;
  }
  .contact-phone-block > span,
  .contact-email-block > span{
    font-size:13px!important;
  }
  .contact-panel .contact-intro .eyebrow{
    font-size:21px!important;
  }
}


/* ===== V4.53 — WhatsApp hover consistency + shiny hero eyebrow ===== */

/* WhatsApp buttons keep the exact same animated surface on hover.
   Hover only adds the same subtle lift/shadow language as the dark-green CTAs. */
.btn-whatsapp-main,
.contact-action-btn.whatsapp{
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease!important;
}

.btn-whatsapp-main:hover,
.contact-action-btn.whatsapp:hover{
  color:#fff!important;
  background-image:linear-gradient(
    112deg,
    #119744 0%,
    #20bf59 33%,
    #55e98c 49%,
    #25d366 57%,
    #18ae50 70%,
    #0f843c 100%
  )!important;
  background-size:220% 100%!important;
  border-color:#1eb857!important;
  transform:translateY(-2px)!important;
  box-shadow:
    0 14px 30px rgba(37,211,102,.28),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}

/* Hero eyebrow: slightly larger and animated with the same emerald-light language.
   We reuse the already-working shine timing rather than adding another animation. */
.hero [data-i18n="hero_eyebrow"]{
  display:inline-block!important;
  font-size:19px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.085em!important;
  color:transparent!important;
  background:linear-gradient(
    112deg,
    #0a4f38 0%,
    #14835b 30%,
    #40b77b 46%,
    #83e2ae 53%,
    #259264 64%,
    #0b6244 100%
  )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:0 6px 20px rgba(31,107,79,.10);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.48));
  animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
}

@media(max-width:640px){
  .hero [data-i18n="hero_eyebrow"]{
    font-size:18px!important;
    letter-spacing:.075em!important;
  }
}


/* ===== V4.54 — visible two-layer shine for "Strălucim din 2008" ===== */
@keyframes heroEyebrowShine{
  0%,68%,100%{
    background-position:-140% 50%, 0% 50%;
  }
  78%{
    background-position:-140% 50%, 100% 50%;
  }
  88%{
    background-position:220% 50%, 100% 50%;
  }
  94%{
    background-position:220% 50%, 0% 50%;
  }
}

.hero [data-i18n="hero_eyebrow"]{
  display:inline-block!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.085em!important;

  color:transparent!important;
  -webkit-text-fill-color:transparent!important;

  background-image:
    linear-gradient(
      105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 34%,
      rgba(220,255,235,.16) 43%,
      rgba(255,255,255,.92) 50%,
      rgba(220,255,235,.16) 57%,
      rgba(255,255,255,0) 66%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      112deg,
      #07533a 0%,
      #11825a 28%,
      #35b477 44%,
      #7be0a9 52%,
      #289766 64%,
      #0b6244 100%
    )!important;

  background-size:55% 100%, 220% 100%!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:-140% 50%,0% 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;

  text-shadow:none!important;
  filter:drop-shadow(0 2px 5px rgba(21,101,72,.12));
  animation:heroEyebrowShine 5.5s cubic-bezier(.35,0,.2,1) infinite!important;
}

@media(max-width:640px){
  .hero [data-i18n="hero_eyebrow"]{
    font-size:19px!important;
    letter-spacing:.075em!important;
  }
}


/* ===== V4.55 — isolated hero text shine + narrower balanced hero card ===== */

/* Wrapper owns geometry only; old data-i18n eyebrow rules cannot control the glass layer. */
.hero-eyebrow-shine{
  position:relative!important;
  display:inline-grid!important;
  width:max-content!important;
  max-width:100%;
  margin:0!important;
  line-height:1.2!important;
}

/* Movement 1 — literal CTA emerald engine, clipped into the real text. */
.hero-eyebrow-shine .hero-eyebrow-text{
  grid-area:1/1!important;
  position:relative!important;
  z-index:1!important;
  display:block!important;

  font-size:20px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.085em!important;

  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(
    112deg,
    #0b513b 0%,
    #16845e 34%,
    #43b67d 50%,
    #117351 64%,
    #0a4b37 100%
  )!important;
  background-size:220% 100%!important;
  background-position:0% 50%;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;

  text-shadow:none!important;
  filter:drop-shadow(0 2px 4px rgba(21,101,72,.10))!important;
  animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
}

/* Movement 2 — a second copy of the SAME text, only carrying the glass band.
   It uses the same 73/76/84/88 timing points as ctaGlassSweep. */
@keyframes heroTextGlassSweep{
  0%,73%{
    background-position:-85% 50%;
    opacity:0;
  }
  76%{
    background-position:-85% 50%;
    opacity:.18;
  }
  84%{
    background-position:185% 50%;
    opacity:1;
  }
  88%,100%{
    background-position:185% 50%;
    opacity:0;
  }
}

.hero-eyebrow-shine .hero-eyebrow-glass{
  grid-area:1/1!important;
  position:relative!important;
  z-index:3!important;
  display:block!important;
  pointer-events:none!important;

  font-size:20px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.085em!important;

  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 35%,
    rgba(226,255,237,.20) 43%,
    rgba(255,255,255,.98) 50%,
    rgba(226,255,237,.20) 57%,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,0) 100%
  )!important;
  background-size:42% 100%!important;
  background-repeat:no-repeat!important;
  background-position:-85% 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;

  filter:drop-shadow(0 0 2px rgba(255,255,255,.24))!important;
  opacity:0;
  animation:heroTextGlassSweep 5.5s ease-in-out infinite!important;
}

/* Desktop: physically shrink the entire service card so its contents no longer
   sit in a visually oversized rectangle. */
@media (min-width:981px){
  .hero-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(470px,.75fr)!important;
    gap:58px!important;
  }

  .hero-card{
    width:500px!important;
    max-width:100%!important;
    justify-self:end!important;
  }

  .hero-card-body{
    padding-left:32px!important;
    padding-right:32px!important;
  }

  .hero-card .phone-link{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Medium desktop/laptop: keep it narrow but allow safe shrinking. */
@media (min-width:981px) and (max-width:1180px){
  .hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr)!important;
    gap:42px!important;
  }
  .hero-card{
    width:460px!important;
  }
}

@media(max-width:980px){
  .hero-card{
    width:min(100%,560px)!important;
    justify-self:center!important;
  }
  .hero-card .phone-link{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(max-width:640px){
  .hero-eyebrow-shine .hero-eyebrow-text,
  .hero-eyebrow-shine .hero-eyebrow-glass{
    font-size:19px!important;
    letter-spacing:.075em!important;
  }
}

/* Keep these two text animations alive even if older reduced-motion rules target
   .btn-hero-shine. They are isolated and no longer inherit those rules. */
@media (prefers-reduced-motion:reduce){
  .hero-eyebrow-shine .hero-eyebrow-text{
    animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
  }
  .hero-eyebrow-shine .hero-eyebrow-glass{
    animation:heroTextGlassSweep 5.5s ease-in-out infinite!important;
  }
}


/* ===== V4.56 — full-width sweep across the entire "Strălucim din 2008" text ===== */

/*
  The previous glass layer used a narrow 42% gradient and percentages that made
  the highlight look like it was lighting individual letters.
  This version uses a much wider highlight band and moves the BACKGROUND across
  the full text width, so the sweep reads as one continuous pass.
*/
@keyframes heroTextFullSweep{
  0%,72%{
    background-position:180% 50%;
    opacity:0;
  }
  75%{
    background-position:180% 50%;
    opacity:.16;
  }
  79%{
    opacity:.72;
  }
  86%{
    background-position:-80% 50%;
    opacity:1;
  }
  90%{
    background-position:-80% 50%;
    opacity:.32;
  }
  93%,100%{
    background-position:-80% 50%;
    opacity:0;
  }
}

.hero-eyebrow-shine .hero-eyebrow-glass{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;

  /* broad highlight: several letters are illuminated at once */
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 20%,
    rgba(213,255,231,.14) 31%,
    rgba(233,255,242,.38) 39%,
    rgba(255,255,255,.98) 50%,
    rgba(233,255,242,.38) 61%,
    rgba(213,255,231,.14) 69%,
    rgba(255,255,255,0) 80%,
    rgba(255,255,255,0) 100%
  )!important;

  /* Much wider than before so the effect spans words, not one letter. */
  background-size:165% 100%!important;
  background-repeat:no-repeat!important;
  background-position:180% 50%;

  -webkit-background-clip:text!important;
  background-clip:text!important;

  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.32))
    drop-shadow(0 0 5px rgba(133,230,177,.12))!important;

  opacity:0;
  animation:heroTextFullSweep 5.5s cubic-bezier(.35,0,.2,1) infinite!important;
}

/* Keep base emerald movement intact and independent. */
.hero-eyebrow-shine .hero-eyebrow-text{
  animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
}

@media(max-width:640px){
  .hero-eyebrow-shine .hero-eyebrow-glass{
    background-size:175% 100%!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-eyebrow-shine .hero-eyebrow-text{
    animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
  }
  .hero-eyebrow-shine .hero-eyebrow-glass{
    animation:heroTextFullSweep 5.5s cubic-bezier(.35,0,.2,1) infinite!important;
  }
}


/* ===== V4.57 — VERIFIED full-string shine sweep =====
   Base motion = exact working CTA emerald motion.
   Glass motion = clipped full duplicate text, tested across the entire string.
*/
@keyframes heroTextClipSweep{
  0%,73%{
    clip-path:polygon(-48% -20%,-6% -20%,-18% 120%,-60% 120%);
    opacity:0;
  }
  76%{
    clip-path:polygon(-48% -20%,-6% -20%,-18% 120%,-60% 120%);
    opacity:.28;
  }
  84%{
    clip-path:polygon(106% -20%,148% -20%,136% 120%,94% 120%);
    opacity:.96;
  }
  88%,100%{
    clip-path:polygon(106% -20%,148% -20%,136% 120%,94% 120%);
    opacity:0;
  }
}

/* First movement: same emerald engine as the working shiny buttons. */
.hero-eyebrow-shine .hero-eyebrow-text{
  animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
}

/* Second movement:
   white duplicate of the WHOLE phrase, revealed by a wide slanted window
   that physically travels from before the first letter to beyond 2008. */
.hero-eyebrow-shine .hero-eyebrow-glass{
  grid-area:1/1!important;
  position:relative!important;
  z-index:3!important;
  display:block!important;
  pointer-events:none!important;

  font-size:20px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.085em!important;

  color:#f7fff9!important;
  -webkit-text-fill-color:#f7fff9!important;
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.45))
    drop-shadow(0 0 7px rgba(121,224,169,.18))!important;

  clip-path:polygon(-48% -20%,-6% -20%,-18% 120%,-60% 120%);
  opacity:0;
  animation:heroTextClipSweep 5.5s cubic-bezier(.35,0,.2,1) infinite!important;
}

@media(max-width:640px){
  .hero-eyebrow-shine .hero-eyebrow-glass{
    font-size:19px!important;
    letter-spacing:.075em!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-eyebrow-shine .hero-eyebrow-text{
    animation:ctaEmeraldShine 5.5s ease-in-out infinite!important;
  }
  .hero-eyebrow-shine .hero-eyebrow-glass{
    animation:heroTextClipSweep 5.5s cubic-bezier(.35,0,.2,1) infinite!important;
  }
}


/* ===== V4.58 — slightly larger main service area label ===== */
.coverage-card span[data-i18n="coverage_label"]{
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.085em!important;
  color:var(--green-700)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

@media(max-width:640px){
  .coverage-card span[data-i18n="coverage_label"]{
    font-size:13px!important;
  }
}


/* ===== V4.59 — service dropdown scrollbar visible on desktop too ===== */
.form-custom-select[data-custom-select="service"].is-open{
  z-index:780!important;
}
.form-custom-select[data-custom-select="service"].is-open .form-select-menu{
  z-index:750!important;
}
.form-custom-select[data-custom-select="service"] .service-scroll-track{
  z-index:770!important;
  width:6px!important;
  right:8px!important;
  background:rgba(11,82,59,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(10,78,56,.06)!important;
}
.form-custom-select[data-custom-select="service"] .service-scroll-track.is-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:scaleY(1)!important;
}
.form-custom-select[data-custom-select="service"] .service-scroll-thumb{
  background:linear-gradient(180deg,#28ad78 0%,#0d6c4e 100%)!important;
  box-shadow:0 2px 6px rgba(8,75,54,.26)!important;
}
@media(min-width:641px){
  .form-custom-select[data-custom-select="service"] .service-scroll-track{
    right:8px!important;
    width:6px!important;
  }
}


/* ===== V4.60 — real Facebook link in footer ===== */
.footer-facebook{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content;
  color:#aebfb7!important;
  text-decoration:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease,transform .2s ease!important;
}
.footer-facebook svg{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px;
  fill:#1877f2;
  filter:drop-shadow(0 2px 4px rgba(24,119,242,.14));
  transition:transform .2s ease,filter .2s ease!important;
}
.footer-facebook span{
  color:inherit!important;
  font-size:13px!important;
}
.footer-facebook:hover{
  color:#fff!important;
  transform:translateY(-1px);
}
.footer-facebook:hover svg{
  transform:scale(1.08);
  filter:drop-shadow(0 3px 6px rgba(24,119,242,.22));
}


/* ===== V4.61 — compact recruitment / CV section ===== */
.careers-section{
  padding:10px 0 46px;
  background:#f5f7f5;
}

.careers-card{
  width:min(100%,980px);
  margin:0 auto;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:34px;
  align-items:center;
  padding:30px;
  border:1px solid rgba(16,106,75,.12);
  border-radius:26px;
  background:
    radial-gradient(circle at 7% 12%,rgba(113,220,166,.09),transparent 33%),
    linear-gradient(135deg,rgba(250,253,251,.98),rgba(241,249,245,.96));
  box-shadow:0 18px 48px rgba(8,39,31,.07);
}

.careers-copy{
  padding:4px 6px;
}
.careers-eyebrow{
  margin:0 0 12px!important;
  font-size:14px!important;
  color:var(--green-700)!important;
}
.careers-copy h2{
  margin:0 0 13px;
  max-width:410px;
  font-size:34px;
  line-height:1.04;
  letter-spacing:-.035em;
}
.careers-copy>p:not(.eyebrow){
  margin:0;
  max-width:440px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.careers-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  color:#41675a;
  font-size:12px;
  font-weight:750;
}
.careers-note-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#35c982;
  box-shadow:0 0 0 5px rgba(53,201,130,.11);
}

.careers-form{
  padding:20px;
  border:1px solid rgba(16,106,75,.11);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.careers-form label:not(.cv-upload):not(.careers-check){
  display:grid;
  gap:6px;
  margin-bottom:12px;
  font-size:11px;
  font-weight:850;
  color:#34483f;
}
.careers-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.careers-form input[type="text"],
.careers-form input[type="tel"],
.careers-form input[type="email"]{
  width:100%;
  height:43px;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid #cedbd4;
  border-radius:11px;
  outline:none;
  background:#fbfdfc;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.careers-form input:focus{
  border-color:var(--green-600);
  background:#fff;
  box-shadow:0 0 0 3px rgba(62,170,120,.11);
}

.cv-upload{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  min-height:64px;
  margin:2px 0 12px;
  padding:10px 12px;
  border:1px dashed rgba(18,112,78,.28);
  border-radius:14px;
  background:rgba(30,143,98,.045);
  cursor:pointer;
  overflow:hidden;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.cv-upload:hover{
  background:rgba(30,143,98,.075);
  border-color:rgba(18,112,78,.42);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(8,39,31,.045);
}
.cv-file-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.cv-upload-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:linear-gradient(145deg,#0c5c43,#169267);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,91,66,.16);
}
.cv-upload-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cv-upload-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cv-upload-copy strong{
  color:#173d30;
  font-size:12px;
}
.cv-upload-copy small{
  color:var(--muted);
  font-size:10px;
}
.cv-file-name{
  max-width:125px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:7px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(18,112,78,.11);
  color:#2c5c49;
  font-size:10px;
  font-weight:800;
}

.careers-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 13px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
  cursor:pointer;
}
.careers-check input{
  width:15px;
  height:15px;
  margin:1px 0 0;
  flex:0 0 15px;
}

.careers-submit{
  width:100%;
  min-height:44px;
  border:0;
}
.careers-status{
  min-height:0;
  margin:8px 0 0;
  color:#2b6952;
  font-size:10px;
  line-height:1.45;
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
}
.careers-status.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:980px){
  .careers-section{padding:8px 0 38px}
  .careers-card{
    grid-template-columns:1fr;
    gap:24px;
    width:min(100%,720px);
  }
  .careers-copy h2,
  .careers-copy>p:not(.eyebrow){
    max-width:none;
  }
}
@media(max-width:640px){
  .careers-section{padding:6px 0 30px}
  .careers-card{
    padding:20px;
    border-radius:22px;
    gap:20px;
  }
  .careers-copy{padding:0 2px}
  .careers-copy h2{font-size:30px}
  .careers-form{padding:16px}
  .careers-field-row{grid-template-columns:1fr}
  .cv-upload{
    grid-template-columns:38px minmax(0,1fr);
  }
  .cv-file-name{
    grid-column:1/-1;
    max-width:100%;
    width:max-content;
    margin-left:49px;
  }
}


/* ===== V4.68 — rebuilt Contact -> Careers gap from zero ===== */

/*
  One exact 12px spacer, on the same continuous page background.
  No separate section background = no horizontal color seam.
*/
#contact.section{
  padding-bottom:0!important;
  margin-bottom:0!important;
  background:transparent!important;
}

.careers-section{
  padding-top:0!important;
  margin-top:12px!important;
  padding-bottom:46px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/*
  Full-size recruitment card, as previously approved.
  IMPORTANT: there is deliberately NO top border and NO normal box-shadow.
  Therefore it cannot create a second dark horizontal band in the gap.
*/
.careers-card{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0 auto!important;

  display:grid!important;
  grid-template-columns:.8fr 1.2fr!important;
  gap:48px!important;
  align-items:center!important;

  padding:44px!important;
  border:1px solid var(--line)!important;
  border-top:0!important;
  border-radius:26px!important;
  background:#fff!important;

  box-shadow:none!important;
}

/*
  Careers still gets depth on the SIDES and BOTTOM.
  The shadow is drawn on a separate transparent layer and clipped exactly at
  the card's top edge, so not one pixel of this shadow can enter the gap above.
*/
.careers-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:0 18px 46px rgba(8,39,31,.075)!important;
  clip-path:inset(0 -70px -70px -70px)!important;
  z-index:0!important;
}

/* Never use the old top masking strip. */
.careers-card::before{
  content:none!important;
  display:none!important;
}

.careers-card > *{
  position:relative;
  z-index:1;
}

/* Keep the card size and typography already approved. */
.careers-copy{
  padding:4px 4px!important;
}
.careers-copy h2{
  font-size:38px!important;
  line-height:1.04!important;
  max-width:460px!important;
}
.careers-copy>p:not(.eyebrow){
  max-width:500px!important;
  font-size:15px!important;
  line-height:1.68!important;
}
.careers-eyebrow{
  font-size:18px!important;
  line-height:1.2!important;
  letter-spacing:.075em!important;
  font-weight:950!important;
  color:var(--green-700)!important;
  margin-bottom:14px!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.careers-note{
  margin-top:20px!important;
  font-size:13px!important;
}

.careers-form{
  padding:24px!important;
  border-radius:20px!important;
}
.careers-form label:not(.cv-upload):not(.careers-check){
  gap:7px!important;
  margin-bottom:14px!important;
}
.careers-form label:not(.cv-upload):not(.careers-check)>span{
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  color:#223c32!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.careers-form input[type="text"],
.careers-form input[type="tel"],
.careers-form input[type="email"]{
  height:48px!important;
  padding:0 14px!important;
  border-radius:12px!important;
}
.cv-upload{
  min-height:70px!important;
  padding:11px 13px!important;
}
.careers-submit{
  min-height:48px!important;
}

@media(max-width:980px){
  #contact.section{
    padding-bottom:0!important;
  }
  .careers-section{
    margin-top:10px!important;
    padding-top:0!important;
    padding-bottom:38px!important;
  }
  .careers-card{
    grid-template-columns:1fr!important;
    gap:26px!important;
    padding:30px!important;
  }
  .careers-copy h2,
  .careers-copy>p:not(.eyebrow){
    max-width:none!important;
  }
  .careers-eyebrow{
    font-size:17px!important;
  }
  .careers-form label:not(.cv-upload):not(.careers-check)>span{
    font-size:13.5px!important;
  }
}

@media(max-width:640px){
  #contact.section{
    padding-bottom:0!important;
  }
  .careers-section{
    margin-top:8px!important;
    padding-top:0!important;
    padding-bottom:30px!important;
  }
  .careers-card{
    padding:24px!important;
    gap:22px!important;
    border-radius:22px!important;
  }
  .careers-copy h2{
    font-size:32px!important;
  }
  .careers-copy>p:not(.eyebrow){
    font-size:14px!important;
  }
  .careers-form{
    padding:18px!important;
  }
  .careers-eyebrow{
    font-size:16px!important;
  }
  .careers-form label:not(.cv-upload):not(.careers-check)>span{
    font-size:13px!important;
  }
}


/* ===== V4.70 — mobile spacing + smooth hamburger menu ===== */

@media (max-width:640px){

  /* A little real breathing room for the green B2B card on phones only. */
  .b2b-section{
    padding-top:44px!important;
  }

  /* Keep the floating WhatsApp pill fully inside the viewport on mobile. */
  .floating-whatsapp{
    right:16px!important;
    max-width:calc(100vw - 32px)!important;
  }

  .floating-whatsapp.is-expanded{
    width:min(var(--wa-expanded-width),calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
  }

  .floating-whatsapp .wa-float-label{
    left:53px!important;
    right:12px!important;
    font-size:13px!important;
  }
}

/* Mobile/tablet hamburger dropdown:
   keep it mounted so open AND close can animate instead of appearing instantly. */
@media (max-width:980px){
  .main-nav{
    display:flex!important;
    position:absolute!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transform:translateY(-14px) scale(.985)!important;
    transform-origin:top center!important;

    box-shadow:0 18px 42px rgba(8,39,31,.13)!important;

    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .34s,
      box-shadow .34s ease!important;

    will-change:transform,opacity;
  }

  .main-nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;

    transform:translateY(0) scale(1)!important;

    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s linear 0s,
      box-shadow .34s ease!important;
  }

  /* Smooth hamburger -> X feedback. */
  .menu-toggle span{
    transform-origin:center!important;
    transition:
      transform .30s cubic-bezier(.16,1,.3,1),
      opacity .18s ease,
      width .24s ease!important;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0!important;
    transform:scaleX(.35)!important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }
}


/* ===== V4.71 — fix mobile B2B overlap + bubble nav + clean touch states ===== */

@media (max-width:640px){

  /*
    IMPORTANT:
    An older mobile rule used:
      .b2b-section + #proces { margin-top:-8px }
    That physically pulled Process over the B2B section and visually cut the
    bottom of the green card. Cancel it and create real breathing room.
  */
  .b2b-section + #proces{
    margin-top:0!important;
  }

  .b2b-section{
    padding-top:44px!important;
    padding-bottom:16px!important;
    overflow:visible!important;
  }

  #proces.section{
    padding-top:38px!important;
  }

  .b2b-card{
    border-radius:30px!important;
    overflow:hidden!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transform:translateZ(0);
    margin-bottom:0!important;
  }
}


/* ---------- Mobile navigation bubbles ---------- */
@media (max-width:980px){
  .main-nav{
    align-items:flex-start!important;
    gap:13px!important;
    padding:18px!important;
  }

  /* The four section links are distinct left-aligned bubbles. */
  .main-nav > a:not(.btn){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:flex-start!important;
    width:max-content!important;
    min-width:148px!important;
    max-width:100%!important;
    min-height:44px!important;
    box-sizing:border-box!important;

    padding:11px 17px!important;
    margin:0!important;

    border:1px solid rgba(18,112,78,.13)!important;
    border-radius:999px!important;
    background:linear-gradient(
      180deg,
      rgba(250,253,251,.99) 0%,
      rgba(237,247,242,.98) 100%
    )!important;

    color:#173d30!important;
    text-align:left!important;
    text-decoration:none!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1.1!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 5px 14px rgba(8,39,31,.045)!important;

    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;

    opacity:0;
    transform:translateY(-7px);
    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.16,1,.3,1),
      background .20s ease,
      border-color .20s ease,
      box-shadow .20s ease!important;
  }

  .main-nav.open > a:not(.btn){
    opacity:1;
    transform:translateY(0);
  }

  .main-nav.open > a:not(.btn):nth-of-type(1){transition-delay:.045s, .045s, 0s, 0s, 0s!important}
  .main-nav.open > a:not(.btn):nth-of-type(2){transition-delay:.075s, .075s, 0s, 0s, 0s!important}
  .main-nav.open > a:not(.btn):nth-of-type(3){transition-delay:.105s, .105s, 0s, 0s, 0s!important}
  .main-nav.open > a:not(.btn):nth-of-type(4){transition-delay:.135s, .135s, 0s, 0s, 0s!important}

  .main-nav > a:not(.btn):active{
    transform:scale(.985)!important;
    background:#e9f5ef!important;
    border-color:rgba(18,112,78,.23)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 3px 9px rgba(8,39,31,.035)!important;
  }

  /* Keep the main CTA visually separate and full-width. */
  .main-nav > .btn{
    align-self:stretch!important;
    width:100%!important;
    margin-top:5px!important;
    text-align:center!important;
  }


  /* ---------- Hamburger / X: no blue Android tap selection ---------- */
  .menu-toggle,
  .menu-toggle *,
  .main-nav,
  .main-nav *{
    -webkit-tap-highlight-color:transparent!important;
  }

  .menu-toggle{
    -webkit-appearance:none!important;
    appearance:none!important;
    -webkit-touch-callout:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    outline:none!important;
    border-radius:13px!important;
    background:transparent!important;
    transition:background .20s ease, transform .20s ease!important;
  }

  .menu-toggle::selection,
  .menu-toggle *::selection,
  .main-nav a::selection{
    background:transparent!important;
    color:inherit!important;
  }

  .menu-toggle:active{
    background:rgba(18,112,78,.065)!important;
    transform:scale(.96)!important;
  }

  /* Keyboard users still get a deliberate, branded focus ring. */
  .menu-toggle:focus-visible{
    outline:2px solid rgba(22,132,94,.28)!important;
    outline-offset:3px!important;
  }

  .main-nav > a:not(.btn):focus{
    outline:none!important;
  }

  .main-nav > a:not(.btn):focus-visible{
    outline:2px solid rgba(22,132,94,.24)!important;
    outline-offset:2px!important;
  }
}


/* ===== V4.72 — mobile menu symmetry, dropdown gap, smoother touch states ===== */

/* General button / tap polish */
.btn,
.btn *,
.menu-toggle,
.menu-toggle *,
.cv-upload,
.cv-upload *{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.btn,
.menu-toggle,
.cv-upload{
  touch-action: manipulation;
}

.btn::selection,
.btn *::selection,
.menu-toggle::selection,
.menu-toggle *::selection,
.cv-upload::selection,
.cv-upload *::selection{
  background: transparent !important;
  color: inherit !important;
}

.btn{
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease !important;
}

.btn:active{
  transform: scale(.986) !important;
}

.btn:focus{
  outline: none !important;
}

.btn:focus-visible{
  outline: 2px solid rgba(22,132,94,.22) !important;
  outline-offset: 3px !important;
}

/* CV upload area/button feels consistent and avoids ugly blue selection tint */
.cv-upload{
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}
.cv-upload:active{
  transform: scale(.992) !important;
}

/* Mobile menu refinements */
@media (max-width:980px){
  .main-nav{
    top: calc(100% + 10px) !important;   /* small air gap below header */
    border-radius: 22px !important;
  }

  .main-nav > a:not(.btn){
    width: 100% !important;              /* all bubbles same full width */
    min-width: 0 !important;
    max-width: none !important;
    justify-content: flex-start !important;
    padding: 12px 20px !important;
  }

  .main-nav > .btn{
    width: 100% !important;
    margin-top: 6px !important;
  }
}

@media (max-width:640px){
  /* slightly more visual separation between header and opened mobile menu */
  .main-nav{
    top: calc(100% + 12px) !important;
    left: 14px !important;
    right: 14px !important;
  }

  /* real breathing room under the green B2B card on mobile */
  .b2b-section{
    padding-top: 44px !important;
    padding-bottom: 22px !important;
  }

  .b2b-card{
    margin-bottom: 12px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  .b2b-section + #proces{
    margin-top: 0 !important;
  }

  #proces.section{
    padding-top: 34px !important;
  }
}


/* ===== V4.73 — clickable logo polish + lighter glass header ===== */

/* More visible glass effect without becoming truly transparent. */
.site-header{
  background:rgba(247,250,248,.72)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  border-bottom:1px solid rgba(214,227,220,.58)!important;
  box-shadow:0 5px 18px rgba(8,39,31,.025)!important;
}

/* Logo behaves like a polished home button. */
.brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border-radius:14px!important;

  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;

  outline:none!important;
  touch-action:manipulation;

  transition:
    transform .30s cubic-bezier(.2,.8,.2,1),
    filter .26s ease,
    opacity .26s ease!important;
}

.brand,
.brand img{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

.brand::selection,
.brand img::selection{
  background:transparent!important;
}

.brand:hover{
  transform:translateY(-1px)!important;
  filter:drop-shadow(0 5px 10px rgba(8,75,54,.08))!important;
}

.brand:active{
  transform:scale(.965)!important;
  filter:drop-shadow(0 2px 5px rgba(8,75,54,.06))!important;
}

.brand:focus{
  outline:none!important;
}

.brand:focus-visible{
  outline:2px solid rgba(22,132,94,.22)!important;
  outline-offset:4px!important;
}

@media(max-width:640px){
  .site-header{
    background:rgba(247,250,248,.70)!important;
    -webkit-backdrop-filter:blur(20px) saturate(128%)!important;
    backdrop-filter:blur(20px) saturate(128%)!important;
  }
}


/* ===== V4.74 — custom green consent checkboxes + visible mobile textarea grip ===== */

/* Consent checkboxes: Clean4U green, slightly rounded, no native blue state. */
.check input[type="checkbox"],
.careers-check input[type="checkbox"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  flex:0 0 18px!important;
  margin-top:2px!important;

  border:1.5px solid rgba(20,83,63,.46)!important;
  border-radius:5px!important;
  background:#fff!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:12px 12px!important;

  cursor:pointer!important;
  outline:none!important;
  box-shadow:inset 0 1px 2px rgba(8,39,31,.035)!important;

  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation;

  transition:
    background-color .20s ease,
    border-color .20s ease,
    box-shadow .22s ease,
    transform .18s cubic-bezier(.2,.8,.2,1)!important;
}

.check input[type="checkbox"]:checked,
.careers-check input[type="checkbox"]:checked{
  background-color:var(--green-700)!important;
  border-color:var(--green-700)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3 6.4 11.2 12.8 4.8' fill='none' stroke='white' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  box-shadow:
    0 0 0 3px rgba(22,132,94,.10),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}

.check input[type="checkbox"]:active,
.careers-check input[type="checkbox"]:active{
  transform:scale(.91)!important;
}

.check input[type="checkbox"]:focus-visible,
.careers-check input[type="checkbox"]:focus-visible{
  box-shadow:
    0 0 0 3px rgba(22,132,94,.14),
    inset 0 1px 2px rgba(8,39,31,.03)!important;
}

/* Recruitment consent has room: make it easier to read. */
.careers-check{
  font-size:12px!important;
  line-height:1.5!important;
  gap:10px!important;
  align-items:flex-start!important;
}
.careers-check > span{
  font-size:12px!important;
  line-height:1.5!important;
  color:#66766f!important;
}

/* Main details textarea: custom resize affordance, visible on desktop + mobile. */
.message-resize-label{
  position:relative!important;
}

.message-resize-label textarea[name="message"]{
  min-height:126px!important;
  padding-right:34px!important;
  padding-bottom:30px!important;
  resize:vertical!important;
}

.textarea-resize-grip{
  position:absolute!important;
  right:11px!important;
  bottom:27px!important;
  width:22px!important;
  height:22px!important;
  z-index:3!important;

  border-radius:7px!important;
  cursor:ns-resize!important;
  touch-action:none!important;

  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;

  opacity:.72!important;

  background:
    linear-gradient(135deg,
      transparent 0 47%,
      rgba(18,112,78,.38) 48% 54%,
      transparent 55% 100%) 8px 8px/10px 10px no-repeat,
    linear-gradient(135deg,
      transparent 0 47%,
      rgba(18,112,78,.58) 48% 55%,
      transparent 56% 100%) 3px 3px/15px 15px no-repeat,
    rgba(236,247,241,.92)!important;

  border:1px solid rgba(18,112,78,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 3px 8px rgba(8,39,31,.055)!important;

  transition:
    opacity .20s ease,
    transform .20s ease,
    background-color .20s ease,
    box-shadow .20s ease!important;
}

.textarea-resize-grip:hover{
  opacity:1!important;
  transform:scale(1.04)!important;
}

.textarea-resize-grip.is-dragging{
  opacity:1!important;
  transform:scale(.96)!important;
  box-shadow:
    0 0 0 3px rgba(22,132,94,.11),
    0 3px 9px rgba(8,39,31,.06)!important;
}

@media(max-width:640px){
  .careers-check,
  .careers-check > span{
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .message-resize-label textarea[name="message"]{
    min-height:132px!important;
    padding-right:38px!important;
    padding-bottom:34px!important;
  }

  .textarea-resize-grip{
    width:26px!important;
    height:26px!important;
    right:9px!important;
    bottom:25px!important;
    opacity:.92!important;
    border-radius:8px!important;
  }
}


/* ===== V4.75 — align mobile textarea grip + unify recruitment checkbox ===== */

/* Keep both consent checkboxes visually identical */
.check input[type="checkbox"],
.careers-check input[type="checkbox"]{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  flex:0 0 20px!important;
  margin-top:1px!important;
  border-radius:6px!important;
  background-size:13px 13px!important;
}

/* remove ugly blue tap/text selection specifically on recruitment consent */
.careers-check,
.careers-check span,
.careers-check input,
.check,
.check span,
.check input{
  -webkit-tap-highlight-color: transparent !important;
}

.careers-check,
.careers-check > span,
.check,
.check > span{
  -webkit-user-select:none!important;
  user-select:none!important;
}

.careers-check::selection,
.careers-check > span::selection,
.check::selection,
.check > span::selection{
  background:transparent!important;
  color:inherit!important;
}

/* better vertical rhythm after slightly larger checkbox */
.careers-check{
  gap:12px!important;
  align-items:flex-start!important;
}
.check{
  gap:12px!important;
  align-items:flex-start!important;
}

/* move the resize grip lower so bottom/right spacing feels equal */
.textarea-resize-grip{
  right:12px!important;
  bottom:12px!important;
}

@media(max-width:640px){
  .check input[type="checkbox"],
  .careers-check input[type="checkbox"]{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    flex:0 0 22px!important;
    margin-top:1px!important;
    border-radius:6px!important;
    background-size:14px 14px!important;
  }

  .textarea-resize-grip{
    width:26px!important;
    height:26px!important;
    right:10px!important;
    bottom:10px!important;
    border-radius:8px!important;
  }
}


/* ===== V4.76 — make both consent checkboxes truly identical ===== */

.check input[type="checkbox"],
.careers-check input[type="checkbox"]{
  box-sizing:border-box!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  flex:0 0 28px!important;

  padding:0!important;
  margin:0!important;

  border:1.5px solid rgba(20,83,63,.46)!important;
  border-radius:7px!important;
  background-size:16px 16px!important;

  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

/* keep both labels aligned from the top with the larger identical boxes */
.check,
.careers-check{
  align-items:flex-start!important;
  gap:12px!important;
}

/* absolutely no blue selection/tap flash on recruitment consent */
.careers-check,
.careers-check *,
.careers-check input[type="checkbox"]{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
}

.careers-check::selection,
.careers-check *::selection{
  background:transparent!important;
  color:inherit!important;
}


/* ===== V4.77 — tighter dial prefix trigger + clean floating WhatsApp taps ===== */

/* Dial-code trigger:
   arrow now follows the rendered prefix instead of sitting after a flexible 1fr column.
   max-content safely accommodates +40, +420, +998 and even longer codes such as +1809. */
.dial-picker{
  flex:0 0 118px!important;
}

.dial-trigger{
  grid-template-columns:24px max-content 14px!important;
  justify-content:start!important;
  column-gap:4px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}

.dial-selected-flag{
  width:24px!important;
  min-width:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.dial-selected-code{
  width:max-content!important;
  min-width:max-content!important;
  text-align:left!important;
  white-space:nowrap!important;
}

.dial-chevron{
  width:14px!important;
  height:14px!important;
  margin-left:1px!important;
}

/* Floating WhatsApp — no Android/Chrome blue tap highlight in either state. */
.floating-whatsapp,
.floating-whatsapp *,
.floating-whatsapp.is-expanded,
.floating-whatsapp.is-expanded *{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

.floating-whatsapp{
  outline:none!important;
  touch-action:manipulation!important;
}

.floating-whatsapp::selection,
.floating-whatsapp *::selection{
  background:transparent!important;
  color:inherit!important;
}

.floating-whatsapp:focus{
  outline:none!important;
}

.floating-whatsapp:focus-visible{
  outline:2px solid rgba(37,211,102,.24)!important;
  outline-offset:3px!important;
}

/* Keep tap feedback branded/smooth rather than browser-native. */
.floating-whatsapp:active{
  transform:scale(.965)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}

.floating-whatsapp.is-expanded:active{
  transform:scale(.985)!important;
}

@media(max-width:520px){
  .dial-picker{
    flex-basis:114px!important;
    width:114px!important;
  }

  .dial-trigger{
    grid-template-columns:23px max-content 13px!important;
    column-gap:3px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  .dial-selected-flag{
    width:23px!important;
    min-width:23px!important;
  }

  .dial-chevron{
    width:13px!important;
    height:13px!important;
    margin-left:1px!important;
  }
}


/* ===== V4.78 — truly symmetric auto-sized dial prefix selector ===== */

/*
  No fixed width anymore.
  The selector now grows/shrinks with the actual prefix:
  flag + code + arrow + equal left/right padding.
  This keeps +40 compact while +420 / +998 expand safely.
*/
.dial-picker{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
}

.dial-trigger{
  width:max-content!important;
  min-width:0!important;
  box-sizing:border-box!important;

  grid-template-columns:24px max-content 14px!important;
  justify-content:start!important;
  align-items:center!important;

  column-gap:4px!important;

  /* move the whole content a few px right, then mirror that spacing on right */
  padding-left:11px!important;
  padding-right:11px!important;
}

.dial-selected-flag{
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
}

.dial-selected-code{
  width:max-content!important;
  min-width:max-content!important;
  white-space:nowrap!important;
}

.dial-chevron{
  width:14px!important;
  min-width:14px!important;
  height:14px!important;
  margin-left:1px!important;
}

/* Same geometry on phones — still auto-sized, never fixed-width. */
@media(max-width:520px){
  .dial-picker{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
  }

  .dial-trigger{
    width:max-content!important;
    min-width:0!important;
    grid-template-columns:23px max-content 13px!important;
    column-gap:4px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .dial-selected-flag{
    width:23px!important;
    min-width:23px!important;
    max-width:23px!important;
  }

  .dial-chevron{
    width:13px!important;
    min-width:13px!important;
    height:13px!important;
    margin-left:1px!important;
  }
}


/* ===== V4.79 — crisp vector flags, no ugly outline ===== */

/* Visible language + phone flags are now SVG files.
   Remove the old 1px faux border/shadow and render cleanly. */
.lang-flag-img,
.dial-flag-img{
  display:block!important;
  width:24px!important;
  height:18px!important;
  max-width:24px!important;
  max-height:18px!important;

  object-fit:contain!important;
  object-position:center!important;

  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;

  border-radius:1.5px!important;

  image-rendering:auto!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Containers must not add their own outline around the artwork. */
.lang-trigger-flag,
.lang-option-flag,
.dial-selected-flag,
.dial-option-flag{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:visible!important;
}

/* Remove the legacy faux frame from old inline flags as well. */
.flag-svg{
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
}

/* Slightly larger source presentation on high-density mobile screens,
   without changing layout dimensions. */
@media(max-width:640px){
  .lang-flag-img,
  .dial-flag-img{
    width:24px!important;
    height:18px!important;
  }
}


/* ===== V4.80 — subtle 3D depth for vector flags ===== */

.lang-flag-img,
.dial-flag-img{
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.10))
    drop-shadow(0 2px 3px rgba(0,0,0,.07))!important;

  transition:
    filter .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1)!important;
}

/* Tiny lift on interactive states, still very subtle. */
.lang-trigger:hover .lang-flag-img,
.mobile-lang-trigger:hover .lang-flag-img,
.lang-option:hover .lang-flag-img,
.dial-trigger:hover .dial-flag-img,
.dial-option:hover .dial-flag-img{
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.11))
    drop-shadow(0 3px 4px rgba(0,0,0,.09))!important;
  transform:translateY(-.5px)!important;
}


/* ===== V4.81 — visible resize grip for "Alt serviciu" textarea ===== */

/* Let the revealed card actually grow when the user resizes its textarea. */
.other-service-field.is-visible{
  max-height:760px!important;
  overflow:visible!important;
}

/* Same positioning model as the main Details textarea. */
.other-service-card{
  position:relative!important;
}

.other-service-card textarea[name="other_service"]{
  min-height:78px!important;
  padding-right:38px!important;
  padding-bottom:34px!important;
  resize:vertical!important;
}

/* Reuse the exact visual grip language already approved. */
.other-service-resize-grip{
  right:10px!important;
  bottom:10px!important;
  width:26px!important;
  height:26px!important;
  border-radius:8px!important;
  opacity:.92!important;
}

@media(min-width:641px){
  .other-service-resize-grip{
    right:12px!important;
    bottom:12px!important;
    width:22px!important;
    height:22px!important;
    border-radius:7px!important;
    opacity:.72!important;
  }

  .other-service-card textarea[name="other_service"]{
    padding-right:34px!important;
    padding-bottom:30px!important;
  }
}


/* ===== V4.82 — correctly inset "Alt serviciu" resize grip ===== */

/*
  .other-service-card has 16px horizontal and 17px bottom padding.
  The grip is absolutely positioned relative to that card, so include that
  padding in the offset to place it INSIDE the textarea rather than on the
  outer green card border.
*/
.other-service-resize-grip{
  right:26px!important;   /* 16px card padding + 10px inner textarea gap */
  bottom:27px!important;  /* 17px card padding + 10px inner textarea gap */
}

@media(min-width:641px){
  .other-service-resize-grip{
    right:28px!important;  /* 16px + 12px */
    bottom:29px!important; /* 17px + 12px */
  }
}


/* ===== V4.83 — viewport-safe dial menu + cleaner services + interactive process/header ===== */

/* Phone-prefix dropdown stays inside the visible page on medium/desktop viewports.
   JS writes only the horizontal correction required for the current device width. */
.dial-menu{
  left:var(--dial-menu-left, 0px)!important;
  max-width:calc(100vw - 32px)!important;
}

/* Mobile keeps the existing bottom-sheet geometry untouched. */
@media(max-width:520px){
  .dial-menu{
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
  }
}

/* First process step is now a real link, but visually remains the same card. */
.process-step-link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease!important;
}

.process-step-link:hover{
  transform:translateY(-3px);
  border-top-color:rgba(20,131,91,.58)!important;
  background:rgba(247,252,249,.86)!important;
  box-shadow:0 12px 28px rgba(8,39,31,.065);
}

.process-step-link:active{
  transform:translateY(-1px) scale(.988);
  box-shadow:0 5px 14px rgba(8,39,31,.05);
}

.process-step-link:focus-visible{
  outline:3px solid rgba(36,185,120,.20);
  outline-offset:4px;
}

.process-step-link::selection,
.process-step-link *::selection{
  background:transparent;
  color:inherit;
}

#contact{
  scroll-margin-top:105px;
}

/* Desktop header links:
   no bubble shape — only smooth green color, a small lift and a fine animated accent line. */
@media(min-width:981px){
  .main-nav > a:not(.btn){
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:9px 1px!important;

    color:var(--ink);
    -webkit-tap-highlight-color:transparent;

    transition:
      color .26s ease,
      transform .28s cubic-bezier(.2,.8,.2,1),
      text-shadow .26s ease!important;
  }

  .main-nav > a:not(.btn)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:78%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--green-700),#31b77e);
    opacity:0;
    transform:translateX(-50%) scaleX(.18);
    transform-origin:center;
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .22s ease;
    pointer-events:none;
  }

  .main-nav > a:not(.btn):hover{
    color:var(--green-700)!important;
    transform:translateY(-2px);
    text-shadow:0 5px 15px rgba(19,118,82,.09);
  }

  .main-nav > a:not(.btn):hover::after{
    opacity:.78;
    transform:translateX(-50%) scaleX(1);
  }

  .main-nav > a:not(.btn):active{
    transform:translateY(0) scale(.965);
    color:var(--green-800)!important;
    text-shadow:none;
    transition-duration:.12s!important;
  }

  .main-nav > a:not(.btn):active::after{
    opacity:1;
    transform:translateX(-50%) scaleX(.82);
  }

  .main-nav > a:not(.btn):focus-visible{
    outline:2px solid rgba(22,132,94,.22);
    outline-offset:5px;
    border-radius:5px;
  }
}


/* ===== V4.84 — real viewport gutter for dial menu + stable desktop nav hover ===== */

/* Desktop / laptop prefix menu:
   position against the VIEWPORT, not the phone field, so a real safety gutter
   is guaranteed even on narrow laptop screens. */
@media(min-width:521px){
  .dial-menu{
    position:fixed!important;
    left:var(--dial-menu-vx, 28px)!important;
    top:var(--dial-menu-vy, 90px)!important;
    right:auto!important;

    width:min(420px, calc(100vw - 56px))!important;
    max-width:calc(100vw - 56px)!important;

    /* enough room for the native/custom scrollbar to remain visually clear */
    margin:0!important;
    transform-origin:top left!important;
  }
}

/* Phones keep the existing bottom sheet exactly as before. */
@media(max-width:520px){
  .dial-menu{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:auto!important;
    bottom:16px!important;
    width:auto!important;
    max-width:none!important;
  }
}

/* Stable desktop header interaction.
   Keep a compositor layer active before/during/after hover to avoid the
   post-transition text-rendering "snap" some browsers show. */
@media(min-width:981px){
  .main-nav > a:not(.btn){
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;

    transform:translate3d(0,0,0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform,color!important;

    text-shadow:none!important;
    -webkit-font-smoothing:antialiased;

    transition:
      color .24s ease,
      transform .28s cubic-bezier(.2,.8,.2,1)!important;
  }

  .main-nav > a:not(.btn)::after{
    will-change:transform,opacity!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;

    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .22s ease!important;
  }

  .main-nav > a:not(.btn):hover{
    color:var(--green-700)!important;
    transform:translate3d(0,-2px,0)!important;
    text-shadow:none!important;
  }

  .main-nav > a:not(.btn):hover::after{
    opacity:.78!important;
    transform:translateX(-50%) scaleX(1)!important;
  }

  .main-nav > a:not(.btn):active{
    color:var(--green-800)!important;
    transform:translate3d(0,0,0) scale(.97)!important;
    text-shadow:none!important;
    transition-duration:.12s!important;
  }

  .main-nav > a:not(.btn):active::after{
    opacity:1!important;
    transform:translateX(-50%) scaleX(.82)!important;
  }
}


/* ===== V4.85 — identical reusable dial picker in recruitment form ===== */

/* Recruitment phone occupies the second grid cell exactly like the old field. */
.careers-phone-field{
  display:grid;
  gap:7px;
  margin-bottom:14px;
  min-width:0;
  align-content:start;
}

.careers-phone-label{
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  color:#223c32!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* Match the 48px recruitment inputs while retaining the exact prefix component. */
.careers-phone-input-group{
  height:48px;
  min-height:48px;
  border-radius:12px!important;
}

.careers-phone-input-group .dial-picker{
  height:100%;
}

.careers-phone-input-group .dial-trigger{
  min-height:48px!important;
  height:48px!important;
  border-radius:11px 0 0 11px!important;
}

.careers-phone-input-group input[type="tel"]{
  height:48px!important;
  min-height:48px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:0 12px 12px 0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.careers-phone-input-group input[type="tel"]:focus{
  border:0!important;
  box-shadow:none!important;
}

/* The group itself owns the focus ring, identical to the main form. */
.careers-phone-input-group:focus-within{
  border-color:var(--green-600)!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.11)!important;
  background:#fff!important;
}

/* Ensure neither picker gets Android/Chrome blue flashes. */
.dial-picker,
.dial-picker *,
.dial-trigger,
.dial-menu,
.dial-option,
.dial-custom-toggle,
.dial-custom-apply{
  -webkit-tap-highlight-color:transparent!important;
}

/* Keep both menus independently positioned by their own CSS variables. */
@media(min-width:521px){
  .dial-picker .dial-menu{
    left:var(--dial-menu-vx, 28px)!important;
    top:var(--dial-menu-vy, 90px)!important;
  }
}

@media(max-width:640px){
  .careers-phone-field{
    margin-bottom:14px;
  }
}


/* ===== V4.87 — live bidirectional WhatsApp pill sizing ===== */
.floating-whatsapp{
  transition:
    width .62s cubic-bezier(.22,.8,.24,1),
    transform .28s ease,
    box-shadow .28s ease!important;
}

/* Keep label movement/opacity independent from width resizing. */
.floating-whatsapp .wa-float-label{
  transition:
    opacity .42s ease .18s,
    transform .52s cubic-bezier(.22,.8,.24,1) .10s!important;
}

@media(prefers-reduced-motion:reduce){
  .floating-whatsapp,
  .floating-whatsapp .wa-float-label{
    transition:none!important;
  }
}


/* ===== V4.88 — hard synchronization for PRO + all shiny CTA buttons ===== */
/*
  Language switching rebuilds the hero title, which naturally creates a new
  .hero-pro animation while the existing buttons keep their old phase.
  This one-frame reset class lets JS restart every related shine together.
*/
html.clean4u-shine-sync-reset .hero-pro,
html.clean4u-shine-sync-reset .btn-hero-shine,
html.clean4u-shine-sync-reset .btn-hero-shine::after,
html.clean4u-shine-sync-reset .btn-whatsapp-main,
html.clean4u-shine-sync-reset .btn-whatsapp-main::after,
html.clean4u-shine-sync-reset .contact-action-btn.whatsapp,
html.clean4u-shine-sync-reset .contact-action-btn.whatsapp::after{
  animation:none!important;
}


/* ===== V4.93 — inline form/contact actions + elegant form attention ===== */

.form-copy .form-copy-action{
  color:#13704f!important;
  font:inherit!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  text-decoration:none!important;
  cursor:pointer!important;
  border-radius:3px;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    color .20s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    transform .20s cubic-bezier(.2,.8,.2,1)!important;
}

.form-copy .form-copy-action:hover{
  color:var(--green-900)!important;
  background:rgba(19,112,79,.065);
}

.form-copy .form-copy-action:active{
  transform:translateY(1px);
  background:rgba(19,112,79,.10);
}

.form-copy .form-copy-action:focus-visible{
  outline:2px solid rgba(19,112,79,.20);
  outline-offset:3px;
}

/* Desktop attention animation for the contact form itself. */
.form-card-wrap.is-form-highlight .visit-form{
  animation:clean4uFormAttention .92s cubic-bezier(.2,.72,.22,1) both;
}

.form-card-wrap.is-form-highlight .form-section-label{
  animation:clean4uFormLabelAttention .92s cubic-bezier(.2,.72,.22,1) both;
}

@keyframes clean4uFormAttention{
  0%{
    transform:translateY(0);
    box-shadow:0 18px 50px rgba(8,39,31,.06);
    border-color:var(--line);
  }
  38%{
    transform:translateY(-2px);
    box-shadow:
      0 20px 54px rgba(8,39,31,.075),
      0 0 0 4px rgba(19,112,79,.10);
    border-color:rgba(19,112,79,.30);
  }
  100%{
    transform:translateY(0);
    box-shadow:0 18px 50px rgba(8,39,31,.06);
    border-color:var(--line);
  }
}

@keyframes clean4uFormLabelAttention{
  0%,100%{ transform:translateY(0); }
  38%{ transform:translateY(-2px); }
}

@media(max-width:980px){
  #visit-form{
    scroll-margin-top:96px;
  }
}

@media(prefers-reduced-motion:reduce){
  .form-card-wrap.is-form-highlight .visit-form,
  .form-card-wrap.is-form-highlight .form-section-label{
    animation:none!important;
  }
}


/* ===== V4.95 — align the actual email bubbles with "Formular de contact" ===== */
@media(max-width:640px){
  /*
    Move the whole email cards 8px left, not just their text.
    Increasing width by the same 8px keeps their right edge exactly where it was.
  */
  .contact-email-block .contact-inline-link{
    margin-left:-8px!important;
    margin-right:0!important;
    width:calc(100% + 8px)!important;
    max-width:none!important;
  }
}


/* ===== V4.97 — align email TEXT with "Formular de contact", bubbles untouched ===== */

/*
  The "Formular de contact" pill uses 15px horizontal inner padding.
  Give the two email cards the same left inset so all three text starts
  sit on the same vertical line. Card position/width is left untouched.
*/
.contact-email-block .contact-inline-link{
  padding-left:15px!important;
}


/* ===== V4.98 — native DOM language morph; no snapshots, no flash ===== */

/*
  Language changes now animate the REAL DOM only.
  No View Transition snapshots are used, so there is no old/new image overlap,
  ghosting or pop when controls change size.
*/
html.clean4u-language-changing{
  --c4u-lang-ease:cubic-bezier(.22,.68,.26,1);
}

/*
  Compact controls that change intrinsic width receive a temporary inline
  width/height transition from JS. Keep typography rendering steady.
*/
html.clean4u-language-changing [data-i18n]{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Rapid language tapping should never create blue/native tap flashes. */
.lang-switch,
.lang-switch *,
.mobile-lang-dropdown,
.mobile-lang-dropdown *{
  -webkit-tap-highlight-color:transparent!important;
}

@media(prefers-reduced-motion:reduce){
  html.clean4u-language-changing [data-i18n]{
    transition:none!important;
  }
}


/* ===== V4.99 — truly smooth live WhatsApp width while language changes ===== */

/*
  Register the calculated pill width as a typed length so Chrome/Samsung
  can interpolate the VALUE itself instead of jumping between two var() values.
*/
@property --wa-expanded-width{
  syntax:"<length>";
  inherits:false;
  initial-value:285px;
}

.floating-whatsapp{
  transition:
    --wa-expanded-width .58s cubic-bezier(.22,.72,.24,1),
    width .58s cubic-bezier(.22,.72,.24,1),
    transform .28s ease,
    box-shadow .28s ease!important;
}

/*
  The label still changes independently; the bubble now follows its new
  intrinsic text width continuously in both directions.
*/
.floating-whatsapp.is-expanded{
  will-change:width;
}


/* ===== V5.1 — final language-morph polish + fixed WhatsApp label centering ===== */

/*
  Keep the floating WhatsApp text vertically centered using flex alignment,
  not translateY(-50%). Language animations can no longer disturb its Y position.
*/
.floating-whatsapp .wa-float-label{
  top:0!important;
  bottom:0!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  transform:translateX(10px)!important;
}

.floating-whatsapp.is-expanded .wa-float-label{
  transform:translateX(0)!important;
}

/*
  During a compact control width morph, keep its translated copy on one line.
  JS applies this class only when that control truly changes width.
*/
.clean4u-lang-nowrap{
  white-space:nowrap!important;
}
.clean4u-lang-nowrap [data-i18n]{
  white-space:nowrap!important;
}


/* ===== V5.2 — smooth 2D/diagonal layout motion during language changes ===== */

/*
  Layout-sensitive elements use CSS individual transform properties through
  Web Animations (translate/scale), leaving each button's normal transform
  hover/active behavior untouched.
*/
html.clean4u-language-changing .clean4u-lang-moving{
  will-change:translate,scale;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ===== V5.3 — protected company name + smooth coverage height morph ===== */

.company-name{
  font:inherit!important;
  color:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
}

/*
  Coverage card participates in the existing real-DOM height morph.
  Its left green decorative border therefore grows/shrinks with the card
  instead of snapping when a translation adds/removes lines.
*/
.coverage-card{
  box-sizing:border-box;
  transform-origin:top left;
}


/* ===== V5.4 — calmer coverage movement + slow mini-logo glide ===== */

.about-mini-logo{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:translateY(1px) translateZ(0);
}

html.clean4u-language-changing .about-mini-logo{
  will-change:translate;
}

html.clean4u-language-changing .coverage-card{
  will-change:height,translate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ===== V5.5 — smooth process-card grow/shrink on language changes ===== */

html.clean4u-language-changing .process-step{
  will-change:height,translate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* V5.59 — B2B/company card follows the same real-height morph rhythm as the
   process cards instead of snapping when translated copy wraps differently. */
.b2b-card{box-sizing:border-box}
html.clean4u-language-changing .b2b-card{
  will-change:height,translate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/*
  Keep each process card's box model stable while its translated copy needs
  more or less vertical room. Text wrapping remains natural in HU/UA.
*/
.process-step{
  box-sizing:border-box;
}


/* ===== V5.6 — smooth contact-form copy + translated ghost text ===== */

/* Native placeholder copy that changes with language. */
#surface-input::placeholder,
.dial-search-input::placeholder{
  opacity:1;
  transition:
    opacity .22s cubic-bezier(.22,.68,.26,1),
    color .22s ease!important;
}

#surface-input.clean4u-placeholder-hidden::placeholder,
.dial-search-input.clean4u-placeholder-hidden::placeholder{
  opacity:0!important;
}

/*
  The two custom "Selectează / Select / ..." values are real spans and are
  now part of the language text engine. Keep their rasterization stable.
*/
.form-select-value{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Left contact-form copy and the form below it glide when wrapping changes. */
html.clean4u-language-changing .form-copy > h2,
html.clean4u-language-changing .form-copy > p:not(.eyebrow),
html.clean4u-language-changing .contact-mini,
html.clean4u-language-changing .form-card-wrap{
  will-change:translate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ===== V5.7 — smooth stacked Form / Contact / Careers cards ===== */

.visit-form,
.contact-panel,
.careers-card,
.careers-form{
  box-sizing:border-box;
  transform-origin:top center;
}

html.clean4u-language-changing .visit-form,
html.clean4u-language-changing .contact-panel,
html.clean4u-language-changing .careers-card,
html.clean4u-language-changing .careers-form{
  will-change:height;
}

/*
  While text translations change line count, these panels keep their old
  physical height first and then morph to the new height. Because the height
  itself participates in normal layout, neighbouring sections are pushed
  smoothly and cannot visually collapse through one another.
*/
html.clean4u-language-changing .visit-form,
html.clean4u-language-changing .contact-panel,
html.clean4u-language-changing .careers-card{
  isolation:isolate;
}

/*
  The green recruitment indicator fades with its translated sentence.
  Also anchor it to the first line instead of vertically re-centering it when
  HU/UA wrap onto extra lines.
*/
.careers-note{
  align-items:flex-start!important;
}
.careers-note-dot{
  margin-top:4px!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ===== V5.9 — normalize first contact-form row geometry ===== */

/*
  The phone caption is a <label> nested inside .phone-field and was also
  receiving the generic .visit-form label margin-bottom/grid rules.
  That made the first grid row taller and stretched the Name input.
*/
.visit-form .phone-field > label{
  display:block!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  align-self:auto!important;
}

/* Prevent either column from stretching its field vertically to match the row. */
.visit-form .field-row > label,
.visit-form .field-row > .phone-field,
.visit-form .field-row > .form-custom-select{
  align-self:start!important;
}

/* Keep ordinary single-line fields at one consistent visual height. */
.visit-form input[type="text"],
.visit-form input[type="email"]{
  min-height:0!important;
}


/* ===== V5.10 — equal phone-field heights + complete careers phone frame ===== */

/* Main contact form: match the visual height of ordinary single-line inputs. */
.visit-form .phone-input-group{
  height:47px!important;
  min-height:47px!important;
  box-sizing:border-box!important;
}

.visit-form .phone-input-group .dial-picker{
  height:100%!important;
  align-self:stretch!important;
}

.visit-form .phone-input-group .dial-trigger{
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
}

.visit-form .phone-input-group input[type="tel"]{
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Recruitment phone: the OUTER group owns the complete rounded frame. */
.careers-phone-input-group{
  position:relative!important;
  height:48px!important;
  min-height:48px!important;
  box-sizing:border-box!important;
  border:1px solid #cedbd4!important;
  border-radius:12px!important;
  background:#fbfdfc!important;

  /* Extra inset line guarantees a continuous frame around the prefix side
     without clipping the fixed-position dial menu. */
  box-shadow:inset 0 0 0 .01px #cedbd4!important;
}

.careers-phone-input-group .dial-picker{
  height:100%!important;
  align-self:stretch!important;
  position:relative!important;
  z-index:1!important;
}

.careers-phone-input-group .dial-trigger{
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;

  /* Keep only the internal separator; outer outline belongs to the parent. */
  border-top:0!important;
  border-bottom:0!important;
  border-left:0!important;
  border-right:1px solid #d8e2dd!important;
  border-radius:11px 0 0 11px!important;

  /* Pull the coloured prefix surface one pixel away from the outer frame,
     so the parent border remains fully visible on left/top/bottom. */
  margin:1px 0 1px 1px!important;
  height:calc(100% - 2px)!important;
}

.careers-phone-input-group input[type="tel"]{
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  border:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Preserve the complete outer frame on focus too. */
.careers-phone-input-group:focus-within{
  border-color:var(--green-600)!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.11)!important;
}


/* ===== V5.11 — center recruitment consent text with checkbox ===== */

.careers-check{
  align-items:center!important;
}

.careers-check input[type="checkbox"]{
  margin:0!important;
  align-self:center!important;
}

.careers-check > span{
  display:block!important;
  margin:0!important;
}


/* ===== V5.12 — calm nested motion for Form / Contact / Careers ===== */

html.clean4u-language-changing .visit-form,
html.clean4u-language-changing .contact-panel,
html.clean4u-language-changing .careers-card,
html.clean4u-language-changing .careers-form{
  will-change:height;
  contain:paint;
}

/* Inner visual shells glide without deformation. */
html.clean4u-language-changing .visit-form .btn,
html.clean4u-language-changing .visit-form .form-select-trigger,
html.clean4u-language-changing .contact-panel .contact-link-block,
html.clean4u-language-changing .contact-panel .contact-action-btn,
html.clean4u-language-changing .contact-panel .contact-inline-link,
html.clean4u-language-changing .careers-card .cv-upload,
html.clean4u-language-changing .careers-card .careers-check,
html.clean4u-language-changing .careers-card .btn{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/*
  During language morphs, suppress ordinary hover transitions only while the
  choreography is active. They return immediately afterwards.
*/
html.clean4u-language-changing .visit-form .btn,
html.clean4u-language-changing .contact-panel a,
html.clean4u-language-changing .careers-card .btn,
html.clean4u-language-changing .careers-card .cv-upload{
  transition-property:width,height!important;
}


/* ===== V5.13 — consistent form rhythm + careers typography + contact alignment ===== */

/* ------------------------------------------------------------------
   1) Recruitment labels: exactly match the Contact Form label styling.
   ------------------------------------------------------------------ */
.careers-form label:not(.cv-upload):not(.careers-check) > span,
.careers-phone-label{
  font-size:12px!important;
  line-height:normal!important;
  font-weight:800!important;
  letter-spacing:normal!important;
  color:#405048!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:auto!important;
}

/* ------------------------------------------------------------------
   2) Tablet / phone recruitment form: one single vertical rhythm.
   No stacked margin + grid-gap combinations anymore.
   ------------------------------------------------------------------ */
@media(max-width:980px){
  .careers-form{
    display:grid!important;
    row-gap:18px!important;
  }

  .careers-field-row{
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin:0!important;
  }

  .careers-field-row > label,
  .careers-field-row > .careers-phone-field,
  .careers-form > label:not(.cv-upload):not(.careers-check),
  .careers-form > .cv-upload,
  .careers-form > .careers-check,
  .careers-form > .careers-submit{
    margin:0!important;
  }

  .careers-phone-field{
    margin:0!important;
  }

  /* Empty status must not create a fake extra gap below the button. */
  .careers-status:not(.is-visible){
    display:none!important;
  }

  .careers-status.is-visible{
    margin:0!important;
  }
}

/* ------------------------------------------------------------------
   3) Contact: align the "Formular de contact" bubble with email bubbles.
   The email bubbles already sit 8px left on phones, so move only this
   compact bubble by the same amount.
   ------------------------------------------------------------------ */
@media(max-width:640px){
  .contact-email-block .contact-form-jump{
    margin-left:-8px!important;
    margin-right:0!important;
  }
}

/* ------------------------------------------------------------------
   4) Main contact form on phones: one consistent 18px box-to-box rhythm.
   Remove the old double spacing caused by label margin + field-row gap.
   ------------------------------------------------------------------ */
@media(max-width:640px){
  .visit-form .field-row{
    gap:18px!important;
    margin:0 0 18px!important;
  }

  .visit-form .field-row > label,
  .visit-form .field-row > .phone-field{
    margin-bottom:0!important;
  }

  .visit-form > label:not(.check):not(.company-field){
    margin-bottom:18px!important;
  }

  .visit-form > .company-field.is-visible{
    margin-bottom:18px!important;
  }

  .visit-form > .company-field:not(.is-visible){
    margin-bottom:0!important;
  }

  .visit-form > .other-service-field{
    margin-top:0!important;
  }

  .visit-form > .other-service-field.is-visible{
    margin-bottom:18px!important;
  }

  .visit-form > .other-service-field:not(.is-visible){
    margin-bottom:0!important;
  }

  .visit-form > .check{
    margin:0 0 18px!important;
  }
}


/* ===== V5.14 — fix first recruitment-field gap ===== */

@media(max-width:980px){
  /*
    Override the older, more-specific label margin that was still surviving
    on "Nume și prenume". The grid gap alone now controls spacing.
  */
  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check){
    margin:0!important;
  }

  .careers-form .careers-field-row > .careers-phone-field{
    margin:0!important;
  }
}


/* ===== V5.15 — device location helper for Localitate ===== */

.city-location-field{
  min-width:0;
}

.location-input-wrap{
  position:relative;
  width:100%;
}

.location-input-wrap #city-input{
  padding-right:58px!important;
}

.location-use-btn{
  position:absolute;
  top:50%;
  right:6px;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
  border:1px solid rgba(18,112,78,.16);
  border-radius:10px;
  background:
    linear-gradient(145deg,rgba(238,249,244,.98),rgba(226,243,235,.96));
  color:#13704f;

  cursor:pointer;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 3px 9px rgba(8,39,31,.045);

  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;

  transition:
    transform .20s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease;
}

.location-use-btn:hover{
  color:var(--green-800);
  border-color:rgba(18,112,78,.26);
  background:
    linear-gradient(145deg,rgba(234,248,241,1),rgba(216,239,228,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 5px 13px rgba(8,39,31,.07);
  transform:translateY(calc(-50% - 1px));
}

.location-use-btn:active{
  transform:translateY(-50%) scale(.94);
}

.location-use-btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(22,132,94,.13),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.location-use-icon{
  width:20px;
  height:20px;
  display:block;
  transition:opacity .18s ease, transform .25s ease;
}

.location-use-btn.is-loading{
  cursor:wait;
  pointer-events:none;
}

.location-use-btn.is-loading .location-use-icon{
  opacity:.18;
  transform:scale(.84);
}

.location-use-btn.is-loading::after{
  content:"";
  position:absolute;
  width:17px;
  height:17px;
  border:2px solid rgba(19,112,79,.18);
  border-top-color:#13704f;
  border-radius:50%;
  animation:clean4uLocationSpin .68s linear infinite;
}

@keyframes clean4uLocationSpin{
  to{transform:rotate(360deg)}
}

.location-status{
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  color:#687970;
  font-size:10.5px;
  font-weight:600;
  line-height:1.35;
  transform:translateY(-2px);

  transition:
    max-height .28s cubic-bezier(.2,.8,.2,1),
    opacity .20s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    margin-top .28s ease,
    color .20s ease;
}

.location-status.is-visible{
  max-height:42px;
  opacity:1;
  margin-top:4px;
  transform:translateY(0);
}

.location-status.is-success{
  color:#147550;
}

.location-status.is-error{
  color:#9a4b43;
}

.location-privacy-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px 7px;
  margin-top:5px;
  color:#75867d;
  font-size:9.5px;
  font-weight:560;
  line-height:1.35;
}

.location-privacy-note a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  white-space:nowrap;
}

.location-privacy-note a:hover{
  color:#276f55;
}

html[data-theme="dark"] .location-privacy-note{
  color:rgba(232,241,236,.62);
}

html[data-theme="dark"] .location-privacy-note a:hover{
  color:rgba(232,241,236,.86);
}

#city-input.is-location-filled{
  animation:clean4uLocationFilled .85s cubic-bezier(.2,.75,.22,1);
}

@keyframes clean4uLocationFilled{
  0%{
    border-color:#cedbd4;
    box-shadow:none;
  }
  34%{
    border-color:rgba(28,153,105,.55);
    box-shadow:0 0 0 4px rgba(28,153,105,.10);
  }
  100%{
    border-color:#cedbd4;
    box-shadow:none;
  }
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:640px){
  .location-input-wrap #city-input{
    padding-right:62px!important;
  }

  .location-use-btn{
    width:40px;
    height:40px;
    right:6px;
    border-radius:11px;
  }

  .location-use-icon{
    width:21px;
    height:21px;
  }

  .location-status{
    font-size:10.5px;
  }

  .location-privacy-note{
    font-size:9.25px;
    gap:2px 6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .location-use-btn,
  .location-use-icon,
  .location-status,
  #city-input.is-location-filled{
    transition:none!important;
    animation:none!important;
  }
}


/* ===== V5.16 — Localitate + adresă GPS precision / balanced GPS button ===== */

.location-input-wrap #city-input{
  padding-right:54px!important;
}

/*
  Standard form input is ~47px high. A 37px control with 5px inset produces
  visually equal breathing room on top, bottom and right.
*/
.location-use-btn{
  width:37px!important;
  height:37px!important;
  right:5px!important;
  border-radius:9px!important;
}

.location-use-icon{
  width:19px!important;
  height:19px!important;
}

.location-use-btn.is-loading::after{
  width:16px!important;
  height:16px!important;
}

@media(max-width:640px){
  .location-input-wrap #city-input{
    padding-right:54px!important;
  }

  .location-use-btn{
    width:37px!important;
    height:37px!important;
    right:5px!important;
    border-radius:9px!important;
  }

  .location-use-icon{
    width:19px!important;
    height:19px!important;
  }
}



/* ===== V5.17 — dropdown coordination, tablet portrait polish, iPad touch states ===== */

/* Language dropdown now leaves with the same calm motion it uses on entry. */
.mobile-lang-menu{
  animation:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px) scale(.985);
  transform-origin:top right;
  transition:
    opacity .22s ease,
    transform .24s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .24s!important;
}
.mobile-lang-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s!important;
}
.mobile-lang-menu.is-closing{
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transform:translateY(-5px) scale(.985);
}
.mobile-lang-menu[hidden]{display:none!important}

/* Draw the + geometrically instead of relying on a font glyph baseline.
   This keeps it dead-center in Safari/iPad as well as Chromium. */
.other-service-card .other-service-label:before{
  content:""!important;
  position:relative!important;
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  display:block!important;
  border-radius:50%!important;
  background:
    linear-gradient(#fff,#fff) center/10px 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 10px no-repeat,
    linear-gradient(145deg,#1a9a6b,#0d6c4e)!important;
}

/* Tablet portrait only — phone and desktop/landscape rules stay untouched. */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .hero-grid{
    grid-template-columns:1fr!important;
    max-width:none!important;
    gap:32px!important;
  }

  .hero-copy{
    width:100%!important;
    max-width:none!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    max-width:none!important;
  }

  .hero-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    padding-inline:18px!important;
    text-align:center!important;
  }

  .hero-card{
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
  }

  .hero-card-body{
    padding-left:38px!important;
    padding-right:38px!important;
  }

  /* Use the available portrait width instead of leaving a large dead area.
     This mirrors the desktop/landscape structure, just with tighter geometry. */
  .contact-panel{
    grid-template-columns:minmax(155px,.40fr) minmax(0,1.60fr)!important;
    gap:30px!important;
    align-items:start!important;
    padding:34px!important;
  }

  .contact-links{
    grid-template-columns:minmax(160px,.82fr) minmax(0,1.18fr)!important;
    gap:22px!important;
    align-items:start!important;
    min-width:0!important;
  }

  .contact-phone-block,
  .contact-email-block{
    min-width:0!important;
  }

  .contact-email-block .contact-inline-link{
    width:100%!important;
    max-width:100%!important;
    padding-left:16px!important;
    padding-right:14px!important;
  }

  .contact-email-block .contact-inline-link strong{
    white-space:nowrap!important;
    overflow:visible!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-overflow:clip!important;
    font-size:13px!important;
    letter-spacing:-.012em!important;
  }
}

/* iPad / touch-tablet form polish. Safari must not add a hard blue tap state,
   and all our custom focus rings should ease in just like on phone/desktop. */
@media (min-width:641px) and (max-width:1400px) and (pointer:coarse){
  .visit-form input,
  .visit-form textarea,
  .visit-form select,
  .form-select-trigger,
  .dial-trigger,
  .dial-search input,
  .dial-custom-input,
  .careers-form input,
  .careers-form textarea,
  .cv-upload,
  .check input,
  .careers-check input{
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
  }

  .visit-form input:not([type="checkbox"]),
  .visit-form textarea,
  .careers-form input:not([type="checkbox"]),
  .careers-form textarea,
  .dial-search input,
  .dial-custom-input{
    -webkit-appearance:none!important;
    appearance:none!important;
    outline:none!important;
    font-size:16px!important;
    transition:
      border-color .24s ease,
      box-shadow .26s cubic-bezier(.2,.8,.2,1),
      background-color .24s ease!important;
  }

  .form-select-trigger,
  .dial-trigger{
    outline:none!important;
    transition:
      border-color .24s ease,
      box-shadow .26s cubic-bezier(.2,.8,.2,1),
      background-color .24s ease,
      transform .20s cubic-bezier(.2,.8,.2,1)!important;
  }

  .visit-form input:focus,
  .visit-form textarea:focus,
  .careers-form input:focus,
  .careers-form textarea:focus{
    outline:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-lang-menu{transition:none!important}
}


/* ===== V5.18 — Portfolio + FAQ as separate site destinations ===== */

/* Two additional bubbles participate naturally in the hamburger entrance. */
@media(max-width:980px){
  .main-nav.open > a:not(.btn):nth-of-type(5){
    transition-delay:.165s, .165s, 0s, 0s, 0s!important;
  }
  .main-nav.open > a:not(.btn):nth-of-type(6){
    transition-delay:.195s, .195s, 0s, 0s, 0s!important;
  }
}

/*
  The extra destinations make a full desktop navigation too dense around
  classic 1024px tablet / small-laptop widths. Only the HEADER switches to
  hamburger here; page layout remains the existing landscape/tablet layout.
*/
@media(min-width:981px) and (max-width:1320px){
  .site-header .nav-wrap{
    position:relative;
    justify-content:flex-start!important;
    gap:12px!important;
  }

  .site-header .brand{
    order:1!important;
  }

  .site-header .mobile-lang-dropdown{
    order:2!important;
    margin-left:auto!important;
  }

  .site-header .menu-toggle{
    order:3!important;
    display:block!important;
    margin-left:2px!important;
    flex:0 0 auto!important;
  }

  .site-header .main-nav{
    order:4!important;
    display:flex!important;
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:20px!important;
    right:20px!important;
    z-index:240!important;

    flex-direction:column!important;
    align-items:flex-start!important;
    gap:13px!important;
    padding:18px!important;

    background:rgba(255,255,255,.985)!important;
    border:1px solid rgba(18,112,78,.13)!important;
    border-radius:22px!important;
    box-shadow:0 18px 42px rgba(8,39,31,.13)!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-14px) scale(.985)!important;
    transform-origin:top center!important;

    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .34s,
      box-shadow .34s ease!important;
  }

  .site-header .main-nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s linear 0s,
      box-shadow .34s ease!important;
  }

  .site-header .main-nav > a:not(.btn){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:flex-start!important;

    width:max-content!important;
    min-width:148px!important;
    max-width:100%!important;
    min-height:44px!important;
    box-sizing:border-box!important;

    padding:11px 17px!important;
    margin:0!important;

    border:1px solid rgba(18,112,78,.13)!important;
    border-radius:999px!important;
    background:linear-gradient(
      180deg,
      rgba(250,253,251,.99) 0%,
      rgba(237,247,242,.98) 100%
    )!important;

    color:#173d30!important;
    text-align:left!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1.1!important;
    text-shadow:none!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 5px 14px rgba(8,39,31,.045)!important;

    opacity:0;
    transform:translateY(-7px)!important;
    -webkit-tap-highlight-color:transparent!important;

    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.16,1,.3,1),
      background .20s ease,
      border-color .20s ease,
      box-shadow .20s ease!important;
  }

  .site-header .main-nav > a:not(.btn)::after{
    display:none!important;
  }

  .site-header .main-nav.open > a:not(.btn){
    opacity:1;
    transform:translateY(0)!important;
  }

  .site-header .main-nav.open > a:not(.btn):nth-of-type(1){transition-delay:.045s, .045s, 0s, 0s, 0s!important}
  .site-header .main-nav.open > a:not(.btn):nth-of-type(2){transition-delay:.075s, .075s, 0s, 0s, 0s!important}
  .site-header .main-nav.open > a:not(.btn):nth-of-type(3){transition-delay:.105s, .105s, 0s, 0s, 0s!important}
  .site-header .main-nav.open > a:not(.btn):nth-of-type(4){transition-delay:.135s, .135s, 0s, 0s, 0s!important}
  .site-header .main-nav.open > a:not(.btn):nth-of-type(5){transition-delay:.165s, .165s, 0s, 0s, 0s!important}
  .site-header .main-nav.open > a:not(.btn):nth-of-type(6){transition-delay:.195s, .195s, 0s, 0s, 0s!important}

  .site-header .main-nav > a:not(.btn):active{
    transform:scale(.985)!important;
    background:#e9f5ef!important;
    border-color:rgba(18,112,78,.23)!important;
  }

  .site-header .main-nav > .btn{
    align-self:stretch!important;
    width:100%!important;
    margin-top:5px!important;
    text-align:center!important;
  }

  .site-header .main-nav .lang-switch{
    display:none!important;
  }

  .site-header .menu-toggle,
  .site-header .menu-toggle *,
  .site-header .main-nav,
  .site-header .main-nav *{
    -webkit-tap-highlight-color:transparent!important;
  }

  .site-header .menu-toggle span{
    transform-origin:center!important;
    transition:
      transform .30s cubic-bezier(.16,1,.3,1),
      opacity .18s ease,
      width .24s ease!important;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0!important;
    transform:scaleX(.35)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }
}

/* Give the two destination links the same touch cleanliness as local anchors. */
.nav-destination-link{
  -webkit-tap-highlight-color:transparent;
}


/* ===== V5.22 — stable wide desktop header ===== */
@media(min-width:1321px){
  .site-header .container.nav-wrap{
    width:min(calc(100% - 24px),1540px)!important;
    max-width:none!important;
    gap:12px!important;
  }

  .site-header .main-nav{
    flex-wrap:nowrap!important;
    gap:clamp(9px,.72vw,16px)!important;
    min-width:0!important;
  }

  .site-header .main-nav > a{
    white-space:nowrap!important;
  }

  .site-header .brand{
    flex:0 0 auto!important;
  }
}



/* ===== Source style block 3: clean4u-v523-theme ===== */

/* ===== V5.23 — premium light/dark appearance layer ===== */
:root{
  --theme-bg:#ffffff;
  --theme-bg-soft:#eef5f1;
  --theme-surface:#ffffff;
  --theme-surface-raised:#fbfdfc;
  --theme-text:#14201b;
  --theme-muted:#68746e;
  --theme-border:#dfe8e3;
  --theme-header:rgba(247,250,248,.90);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --theme-bg:#07110e;
  --theme-bg-soft:#0b1b15;
  --theme-surface:#0d1b16;
  --theme-surface-raised:#10221b;
  --theme-text:#ecf7f2;
  --theme-muted:#a6bbb2;
  --theme-border:rgba(187,223,206,.15);
  --theme-header:rgba(7,17,14,.88);
  --ink:#ecf7f2;
  --muted:#a6bbb2;
  --line:rgba(187,223,206,.15);
  --shadow:0 22px 62px rgba(0,0,0,.34);
}


.theme-toggle{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:inline-grid;
  place-items:center;
  position:relative;
  padding:0;
  border:1px solid #d5e3dc;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#194f3b;
  box-shadow:0 5px 15px rgba(8,39,31,.055),inset 0 1px 0 rgba(255,255,255,.85);
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    background-color .38s ease,
    border-color .38s ease,
    color .38s ease,
    box-shadow .38s ease!important;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:#b8d3c6;
  box-shadow:0 7px 19px rgba(8,39,31,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:3px solid rgba(54,184,125,.18);outline-offset:3px}
.theme-toggle svg{
  position:absolute;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:opacity .30s ease,transform .42s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle .theme-sun{opacity:0;transform:rotate(-70deg) scale(.55)}
.theme-toggle .theme-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .theme-toggle{
  background:linear-gradient(145deg,#10261e,#0a1813);
  border-color:rgba(142,211,176,.22);
  color:#b8f0d3;
  box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .theme-toggle .theme-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .theme-toggle .theme-moon{opacity:0;transform:rotate(70deg) scale(.55)}
.theme-toggle-mobile{display:none}

/* Core canvas */
html[data-theme="dark"] body{background:#07110e!important;color:#ecf7f2!important}
html[data-theme="dark"] .site-header{
  background:rgba(7,17,14,.88)!important;
  border-bottom-color:rgba(190,225,208,.10)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
html[data-theme="dark"] .main-nav>a:not(.btn){color:#d7ebe2}
html[data-theme="dark"] .main-nav>a:not(.btn):hover{color:#83d9af!important}
html[data-theme="dark"] .menu-toggle span{background:#e8f5ef!important}

/* Language controls */
html[data-theme="dark"] .lang-switch{background:#0b1813!important;border-color:rgba(182,221,203,.14)!important}
html[data-theme="dark"] .lang-choice{color:#a9bdb4!important}
html[data-theme="dark"] .lang-choice:hover{background:rgba(255,255,255,.055)!important;color:#c8f0dc!important}
html[data-theme="dark"] .lang-choice.is-active{background:#162a22!important;color:#9ce6bf!important;box-shadow:0 3px 10px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .mobile-lang-trigger{
  background:#0e1e18!important;color:#dff2e9!important;border-color:rgba(182,221,203,.16)!important;box-shadow:0 8px 20px rgba(0,0,0,.20)!important
}
html[data-theme="dark"] .mobile-lang-trigger:hover,
html[data-theme="dark"] .mobile-lang-trigger[aria-expanded="true"]{background:#142820!important}
html[data-theme="dark"] .mobile-lang-menu{
  background:rgba(11,24,19,.985)!important;border-color:rgba(163,218,191,.17)!important;box-shadow:0 24px 58px rgba(0,0,0,.38)!important
}
html[data-theme="dark"] .mobile-lang-option{color:#d7e9e1!important}
html[data-theme="dark"] .mobile-lang-option:hover,
html[data-theme="dark"] .mobile-lang-option:focus-visible{background:#152a21!important}
html[data-theme="dark"] .mobile-lang-option.is-selected{background:#183529!important;color:#a9e8c8!important}
html[data-theme="dark"] .mobile-lang-option .lang-option-code{color:#899f95!important}
html[data-theme="dark"] .mobile-lang-option.is-selected .lang-option-code{color:#79d6a9!important}

/* Hero */
html[data-theme="dark"] .hero{
  background:linear-gradient(135deg,#07110e 0%,#0a1a14 48%,#08130f 100%)!important
}
html[data-theme="dark"] .hero:after{
  background-image:linear-gradient(rgba(153,221,188,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(153,221,188,.055) 1px,transparent 1px)!important
}
html[data-theme="dark"] .hero-glow-1{background:#123f2f!important;opacity:.40!important}
html[data-theme="dark"] .hero-glow-2{background:#0d3326!important;opacity:.42!important}
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .copy,
html[data-theme="dark"] .check-list li{color:#a9bdb4!important}
html[data-theme="dark"] .hero-trust b{color:#dff2e9!important}
html[data-theme="dark"] .hero-card{
  background:rgba(13,29,23,.91)!important;
  border-color:rgba(179,224,203,.13)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.28)!important
}
html[data-theme="dark"] .hero-card-top{background:linear-gradient(120deg,#0b382a,#14543e)!important}
html[data-theme="dark"] .hero-card .mini-label{color:#72d6a5!important}
html[data-theme="dark"] .phone-link{
  background:#0c1a15!important;color:#eaf6f0!important;border-color:rgba(99,196,149,.25)!important;box-shadow:0 10px 25px rgba(0,0,0,.20)!important
}
html[data-theme="dark"] .phone-link:hover{background:#11241c!important;border-color:rgba(111,214,165,.40)!important}
html[data-theme="dark"] .hero-pro{filter:drop-shadow(0 1px 0 rgba(255,255,255,.08))!important}

/* Section canvases */
html[data-theme="dark"] .section:not(.section-soft){background:#07110e!important}
html[data-theme="dark"] .section-soft{background:linear-gradient(180deg,#0a1813 0%,#0d2119 100%)!important}
html[data-theme="dark"] #contact.section,
html[data-theme="dark"] .careers-section{background:#07110e!important}
html[data-theme="dark"] .section-heading.centered p:last-child,
html[data-theme="dark"] .form-copy>p:not(.eyebrow),
html[data-theme="dark"] .careers-copy>p:not(.eyebrow){color:#a6bbb2!important}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .eyebrow.emphasis,
html[data-theme="dark"] .form-copy .eyebrow.emphasis,
html[data-theme="dark"] .careers-eyebrow{color:#6ed1a1!important}

html[data-theme="dark"] .coverage-card{
  background:#0f211a!important;border-left-color:#3ead79!important
}
html[data-theme="dark"] .coverage-card strong{color:#dcefe6!important}
html[data-theme="dark"] .coverage-card p{color:#9fb5ab!important}

/* Cards / services / process */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .process-step{
  background:linear-gradient(145deg,#0e1d17,#0b1713)!important;
  border-color:rgba(177,221,200,.13)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.18)!important
}
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .process-step:hover{
  border-color:rgba(112,207,160,.30)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.28)!important
}
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .process-step p{color:#9fb4aa!important}
html[data-theme="dark"] .service-media{background:linear-gradient(135deg,#11281f,#17372a)!important}
html[data-theme="dark"] .service-media img{filter:saturate(.78) contrast(.98) brightness(.82)!important}
html[data-theme="dark"] .service-card:hover .service-media img{filter:saturate(.90) contrast(1.02) brightness(.90)!important}
html[data-theme="dark"] .process-step{border-top-color:rgba(182,223,204,.15)!important}

/* B2B remains an intentionally brighter brand-green island. */
html[data-theme="dark"] .b2b-card{
  background:linear-gradient(120deg,#061f18,#0d4b37 52%,#126748)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.27)!important
}

/* Main form, contact and recruitment */
html[data-theme="dark"] .visit-form,
html[data-theme="dark"] .contact-panel,
html[data-theme="dark"] .careers-card{
  background:#0c1914!important;
  border-color:rgba(185,223,205,.13)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.22)!important
}
html[data-theme="dark"] .careers-card::after{box-shadow:0 18px 46px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .careers-form{
  background:#0f2019!important;
  border-color:rgba(180,222,202,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important
}
html[data-theme="dark"] .visit-form label,
html[data-theme="dark"] .phone-field>span,
html[data-theme="dark"] .careers-form label:not(.cv-upload):not(.careers-check)>span,
html[data-theme="dark"] .careers-phone-label{color:#bcd0c6!important}
html[data-theme="dark"] .contact-mini strong,
html[data-theme="dark"] .contact-links strong,
html[data-theme="dark"] .cv-upload-copy strong{color:#dceee6!important}
html[data-theme="dark"] .contact-mini span,
html[data-theme="dark"] .contact-links span,
html[data-theme="dark"] .cv-upload-copy small,
html[data-theme="dark"] .careers-note{color:#94aba0!important}

/* Native/custom form controls */
html[data-theme="dark"] .visit-form input,
html[data-theme="dark"] .visit-form select,
html[data-theme="dark"] .visit-form textarea,
html[data-theme="dark"] .careers-form input[type="text"],
html[data-theme="dark"] .careers-form input[type="tel"],
html[data-theme="dark"] .careers-form input[type="email"],
html[data-theme="dark"] .form-select-trigger,
html[data-theme="dark"] .phone-input-group,
html[data-theme="dark"] .careers-phone-input-group,
html[data-theme="dark"] .dial-trigger{
  background:#0a1712!important;
  color:#e7f4ee!important;
  border-color:rgba(183,221,203,.17)!important
}
html[data-theme="dark"] .visit-form input:focus,
html[data-theme="dark"] .visit-form select:focus,
html[data-theme="dark"] .visit-form textarea:focus,
html[data-theme="dark"] .careers-form input:focus,
html[data-theme="dark"] .phone-input-group:focus-within,
html[data-theme="dark"] .careers-phone-input-group:focus-within,
html[data-theme="dark"] .form-select-trigger[aria-expanded="true"]{
  background:#0d1d17!important;
  border-color:#2f9569!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.12)!important
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#6f867b!important;opacity:1}
html[data-theme="dark"] .form-select-value.is-placeholder{color:#71877c!important}
html[data-theme="dark"] .form-select-chevron,
html[data-theme="dark"] .dial-chevron{color:#88a097!important}

html[data-theme="dark"] .form-select-menu,
html[data-theme="dark"] .dial-menu{
  background:rgba(10,23,18,.99)!important;
  border-color:rgba(165,218,190,.17)!important;
  box-shadow:0 24px 62px rgba(0,0,0,.42)!important
}
html[data-theme="dark"] .form-select-option,
html[data-theme="dark"] .dial-option{color:#d5e7df!important}
html[data-theme="dark"] .form-select-option:hover,
html[data-theme="dark"] .form-select-option:focus-visible,
html[data-theme="dark"] .dial-option:hover,
html[data-theme="dark"] .dial-option:focus-visible{background:#14291f!important;color:#c5f0da!important}
html[data-theme="dark"] .form-select-option.is-selected,
html[data-theme="dark"] .dial-option.is-selected{background:#18352a!important;color:#a9e6c7!important}
html[data-theme="dark"] .dial-option-code{color:#86a095!important}
html[data-theme="dark"] .dial-search{
  background:#0e1e18!important;border-color:rgba(180,220,201,.15)!important
}
html[data-theme="dark"] .dial-search:focus-within{background:#11251d!important;border-color:#2f9569!important}
html[data-theme="dark"] .dial-custom-wrap{background:#091611!important;border-top-color:rgba(181,220,202,.11)!important}
html[data-theme="dark"] .dial-custom-toggle{color:#c7dad1!important}
html[data-theme="dark"] .dial-custom-toggle:hover{background:#14291f!important}
html[data-theme="dark"] .dial-custom-input-wrap{background:#0f211a!important;border-color:rgba(184,221,204,.16)!important;color:#8ee0b8!important}
html[data-theme="dark"] .cv-upload{
  background:rgba(46,166,112,.07)!important;
  border-color:rgba(101,205,155,.25)!important
}
html[data-theme="dark"] .cv-upload:hover{background:rgba(46,166,112,.11)!important;border-color:rgba(112,216,165,.36)!important}

/* Contact cards/buttons */
html[data-theme="dark"] .contact-mini a:hover,
html[data-theme="dark"] .contact-links a:hover,
html[data-theme="dark"] .contact-inline-link:hover{background:rgba(83,189,139,.075)!important}
html[data-theme="dark"] .contact-inline-link{background:rgba(76,178,131,.055)!important}
html[data-theme="dark"] .contact-action-btn{
  background:#101f19!important;color:#dff1e8!important;border-color:rgba(184,222,204,.15)!important;box-shadow:0 8px 20px rgba(0,0,0,.17)!important
}
html[data-theme="dark"] .contact-action-btn:hover{background:#152a21!important;border-color:rgba(112,207,160,.26)!important}
html[data-theme="dark"] .contact-action-btn.whatsapp{color:#073326!important}
html[data-theme="dark"] .location-use-btn{
  background:linear-gradient(145deg,#11291f,#0c1c16)!important;
  color:#7bd9ac!important;
  border-color:rgba(111,205,160,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 11px rgba(0,0,0,.16)!important
}

/* Footer / reserved future pages */
html[data-theme="dark"] .site-footer{background:#04100c!important;border-top:1px solid rgba(190,225,208,.06)}
html[data-theme="dark"] .reserved-page{
  background:radial-gradient(circle at 18% 12%,rgba(63,171,120,.10),transparent 30%),linear-gradient(180deg,#07110e 0%,#0b1a14 72%)!important
}

/* Hamburger surface when the header collapses. */
@media(max-width:1320px){
  .theme-toggle-mobile{display:inline-grid}
  .theme-toggle-desktop{display:none!important}

  html[data-theme="dark"] .site-header .main-nav{
    background:rgba(9,22,17,.985)!important;
    border-color:rgba(177,221,200,.14)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.34)!important
  }
  html[data-theme="dark"] .site-header .main-nav>a:not(.btn){
    background:linear-gradient(180deg,#10231b 0%,#0b1914 100%)!important;
    border-color:rgba(178,221,201,.13)!important;
    color:#d8ece3!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 14px rgba(0,0,0,.14)!important
  }
}

@media(min-width:981px) and (max-width:1320px){
  .site-header .theme-toggle-mobile{
    order:3!important;
    margin-left:0!important;
  }
  .site-header .menu-toggle{order:4!important}
  .site-header .main-nav{order:5!important}
}

@media(min-width:1321px){
  .theme-toggle-desktop{display:inline-grid}
}

@media(max-width:360px){
  .theme-toggle-mobile{display:none!important}
  .site-header .main-nav .theme-toggle-desktop{
    display:inline-grid!important;
    align-self:flex-start!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .theme-toggle,
  .theme-toggle svg,
  body,.site-header,.hero,.section,.section-soft,.hero-card,.service-card,.process-step,.visit-form,.contact-panel,.careers-card,.careers-form,.reserved-page{
    transition:none!important
  }
}


/* ===== Source style block 4: clean4u-v523-theme-refinements ===== */

/* V5.23 dark-mode refinements after visual validation. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"] .site-header .brand img{
  background:rgba(255,255,255,.96);
  border-radius:11px;
  padding:4px 7px;
  box-shadow:0 5px 16px rgba(0,0,0,.16);
}
html[data-theme="dark"] .about-mini-logo{
  background:rgba(255,255,255,.94);
  border-radius:6px;
  padding:2px 4px;
}
html[data-theme="dark"] .skip-link{background:#10231b!important;color:#e9f6f0!important}

/* The services transition used to fade all the way to white. In dark mode it
   now lands seamlessly into the dark canvas while preserving the long fade. */
html[data-theme="dark"] .services-stage:after{
  background:linear-gradient(180deg,
    #0d4635 0%,
    #124d3b 10%,
    #18543f 21%,
    #1d5a44 33%,
    #1b523f 45%,
    #173f31 58%,
    #122e24 70%,
    #0e221b 81%,
    #0b1a15 90%,
    #08130f 96%,
    #07110e 100%
  )!important;
}

html[data-theme="dark"] .form-copy .form-copy-action{
  color:#72d7a6!important;
}
html[data-theme="dark"] .form-copy .form-copy-action:hover{
  color:#a9edcb!important;
  background:rgba(92,208,153,.075)!important;
}
html[data-theme="dark"] .contact-form-jump{
  color:#8be0b7!important;
  background:rgba(73,187,136,.09)!important;
  border-color:rgba(103,207,158,.22)!important;
}
html[data-theme="dark"] .contact-form-jump:hover{
  color:#b6f1d3!important;
  background:rgba(73,187,136,.14)!important;
}

/* Preserve the WhatsApp brand treatment; only the neutral contact button is dark. */
html[data-theme="dark"] .contact-action-btn.whatsapp{
  background:linear-gradient(112deg,#16bf57 0%,#25d366 38%,#58e78f 50%,#21cb61 63%,#14ac4f 100%)!important;
  background-size:220% 100%!important;
  border-color:rgba(109,218,158,.34)!important;
  color:#073326!important;
  box-shadow:0 10px 24px rgba(18,168,79,.19),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
html[data-theme="dark"] .contact-action-btn.whatsapp:hover{
  background:linear-gradient(112deg,#14b14f 0%,#21c95f 39%,#4dde84 51%,#1bb95a 64%,#129247 100%)!important;
  background-size:220% 100%!important;
}

html[data-theme="dark"] .cv-file-name{
  background:#13271f!important;
  border-color:rgba(121,211,168,.18)!important;
  color:#c9eadb!important;
}
html[data-theme="dark"] .check input[type="checkbox"],
html[data-theme="dark"] .careers-check input[type="checkbox"]{
  background:#0a1712!important;
  border-color:rgba(188,224,207,.34)!important;
}
html[data-theme="dark"] .check input[type="checkbox"]:checked,
html[data-theme="dark"] .careers-check input[type="checkbox"]:checked{
  background:#17865f!important;
  border-color:#17865f!important;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e7f4ee!important;
  -webkit-box-shadow:0 0 0 1000px #0a1712 inset!important;
  caret-color:#e7f4ee!important;
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
}


/* ===== Source style block 5: clean4u-v524-polish ===== */

/* ===== V5.24 — dark-mode cleanup + centered expanded desktop header ===== */

/* 1) Dial picker: one clean search surface in dark mode. */
html[data-theme="dark"] .dial-search{
  background:#0e1e18!important;
  border-color:rgba(180,220,201,.15)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .dial-search:focus-within{
  background:#11251d!important;
  border-color:#2f9569!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.10)!important;
}
html[data-theme="dark"] .dial-search input,
html[data-theme="dark"] .visit-form .dial-search input,
html[data-theme="dark"] .careers-form .dial-search input{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  color:#dceee6!important;
  caret-color:#7bd9ac!important;
  padding:11px 0!important;
}
html[data-theme="dark"] .dial-search input::-webkit-search-decoration,
html[data-theme="dark"] .dial-search input::-webkit-search-cancel-button,
html[data-theme="dark"] .dial-search input::-webkit-search-results-button,
html[data-theme="dark"] .dial-search input::-webkit-search-results-decoration{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:none!important;
}

/* Dial country-group separators must belong to the same dark sheet. */
html[data-theme="dark"] .dial-group-title{
  color:#7f9b8e!important;
  background:rgba(10,23,18,.975)!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .dial-list{
  scrollbar-color:#315749 transparent!important;
}
html[data-theme="dark"] .dial-empty{
  color:#839b90!important;
}

/* 2) Revealed contextual fields: no light cards flashing through dark mode. */
html[data-theme="dark"] .other-service-card{
  background:linear-gradient(135deg,#10231b,#0c1b15)!important;
  border-color:rgba(80,190,137,.25)!important;
  border-left-color:#2fa777!important;
  box-shadow:0 10px 25px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .other-service-card .other-service-label{
  color:#91ddb8!important;
}
html[data-theme="dark"] .other-service-card textarea[name="other_service"]{
  background:#0a1712!important;
  border-color:rgba(126,207,168,.20)!important;
  color:#e7f4ee!important;
}
html[data-theme="dark"] .other-service-card textarea[name="other_service"]:focus{
  background:#0d1d17!important;
  border-color:#2f9569!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.12)!important;
}

html[data-theme="dark"] .company-field{
  background:rgba(9,22,17,0)!important;
  border-color:transparent!important;
  border-left-color:transparent!important;
}
html[data-theme="dark"] .company-field.is-visible{
  background:#0f211a!important;
  border-color:rgba(84,190,139,.23)!important;
  border-left-color:#2fa777!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .company-field.is-visible > span{
  color:#9fe2bf!important;
}

/* 3) Checked consent boxes retain the white tick in dark mode. */
html[data-theme="dark"] .check input[type="checkbox"]:checked,
html[data-theme="dark"] .careers-check input[type="checkbox"]:checked{
  background-color:#17865f!important;
  border-color:#17865f!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3 6.4 11.2 12.8 4.8' fill='none' stroke='white' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:12px 12px!important;
  box-shadow:
    0 0 0 3px rgba(22,132,94,.12),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}

/* 4) Contact hierarchy: phone and emails use the exact same light text tone. */
html[data-theme="dark"] .contact-copy-phone,
html[data-theme="dark"] .contact-copy-phone .copy-phone-value,
html[data-theme="dark"] .contact-email-block .contact-inline-link strong{
  color:#dceee6!important;
}

/* WhatsApp CTA must remain unmistakably white on the brand-green surface. */
html[data-theme="dark"] .contact-action-btn.whatsapp,
html[data-theme="dark"] .contact-action-btn.whatsapp span,
html[data-theme="dark"] .contact-action-btn.whatsapp:hover,
html[data-theme="dark"] .contact-action-btn.whatsapp:hover span{
  color:#fff!important;
}

/*
  5) Expanded desktop header:
  the primary navigation sits in the center of the REAL free corridor between
  the logo (left) and the theme/language/CTA controls (right).
  Equal auto margins are used on both sides of the six primary links.
*/
@media(min-width:1321px){
  .site-header .container.nav-wrap{
    --c4u-header-gap:clamp(9px,.72vw,16px);
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
  }

  .site-header .brand{
    flex:0 0 auto!important;
    margin-right:var(--c4u-header-gap)!important;
  }

  .site-header .main-nav{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    margin-left:0!important;
    gap:var(--c4u-header-gap)!important;
    justify-content:flex-start!important;
  }

  /* First normal nav item gets the left free space... */
  .site-header .main-nav > a:not(.btn):nth-of-type(1){
    margin-left:auto!important;
  }

  /* ...FAQ is the sixth normal link; it gets the same free space on the right. */
  .site-header .main-nav > a:not(.btn):nth-of-type(6){
    margin-right:auto!important;
  }

  .site-header .main-nav > a:not(.btn){
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  .site-header .main-nav .theme-toggle-desktop,
  .site-header .main-nav .lang-switch,
  .site-header .main-nav > .btn{
    flex:0 0 auto!important;
  }
}


/* ===== Source style block 6: clean4u-v525-overflow-fix ===== */

/* ===== V5.25 — remove accidental horizontal page overflow ===== */

/*
  Some desktop browsers count the classic vertical scrollbar inside 100vw.
  The site intentionally contains full-bleed decorative sections, so any
  sub-pixel / scrollbar-width spill must never create a horizontal document
  scrollbar.
*/
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

@supports (overflow:clip){
  html,
  body{
    overflow-x:clip;
  }
}

/* Keep the main structural surfaces constrained to the viewport. */
.site-header,
main,
footer{
  max-width:100%;
}

/*
  The services band remains visually full-bleed, but the document itself
  cannot become horizontally scrollable because of 100vw rounding.
*/
.services-stage{
  max-width:100vw;
}


/* ===== Source style block 7: clean4u-v527-ipad-location ===== */

/* ===== V5.27 — longer iPad/Safari location guidance ===== */
.location-status.is-visible{
  max-height:112px!important;
}
@media(max-width:980px){
  .location-status.is-visible{
    max-height:132px!important;
  }
}


/* ===== Source style block 8: clean4u-v528-desktop-control-spacing ===== */

/* ===== V5.28 — exact symmetric spacing for desktop header controls ===== */
@media(min-width:1321px){
  /*
    On desktop the visible language selector is OUTSIDE .main-nav.
    The distance Dark mode -> CTA is:
      main-nav gap + the 8px CTA breathing room.
    Reuse that exact computed distance for CTA -> Language.
  */
  .site-header .container.nav-wrap{
    --c4u-header-control-gap:var(--c4u-header-gap);
  }

  .site-header .mobile-lang-dropdown{
    margin-left:var(--c4u-header-control-gap)!important;
    margin-right:0!important;
  }
}


/* ===== Source style block 9: clean4u-v547-header-stability ===== */

/* ===== V5.48 — motionless theme nav + truly symmetric desktop controls ===== */
@media(min-width:1321px){
  .site-header .container.nav-wrap{
    --c4u-header-control-gap:14px;
  }

  /* Treat the desktop nav as ONE snapshot during the theme cross-fade.
     Individual text links no longer receive their own transition geometry,
     so they cannot drift by a pixel while light/dark mode changes. */
  .site-header .main-nav{
    view-transition-name:c4u-main-nav;
  }
  .site-header .main-nav > a:not(.btn){
    view-transition-name:none!important;
  }

  /* Flex gap is already inserted between Theme and CTA. Cancel that gap at
     the CTA edge, then add one explicit control gap on the theme button.
     CTA -> Language uses the exact same explicit value. */
  .site-header .main-nav .theme-toggle-desktop{
    margin-right:var(--c4u-header-control-gap)!important;
  }
  .site-header .main-nav > .btn{
    margin-left:calc(0px - var(--c4u-header-gap))!important;
    margin-right:0!important;
  }
  .site-header .mobile-lang-dropdown{
    margin-left:var(--c4u-header-control-gap)!important;
    margin-right:0!important;
  }
}

@keyframes c4uHeaderNavOld{from{opacity:1}to{opacity:0}}
@keyframes c4uHeaderNavNew{from{opacity:0}to{opacity:1}}

::view-transition-group(c4u-main-nav){
  animation:none!important;
}
::view-transition-image-pair(c4u-main-nav){
  isolation:auto!important;
}
::view-transition-old(c4u-main-nav){
  animation:c4uHeaderNavOld .38s ease both!important;
  mix-blend-mode:normal!important;
  transform:none!important;
}
::view-transition-new(c4u-main-nav){
  animation:c4uHeaderNavNew .38s ease both!important;
  mix-blend-mode:normal!important;
  transform:none!important;
}


/* ===== Source style block 10: clean4u-v529-ipad-form-grid ===== */

/* ===== V5.29 — exact 3 + 3 contact-form geometry on tablet portrait ===== */

/*
  Scope is intentionally limited to the three two-column rows at the top of
  the contact form. The two full-width fields below them remain untouched.
*/
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .visit-form .field-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:start!important;
  }

  .visit-form .field-row > label,
  .visit-form .field-row > .phone-field{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /*
    Safari's tablet/touch rule raises text inputs to 16px and, together with
    vertical padding, made the left column ~54px tall while the right controls
    stayed at 46–47px. All six top controls now use the same 47px box.
  */
  .visit-form .field-row input[type="text"],
  .visit-form .field-row input[type="email"],
  .visit-form .field-row #city-input,
  .visit-form .field-row .phone-input-group,
  .visit-form .field-row .form-select-trigger{
    height:47px!important;
    min-height:47px!important;
    max-height:47px!important;
    box-sizing:border-box!important;
  }

  .visit-form .field-row input[type="text"],
  .visit-form .field-row input[type="email"],
  .visit-form .field-row #city-input{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  .visit-form .field-row .location-input-wrap{
    height:47px!important;
  }

  /*
    When no GPS message is visible, it must occupy absolutely no grid track or
    gap. This keeps the third left/right pair aligned like the first two.
  */
  .visit-form .field-row .location-status:not(.is-visible){
    display:none!important;
  }
}


/* ===== Source style block 11: clean4u-v530-whatsapp-choreography ===== */

/* ===== V5.30 — precise floating WhatsApp icon + staged text reveal ===== */

/*
  Position a dedicated 29x29 icon box, rather than the raw SVG itself.
  In the closed 58px desktop bubble this is mathematically centered.
*/
.floating-whatsapp .wa-float-icon{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:29px!important;
  height:29px!important;
  display:grid!important;
  place-items:center!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
  pointer-events:none!important;
  will-change:left,transform;
  transition:
    left .58s cubic-bezier(.22,.72,.24,1),
    transform .58s cubic-bezier(.22,.72,.24,1)!important;
}

.floating-whatsapp .wa-float-icon svg{
  position:static!important;
  left:auto!important;
  top:auto!important;
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  display:block!important;
  transform:none!important;
  transition:none!important;
}

/*
  While the icon is crossing the pill, the label is not merely transparent:
  visibility is kept off as well, so there is no frame where glyphs can
  overlap the moving WhatsApp mark.
*/
.floating-whatsapp .wa-float-label{
  z-index:2!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(8px)!important;
  transition:
    opacity .14s ease 0s,
    transform .18s ease 0s,
    visibility 0s linear .16s!important;
}

/* Icon finishes its trip first. */
.floating-whatsapp.is-expanded .wa-float-icon{
  left:14px!important;
  transform:translate(0,-50%)!important;
}

/*
  JS adds this class only after the icon movement has completed.
  Then the text is allowed to appear smoothly behind/to the right of it.
*/
.floating-whatsapp.is-expanded.is-label-visible .wa-float-label{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(0)!important;
  transition:
    opacity .24s ease,
    transform .30s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear 0s!important;
}

@media(max-width:640px){
  .floating-whatsapp .wa-float-icon{
    width:29px!important;
    height:29px!important;
  }

  .floating-whatsapp.is-expanded .wa-float-icon{
    left:12px!important;
  }
}

/*
  Reduced-motion users do not get the automatic prompt in JS, but keep the
  component deterministic if its classes are ever changed manually.
*/
@media(prefers-reduced-motion:reduce){
  .floating-whatsapp .wa-float-icon,
  .floating-whatsapp .wa-float-label{
    transition:none!important;
  }
}


/* ===== Source style block 12: clean4u-v531-dropdown-motion ===== */

/* ===== V5.31 — smooth bidirectional dropdown motion ===== */

/*
  Form custom selects:
  hidden still removes them from layout after the exit animation, but while
  visible they now use one transition system in both directions.
*/
.form-select-menu{
  animation:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-6px,0) scale(.988)!important;
  transform-origin:top center!important;
  will-change:opacity,transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:
    opacity .18s ease,
    transform .25s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .25s!important;
}

.form-custom-select.is-open .form-select-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;

  transition:
    opacity .20s ease,
    transform .28s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s!important;
}

.form-custom-select.is-closing .form-select-menu{
  pointer-events:none!important;
}

/*
  Prefix menus use the same choreography. This replaces the old one-way CSS
  keyframe animation, which could only animate opening and had no exit phase.
*/
.dial-menu{
  animation:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-7px,0) scale(.985)!important;
  will-change:opacity,transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:
    opacity .19s ease,
    transform .27s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .27s!important;
}

.dial-menu.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;

  transition:
    opacity .21s ease,
    transform .30s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s!important;
}

.dial-menu.is-closing{
  pointer-events:none!important;
}

/* Phone bottom-sheet keeps its natural upward entrance/exit direction. */
@media(max-width:520px){
  .dial-menu{
    transform:translate3d(0,13px,0) scale(.985)!important;
  }
  .dial-menu.is-open{
    transform:translate3d(0,0,0) scale(1)!important;
  }
}

/*
  iPad / touch-tablet:
  consent copy is centered against the 28px checkbox as one visual unit.
*/
@media (min-width:641px) and (max-width:1400px) and (pointer:coarse){
  .visit-form .check,
  .careers-form .careers-check{
    align-items:center!important;
  }

  .visit-form .check input[type="checkbox"],
  .careers-form .careers-check input[type="checkbox"]{
    align-self:center!important;
    margin:0!important;
  }

  .visit-form .check > span,
  .careers-form .careers-check > span{
    display:block!important;
    margin:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .form-select-menu,
  .dial-menu{
    transition:none!important;
  }
}


/* ===== Source style block 13: clean4u-v537-ipad-dial-stable ===== */

/* ===== V5.37 — iPad prefix picker: simple WebKit-safe fade ===== */
/*
  The iPad issue is not the timing itself. The dial popup is a fixed, scrollable
  layer containing sticky/backdrop-filter headings and hundreds of filtered SVG
  images. WebKit can composite those descendants in separate passes, which makes
  the popup look as if it snaps or paints in chunks.

  On iPad only we keep the proven fixed geometry, but make the animated surface
  deliberately boring: opacity only. No scale, no translate, no clip-path, no
  portal/reparenting. Expensive descendant compositing is also disabled.
*/
html.clean4u-ipad .dial-menu{
  animation:none!important;
  -webkit-animation:none!important;

  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;

  transform:none!important;
  -webkit-transform:none!important;
  transform-origin:top left!important;
  -webkit-transform-origin:top left!important;

  will-change:opacity!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  isolation:isolate;

  transition:
    opacity .34s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .34s!important;
  -webkit-transition:
    opacity .34s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .34s!important;
}

html.clean4u-ipad .dial-menu.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  -webkit-transform:none!important;

  transition:
    opacity .36s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s!important;
  -webkit-transition:
    opacity .36s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s!important;
}

html.clean4u-ipad .dial-menu.is-closing{
  opacity:0!important;
  visibility:visible!important;
  pointer-events:none!important;
}

/* Remove the WebKit layer-splitting features from the scrollable contents. */
html.clean4u-ipad .dial-group-title{
  position:static!important;
  top:auto!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:#fff!important;
}

html.clean4u-ipad .dial-list{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

html.clean4u-ipad .dial-option{
  transform:none!important;
  transition:background-color .16s ease!important;
}

html.clean4u-ipad .dial-option-flag{
  overflow:visible!important;
}

html.clean4u-ipad .dial-flag-emoji{
  display:block;
  width:24px;
  min-width:24px;
  text-align:center;
  font-size:20px;
  line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  filter:none!important;
  transform:none!important;
  -webkit-transform:none!important;
}

/* The selected flag remains the existing crisp SVG; only the large country list
   uses native emoji flags on iPad so opening does not rasterize hundreds of SVGs. */
html.clean4u-ipad .dial-option .dial-flag-img{
  filter:none!important;
  transform:none!important;
  -webkit-transform:none!important;
  transition:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}

@media(prefers-reduced-motion:reduce){
  html.clean4u-ipad .dial-menu{
    transition:none!important;
    -webkit-transition:none!important;
  }
}


/* ===== Source style block 14: clean4u-v539-polish ===== */

/* ===== V5.39 — requested site polish ===== */

/* Dark mode: brighter, softer hero canvas so green accents remain readable. */
html[data-theme="dark"] .hero{
  background:
    radial-gradient(ellipse at 20% 16%,rgba(61,166,117,.22) 0%,rgba(33,103,74,.14) 28%,rgba(12,35,26,0) 58%),
    radial-gradient(circle at 88% 24%,rgba(33,115,80,.13) 0%,rgba(9,28,20,0) 42%),
    linear-gradient(135deg,#0a1813 0%,#10271e 48%,#0b1a15 100%)!important;
}
html[data-theme="dark"] .hero-glow-1{background:#1a5a40!important;opacity:.46!important}
html[data-theme="dark"] .hero-glow-2{background:#164a37!important;opacity:.45!important}

/* The hero eyebrow has its own clipped gradient, so it needs a dedicated dark-mode palette. */
html[data-theme="dark"] .hero-eyebrow-shine .hero-eyebrow-text{
  background:linear-gradient(112deg,#43bd83 0%,#6fd6a3 30%,#a1eac5 50%,#68d29f 68%,#3cb77d 100%)!important;
  background-size:220% 100%!important;
  filter:drop-shadow(0 2px 7px rgba(43,169,111,.18))!important;
}
html[data-theme="dark"] .hero-result{color:#84dfb2!important}
html[data-theme="dark"] .hero-pro{
  /* Keep background-position free for the proShine keyframes.
     Using the background shorthand here used to freeze the animation in dark mode. */
  background-image:linear-gradient(120deg,#47c187 0%,#72dba9 42%,#acefce 58%,#51c88f 100%)!important;
  background-size:180% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

/* Lift the small green labels one step in dark mode without turning them neon. */
html[data-theme="dark"] .eyebrow:not(.light),
html[data-theme="dark"] .careers-eyebrow,
html[data-theme="dark"] .coverage-card span[data-i18n="coverage_label"]{
  color:#88dfb5!important;
}

/* Compact frosted logo plate: less stark and much tighter than the old white rectangle. */
html[data-theme="dark"] .site-header .brand{
  padding:2px 5px!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,rgba(249,253,251,.96),rgba(229,241,235,.93))!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.82)!important;
  overflow:hidden!important;
}
html[data-theme="dark"] .site-header .brand img{
  width:140px!important;
  height:48px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:640px){
  html[data-theme="dark"] .site-header .brand{
    padding:2px 4px!important;
    border-radius:11px!important;
  }
  html[data-theme="dark"] .site-header .brand img{
    width:120px!important;
    height:42px!important;
  }
}


/* ===== Source style block 15: clean4u-v540-dark-polish ===== */

/* ===== V5.41 — compact logo gradient + correct local logo + dark header edge fix ===== */

/*
  Header concept:
  In light mode the existing frosted header remains unchanged. In dark mode a
  full-height pale pistachio surface starts at the LEFT EDGE of the viewport,
  comfortably covers the logo, then dissolves into the normal dark header.
  The fade begins immediately after the visible logo artwork and finishes quickly,
  well before navigation text. Tablet/mobile use tighter geometry.
*/
.site-header{
  /* Visible logo is ~91px wide at the current 58px height. Start the fade
     immediately after the actual artwork, not after the 150px image box. */
  --clean4u-logo-zone-end:calc(max(20px,(100vw - 1160px)/2) + 96px);
  --clean4u-logo-zone-fade:clamp(56px,4vw,72px);
  isolation:isolate!important;
  overflow:visible!important;
  transition:
    background-color .52s ease,
    border-color .52s ease,
    box-shadow .52s ease!important;
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    rgba(248,253,250,.998) 0,
    rgba(247,253,249,.998) var(--clean4u-logo-zone-end),
    rgba(225,243,233,.92) calc(var(--clean4u-logo-zone-end) + 12px),
    rgba(132,181,155,.54) calc(var(--clean4u-logo-zone-end) + 30px),
    rgba(39,78,60,.64) calc(var(--clean4u-logo-zone-end) + 48px),
    rgba(7,17,14,.96) calc(var(--clean4u-logo-zone-end) + var(--clean4u-logo-zone-fade)),
    rgba(7,17,14,.96) 100%
  );
  transition:opacity .58s cubic-bezier(.2,.8,.2,1)!important;
}

.site-header .nav-wrap{
  position:relative!important;
  z-index:1!important;
}

html[data-theme="dark"] .site-header{
  /* The pseudo-layer does the visual darkening. Keeping the light glass below
     it makes the mode switch a true cross-fade instead of a sudden background swap. */
  background:#07110e!important;
  border-bottom-color:rgba(60,105,85,.18)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.08)!important;
}
html[data-theme="dark"] .site-header::before{opacity:1!important}

/* No card/plate around the logo anymore: the header itself is its light stage. */
html[data-theme="dark"] .site-header .brand{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html[data-theme="dark"] .site-header .brand img{
  width:150px!important;
  height:58px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

@media (min-width:641px) and (max-width:1200px){
  .site-header{
    --clean4u-logo-zone-end:calc(20px + 96px);
    --clean4u-logo-zone-fade:60px;
  }
}
@media (max-width:640px){
  .site-header{
    --clean4u-logo-zone-end:calc(14px + 82px);
    --clean4u-logo-zone-fade:52px;
  }
  html[data-theme="dark"] .site-header .brand img{
    width:128px!important;
    height:50px!important;
  }
}

/*
  Fix for “Strălucim din 2008”. V5.39 used the `background` shorthand in dark
  mode, which reset background-clip and painted a rectangle. Re-apply clipping
  AFTER the gradient declaration so only the glyphs receive the colour.
*/
html[data-theme="dark"] .hero-eyebrow-shine{
  background:none!important;
  position:relative!important;
  z-index:2!important;
}
html[data-theme="dark"] .hero-eyebrow-shine .hero-eyebrow-text{
  background:linear-gradient(
    112deg,
    #45c187 0%,
    #70d9a7 30%,
    #a9efcb 50%,
    #6bd5a1 68%,
    #41bb81 100%
  )!important;
  background-size:220% 100%!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 2px 7px rgba(43,169,111,.18))!important;
}
html[data-theme="dark"] .hero-eyebrow-shine .hero-eyebrow-glass{
  z-index:3!important;
}

/*
  One continuous dark canvas from the visit form through Contact and Careers.
  This mirrors the seamless lower area already perceived in light mode.
*/
html[data-theme="dark"] #vizionare.section,
html[data-theme="dark"] #contact.section,
html[data-theme="dark"] .careers-section{
  background:#0b1b15!important;
  background-image:none!important;
}

/* The previous spacer was a margin, exposing the darker BODY behind it.
   Turn it into internal padding so the same canvas fills the gap. */
html[data-theme="dark"] .careers-section{
  margin-top:0!important;
  padding-top:12px!important;
}

/* Keep depth consistent from one lower card to the next. */
html[data-theme="dark"] .visit-form,
html[data-theme="dark"] .contact-panel{
  box-shadow:
    0 18px 46px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.018)!important;
}
/* Match the light-mode Careers architecture: one clipped side/bottom shadow only.
   The earlier dark rule added a second full shadow, which could create a band. */
html[data-theme="dark"] .careers-card{
  box-shadow:none!important;
}
html[data-theme="dark"] .careers-card::after{
  box-shadow:0 18px 46px rgba(0,0,0,.20)!important;
}

@media(max-width:980px){
  html[data-theme="dark"] .careers-section{padding-top:10px!important}
}
@media(max-width:640px){
  html[data-theme="dark"] .careers-section{padding-top:8px!important}
}

@media(prefers-reduced-motion:reduce){
  .site-header,
  .site-header::before{transition:none!important}
}


/* ===== Source style block 16: clean4u-v541-header-fix ===== */

/* ===== V5.41 — shorter dark header gradient + cache-safe corrected logo ===== */
.site-header{
  --clean4u-logo-zone-end:calc(max(20px,(100vw - 1160px)/2) + 96px);
  --clean4u-logo-zone-fade:34px;
}
.site-header::before{
  background:linear-gradient(
    90deg,
    rgba(248,253,250,.998) 0,
    rgba(247,253,249,.998) var(--clean4u-logo-zone-end),
    rgba(218,240,229,.88) calc(var(--clean4u-logo-zone-end) + 8px),
    rgba(89,132,111,.48) calc(var(--clean4u-logo-zone-end) + 19px),
    rgba(7,17,14,.96) calc(var(--clean4u-logo-zone-end) + var(--clean4u-logo-zone-fade)),
    rgba(7,17,14,.96) 100%
  )!important;
}
html[data-theme="dark"] .site-header{
  border-bottom-color:transparent!important;
}
html[data-theme="dark"] .site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:rgba(20,72,52,.34);
  pointer-events:none;
  z-index:2;
}
@media (min-width:641px) and (max-width:1200px){
  .site-header{
    --clean4u-logo-zone-end:calc(20px + 96px);
    --clean4u-logo-zone-fade:30px;
  }
}
@media (max-width:640px){
  .site-header{
    --clean4u-logo-zone-end:calc(14px + 82px);
    --clean4u-logo-zone-fade:26px;
  }
}


/* ===== Source style block 17: clean4u-v542-header-fluid-gradient ===== */

/* ===== V5.42 — logo-aware dark header gradient + clean theme cross-fade ===== */
.site-header{
  /* JS replaces this with the real right edge of the visible logo artwork. */
  --clean4u-logo-art-right:calc(max(20px,(100vw - 1160px)/2) + 94px);
  --clean4u-header-fade:clamp(104px,6.2vw,132px);

  /* Keep the physical header canvas LIGHT in both themes. Dark mode is painted
     by ::before. This prevents the pale logo zone from briefly turning grey/black
     while the dark overlay fades away. */
  background:rgba(247,250,248,.90)!important;
  border-bottom-color:rgba(223,232,227,.75)!important;
}

html[data-theme="dark"] .site-header{
  background:rgba(247,250,248,.90)!important;
  border-bottom-color:transparent!important;
}

.site-header::before{
  opacity:0!important;
  background:linear-gradient(
    90deg,
    #f8fdfa 0,
    #f8fdfa var(--clean4u-logo-art-right),
    #f3fbf7 calc(var(--clean4u-logo-art-right) + 14px),
    #e6f4ec calc(var(--clean4u-logo-art-right) + 32px),
    #c9dfd3 calc(var(--clean4u-logo-art-right) + 52px),
    #91ad9f calc(var(--clean4u-logo-art-right) + 73px),
    #526d60 calc(var(--clean4u-logo-art-right) + 92px),
    #274137 calc(var(--clean4u-logo-art-right) + 108px),
    #10231c calc(var(--clean4u-logo-art-right) + 120px),
    #07110e calc(var(--clean4u-logo-art-right) + var(--clean4u-header-fade)),
    #07110e 100%
  )!important;
  transition:opacity .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .site-header::before{opacity:1!important}

/* The separator participates in the same smooth theme change instead of being
   inserted/removed in one frame. */
.site-header::after{
  content:""!important;
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:rgba(20,72,52,.34);
  opacity:0;
  pointer-events:none;
  z-index:2;
  transition:opacity .45s ease!important;
}
html[data-theme="dark"] .site-header::after{opacity:1!important}

/* Correct wide-desktop fallback before JS performs its exact measurement. */
@media(min-width:1321px){
  .site-header{
    --clean4u-logo-art-right:calc(max(12px,(100vw - 1540px)/2) + 94px);
    --clean4u-header-fade:clamp(112px,6.4vw,138px);
  }
}
@media (min-width:641px) and (max-width:1320px){
  .site-header{--clean4u-header-fade:104px}
}
@media(max-width:640px){
  .site-header{
    --clean4u-logo-art-right:104px;
    --clean4u-header-fade:78px;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::before,.site-header::after{transition:none!important}
}


/* ===== Source style block 18: clean4u-v546-header-gradient-twelve-stage ===== */

/* ===== V5.46 — 12-stage perceptual header gradient (4 light + 8 dark) ===== */
.site-header{
  --clean4u-grad-start:190px;
  --clean4u-grad-1:212px;
  --clean4u-grad-2:234px;
  --clean4u-grad-3:255px;
  --clean4u-grad-4:277px;
  --clean4u-grad-5:299px;
  --clean4u-grad-6:321px;
  --clean4u-grad-7:342px;
  --clean4u-grad-8:364px;
  --clean4u-grad-9:386px;
  --clean4u-grad-10:408px;
  --clean4u-grad-11:429px;
  --clean4u-grad-end:451px;
  background:rgba(247,250,248,.90)!important;
  border-bottom:0!important;
}

/*
  12 equal physical segments:
  1–4  : white -> very pale green -> pistachio
  5–12 : pistachio -> progressively deeper greens -> final dark header green
  Colours are interpolated perceptually so no part of the fade collapses
  suddenly into the final dark tone.
*/
.site-header::before{
  background:linear-gradient(
    90deg,
    #f8fdfa 0,
    #f8fdfa var(--clean4u-grad-start),
    #e8f6ed var(--clean4u-grad-1),
    #d8f0e0 var(--clean4u-grad-2),
    #c8e9d3 var(--clean4u-grad-3),
    #b8e2c6 var(--clean4u-grad-4),
    #9fc4ac var(--clean4u-grad-5),
    #86a792 var(--clean4u-grad-6),
    #6e8b7a var(--clean4u-grad-7),
    #577062 var(--clean4u-grad-8),
    #41564b var(--clean4u-grad-9),
    #2c3d35 var(--clean4u-grad-10),
    #192621 var(--clean4u-grad-11),
    #07110e var(--clean4u-grad-end),
    #07110e 100%
  )!important;
  opacity:0!important;
  transition:opacity .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .site-header::before{opacity:1!important}

.site-header::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:1px!important;
  background:rgba(223,232,227,.75)!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:2!important;
  transition:opacity .42s ease!important;
}
html[data-theme="dark"] .site-header::after{opacity:0!important}

@media(prefers-reduced-motion:reduce){
  .site-header::before,.site-header::after{transition:none!important}
}


/* ===== Source style block 19: clean4u-v549-theme-header-stability ===== */

/* ===== V5.49 — truly static header text during light/dark switching ===== */

/* Older experiments assigned the desktop nav its own View Transition snapshot.
   Disable that completely: theme changes now happen on the live DOM. */
.site-header .main-nav{
  view-transition-name:none!important;
}
.site-header .main-nav > a:not(.btn){
  view-transition-name:none!important;
}

/* Keep glyph metrics/rasterisation stable while only the colour changes. */
@media(min-width:981px){
  .site-header .main-nav > a:not(.btn){
    line-height:1.2!important;
    font-synthesis:none!important;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
  }

  html.clean4u-theme-switching .site-header .main-nav > a:not(.btn){
    /* No geometry property is allowed to participate in the theme switch. */
    transition-property:color!important;
    transition-duration:.34s!important;
    transition-timing-function:ease!important;
  }

  html.clean4u-theme-switching .site-header .main-nav > a:not(.btn)::after{
    /* The hover underline keeps its current state; it does not reanimate just
       because the colour theme changed. */
    transition:none!important;
  }
}

/* Neutralise the old named-nav snapshot rules even on browsers that keep a
   previous transition object alive for one frame. */
::view-transition-group(c4u-main-nav),
::view-transition-image-pair(c4u-main-nav),
::view-transition-old(c4u-main-nav),
::view-transition-new(c4u-main-nav){
  animation:none!important;
  transform:none!important;
}
::view-transition-old(c4u-main-nav){opacity:0!important}
::view-transition-new(c4u-main-nav){opacity:1!important}

@media(prefers-reduced-motion:reduce){
  html.clean4u-theme-switching .site-header .main-nav > a:not(.btn){transition:none!important}
}


/* ===== Source style block 20: clean4u-v550-hard-static-nav ===== */

/* ===== V5.50 — hard-lock desktop nav geometry during theme changes ===== */
@media(min-width:981px){
  /*
    The plain navigation labels must never be promoted to independent GPU
    layers. Older rules used translate3d()/will-change, which can make glyphs
    rerasterize a fraction of a pixel differently when their colour changes.
  */
  .site-header .main-nav > a:not(.btn){
    width:var(--c4u-nav-lock-width,auto)!important;
    min-width:var(--c4u-nav-lock-width,0)!important;
    max-width:var(--c4u-nav-lock-width,none)!important;
    flex-basis:var(--c4u-nav-lock-width,auto)!important;
    transform:none!important;
    will-change:auto!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    text-rendering:auto!important;
    -webkit-font-smoothing:antialiased!important;
  }

  .site-header .main-nav > a:not(.btn):hover,
  .site-header .main-nav > a:not(.btn):active{
    transform:none!important;
  }

  /* Theme switching is colour-only and instantaneous for these glyphs.
     The header/gradient/icon keep their own smooth transitions. */
  html.clean4u-theme-switching .site-header .main-nav > a:not(.btn){
    transition:none!important;
  }
}


/* ===== Source style block 21: clean4u-v551-pro-careers-fix ===== */

/* ===== V5.51 — dark PRO animation + exact careers first-row symmetry ===== */

/*
  PRO: the dark palette changes only the gradient image. background-position
  intentionally remains controlled by @keyframes proShine in both themes.
*/
html[data-theme="dark"] .hero-pro{
  animation:proShine 5.5s ease-in-out infinite!important;
}

/* Desktop recruitment row: both columns share the exact same two-row geometry. */
@media(min-width:981px){
  .careers-form .careers-field-row{
    align-items:start!important;
  }

  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check),
  .careers-form .careers-field-row > .careers-phone-field{
    display:grid!important;
    grid-template-rows:17px 48px!important;
    row-gap:7px!important;
    align-content:start!important;
    align-self:start!important;
    margin:0 0 14px!important;
    min-width:0!important;
  }

  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check) > span,
  .careers-form .careers-field-row > .careers-phone-field > .careers-phone-label{
    display:flex!important;
    align-items:center!important;
    height:17px!important;
    min-height:17px!important;
    margin:0!important;
    padding:0!important;
    line-height:17px!important;
  }

  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check) > input[type="text"],
  .careers-form .careers-field-row > .careers-phone-field > .careers-phone-input-group{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    align-self:start!important;
    box-sizing:border-box!important;
  }
}


/* ===== Source style block 22: clean4u-v554-language-theme-fade ===== */

/* ===== V5.54 — fade theme control out/in while language geometry settles ===== */
.site-header .theme-toggle{
  transition:
    opacity .18s cubic-bezier(.4,0,.2,1),
    transform .24s cubic-bezier(.2,.8,.2,1),
    background-color .38s ease,
    border-color .38s ease,
    color .38s ease,
    box-shadow .38s ease!important;
}

.site-header .theme-toggle.clean4u-language-theme-hidden{
  opacity:0!important;
  pointer-events:none!important;
}

@media(min-width:1321px){
  html.clean4u-language-changing .site-header .theme-toggle-desktop{
    visibility:visible!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
    will-change:opacity!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    margin-right:var(--c4u-header-control-gap,14px)!important;
  }

  html.clean4u-language-changing .site-header .main-nav > .btn{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  html.clean4u-language-changing .site-header .mobile-lang-dropdown{
    margin-left:var(--c4u-header-control-gap,14px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header .theme-toggle{transition:none!important}
}


/* ===== Source style block 23: clean4u-v555-mobile-header-controls ===== */

/* ===== V5.55 — mobile header: static theme toggle + exactly symmetric control gaps ===== */
@media(max-width:640px){
  .site-header .nav-wrap{
    --c4u-mobile-control-gap:10px;
    gap:0!important;
  }

  .site-header .mobile-lang-dropdown{
    order:2!important;
    margin-left:auto!important;
    margin-right:var(--c4u-mobile-control-gap)!important;
    flex:0 0 auto!important;
  }

  .site-header .theme-toggle-mobile{
    order:3!important;
    display:inline-grid!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    margin:0 var(--c4u-mobile-control-gap) 0 0!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-header .menu-toggle{
    order:4!important;
    margin:0!important;
    flex:0 0 auto!important;
  }

  /* Language changes must never fade, translate or otherwise disturb the
     mobile theme control. Its geometry stays identical from first to last frame. */
  html.clean4u-language-changing .site-header .theme-toggle-mobile,
  .site-header .theme-toggle-mobile.clean4u-language-theme-hidden{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
  }
}

/* Keep all three controls even on very narrow phones instead of hiding theme. */
@media(max-width:360px){
  .site-header .nav-wrap{--c4u-mobile-control-gap:7px}
  .site-header .brand img{width:106px!important;height:46px!important}
  .site-header .mobile-lang-trigger{
    min-width:72px!important;
    height:38px!important;
    padding:0 8px!important;
    gap:5px!important;
  }
  .site-header .theme-toggle-mobile{
    display:inline-grid!important;
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
  }
  .site-header .theme-toggle-desktop{display:none!important}
}


/* ===== Source style block 24: clean4u-v556-header-language-polish ===== */

/* ===== V5.56 — unified header language choreography ===== */

/* The language trigger keeps an absolutely stable internal grid. Reusing the
   same IMG node + fixed boxes prevents the flag/code from nudging the pill. */
.site-header .mobile-lang-trigger .lang-trigger-flag{
  flex:0 0 24px!important;
  width:24px!important;
  min-width:24px!important;
  height:18px!important;
  overflow:hidden!important;
}
.site-header .mobile-lang-trigger .lang-trigger-code{
  display:inline-block!important;
  flex:0 0 22px!important;
  width:22px!important;
  min-width:22px!important;
  text-align:center!important;
  line-height:1!important;
}
.site-header .mobile-lang-trigger .lang-flag-img{
  width:24px!important;
  height:18px!important;
  max-width:none!important;
}

/* While a language is changing, WAAPI owns the opacity. No inherited hover,
   transform or GPU-layer transition is allowed to compete with it. */
html.clean4u-header-language-changing .site-header .main-nav,
html.clean4u-header-language-changing .site-header .mobile-lang-dropdown,
html.clean4u-header-language-changing .site-header .mobile-lang-trigger,
html.clean4u-header-language-changing .site-header .lang-trigger-flag,
html.clean4u-header-language-changing .site-header .lang-trigger-code,
html.clean4u-header-language-changing .site-header .lang-flag-img{
  transform:none!important;
  translate:none!important;
  scale:none!important;
}
html.clean4u-header-language-changing .site-header .lang-flag-img{
  transition:none!important;
  will-change:auto!important;
}

/* Phone + tablet/iPad use the compact header. Theme and hamburger are anchors:
   language changes must never fade, move or resize the theme control. */
@media(max-width:1320px){
  html.clean4u-language-changing .site-header .theme-toggle-mobile,
  html.clean4u-header-language-changing .site-header .theme-toggle-mobile,
  .site-header .theme-toggle-mobile.clean4u-language-theme-hidden{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
    will-change:auto!important;
  }
}

/* iPad/tablet: while the whole language pill fades, its internals stay in a
   fully final raster state. This prevents the SVG flag/filter from performing
   its own tiny transform or shadow transition underneath the pill fade. */
@media(min-width:641px) and (max-width:1320px){
  html.clean4u-header-language-changing .site-header .mobile-lang-trigger *,
  html.clean4u-header-language-changing .site-header .mobile-lang-trigger .lang-flag-img{
    transition:none!important;
    animation:none!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    will-change:auto!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html.clean4u-header-language-changing .site-header *{
    animation:none!important;
  }
}


/* ===== Source style block 25: clean4u-v558-header-language-transaction ===== */

/* ===== V5.58 — atomic header language transaction =====
   No header geometry may change while visible. Any optional tight-fit fallback
   is applied only while the header controls are fully transparent. */
@media(min-width:1321px){
  .site-header.clean4u-header-tight-fit .container.nav-wrap{
    --c4u-header-gap:8px!important;
    --c4u-header-control-gap:12px!important;
  }

  /* Keep the desktop theme button on its normal 38px geometry in every phase. */
  html.clean4u-language-changing .site-header .theme-toggle-desktop,
  html.clean4u-header-language-changing .site-header .theme-toggle-desktop{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}


/* ===== Source style block 26: clean4u-v563-location-contextual-info ===== */

/* ===== V5.65 — responsive contextual geolocation privacy info ===== */
.visit-form .field-row > .city-location-field{
  align-self:start!important;
  display:grid;
  gap:7px;
  margin-bottom:16px;
  min-width:0;
  font-size:12px;
  font-weight:800;
  color:#405048;
}
.location-label-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.visit-form .location-label-row > label{
  display:block!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  font:inherit!important;
  color:inherit!important;
}
.location-info-wrap{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
}
.location-info-trigger{
  width:20px;
  height:20px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#2d765b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  line-height:1;
  transition:color .18s ease,transform .18s ease,filter .18s ease;
}
.location-info-icon{
  display:block;
  width:19px;
  height:19px;
  pointer-events:none;
  overflow:visible;
}
.location-info-trigger:hover,
.location-info-trigger:focus-visible,
.location-info-trigger[aria-expanded="true"]{
  color:#155e46;
  outline:none;
  filter:drop-shadow(0 2px 4px rgba(15,84,61,.12));
}
.location-info-trigger:focus-visible{
  box-shadow:0 0 0 3px rgba(24,125,86,.10);
}
.location-info-trigger:active{transform:scale(.92)}
.location-privacy-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(310px,calc(100vw - 42px));
  padding:10px 12px;
  border:1px solid rgba(35,94,72,.15);
  border-radius:11px;
  background:rgba(252,254,253,.98);
  color:#5e7168;
  box-shadow:0 12px 30px rgba(8,39,31,.13);
  font-size:10.5px;
  font-weight:580;
  line-height:1.42;
  text-align:left;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,5px);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
  z-index:35;
}
.location-privacy-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:9px;
  height:9px;
  background:inherit;
  border-right:1px solid rgba(35,94,72,.15);
  border-bottom:1px solid rgba(35,94,72,.15);
  transform:translate(-50%,-5px) rotate(45deg);
}
.location-privacy-tooltip.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
  transition-delay:0s;
}
@media (hover:hover) and (pointer:fine){
  .location-info-wrap:hover .location-privacy-tooltip{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
    transition-delay:0s;
  }
}
.location-osm-attribution{
  width:max-content;
  max-width:100%;
  margin-top:-2px;
  color:#8a9891;
  font-size:8.75px;
  font-weight:550;
  line-height:1.2;
  text-decoration:none;
  opacity:.86;
}
.location-osm-attribution a{
  color:inherit;
  text-decoration:none;
}
.location-osm-attribution a:hover{
  color:#327057;
  text-decoration:underline;
  text-underline-offset:2px;
}
html[data-theme="dark"] .visit-form .field-row > .city-location-field{color:#bcd0c6}
html[data-theme="dark"] .location-info-trigger{
  color:#acd2c2;
}
html[data-theme="dark"] .location-info-trigger:hover,
html[data-theme="dark"] .location-info-trigger:focus-visible,
html[data-theme="dark"] .location-info-trigger[aria-expanded="true"]{
  color:#d7eee4;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.22));
}
html[data-theme="dark"] .location-info-trigger:focus-visible{
  box-shadow:0 0 0 3px rgba(122,191,158,.10);
}
html[data-theme="dark"] .location-privacy-tooltip{
  background:rgba(16,35,28,.99);
  color:rgba(230,240,235,.78);
  border-color:rgba(181,221,201,.16);
  box-shadow:0 14px 32px rgba(0,0,0,.32);
}
html[data-theme="dark"] .location-osm-attribution{color:rgba(214,230,222,.48)}
html[data-theme="dark"] .location-osm-attribution a:hover{color:rgba(226,240,233,.78)}
@media(max-width:640px){
  .visit-form .field-row > .city-location-field{margin-bottom:0!important}
  .location-info-trigger{
    width:22px;
    height:22px;
    margin-left:1px;
  }
  .location-info-icon{width:20px;height:20px}
  .location-privacy-tooltip{
    position:fixed;
    left:14px;
    right:14px;
    top:var(--c4u-location-tip-top,auto);
    bottom:auto;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - 28px);
    padding:12px 13px;
    border-radius:12px;
    font-size:11px;
    line-height:1.46;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateY(5px);
    z-index:2147483000;
  }
  .location-privacy-tooltip.is-open{transform:translateY(0)}
  .location-privacy-tooltip::after{
    display:block;
    left:var(--c4u-location-tip-arrow-x,24px);
    top:-5px;
    bottom:auto;
    border:0;
    border-left:1px solid rgba(35,94,72,.15);
    border-top:1px solid rgba(35,94,72,.15);
    transform:translateX(-50%) rotate(45deg);
  }
  .location-privacy-tooltip.is-above::after{
    top:auto;
    bottom:-5px;
    border-left:0;
    border-top:0;
    border-right:1px solid rgba(35,94,72,.15);
    border-bottom:1px solid rgba(35,94,72,.15);
  }
  html[data-theme="dark"] .location-privacy-tooltip::after{
    border-color:rgba(181,221,201,.16);
  }
}
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .visit-form .field-row > .city-location-field{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .location-info-trigger,.location-privacy-tooltip{transition:none!important}
}


/* ===== Source style block 27: clean4u-v566-footer-legal-links ===== */

.footer-legal-links{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;color:#93a69d;opacity:.9}
.footer-legal-links a{color:#aebfb7;text-decoration:none;border-bottom:1px solid rgba(174,191,183,.36);transition:color .2s ease,border-color .2s ease}
.footer-legal-links a:hover,.footer-legal-links a:focus-visible{color:#fff;border-color:rgba(255,255,255,.72)}
.footer-privacy-pending{color:#93a69d}
@media(max-width:640px){.footer-legal-links{justify-content:flex-start}}


/* ===== Source style block 28: clean4u-v566-careers-note-alignment ===== */

/* V5.66 — optical centering for the recruitment status dot. */
.careers-note{align-items:center!important}
.careers-note-dot{margin-top:0!important;align-self:center!important}


/* ===== Source style block 29: clean4u-v567-policy-header-menu ===== */

/* ===== V5.67 — legal/policy access without disturbing the tuned header ===== */
.header-policy-dropdown{display:none}
.mobile-policy-links{display:none}

@media(min-width:1321px){
  .header-policy-dropdown{
    order:4!important;
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    margin-left:10px;
    z-index:420;
  }
  .header-policy-trigger{
    width:38px;height:38px;padding:0;border-radius:50%;
    border:1px solid rgba(20,83,63,.18);
    background:rgba(255,255,255,.88);
    color:#236d52;
    display:grid;place-items:center;
    cursor:pointer;
    appearance:none;-webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
    box-shadow:0 5px 16px rgba(8,39,31,.055);
    transition:background .24s ease,border-color .24s ease,color .24s ease,box-shadow .24s ease,transform .20s ease;
  }
  .header-policy-trigger:hover,
  .header-policy-trigger[aria-expanded="true"]{
    background:#f4faf7;border-color:rgba(20,83,63,.28);color:#155e46;
    box-shadow:0 8px 22px rgba(8,39,31,.09);
  }
  .header-policy-trigger:active{transform:scale(.95)}
  .header-policy-trigger:focus-visible{outline:2px solid rgba(22,132,94,.27);outline-offset:3px}
  .header-policy-icon{width:21px;height:21px;overflow:visible}
  .policy-icon-ring,.policy-icon-stem,.policy-icon-x{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:12px 12px}
  .policy-icon-dot{fill:currentColor;transform-origin:12px 12px}
  .policy-icon-ring,.policy-icon-dot,.policy-icon-stem,.policy-icon-x{transition:opacity .20s ease,transform .32s cubic-bezier(.16,1,.3,1)}
  .policy-icon-x{opacity:0;transform:scale(.42) rotate(-25deg)}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-ring{opacity:.18;transform:scale(.82) rotate(30deg)}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-dot{opacity:0;transform:scale(.2)}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-stem{opacity:0;transform:scaleY(.25) rotate(45deg)}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-x{opacity:1;transform:scale(1) rotate(0)}

  .header-policy-menu{
    position:absolute;right:0;top:calc(100% + 11px);
    width:min(310px,calc(100vw - 28px));
    padding:9px;
    border:1px solid rgba(20,83,63,.13);
    border-radius:18px;
    background:rgba(255,255,255,.985);
    box-shadow:0 22px 55px rgba(7,48,35,.16);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px) scale(.975);
    transform-origin:top right;
    transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s,background .28s ease,border-color .28s ease;
  }
  .header-policy-menu[hidden]{display:none}
  .header-policy-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s,background .28s ease,border-color .28s ease}
  .header-policy-menu-title{padding:7px 10px 9px;color:#72837b;font-size:10.5px;font-weight:900;letter-spacing:.075em;text-transform:uppercase}
  .header-policy-item{
    width:100%;min-height:48px;padding:9px 10px;border:0;border-radius:13px;background:transparent;color:#23372f;
    display:grid;grid-template-columns:31px 1fr;align-items:center;gap:10px;text-align:left;text-decoration:none;font:inherit;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .header-policy-item:hover,.header-policy-item:focus-visible{background:#eef8f3;color:#14533f;outline:none}
  .header-policy-item:active{transform:scale(.988)}
  .header-policy-item-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#e6f4ed;color:#1f6b4f;font-size:11px;font-weight:950}
  .header-policy-item>span:last-child{font-size:13px;font-weight:850;line-height:1.25}
  .header-policy-item small{display:block;margin-top:3px;color:#87978f;font-size:10px;font-weight:750}
  .header-policy-item-pending{cursor:default!important;opacity:.72}
  .header-policy-item-pending:hover{background:transparent;color:#23372f}
}

@media(max-width:1320px){
  .header-policy-dropdown{display:none!important}
  .site-header .main-nav{max-height:calc(100dvh - 94px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-policy-links{
    width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 0;
    opacity:0;transform:translateY(-6px);
    transition:opacity .24s ease,transform .32s cubic-bezier(.16,1,.3,1);
  }
  .site-header .main-nav.open .mobile-policy-links{opacity:1;transform:translateY(0);transition-delay:.19s,.19s}
  .mobile-policy-link{
    min-height:43px;padding:9px 12px;border:1px solid rgba(20,83,63,.14);border-radius:14px;
    background:rgba(230,244,237,.72);color:#205a45;
    display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
    font:inherit;font-size:11.5px;font-weight:850;line-height:1.25;
    cursor:pointer;appearance:none;-webkit-appearance:none;
    -webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important;
    user-select:none!important;-webkit-user-select:none!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
  }
  .mobile-policy-link:active{transform:scale(.985);background:#deefe6}
  .mobile-policy-link:focus-visible{outline:2px solid rgba(22,132,94,.25);outline-offset:2px}
  .mobile-policy-link-pending{flex-direction:column;gap:2px;cursor:default!important;opacity:.72}
  .mobile-policy-link-pending .policy-ui-pending{font-size:9.5px;color:#73877d;font-weight:750}
  .mobile-policy-link::selection,.mobile-policy-link *::selection{background:transparent;color:inherit}
}
@media(max-width:520px){.mobile-policy-links{grid-template-columns:1fr}}

html[data-theme="dark"] .header-policy-trigger{background:rgba(13,34,27,.93);border-color:rgba(180,222,203,.14);color:#b7ddca;box-shadow:0 5px 18px rgba(0,0,0,.15)}
html[data-theme="dark"] .header-policy-trigger:hover,html[data-theme="dark"] .header-policy-trigger[aria-expanded="true"]{background:#112a21;border-color:rgba(180,222,203,.22);color:#d8eee3}
html[data-theme="dark"] .header-policy-menu{background:rgba(9,27,21,.99);border-color:rgba(177,220,200,.10);box-shadow:0 22px 55px rgba(0,0,0,.32)}
html[data-theme="dark"] .header-policy-menu-title{color:#829b8f}
html[data-theme="dark"] .header-policy-item{color:#d1e6dc}
html[data-theme="dark"] .header-policy-item:hover,html[data-theme="dark"] .header-policy-item:focus-visible{background:#10291f;color:#e5f3ec}
html[data-theme="dark"] .header-policy-item-icon{background:#123126;color:#a9d8c2}
html[data-theme="dark"] .header-policy-item small{color:#7f9a8d}
html[data-theme="dark"] .header-policy-item-pending:hover{background:transparent;color:#d1e6dc}
html[data-theme="dark"] .mobile-policy-link{background:rgba(19,54,42,.72);border-color:rgba(174,220,199,.12);color:#c6e3d5}
html[data-theme="dark"] .mobile-policy-link:active{background:#15392c}
html[data-theme="dark"] .mobile-policy-link-pending .policy-ui-pending{color:#82998e}

@media(prefers-reduced-motion:reduce){
  .header-policy-trigger,.header-policy-trigger *,
  .header-policy-menu,.mobile-policy-links,.mobile-policy-link{transition:none!important;animation:none!important}
}


/* ===== Source style block 30: clean4u-v568-menu-polish ===== */

/* ===== V5.68 — coordinated header menus, cleaner icon morph, compact menu polish ===== */

/* The language list needs a little breathing room between interactive rows. */
.mobile-lang-menu{
  top:calc(100% + 28px)!important;
  display:grid;
  gap:4px;
}
.mobile-lang-menu[hidden]{display:none!important}
.mobile-lang-option{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.mobile-lang-option::selection,.mobile-lang-option *::selection{background:transparent!important;color:inherit!important}

/* Desktop legal menu: start below the header surface instead of overlapping it. */
@media(min-width:1321px){
  .header-policy-menu{top:calc(100% + 28px)!important}

  /* The whole information glyph disappears into one larger X. */
  .header-policy-icon{width:22px!important;height:22px!important}
  .policy-icon-ring{
    stroke-width:1.85!important;
    transition:opacity .18s ease,transform .34s cubic-bezier(.16,1,.3,1),stroke-dashoffset .34s cubic-bezier(.16,1,.3,1)!important;
    stroke-dasharray:56!important;
    stroke-dashoffset:0;
  }
  .policy-icon-dot,.policy-icon-stem{
    transition:opacity .15s ease,transform .24s cubic-bezier(.16,1,.3,1)!important;
  }
  .policy-icon-x{
    stroke-width:2.15!important;
    opacity:0!important;
    transform:scale(.28) rotate(-42deg)!important;
    transition:opacity .16s ease .04s,transform .34s cubic-bezier(.16,1,.3,1)!important;
  }
  .header-policy-trigger[aria-expanded="true"]{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  .header-policy-trigger[aria-expanded="true"] .policy-icon-ring{
    opacity:0!important;
    transform:scale(.22) rotate(82deg)!important;
    stroke-dashoffset:56!important;
  }
  .header-policy-trigger[aria-expanded="true"] .policy-icon-dot{opacity:0!important;transform:scale(.05)!important}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-stem{opacity:0!important;transform:scaleY(.08) rotate(45deg)!important}
  .header-policy-trigger[aria-expanded="true"] .policy-icon-x{
    opacity:1!important;
    transform:scale(1.17) rotate(0deg)!important;
  }

  /* Policy rows are textual actions; no decorative C/P badges. */
  .header-policy-item{grid-template-columns:1fr!important;gap:0!important;padding:11px 12px!important}
  .header-policy-item>span:last-child{width:100%}
}

/* Hamburger: three exactly equal strokes, including compact desktop/windowed mode. */
@media(max-width:1320px){
  .site-header .menu-toggle span{
    width:24px!important;min-width:24px!important;max-width:24px!important;
    margin:5px auto!important;
  }
}

/* On desktop widths that intentionally collapse to hamburger, every bubble uses the full menu width. */
@media(min-width:981px) and (max-width:1320px){
  .site-header .main-nav{align-items:stretch!important}
  .site-header .main-nav > a:not(.btn){
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
  }
  .site-header .mobile-policy-links{
    grid-template-columns:1fr!important;
    width:auto!important;
    align-self:stretch!important;
    gap:9px!important;
  }
  .site-header .mobile-policy-link{width:100%!important;min-width:0!important;padding:11px 14px!important}
}

/* No native blue tap/selection flash on the legal/contact utility links. */
a[href^="mailto:"],
.location-osm-attribution,
.header-policy-trigger,
.header-policy-item,
.mobile-policy-link{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
}
.location-osm-attribution{user-select:none!important;-webkit-user-select:none!important;touch-action:manipulation}
a[href^="mailto:"]::selection,.location-osm-attribution::selection,.location-osm-attribution *::selection{background:transparent!important;color:inherit!important}

@media(prefers-reduced-motion:reduce){
  .policy-icon-ring,.policy-icon-dot,.policy-icon-stem,.policy-icon-x{transition:none!important}
}


/* ===== Source style block 31: clean4u-v569-control-geometry-and-crispness ===== */

/* ===== V5.69 — crisp policy glyph + exactly matched header control geometry ===== */

/* The information glyph is pure vector geometry with integer-aligned strokes.
   This keeps it as crisp as the X it morphs into on Chromium/Windows scaling. */
.header-policy-icon{
  width:22px!important;
  height:22px!important;
  display:block!important;
  overflow:visible!important;
  shape-rendering:geometricPrecision;
}
.policy-icon-ring,
.policy-icon-dot,
.policy-icon-stem,
.policy-icon-x{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.policy-icon-dot{stroke-width:2.35!important}
.policy-icon-x{stroke-width:2.15!important}

/* Desktop: language pill is 42px high, therefore both circular utility
   controls are exactly 42px in diameter as well. */
@media(min-width:1321px){
  .site-header .theme-toggle-desktop,
  .site-header .header-policy-dropdown,
  .site-header .header-policy-trigger{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }
  .site-header .theme-toggle-desktop,
  .site-header .header-policy-dropdown{
    flex:0 0 42px!important;
  }
  .site-header .header-policy-trigger{border-radius:50%!important}

  /* Preserve the exact same geometry during the atomic language transition. */
  html.clean4u-language-changing .site-header .theme-toggle-desktop,
  html.clean4u-header-language-changing .site-header .theme-toggle-desktop{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
  }
}

/* Compact header: the theme circle always matches the visible language pill. */
@media(min-width:981px) and (max-width:1320px){
  .site-header .theme-toggle-mobile{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
  }
}
@media(min-width:641px) and (max-width:980px){
  .site-header .theme-toggle-mobile{
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
  }
}
@media(max-width:640px){
  .site-header .theme-toggle-mobile{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
  }
}

/* Hamburger: every closed-state bar is an identical 24x2px raster surface.
   Explicitly reset transform/opacity after the close animation so the third
   bar can never remain on a fractional transformed layer. */
@media(max-width:1320px){
  .site-header .menu-toggle span{
    display:block!important;
    box-sizing:border-box!important;
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:2px!important;
    min-height:2px!important;
    max-height:2px!important;
    margin:5px auto!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    opacity:1;
    filter:none!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .site-header .menu-toggle:not([aria-expanded="true"]) span{
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){
    opacity:1!important;
    transform:translateY(7px) rotate(45deg)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0!important;
    transform:scaleX(.35)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){
    opacity:1!important;
    transform:translateY(-7px) rotate(-45deg)!important;
  }
}


/* ===== Source style block 32: clean4u-v572-header-first-paint-repair ===== */

/* ===== V5.72 — keep the exact v5.69 information icon; retain only the proven first-frame hamburger repair ===== */

/* HAMBURGER
   Keep the original three-span markup and original responsive visibility rules.
   Only place the bars on fixed integer rows and remove the closed-state 3D transform
   that could leave the third bar on a different raster phase before the first click. */
@media(max-width:1320px){
  .site-header .menu-toggle{
    position:relative!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:0!important;
    line-height:0!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .site-header .menu-toggle span{
    position:absolute!important;
    left:50%!important;
    display:block!important;
    box-sizing:border-box!important;
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:2px!important;
    min-height:2px!important;
    max-height:2px!important;
    margin:0 0 0 -12px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:var(--ink)!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    transform-origin:12px 1px!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    will-change:auto!important;
    transition:transform .30s cubic-bezier(.16,1,.3,1),opacity .18s ease!important;
  }
  .site-header .menu-toggle span:nth-child(1){top:11px!important}
  .site-header .menu-toggle span:nth-child(2){top:19px!important}
  .site-header .menu-toggle span:nth-child(3){top:27px!important}
  .site-header .menu-toggle:not([aria-expanded="true"]) span{
    transform:none!important;
    opacity:1!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg)!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){
    transform:scaleX(.35)!important;
    opacity:0!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)!important;
  }
  html[data-theme="dark"] .site-header .menu-toggle span{background:#e8f5ef!important}
}

@media(prefers-reduced-motion:reduce){
  .policy-icon-ring,.policy-icon-dot,.policy-icon-stem,.policy-icon-x,.site-header .menu-toggle span{
    transition:none!important;
  }
}


/* ===== Source style block 33: clean4u-v573-footer-touch-polish ===== */

/* v5.73 — footer links: no blue tap selection + one consistent smooth interaction */
.site-footer a{
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation;
}
.site-footer .footer-grid a,
.site-footer .footer-legal-links a{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:left center;
  transition:color .20s ease,border-color .20s ease,opacity .20s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease!important;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .site-footer .footer-grid a:hover,
  .site-footer .footer-legal-links a:hover{
    transform:translate3d(0,-1px,0) scale(1.015);
    color:#fff!important;
  }
}
.site-footer .footer-grid a:active,
.site-footer .footer-legal-links a:active{
  transform:translate3d(0,1px,0) scale(.97)!important;
  opacity:.86;
  transition-duration:.10s!important;
}
.site-footer .footer-grid a:focus-visible,
.site-footer .footer-legal-links a:focus-visible{
  outline:2px solid rgba(111,206,160,.88);
  outline-offset:4px;
  border-radius:5px;
}
.site-footer .footer-grid a::selection,
.site-footer .footer-grid a *::selection,
.site-footer .footer-legal-links a::selection,
.site-footer .footer-legal-links a *::selection{
  background:transparent;
  color:inherit;
}


/* ===== Source style block 34: clean4u-v574-process-number-size ===== */

/* v5.74 — stronger step numerals while preserving the approved 42px badge geometry */
.process-step .process-number > b{font-size:16px!important;}


/* ===== Source style block 35: clean4u-v574-theme-canvas-transition ===== */

/* ===== V5.74 — smooth page-canvas light/dark interpolation =====
   The main page backgrounds now morph with the exact 0.62 s timing used by
   the approved header cross-fade. Registered colour properties allow even
   gradient backgrounds to interpolate instead of snapping between themes. */
@property --c4u-canvas-bg{syntax:"<color>";inherits:true;initial-value:#f5f6f4;}
@property --c4u-lower-bg{syntax:"<color>";inherits:true;initial-value:#f5f6f4;}
@property --c4u-hero-radial{syntax:"<color>";inherits:true;initial-value:rgba(45,139,99,.10);}
@property --c4u-hero-a{syntax:"<color>";inherits:true;initial-value:#fbfcfb;}
@property --c4u-hero-b{syntax:"<color>";inherits:true;initial-value:#f5f7f5;}
@property --c4u-hero-c{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-hero-grid{syntax:"<color>";inherits:true;initial-value:rgba(20,83,63,.06);}
@property --c4u-soft-a{syntax:"<color>";inherits:true;initial-value:#eef1ef;}
@property --c4u-soft-b{syntax:"<color>";inherits:true;initial-value:#f4f5f3;}
@property --c4u-reserved-glow{syntax:"<color>";inherits:true;initial-value:rgba(63,171,120,.08);}
@property --c4u-reserved-a{syntax:"<color>";inherits:true;initial-value:#f4faf6;}
@property --c4u-reserved-b{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-cookie-a{syntax:"<color>";inherits:true;initial-value:#f7fbf8;}
@property --c4u-cookie-b{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-footer-bg{syntax:"<color>";inherits:true;initial-value:#071d17;}
@property --c4u-glow-1{syntax:"<color>";inherits:true;initial-value:#cfe7d8;}
@property --c4u-glow-2{syntax:"<color>";inherits:true;initial-value:#e3efe8;}
@property --c4u-faq-hero-a{syntax:"<color>";inherits:true;initial-value:#f7fbf9;}
@property --c4u-faq-hero-b{syntax:"<color>";inherits:true;initial-value:#eef8f3;}
@property --c4u-faq-hero-c{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-faq-content-a{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-faq-content-b{syntax:"<color>";inherits:true;initial-value:#f9fcfa;}
@property --c4u-faq-contact-bg{syntax:"<color>";inherits:true;initial-value:#f9fcfa;}
@property --c4u-faq-search-bg{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-faq-search-focus{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-faq-results-bg{syntax:"<color>";inherits:true;initial-value:#ffffff;}
@property --c4u-faq-item-bg{syntax:"<color>";inherits:true;initial-value:#ffffff;}

:root{
  --c4u-canvas-bg:#f5f6f4;
  --c4u-lower-bg:#f5f6f4;
  --c4u-hero-radial:rgba(45,139,99,.10);
  --c4u-hero-a:#fbfcfb;
  --c4u-hero-b:#f5f7f5;
  --c4u-hero-c:#ffffff;
  --c4u-hero-grid:rgba(20,83,63,.06);
  --c4u-soft-a:#eef1ef;
  --c4u-soft-b:#f4f5f3;
  --c4u-reserved-glow:rgba(63,171,120,.08);
  --c4u-reserved-a:#f4faf6;
  --c4u-reserved-b:#ffffff;
  --c4u-cookie-a:#f7fbf8;
  --c4u-cookie-b:#ffffff;
  --c4u-footer-bg:#071d17;
  --c4u-glow-1:#cfe7d8;
  --c4u-glow-2:#e3efe8;
  --c4u-faq-hero-a:#f7fbf9;
  --c4u-faq-hero-b:#eef8f3;
  --c4u-faq-hero-c:#ffffff;
  --c4u-faq-content-a:#ffffff;
  --c4u-faq-content-b:#f9fcfa;
  --c4u-faq-contact-bg:#f9fcfa;
  --c4u-faq-search-bg:#ffffff;
  --c4u-faq-search-focus:#ffffff;
  --c4u-faq-results-bg:#ffffff;
  --c4u-faq-item-bg:#ffffff;
}

html{
  transition:
    --c4u-canvas-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-lower-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-hero-radial .62s cubic-bezier(.22,.8,.24,1),
    --c4u-hero-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-hero-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-hero-c .62s cubic-bezier(.22,.8,.24,1),
    --c4u-hero-grid .62s cubic-bezier(.22,.8,.24,1),
    --c4u-soft-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-soft-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-reserved-glow .62s cubic-bezier(.22,.8,.24,1),
    --c4u-reserved-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-reserved-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-cookie-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-cookie-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-footer-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-glow-1 .62s cubic-bezier(.22,.8,.24,1),
    --c4u-glow-2 .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-hero-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-hero-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-hero-c .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-content-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-content-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-contact-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-search-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-search-focus .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-results-bg .62s cubic-bezier(.22,.8,.24,1),
    --c4u-faq-item-bg .62s cubic-bezier(.22,.8,.24,1)!important;
}

html[data-theme="dark"]{
  --c4u-canvas-bg:#07110e;
  --c4u-lower-bg:#0b1b15;
  --c4u-hero-radial:rgba(18,63,47,.40);
  --c4u-hero-a:#07110e;
  --c4u-hero-b:#0a1a14;
  --c4u-hero-c:#08130f;
  --c4u-hero-grid:rgba(153,221,188,.055);
  --c4u-soft-a:#0a1813;
  --c4u-soft-b:#0d2119;
  --c4u-reserved-glow:rgba(63,171,120,.10);
  --c4u-reserved-a:#07110e;
  --c4u-reserved-b:#0b1a14;
  --c4u-cookie-a:#07110e;
  --c4u-cookie-b:#081712;
  --c4u-footer-bg:#04100c;
  --c4u-glow-1:#123f2f;
  --c4u-glow-2:#0d3326;
  --c4u-faq-hero-a:#091712;
  --c4u-faq-hero-b:#0b1d16;
  --c4u-faq-hero-c:#08130f;
  --c4u-faq-content-a:#07110e;
  --c4u-faq-content-b:#081510;
  --c4u-faq-contact-bg:#081510;
  --c4u-faq-search-bg:#0d1e17;
  --c4u-faq-search-focus:#0d2119;
  --c4u-faq-results-bg:#0d1e17;
  --c4u-faq-item-bg:#0d1e17;
}

body{background-color:var(--c4u-canvas-bg)!important;}
.hero{
  background:
    radial-gradient(circle at 86% 14%,var(--c4u-hero-radial),transparent 28%),
    linear-gradient(135deg,var(--c4u-hero-a) 0%,var(--c4u-hero-b) 55%,var(--c4u-hero-c) 100%)!important;
}
.hero::after{
  background-image:
    linear-gradient(var(--c4u-hero-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--c4u-hero-grid) 1px,transparent 1px)!important;
}
.hero-glow-1{background-color:var(--c4u-glow-1)!important;}
.hero-glow-2{background-color:var(--c4u-glow-2)!important;}
.section:not(.section-soft){background:var(--c4u-canvas-bg)!important;}
.section-soft{background:linear-gradient(180deg,var(--c4u-soft-a) 0%,var(--c4u-soft-b) 100%)!important;}
#vizionare.section,#contact.section,.careers-section{background:var(--c4u-lower-bg)!important;background-image:none!important;}
.reserved-page{
  background:
    radial-gradient(circle at 18% 12%,var(--c4u-reserved-glow),transparent 30%),
    linear-gradient(180deg,var(--c4u-reserved-a) 0%,var(--c4u-reserved-b) 72%)!important;
}
.cookie-policy-page{
  background:linear-gradient(180deg,var(--c4u-cookie-a) 0%,var(--c4u-cookie-b) 30%,var(--c4u-cookie-b) 100%)!important;
}
.site-footer{background-color:var(--c4u-footer-bg)!important;}

@media(prefers-reduced-motion:reduce){
  html{transition:none!important;}
}


/* ===== Source style block 36: clean4u-v575-service-theme-transition ===== */

/* ===== V5.75 — service cards follow the approved 0.62 s theme morph =====
   The six service tiles now interpolate their light/dark surfaces instead of
   snapping between a translucent white fill and the dark gradient. Hover
   movement keeps its existing faster timing. */
@property --c4u-service-card-a{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.94);}
@property --c4u-service-card-b{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.94);}
@property --c4u-service-media-a{syntax:"<color>";inherits:true;initial-value:#d9eee2;}
@property --c4u-service-media-b{syntax:"<color>";inherits:true;initial-value:#eef8f2;}

.service-card{
  --c4u-service-card-a:rgba(255,255,255,.94);
  --c4u-service-card-b:rgba(255,255,255,.94);
  background:linear-gradient(145deg,var(--c4u-service-card-a),var(--c4u-service-card-b))!important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    --c4u-service-card-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-service-card-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
.service-media{
  --c4u-service-media-a:#d9eee2;
  --c4u-service-media-b:#eef8f2;
  background:linear-gradient(135deg,var(--c4u-service-media-a),var(--c4u-service-media-b))!important;
  transition:
    --c4u-service-media-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-service-media-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .service-card{
  --c4u-service-card-a:#0e1d17;
  --c4u-service-card-b:#0b1713;
  background:linear-gradient(145deg,var(--c4u-service-card-a),var(--c4u-service-card-b))!important;
}
html[data-theme="dark"] .service-media{
  --c4u-service-media-a:#11281f;
  --c4u-service-media-b:#17372a;
  background:linear-gradient(135deg,var(--c4u-service-media-a),var(--c4u-service-media-b))!important;
}
/* During an actual theme switch, border/shadow/copy/filter use the exact same
   duration as the page canvas and header. Outside that 680 ms transaction the
   original quicker hover feedback remains unchanged. */
html.clean4u-theme-switching .service-card{
  transition:
    transform .2s ease,
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    --c4u-service-card-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-service-card-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html.clean4u-theme-switching .service-card p{
  transition:color .62s cubic-bezier(.22,.8,.24,1)!important;
}
html.clean4u-theme-switching .service-media img{
  transition:transform .45s ease,filter .62s cubic-bezier(.22,.8,.24,1)!important;
}
@media(prefers-reduced-motion:reduce){
  .service-card,.service-media,.service-card p,.service-media img{transition:none!important;}
}


/* ===== Source style block 37: clean4u-v576-unified-surface-theme-transition ===== */

/* ===== V5.76 — one synchronized light/dark morph for every interior surface =====
   All form panels, controls, contextual boxes and remaining gradient cards now
   follow the same 0.62 s curve already approved for the header/page canvas. */
@property --c4u-process-a{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.92);}
@property --c4u-process-b{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.92);}
@property --c4u-b2b-a{syntax:"<color>";inherits:true;initial-value:#08271f;}
@property --c4u-b2b-b{syntax:"<color>";inherits:true;initial-value:#144a38;}
@property --c4u-b2b-c{syntax:"<color>";inherits:true;initial-value:#1f6b4f;}
@property --c4u-dial-a{syntax:"<color>";inherits:true;initial-value:#f6faf8;}
@property --c4u-dial-b{syntax:"<color>";inherits:true;initial-value:#eef7f2;}
@property --c4u-other-a{syntax:"<color>";inherits:true;initial-value:rgba(230,247,238,.94);}
@property --c4u-other-b{syntax:"<color>";inherits:true;initial-value:rgba(246,252,248,.98);}
@property --c4u-location-a{syntax:"<color>";inherits:true;initial-value:rgba(238,249,244,.98);}
@property --c4u-location-b{syntax:"<color>";inherits:true;initial-value:rgba(226,243,235,.96);}

.process-step{
  --c4u-process-a:rgba(255,255,255,.92);
  --c4u-process-b:rgba(255,255,255,.92);
  background:linear-gradient(145deg,var(--c4u-process-a),var(--c4u-process-b))!important;
  transition:
    transform .22s ease,
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    --c4u-process-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-process-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .process-step{
  --c4u-process-a:#0e1d17;
  --c4u-process-b:#0b1713;
  background:linear-gradient(145deg,var(--c4u-process-a),var(--c4u-process-b))!important;
}

.b2b-card{
  --c4u-b2b-a:#08271f;
  --c4u-b2b-b:#144a38;
  --c4u-b2b-c:#1f6b4f;
  background:linear-gradient(120deg,var(--c4u-b2b-a) 0%,var(--c4u-b2b-b) 52%,var(--c4u-b2b-c) 100%)!important;
  transition:
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    --c4u-b2b-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-b2b-b .62s cubic-bezier(.22,.8,.24,1),
    --c4u-b2b-c .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .b2b-card{
  --c4u-b2b-a:#061f18;
  --c4u-b2b-b:#0d4b37;
  --c4u-b2b-c:#126748;
  background:linear-gradient(120deg,var(--c4u-b2b-a) 0%,var(--c4u-b2b-b) 52%,var(--c4u-b2b-c) 100%)!important;
}

.dial-trigger{
  --c4u-dial-a:#f6faf8;
  --c4u-dial-b:#eef7f2;
  background:linear-gradient(180deg,var(--c4u-dial-a),var(--c4u-dial-b))!important;
  transition:
    color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    --c4u-dial-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-dial-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .dial-trigger{
  --c4u-dial-a:#0a1712;
  --c4u-dial-b:#0a1712;
  background:linear-gradient(180deg,var(--c4u-dial-a),var(--c4u-dial-b))!important;
}

.other-service-card{
  --c4u-other-a:rgba(230,247,238,.94);
  --c4u-other-b:rgba(246,252,248,.98);
  background:linear-gradient(135deg,var(--c4u-other-a),var(--c4u-other-b))!important;
  transition:
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    --c4u-other-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-other-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .other-service-card{
  --c4u-other-a:#10231b;
  --c4u-other-b:#0c1b15;
  background:linear-gradient(135deg,var(--c4u-other-a),var(--c4u-other-b))!important;
}

.location-use-btn{
  --c4u-location-a:rgba(238,249,244,.98);
  --c4u-location-b:rgba(226,243,235,.96);
  background:linear-gradient(145deg,var(--c4u-location-a),var(--c4u-location-b))!important;
  transition:
    transform .20s cubic-bezier(.2,.8,.2,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1),
    --c4u-location-a .62s cubic-bezier(.22,.8,.24,1),
    --c4u-location-b .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .location-use-btn{
  --c4u-location-a:#11291f;
  --c4u-location-b:#0c1c16;
  background:linear-gradient(145deg,var(--c4u-location-a),var(--c4u-location-b))!important;
}

/* Large, non-interactive surfaces can always use the approved duration. */
.hero-card,
.coverage-card,
.visit-form,
.contact-panel,
.careers-card,
.careers-form,
.careers-card::after{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1)!important;
}

/* During the 680 ms theme transaction, every interactive/form surface adopts
   the exact same 0.62 s colour timing, while press/open/reveal transforms keep
   their original faster geometry timings. */
html.clean4u-theme-switching .visit-form input,
html.clean4u-theme-switching .visit-form select,
html.clean4u-theme-switching .visit-form textarea,
html.clean4u-theme-switching .careers-form input[type="text"],
html.clean4u-theme-switching .careers-form input[type="tel"],
html.clean4u-theme-switching .careers-form input[type="email"],
html.clean4u-theme-switching .phone-input-group,
html.clean4u-theme-switching .careers-phone-input-group,
html.clean4u-theme-switching .form-select-menu,
html.clean4u-theme-switching .form-select-option,
html.clean4u-theme-switching .dial-menu,
html.clean4u-theme-switching .dial-search,
html.clean4u-theme-switching .dial-group-title,
html.clean4u-theme-switching .dial-option,
html.clean4u-theme-switching .dial-custom-wrap,
html.clean4u-theme-switching .dial-custom-input-wrap,
html.clean4u-theme-switching .other-service-card textarea[name="other_service"],
html.clean4u-theme-switching .check input[type="checkbox"],
html.clean4u-theme-switching .careers-check input[type="checkbox"]{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1)!important;
}

html.clean4u-theme-switching .form-select-trigger{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1),
    transform .18s ease!important;
}
html.clean4u-theme-switching .cv-upload{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1),
    transform .22s ease!important;
}
html.clean4u-theme-switching .contact-inline-link{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1),
    transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
html.clean4u-theme-switching .contact-action-btn{
  transition:
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1),
    transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
html.clean4u-theme-switching .company-field.is-visible{
  transition:
    max-height .50s cubic-bezier(.2,.8,.2,1),
    opacity .32s ease .05s,
    transform .50s cubic-bezier(.2,.8,.2,1),
    margin .50s cubic-bezier(.2,.8,.2,1),
    padding .50s cubic-bezier(.2,.8,.2,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    background-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    visibility 0s linear 0s!important;
}
/* Keep tooltip open/close opacity/translate untouched; only its surface morphs. */
html.clean4u-theme-switching .location-privacy-tooltip{
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .22s,
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    color .62s cubic-bezier(.22,.8,.24,1)!important;
}
html.clean4u-theme-switching .location-privacy-tooltip.is-open{
  transition-delay:0s,0s,0s,0s,0s,0s,0s!important;
}

html.clean4u-theme-switching .company-field > span,
html.clean4u-theme-switching .visit-form label,
html.clean4u-theme-switching .phone-field>span,
html.clean4u-theme-switching .careers-form label:not(.cv-upload):not(.careers-check)>span,
html.clean4u-theme-switching .careers-phone-label,
html.clean4u-theme-switching .contact-mini strong,
html.clean4u-theme-switching .contact-mini span,
html.clean4u-theme-switching .contact-links strong,
html.clean4u-theme-switching .contact-links span,
html.clean4u-theme-switching .cv-upload-copy strong,
html.clean4u-theme-switching .cv-upload-copy small,
html.clean4u-theme-switching .careers-note,
html.clean4u-theme-switching input::placeholder,
html.clean4u-theme-switching textarea::placeholder,
html.clean4u-theme-switching .form-select-value,
html.clean4u-theme-switching .form-select-chevron,
html.clean4u-theme-switching .dial-chevron{
  transition:color .62s cubic-bezier(.22,.8,.24,1),opacity .62s cubic-bezier(.22,.8,.24,1)!important;
}

@media(prefers-reduced-motion:reduce){
  .process-step,.b2b-card,.dial-trigger,.other-service-card,.location-use-btn,
  .hero-card,.coverage-card,.visit-form,.contact-panel,.careers-card,.careers-form,
  .careers-card::after{transition:none!important;}
  html.clean4u-theme-switching .visit-form *,
  html.clean4u-theme-switching .careers-form *,
  html.clean4u-theme-switching .contact-panel *{transition:none!important;}
}


/* ===== Source style block 38: clean4u-v579-header-policy-gap ===== */

/* ===== V5.79 — equal desktop control spacing ===== */
@media(min-width:1321px){
  .site-header .header-policy-dropdown{
    margin-left:var(--c4u-header-control-gap,14px)!important;
  }
}


/* ===== Source style block 39: clean4u-v581-gdpr-checkboxes ===== */

/* ===== V5.81 — GDPR form acknowledgements + optional 24-month candidate pool ===== */

/* One alignment model for every privacy checkbox: the box is centered against
   the complete copy block, regardless of language or line wrapping. */
.visit-form .privacy-check-row,
.careers-form .privacy-check-row{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  min-width:0!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

.visit-form .privacy-check-row > span,
.careers-form .privacy-check-row > span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  line-height:1.5!important;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

.visit-form .privacy-check-row input[type="checkbox"],
.careers-form .privacy-check-row input[type="checkbox"]{
  align-self:center!important;
  margin:0!important;
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;

  /* Keep the tick present at all times and animate its size instead of
     swapping an image in abruptly when :checked becomes true. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3 6.4 11.2 12.8 4.8' fill='none' stroke='white' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:0 0!important;

  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation!important;

  transition:
    background-size .20s cubic-bezier(.2,.85,.25,1),
    background-color .20s ease,
    border-color .20s ease,
    box-shadow .22s ease,
    transform .18s cubic-bezier(.2,.8,.2,1)!important;
}

.visit-form .privacy-check-row input[type="checkbox"]:checked,
.careers-form .privacy-check-row input[type="checkbox"]:checked{
  background-size:16px 16px!important;
  animation:clean4uPrivacyCheckPop .28s cubic-bezier(.18,.88,.28,1.18);
}

@keyframes clean4uPrivacyCheckPop{
  0%{transform:scale(.91)}
  58%{transform:scale(1.07)}
  100%{transform:scale(1)}
}

/* Privacy links remain clearly identifiable without native blue tap flashes. */
.privacy-policy-link{
  color:var(--green-700)!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  transition:color .20s ease,opacity .18s ease,text-decoration-color .20s ease!important;
}
.privacy-policy-link:hover{opacity:.82!important}
.privacy-policy-link:active{opacity:.66!important}
.privacy-policy-link:focus{outline:none!important}
.privacy-policy-link:focus-visible{
  outline:2px solid rgba(22,132,94,.25)!important;
  outline-offset:2px!important;
  border-radius:3px!important;
}
html[data-theme="dark"] .privacy-policy-link{
  color:#72d9aa!important;
}

/* The optional candidate-pool acknowledgement comes first by design, followed
   by the mandatory privacy acknowledgement. Keep identical geometry for both. */
.careers-form .careers-check-future,
.careers-form .privacy-check-required{
  align-items:center!important;
}

/* During the global theme transaction, checkbox surfaces and privacy links use
   the same approved 0.62 s colour timing as the rest of the forms. */
html.clean4u-theme-switching .privacy-check-row input[type="checkbox"]{
  transition:
    background-size .20s cubic-bezier(.2,.85,.25,1),
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1),
    transform .18s cubic-bezier(.2,.8,.2,1)!important;
}
html.clean4u-theme-switching .privacy-policy-link{
  transition:
    color .62s cubic-bezier(.22,.8,.24,1),
    opacity .18s ease,
    text-decoration-color .62s cubic-bezier(.22,.8,.24,1)!important;
}

/* Never expose platform blue selection/tap feedback on the privacy rows. */
.privacy-check-row::selection,
.privacy-check-row *::selection{
  background:transparent!important;
  color:inherit!important;
}

@media(max-width:640px){
  .visit-form .privacy-check-row,
  .careers-form .privacy-check-row{
    gap:12px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .privacy-check-row input[type="checkbox"]:checked{animation:none!important}
  .privacy-check-row input[type="checkbox"]{transition:none!important}
}


/* ===== Source style block 40: clean4u-v582-dial-dark-ipad-fix ===== */

/* ===== V5.82 — unified dark custom-prefix field + iPad dark group headings ===== */
/* The general dark-form rule also targets the nested custom-prefix input.
   Keep the input itself transparent so the single wrapper surface owns the
   entire field background instead of creating two overlapping dark shades. */
html[data-theme="dark"] .visit-form .dial-custom-input,
html[data-theme="dark"] .careers-form .dial-custom-input{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  color:#e7f4ee!important;
}

/* v5.37 intentionally makes the iPad group headings non-sticky for smoother
   WebKit scrolling. In dark mode that rule must not force a white strip. */
html.clean4u-ipad[data-theme="dark"] .dial-group-title{
  background:#0a1712!important;
  color:#7f9b8e!important;
  border:0!important;
  box-shadow:none!important;
}


/* ===== Source style block 41: clean4u-v583-dark-contact-email-edge-fix ===== */

/* ===== V5.83 — remove the light-mode top highlight from contact email cards in dark mode ===== */
html[data-theme="dark"] .contact-email-block .contact-inline-link{
  border-color:rgba(184,222,204,.11)!important;
  background:linear-gradient(135deg,rgba(76,178,131,.072) 0%,rgba(76,178,131,.048) 100%)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.14)!important;
}
html[data-theme="dark"] .contact-email-block .contact-inline-link:hover{
  border-color:rgba(112,207,160,.20)!important;
  background:linear-gradient(135deg,rgba(83,189,139,.105) 0%,rgba(83,189,139,.072) 100%)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.17)!important;
}


/* ===== Source style block 42: clean4u-v584-form-consent-spacing-grips ===== */

/* ===== V5.84 — privacy-row rhythm, consistent copy + clean textarea resize grips ===== */

/* Contact form: exactly 8 px above and below the GDPR acknowledgement. */
.visit-form .message-resize-label{
  margin-bottom:0!important;
}
.visit-form .privacy-check-row{
  margin:8px 0!important;
}

/* Recruitment: exactly 8 px from CV -> optional consent -> mandatory notice -> submit. */
.careers-form .cv-upload{
  margin-bottom:8px!important;
}
.careers-form .careers-check-future,
.careers-form .privacy-check-required{
  margin:0 0 8px!important;
}

/* All three privacy rows use the same readable copy colour and theme timing. */
.visit-form .privacy-check-row,
.careers-form .privacy-check-row,
.visit-form .privacy-check-row > span,
.careers-form .privacy-check-row > span{
  color:#56675f!important;
}
.visit-form .privacy-check-row > span,
.careers-form .privacy-check-row > span{
  font-weight:600!important;
  transition:color .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .visit-form .privacy-check-row,
html[data-theme="dark"] .careers-form .privacy-check-row,
html[data-theme="dark"] .visit-form .privacy-check-row > span,
html[data-theme="dark"] .careers-form .privacy-check-row > span{
  color:#c9d7d0!important;
}

/* The GDPR anchor itself owns only the glyph box — no padded/tall invisible hit area. */
.privacy-policy-link{
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:inherit!important;
  vertical-align:baseline!important;
  box-sizing:content-box!important;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.privacy-policy-link::selection{
  background:transparent!important;
  color:inherit!important;
}

/* We already provide our own pointer/touch resize control. Disable the browser's
   native corner dots so the rounded corner stays clean on every theme/device. */
.message-resize-label textarea[name="message"],
.other-service-card textarea[name="other_service"]{
  resize:none!important;
}
.message-resize-label textarea[name="message"]::-webkit-resizer,
.other-service-card textarea[name="other_service"]::-webkit-resizer{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}

/* Custom resize grip: one deliberate surface in light mode, one in dark mode. */
.textarea-resize-grip{
  background-color:#ecf7f1!important;
  background-image:
    linear-gradient(135deg,transparent 0 47%,rgba(18,112,78,.38) 48% 54%,transparent 55% 100%),
    linear-gradient(135deg,transparent 0 47%,rgba(18,112,78,.58) 48% 55%,transparent 56% 100%)!important;
  background-position:8px 8px,3px 3px!important;
  background-size:10px 10px,15px 15px!important;
  background-repeat:no-repeat!important;
  border-color:rgba(18,112,78,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 3px 8px rgba(8,39,31,.055)!important;
  transition:
    opacity .20s ease,
    transform .20s ease,
    background-color .62s cubic-bezier(.22,.8,.24,1),
    border-color .62s cubic-bezier(.22,.8,.24,1),
    box-shadow .62s cubic-bezier(.22,.8,.24,1)!important;
}
html[data-theme="dark"] .textarea-resize-grip{
  background-color:#10241b!important;
  background-image:
    linear-gradient(135deg,transparent 0 47%,rgba(111,214,168,.38) 48% 54%,transparent 55% 100%),
    linear-gradient(135deg,transparent 0 47%,rgba(111,214,168,.62) 48% 55%,transparent 56% 100%)!important;
  border-color:rgba(111,214,168,.22)!important;
  box-shadow:0 3px 9px rgba(0,0,0,.20)!important;
}

/* V5.13 uses a mobile grid gap for the recruitment form. Re-declare the rhythm
   explicitly so the consent region remains 8 px on tablet/phone too. */
@media(max-width:980px){
  .careers-form{
    row-gap:0!important;
  }
  .careers-form > .careers-field-row{
    margin:0 0 18px!important;
  }
  .careers-form > label:not(.cv-upload):not(.careers-check){
    margin:0 0 18px!important;
  }
  .careers-form > .cv-upload{
    margin:0 0 8px!important;
  }
  .careers-form > .careers-check-future,
  .careers-form > .privacy-check-required{
    margin:0 0 8px!important;
  }
  .careers-form > .careers-submit{
    margin:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .privacy-check-row > span,
  .textarea-resize-grip{transition:none!important}
}


/* ===== Source style block 43: clean4u-v585-ipad-header-theme-fix ===== */

/* ===== V5.85 — iPad/Safari sticky-header theme compositor fix =====
   Safari on iPad can briefly repaint the top edge of a sticky translucent
   backdrop-filter layer when data-theme changes. Keep the same visual header
   architecture, but make the iPad header use a stable composited surface and
   let the existing ::before dark gradient do the theme animation. */
html.clean4u-ipad .site-header{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(247,250,248,.96)!important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
html.clean4u-ipad .site-header::before,
html.clean4u-ipad .site-header::after{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Cover Safari's occasional one-device-pixel seam at the viewport edge while
   the overlay opacity is changing. The colour follows the actual theme. */
html.clean4u-ipad .site-header{
  box-shadow:inset 0 1px 0 rgba(247,250,248,.96)!important;
}
html.clean4u-ipad[data-theme="dark"] .site-header{
  box-shadow:inset 0 1px 0 #07110e!important;
}


/* ===== Source style block 44: clean4u-v587-copy-spacing-contact-polish ===== */

/* ===== V5.87 — formal Romanian copy + stronger form rhythm + dark contact parity ===== */

/* Make the availability line in the hero card easier to read without changing
   the dimensions or hierarchy of the rest of the hero card. */
.hero-card-top > span[data-i18n="card_available"]{
  font-size:14px!important;
  line-height:1.25!important;
  font-weight:800!important;
}

/* Give every GDPR/recruitment consent row clearly more breathing room above
   and below. This intentionally doubles the earlier ~8px visual separation. */
.visit-form .privacy-check-row,
.careers-form .privacy-check-row{
  margin-top:16px!important;
  margin-bottom:16px!important;
}

/* In dark mode the compact "Formular de contact" control must use the exact
   same surface/text treatment as the phone-number twin on its left. */
html[data-theme="dark"] .contact-form-jump{
  color:#dceee6!important;
  background:rgba(25,130,90,.065)!important;
  border-color:rgba(18,112,78,.16)!important;
}
html[data-theme="dark"] .contact-form-jump:hover{
  color:#dceee6!important;
  background:rgba(25,130,90,.105)!important;
  border-color:rgba(18,112,78,.24)!important;
}


/* ===== Source style block 45: clean4u-v589-micro-layout-polish ===== */

/* ===== V5.89 — exact section rhythm + compact form note + clean Contact/Careers separation ===== */

/* Keep the V5.88 hero-card rhythm. */
.hero-card-body{
  padding-top:22px!important;
}
.hero-card .mini-label{
  margin:0 0 22px!important;
}
.hero-card h2{
  margin-top:0!important;
}

/* Keep the three direct-contact rows visibly card-like in both themes. */
.contact-mini{
  gap:12px!important;
}
.contact-mini a{
  padding:15px 18px!important;
  border:1px solid rgba(20,83,63,.15)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,249,246,.98))!important;
  box-shadow:0 8px 20px rgba(8,39,31,.055)!important;
}
.contact-mini a:hover{
  background:linear-gradient(180deg,#fff,#f0f7f3)!important;
  border-color:rgba(31,107,79,.25)!important;
  box-shadow:0 11px 25px rgba(8,39,31,.075)!important;
}
html[data-theme="dark"] .contact-mini a{
  background:linear-gradient(180deg,#10251d,#0d211a)!important;
  border-color:rgba(112,207,160,.18)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] .contact-mini a:hover{
  background:linear-gradient(180deg,#132b22,#10251d)!important;
  border-color:rgba(112,207,160,.28)!important;
  box-shadow:0 11px 25px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] .contact-mini strong{color:#dceee6!important}
html[data-theme="dark"] .contact-mini span{color:#9fb8ad!important}

/* Form note: compact but still relaxed. The distance from the submit button to
   the note and from the note to the card edge is deliberately the same. */
.visit-form{
  padding-bottom:18px!important;
}
.visit-form .form-note{
  margin:18px 0 0!important;
  line-height:1.5!important;
}

/* Contact -> Careers uses the exact same section gap as Visit form -> Contact:
   desktop 6+6=12px, tablet 5+5=10px, phone 4+4=8px. Keep one continuous canvas. */
#contact.section{
  padding-bottom:6px!important;
  margin-bottom:0!important;
  background:var(--c4u-lower-bg)!important;
  background-image:none!important;
}
.careers-section{
  margin-top:0!important;
  padding-top:6px!important;
  background:var(--c4u-lower-bg)!important;
  background-image:none!important;
}

/* Both lower cards use the same restrained depth. A short, downward shadow
   avoids overlap in the narrow gap, so no artificial horizontal band appears. */
.contact-panel,
.careers-card{
  border:1px solid var(--line)!important;
  box-shadow:0 5px 12px rgba(8,39,31,.06)!important;
}
.careers-card::before,
.careers-card::after{
  content:none!important;
  display:none!important;
}
html[data-theme="dark"] .contact-panel,
html[data-theme="dark"] .careers-card{
  border-color:rgba(185,223,205,.13)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.16)!important;
}

/* Careers copy remains aligned to the top edge of the form. */
.careers-card{
  align-items:start!important;
}
.careers-copy{
  align-self:start!important;
  padding-top:0!important;
}

/* Services: match the space above “Serviciile noastre” to the actual space
   below the intro paragraph before the next separator/stage. On desktop/tablet
   that lower rhythm is 52px; on phones the centered heading rhythm is 34px. */
#servicii.section{
  padding-top:52px!important;
}
#servicii .section-heading.centered .eyebrow.emphasis{
  margin-top:0!important;
  margin-bottom:22px!important;
}

@media(max-width:980px){
  .hero-card-body{padding-top:20px!important}
  .hero-card .mini-label{margin-bottom:20px!important}
  .visit-form{padding-bottom:18px!important}
  .visit-form .form-note{margin-top:18px!important}
  #contact.section{padding-bottom:5px!important}
  .careers-section{padding-top:5px!important}
  #servicii.section{padding-top:52px!important}
  #servicii .section-heading.centered .eyebrow.emphasis{margin-bottom:20px!important}
}

@media(max-width:640px){
  .hero-card-body{padding-top:18px!important}
  .hero-card .mini-label{margin-bottom:18px!important}
  .contact-mini a{padding:14px 16px!important}
  .visit-form{padding-bottom:16px!important}
  .visit-form .form-note{margin-top:16px!important}
  #contact.section{padding-bottom:4px!important}
  .careers-section{padding-top:4px!important}
  #servicii.section{padding-top:34px!important}
  #despre.section + #servicii{margin-top:0!important}
  #servicii .section-heading.centered .eyebrow.emphasis{margin-bottom:18px!important}
}


/* ===== Source style block 46: clean4u-v590-contact-careers-gap-fix ===== */

/* ===== V5.90 — exact Contact/Careers gap parity + no shadow seam =====
   The previous build matched the light-mode geometry, but an older dark-mode
   rule still enlarged the Careers top padding (12/10/8px). Also, Contact used
   a different shadow model than the visit form, so the two inter-card gaps did
   not look the same even when their CSS spacing matched. */

/* 1) Use the exact same downward shadow on the visit form and Contact card.
   This makes Visit->Contact and Contact->Careers read with the same depth. */
.visit-form,
.contact-panel{
  box-shadow:0 18px 46px rgba(8,39,31,.075)!important;
}

/* 2) Careers keeps a full border but its own shadow is not allowed to bleed
   upward into the narrow gap. Depth is drawn only on the sides and bottom. */
.careers-card{
  box-shadow:none!important;
  border-top:1px solid var(--line)!important;
}
.careers-card::before{
  content:none!important;
  display:none!important;
}
.careers-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:0 18px 46px rgba(8,39,31,.075)!important;
  clip-path:inset(0 -64px -64px -64px)!important;
  z-index:0!important;
}
.careers-card > *{position:relative;z-index:1}

/* 3) Exact geometric parity with the existing Visit->Contact gap. */
#contact.section{padding-bottom:6px!important}
.careers-section{padding-top:6px!important;margin-top:0!important}

/* 4) Dark mode: explicitly override the older, more-specific 12/10/8px rule.
   Keep the same shadow logic, but with dark-mode depth values. */
html[data-theme="dark"] .visit-form,
html[data-theme="dark"] .contact-panel{
  box-shadow:0 18px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html[data-theme="dark"] .careers-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
  border-top-color:rgba(185,223,205,.13)!important;
}
html[data-theme="dark"] .careers-card::after{
  box-shadow:0 18px 46px rgba(0,0,0,.20)!important;
}
html[data-theme="dark"] #contact.section{padding-bottom:6px!important}
html[data-theme="dark"] .careers-section{padding-top:6px!important;margin-top:0!important}

@media(max-width:980px){
  #contact.section{padding-bottom:5px!important}
  .careers-section{padding-top:5px!important}
  html[data-theme="dark"] #contact.section{padding-bottom:5px!important}
  html[data-theme="dark"] .careers-section{padding-top:5px!important}
}
@media(max-width:640px){
  #contact.section{padding-bottom:4px!important}
  .careers-section{padding-top:4px!important}
  html[data-theme="dark"] #contact.section{padding-bottom:4px!important}
  html[data-theme="dark"] .careers-section{padding-top:4px!important}
}


/* ===== Source style block 47: clean4u-v591-unified-lower-canvas ===== */

/* ===== V5.91 — one physical lower canvas + independently melting card shadows =====
   The lower area is now wrapped in a single background layer. This removes the
   possibility of section-boundary colour seams. All three primary cards use
   normal, multi-layer ambient shadows; no clipped/masked pseudo-shadow is used,
   so overlapping blur fields blend naturally instead of creating a hard line. */

.lower-site-canvas{
  --lower-stack-gap:12px;
  --lower-card-shadow:
    0 2px 8px rgba(8,39,31,.030),
    0 12px 34px rgba(8,39,31,.065),
    0 28px 64px rgba(8,39,31,.030);
  --lower-card-border:rgba(20,83,63,.14);
  position:relative;
  isolation:isolate;
  background:var(--c4u-lower-bg)!important;
  background-image:none!important;
}

/* The wrapper is the ONLY background in this zone. Sections are transparent,
   which means there is literally no section edge available to draw a stripe. */
.lower-site-canvas > #vizionare.section,
.lower-site-canvas > #contact.section,
.lower-site-canvas > .careers-section{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Preserve the already-approved equal physical gaps between card edges. */
.lower-site-canvas > #vizionare.section{padding-bottom:calc(var(--lower-stack-gap) / 2)!important;}
.lower-site-canvas > #contact.section{
  padding-top:calc(var(--lower-stack-gap) / 2)!important;
  padding-bottom:calc(var(--lower-stack-gap) / 2)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.lower-site-canvas > .careers-section{
  padding-top:calc(var(--lower-stack-gap) / 2)!important;
  margin-top:0!important;
}

/* Every main rectangle owns its own soft shadow. No clipping, masks or top
   cut-offs: the blur is free to meet the neighbouring blur and dissolve into it. */
.lower-site-canvas .visit-form,
.lower-site-canvas .contact-panel,
.lower-site-canvas .careers-card{
  position:relative!important;
  z-index:1!important;
  border:1px solid var(--lower-card-border)!important;
  box-shadow:var(--lower-card-shadow)!important;
  overflow:visible!important;
}

/* Kill every historical Careers shadow helper/mask. The pseudo-element clip was
   the remaining source of the artificial horizontal edge. */
.lower-site-canvas .careers-card::before,
.lower-site-canvas .careers-card::after{
  content:none!important;
  display:none!important;
  box-shadow:none!important;
  clip-path:none!important;
  background:none!important;
}

/* Keep the Careers card's complete outline; its depth now comes from the same
   shadow model as the other cards. */
.lower-site-canvas .careers-card{
  border-top:1px solid var(--lower-card-border)!important;
}

/* Do not expose the body canvas between the continuous lower field and footer. */
.site-footer{margin-top:0!important;}

html[data-theme="dark"] .lower-site-canvas{
  --lower-card-shadow:
    0 2px 10px rgba(0,0,0,.105),
    0 14px 38px rgba(0,0,0,.175),
    0 30px 70px rgba(0,0,0,.085);
  --lower-card-border:rgba(185,223,205,.13);
}

html[data-theme="dark"] .lower-site-canvas > #vizionare.section,
html[data-theme="dark"] .lower-site-canvas > #contact.section,
html[data-theme="dark"] .lower-site-canvas > .careers-section{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

@media(max-width:980px){
  .lower-site-canvas{--lower-stack-gap:10px;}
}
@media(max-width:640px){
  .lower-site-canvas{
    --lower-stack-gap:8px;
    --lower-card-shadow:
      0 2px 7px rgba(8,39,31,.026),
      0 10px 28px rgba(8,39,31,.055),
      0 22px 48px rgba(8,39,31,.026);
  }
  html[data-theme="dark"] .lower-site-canvas{
    --lower-card-shadow:
      0 2px 8px rgba(0,0,0,.095),
      0 11px 30px rgba(0,0,0,.155),
      0 24px 52px rgba(0,0,0,.075);
  }
}


/* ===== Source style block 48: clean4u-v592-careers-phone-match ===== */

/* ===== V5.92 — recruitment phone frame matches the contact form ===== */
.careers-phone-input-group{
  box-shadow:none!important;
}
.careers-phone-input-group .dial-trigger{
  margin:0!important;
  height:100%!important;
  border-radius:11px 0 0 11px!important;
}
.careers-phone-input-group:focus-within{
  box-shadow:0 0 0 3px rgba(62,170,120,.13)!important;
}


/* ===== Source style block 49: clean4u-v593-field-limits ===== */

/* ===== V5.93 — humane character limits + inline limit feedback ===== */
.field-limit-feedback{
  display:block;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-3px);
  color:#b42318;
  font-size:10.5px;
  font-weight:750;
  line-height:1.35;
  letter-spacing:0;
  transition:
    max-height .24s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .24s cubic-bezier(.2,.8,.2,1),
    margin-top .24s ease;
}
.field-limit-feedback.is-visible{
  max-height:34px;
  margin-top:5px;
  opacity:1;
  transform:translateY(0);
}

/* City has its own status row; keep the limit message directly under the input. */
.city-location-field > .field-limit-feedback{
  margin-left:0;
  margin-right:0;
}

/* A short, deliberate warning. It does not permanently style a valid field red. */
.visit-form input.limit-feedback-active,
.visit-form textarea.limit-feedback-active,
.careers-form input.limit-feedback-active{
  border-color:#d23b32!important;
  box-shadow:0 0 0 3px rgba(210,59,50,.13)!important;
  animation:clean4uLimitPulse .44s cubic-bezier(.2,.75,.25,1);
}

@keyframes clean4uLimitPulse{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-2px)}
  48%{transform:translateX(2px)}
  72%{transform:translateX(-1px)}
}

html[data-theme="dark"] .field-limit-feedback{
  color:#ff9189;
}
html[data-theme="dark"] .visit-form input.limit-feedback-active,
html[data-theme="dark"] .visit-form textarea.limit-feedback-active,
html[data-theme="dark"] .careers-form input.limit-feedback-active{
  border-color:#ef6f66!important;
  box-shadow:0 0 0 3px rgba(239,111,102,.16)!important;
}

@media(prefers-reduced-motion:reduce){
  .field-limit-feedback{transition:none!important}
  .visit-form input.limit-feedback-active,
  .visit-form textarea.limit-feedback-active,
  .careers-form input.limit-feedback-active{animation:none!important}
}


/* ===== Source style block 50: clean4u-v595-limit-feedback-polish ===== */

/* ===== V5.95 — smooth, fully visible limit feedback on every relevant field ===== */

/* The message is a self-expanding grid track. 0fr -> 1fr animates to the
   real wrapped text height, so long messages never clip or jump the layout. */
.field-limit-feedback{
  display:grid!important;
  grid-template-rows:0fr;
  min-width:0;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
  opacity:0;
  transform:translateY(-2px);
  color:#c62828!important;
  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1.38!important;
  letter-spacing:0!important;
  transition:
    grid-template-rows .26s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    transform .26s cubic-bezier(.2,.8,.2,1),
    margin .26s cubic-bezier(.2,.8,.2,1)!important;
}
.field-limit-feedback-text{
  display:block;
  min-height:0;
  overflow:hidden;
  color:inherit!important;
}
.field-limit-feedback.is-visible{
  grid-template-rows:1fr;
  margin-top:6px!important;
  opacity:1;
  transform:translateY(0);
}

/* Old contextual green/white label rules must never recolour an error. */
.company-field > .field-limit-feedback,
.company-field.is-visible > .field-limit-feedback,
.other-service-card > .field-limit-feedback,
.careers-form label:not(.cv-upload):not(.careers-check) > .field-limit-feedback,
.careers-phone-field > .field-limit-feedback,
.phone-field > .field-limit-feedback,
.dial-custom-editor > .field-limit-feedback{
  color:#c62828!important;
}
html[data-theme="dark"] .company-field > .field-limit-feedback,
html[data-theme="dark"] .company-field.is-visible > .field-limit-feedback,
html[data-theme="dark"] .other-service-card > .field-limit-feedback,
html[data-theme="dark"] .careers-form label:not(.cv-upload):not(.careers-check) > .field-limit-feedback,
html[data-theme="dark"] .careers-phone-field > .field-limit-feedback,
html[data-theme="dark"] .phone-field > .field-limit-feedback,
html[data-theme="dark"] .dial-custom-editor > .field-limit-feedback,
html[data-theme="dark"] .field-limit-feedback{
  color:#ff746c!important;
}

/* Company reveal had a fixed cap from before inline feedback existed. */
.company-field.is-visible{
  max-height:205px!important;
}

/* Phone feedback lives under the complete phone control; pulse the complete
   rounded frame instead of the borderless <input> nested inside it. */
.phone-input-group.limit-feedback-active,
.careers-phone-input-group.limit-feedback-active{
  border-color:#d23b32!important;
  box-shadow:0 0 0 3px rgba(210,59,50,.13)!important;
  animation:clean4uLimitPulse .44s cubic-bezier(.2,.75,.25,1);
}
html[data-theme="dark"] .phone-input-group.limit-feedback-active,
html[data-theme="dark"] .careers-phone-input-group.limit-feedback-active{
  border-color:#ef6f66!important;
  box-shadow:0 0 0 3px rgba(239,111,102,.16)!important;
}

/* Main form phone already owns its label/group spacing through grid-gap.
   Do not stack another artificial margin above the error. */
.phone-field > .field-limit-feedback.is-visible,
.careers-phone-field > .field-limit-feedback.is-visible{
  margin-top:0!important;
}

/* Desktop Careers originally hard-coded exactly two rows (label + input),
   which clipped any third row. Keep the exact old 17+7+48 geometry while
   adding a genuinely auto-sized third row for feedback. */
@media(min-width:981px){
  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check),
  .careers-form .careers-field-row > .careers-phone-field{
    grid-template-rows:17px 55px auto!important;
    row-gap:0!important;
    transition:margin-bottom .24s ease!important;
  }
  .careers-form .careers-field-row > label:not(.cv-upload):not(.careers-check) > input[type="text"],
  .careers-form .careers-field-row > .careers-phone-field > .careers-phone-input-group{
    margin-top:7px!important;
  }
}

/* Careers labels with feedback use explicit spacing rather than generic grid
   gap. When a warning appears, the space above and below it is exactly 6px. */
.careers-form label.has-limit-feedback:not(.cv-upload):not(.careers-check){
  gap:0!important;
  transition:margin-bottom .24s ease!important;
}
.careers-form label.has-limit-feedback:not(.cv-upload):not(.careers-check) > span:first-child{
  margin-bottom:7px!important;
}
.careers-form label.has-limit-feedback.has-visible-limit-feedback:not(.cv-upload):not(.careers-check){
  margin-bottom:6px!important;
}
.careers-form label.has-limit-feedback > .field-limit-feedback.is-visible{
  margin-top:6px!important;
}

/* In the first Careers row the title/input rhythm is already reconstructed
   above; do not add the title's 7px margin a second time. */
@media(min-width:981px){
  .careers-form .careers-field-row > label.has-limit-feedback:not(.cv-upload):not(.careers-check) > span:first-child{
    margin-bottom:0!important;
  }
  .careers-form .careers-field-row > label.has-limit-feedback > .field-limit-feedback.is-visible,
  .careers-form .careers-field-row > .careers-phone-field > .field-limit-feedback.is-visible{
    margin-top:6px!important;
  }
}

/* Custom prefix editor: one continuous surface, not a smaller inner textbox
   sitting on a second shade. The message spans both editor columns. */
.dial-custom-input-wrap{
  height:42px!important;
  min-height:42px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#fbfdfc!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.dial-custom-input-wrap > span{
  background:transparent!important;
  color:inherit!important;
}
.visit-form .dial-custom-input,
.careers-form .dial-custom-input,
.dial-custom-input{
  width:100%!important;
  height:40px!important;
  min-height:0!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.dial-custom-input-wrap:focus-within{
  border-color:var(--green-600)!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.11)!important;
  background:#fff!important;
}
.dial-custom-input-wrap.limit-feedback-active{
  border-color:#d23b32!important;
  box-shadow:0 0 0 3px rgba(210,59,50,.13)!important;
  animation:clean4uLimitPulse .44s cubic-bezier(.2,.75,.25,1);
}
.dial-custom-editor > .field-limit-feedback{
  grid-column:1 / -1!important;
}
.dial-custom-editor > .field-limit-feedback.is-visible{
  margin:5px 2px 0!important;
}
html[data-theme="dark"] .dial-custom-input-wrap{
  background:#0f211a!important;
  border-color:rgba(184,221,204,.16)!important;
}
html[data-theme="dark"] .dial-custom-input-wrap:focus-within{
  background:#0f211a!important;
  border-color:#4aa982!important;
  box-shadow:0 0 0 3px rgba(74,169,130,.14)!important;
}
html[data-theme="dark"] .dial-custom-input-wrap.limit-feedback-active{
  border-color:#ef6f66!important;
  box-shadow:0 0 0 3px rgba(239,111,102,.16)!important;
}

@media(prefers-reduced-motion:reduce){
  .field-limit-feedback{transition:none!important}
  .phone-input-group.limit-feedback-active,
  .careers-phone-input-group.limit-feedback-active,
  .dial-custom-input-wrap.limit-feedback-active{animation:none!important}
}


/* ===== Source style block 51: clean4u-v596-prefix-surface-and-careers-spacing ===== */

/* ===== V5.96 — one-piece custom-prefix surface + calmer Careers error rhythm ===== */

/* The wrapper owns 100% of the visible custom-prefix field. The nested input
   is deliberately paintless in every state so Chrome/Safari cannot render a
   second textbox shade inside it. */
.dial-custom-input-wrap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:3px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#fbfdfc!important;
  background-image:none!important;
  border:1px solid #cedbd4!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.dial-custom-input-wrap > span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  background-image:none!important;
  line-height:1!important;
  color:var(--green-900)!important;
}
.visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"],
.careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"],
.visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:focus,
.careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:focus,
.visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:active,
.careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:active{
  width:100%!important;
  height:40px!important;
  min-height:0!important;
  margin:0!important;
  padding:0 2px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.dial-custom-input-wrap:focus-within{
  background:#fbfdfc!important;
  background-image:none!important;
  border-color:var(--green-600)!important;
  box-shadow:0 0 0 3px rgba(62,170,120,.11)!important;
}

html[data-theme="dark"] .dial-custom-input-wrap,
html[data-theme="dark"] .dial-custom-input-wrap:focus-within{
  background:#0f211a!important;
  background-image:none!important;
  border-color:rgba(184,221,204,.16)!important;
}
html[data-theme="dark"] .dial-custom-input-wrap:focus-within{
  border-color:#4aa982!important;
  box-shadow:0 0 0 3px rgba(74,169,130,.14)!important;
}
html[data-theme="dark"] .dial-custom-input-wrap > span{
  color:#8ee0b8!important;
}
html[data-theme="dark"] .visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"],
html[data-theme="dark"] .careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"],
html[data-theme="dark"] .visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:focus,
html[data-theme="dark"] .careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:focus,
html[data-theme="dark"] .visit-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:active,
html[data-theme="dark"] .careers-form .dial-custom-editor .dial-custom-input-wrap > input.dial-custom-input[type="text"]:active{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  height:40px!important;
  min-height:0!important;
  padding:0 2px!important;
}

/* The first Careers row grows naturally when Name or Phone shows feedback,
   then adds a small breathing space before the Email label. This margin is
   class-driven from JS, so it also works without relying on :has(). */
.careers-field-row{
  transition:margin-bottom .24s cubic-bezier(.2,.8,.2,1)!important;
}
.careers-field-row.has-visible-limit-feedback{
  margin-bottom:8px!important;
}

@media(prefers-reduced-motion:reduce){
  .careers-field-row{transition:none!important}
}



/* ===== Source style block 52: clean4u-v597-feedback-resize-scroll-polish ===== */

/* ===== V5.97 — aligned limit feedback + textarea-owned resize/scroll surfaces ===== */

/* CONTACT FORM — the Name and Phone warnings now share one exact geometry.
   The 16px warning gap above is mirrored by the 16px field spacing below, so
   the next row never looks closer to one column than the other. */
#visit-form > .field-row:first-of-type > label,
#visit-form > .field-row:first-of-type > .phone-field{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  row-gap:0!important;
  gap:0!important;
  align-content:start!important;
  align-self:start!important;
  min-width:0!important;
}
#visit-form > .field-row:first-of-type > label > span:first-child,
#visit-form > .field-row:first-of-type > .phone-field > label{
  margin:0 0 7px!important;
}
#visit-form > .field-row:first-of-type > label > input,
#visit-form > .field-row:first-of-type > .phone-field > .phone-input-group{
  margin:0!important;
}
#visit-form > .field-row:first-of-type > label > input[type="text"]{
  height:47px!important;
  min-height:47px!important;
  max-height:47px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
}
#visit-form > .field-row:first-of-type > label > .field-limit-feedback.is-visible,
#visit-form > .field-row:first-of-type > .phone-field > .field-limit-feedback.is-visible{
  margin-top:16px!important;
}
#visit-form > .field-row:first-of-type > label > .field-limit-feedback,
#visit-form > .field-row:first-of-type > .phone-field > .field-limit-feedback{
  font-size:10.5px!important;
  line-height:1.38!important;
  font-weight:800!important;
  min-height:0!important;
  padding:0!important;
}

/* CAREERS — the visual gap above the Name/Phone warning now matches the gap
   that was already visually comfortable below it before the Email caption. */
.careers-form .careers-field-row > label.has-limit-feedback > .field-limit-feedback,
.careers-form .careers-field-row > .careers-phone-field > .field-limit-feedback{
  font-size:10.5px!important;
  line-height:1.38!important;
  font-weight:800!important;
  min-height:0!important;
  padding:0!important;
}
/* Older recruitment-label rules target every direct <span> very strongly.
   Reclaim the warning itself so Name and Phone use the same line box. */
html body .careers-form .careers-field-row > label.has-limit-feedback:not(.cv-upload):not(.careers-check) > span.field-limit-feedback{
  display:grid!important;
  align-items:initial!important;
  height:auto!important;
  min-height:0!important;
  font-size:10.5px!important;
  line-height:1.38!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
html body .careers-form .careers-field-row > label.has-limit-feedback:not(.cv-upload):not(.careers-check) > span.field-limit-feedback > .field-limit-feedback-text{
  line-height:1.38!important;
}
.careers-form .careers-field-row > label.has-limit-feedback > .field-limit-feedback.is-visible,
.careers-form .careers-field-row > .careers-phone-field > .field-limit-feedback.is-visible{
  margin-top:22px!important;
}

/* The textarea owns its grip. Feedback added below the textarea can therefore
   never move the grip away from the bottom-right corner of the actual border. */
.textarea-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  line-height:0!important;
}
.textarea-shell > textarea{
  display:block!important;
  width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  line-height:1.5!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.message-resize-label .textarea-shell > textarea[name="message"],
.other-service-card .textarea-shell > textarea[name="other_service"]{
  padding-right:44px!important;
  padding-bottom:40px!important;
  resize:none!important;
}

/* Both grips keep the same physical inset from the textarea border, regardless
   of user resizing, wrapped text or the appearance of a limit warning. */
.textarea-shell > .textarea-resize-grip,
.textarea-shell > .other-service-resize-grip{
  right:10px!important;
  bottom:10px!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
}

/* Clean4U scrollbar — the browser/device scrollbar is hidden and replaced by
   this owned rail/thumb, so Opera/Chrome/Safari do not inject different chrome. */
.textarea-shell > textarea{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.textarea-shell > textarea::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.textarea-scrollbar{
  position:absolute!important;
  z-index:4!important;
  top:8px!important;
  right:4px!important;
  bottom:42px!important;
  width:5px!important;
  border-radius:999px!important;
  background:rgba(21,137,96,.10)!important;
  opacity:0!important;
  transform:scaleY(.94)!important;
  transform-origin:center!important;
  pointer-events:none!important;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),background .2s ease!important;
}
.textarea-shell.has-overflow > .textarea-scrollbar{
  opacity:1!important;
  transform:scaleY(1)!important;
}
.textarea-scroll-thumb{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0;
  height:32px;
  min-height:24px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#2d9b70,#147451)!important;
  box-shadow:0 1px 4px rgba(8,75,54,.18)!important;
  transform:translateY(var(--c4u-scroll-top,0px));
  will-change:transform,height;
}
html[data-theme="dark"] .textarea-scrollbar{
  background:rgba(91,199,150,.11)!important;
}
html[data-theme="dark"] .textarea-scroll-thumb{
  background:linear-gradient(180deg,#58c595,#2f8f6a)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.24)!important;
}
@media(hover:hover) and (pointer:fine){
  .textarea-shell.has-overflow > .textarea-scrollbar{
    pointer-events:auto!important;
    cursor:pointer!important;
  }
  .textarea-scroll-thumb{
    cursor:grab!important;
  }
  .textarea-scroll-thumb.is-dragging{
    cursor:grabbing!important;
    filter:brightness(1.06);
  }
}

@media(max-width:640px){
  .textarea-shell > .textarea-resize-grip,
  .textarea-shell > .other-service-resize-grip{
    right:10px!important;
    bottom:10px!important;
    width:24px!important;
    height:24px!important;
  }
  .message-resize-label .textarea-shell > textarea[name="message"],
  .other-service-card .textarea-shell > textarea[name="other_service"]{
    padding-right:46px!important;
    padding-bottom:42px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #visit-form > .field-row:first-of-type,
  .careers-field-row{transition:none!important}
}


/* ===== Source style block 53: clean4u-v598-cv-validation-security-ui ===== */

/* ===== V5.98 — CV preflight feedback + small-screen-safe upload layout ===== */
.cv-validation-message{
  display:block!important;
  max-height:0;
  margin:0!important;
  padding:0 4px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-4px);
  color:#b42318!important;
  font-size:11px;
  line-height:1.45;
  font-weight:800;
  overflow-wrap:anywhere;
  word-break:normal;
  transition:max-height .28s cubic-bezier(.22,.8,.24,1),opacity .20s ease,transform .28s cubic-bezier(.22,.8,.24,1),padding .28s cubic-bezier(.22,.8,.24,1);
}
.cv-validation-message.is-visible{
  max-height:92px;
  padding:0 4px 8px;
  opacity:1;
  transform:none;
}
html[data-theme="dark"] .cv-validation-message{color:#ff8f8f!important}

.cv-upload.is-cv-invalid{
  border-color:rgba(201,54,54,.72)!important;
  background:rgba(201,54,54,.055)!important;
  box-shadow:0 0 0 3px rgba(201,54,54,.10),0 8px 20px rgba(115,25,25,.06)!important;
  animation:c4uCvInvalidPulse .38s cubic-bezier(.22,.8,.24,1);
}
html[data-theme="dark"] .cv-upload.is-cv-invalid{
  border-color:rgba(255,116,116,.68)!important;
  background:rgba(255,94,94,.065)!important;
  box-shadow:0 0 0 3px rgba(255,94,94,.10),0 8px 20px rgba(0,0,0,.16)!important;
}
@keyframes c4uCvInvalidPulse{
  0%{transform:translateX(0)}
  28%{transform:translateX(-3px)}
  56%{transform:translateX(3px)}
  78%{transform:translateX(-1px)}
  100%{transform:translateX(0)}
}

/* The filename chip always remains a filename/choice control; errors live in
   their own full-width row, so long translations never hit the card edge. */
.cv-file-name{
  min-width:0;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media(max-width:420px){
  .cv-upload{
    grid-template-columns:36px minmax(0,1fr)!important;
    grid-template-rows:auto auto;
    column-gap:10px!important;
    row-gap:7px!important;
    align-items:center!important;
    padding:11px 12px!important;
  }
  .cv-upload-icon{
    grid-row:1 / span 2;
    width:36px!important;
    height:36px!important;
    align-self:center;
  }
  .cv-upload-copy{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .cv-file-name{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    max-width:100%!important;
    width:auto!important;
    padding:6px 8px!important;
  }
  .cv-validation-message{
    padding-left:2px;
    padding-right:2px;
    font-size:10.5px;
  }
  .cv-validation-message.is-visible{max-height:110px;padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .cv-validation-message{transition:none!important}
  .cv-upload.is-cv-invalid{animation:none!important}
}


/* ===== Source style block 54: clean4u-v599-careers-feedback-rhythm ===== */

/* ===== V5.99 — compact recruitment warning rhythm + tighter CV-to-consent spacing ===== */
/* Keep the first recruitment-row warnings close to their controls, while
   preserving a clear visual buffer before the next field. */
.careers-form .careers-field-row > label.has-limit-feedback > .field-limit-feedback.is-visible,
.careers-form .careers-field-row > .careers-phone-field > .field-limit-feedback.is-visible{
  margin-top:10px!important;
}
.careers-form .careers-field-row > label.has-limit-feedback.has-visible-limit-feedback:not(.cv-upload):not(.careers-check){
  margin-bottom:0!important;
}
.careers-form .careers-field-row.has-visible-limit-feedback{
  margin-bottom:12px!important;
}

/* On stacked tablet/phone recruitment layouts, reduce the temporary gap only
   while a first-row warning is visible; the transition keeps the reflow soft. */
@media(max-width:980px){
  .careers-form .careers-field-row{
    transition:margin-bottom .24s cubic-bezier(.2,.8,.2,1),row-gap .24s cubic-bezier(.2,.8,.2,1)!important;
  }
  .careers-form .careers-field-row.has-visible-limit-feedback{
    row-gap:12px!important;
    margin-bottom:12px!important;
  }
}

/* The CV warning keeps its existing comfortable distance from the upload box,
   but sits closer to the first consent row beneath it. */
.cv-validation-message.is-visible{
  padding-bottom:4px!important;
}
@media(max-width:420px){
  .cv-validation-message.is-visible{
    padding-bottom:4px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .careers-form .careers-field-row{transition:none!important}
}


/* ===== Source style block 55: clean4u-v600-careers-shared-warning-track ===== */

/* ===== V6.00 — shared Careers warning track + optically centered CV warning =====
   Desktop/landscape: Name and Phone occupy the same visual row. As soon as
   either warning opens, BOTH warning tracks reserve their natural content
   height (the hidden one stays transparent). Therefore showing the second
   warning changes only opacity — the form cannot grow a second time. */
@media(min-width:981px){
  .careers-form .careers-field-row{
    align-items:start!important;
    margin-bottom:14px!important;
    transition:margin-bottom .24s cubic-bezier(.2,.8,.2,1)!important;
  }
  .careers-form .careers-field-row.has-visible-limit-feedback{
    margin-bottom:12px!important;
  }

  .careers-form .careers-field-row > label.has-limit-feedback:not(.cv-upload):not(.careers-check),
  .careers-form .careers-field-row > .careers-phone-field{
    margin-bottom:0!important;
  }

  /* Reserve the same warning band in both columns whenever either side is
     active. Because both messages are pre-filled by JS, the shared row takes
     the larger natural message height on its FIRST expansion, not the second. */
  .careers-form .careers-field-row.has-visible-limit-feedback > label.has-limit-feedback > .field-limit-feedback,
  .careers-form .careers-field-row.has-visible-limit-feedback > .careers-phone-field > .field-limit-feedback{
    grid-template-rows:1fr!important;
    margin-top:10px!important;
    opacity:0;
    transform:translateY(0)!important;
  }
  .careers-form .careers-field-row.has-visible-limit-feedback > label.has-limit-feedback > .field-limit-feedback.is-visible,
  .careers-form .careers-field-row.has-visible-limit-feedback > .careers-phone-field > .field-limit-feedback.is-visible{
    opacity:1!important;
  }
}

/* CV rhythm: the validation line owns one symmetric 8 px breathing zone above
   and below its text. When no error is present, that same element collapses to
   an 8 px spacer, preserving the normal CV -> consent rhythm without a jump. */
.careers-form > .cv-upload{
  margin-bottom:0!important;
}
.careers-form > .cv-validation-message{
  box-sizing:border-box!important;
  min-height:8px!important;
  max-height:8px!important;
  margin:0!important;
  padding:0 4px!important;
  transform:none!important;
  transition:
    max-height .28s cubic-bezier(.22,.8,.24,1),
    min-height .28s cubic-bezier(.22,.8,.24,1),
    opacity .20s ease,
    padding .28s cubic-bezier(.22,.8,.24,1)!important;
}
.careers-form > .cv-validation-message.is-visible{
  min-height:0!important;
  max-height:120px!important;
  padding:8px 4px!important;
}

/* The CV validation row is the ONLY owner of the vertical gap between the
   upload control and the first (optional) consent. Older privacy-row spacing
   added a second 16 px top margin here, which made the lower gap look much
   larger than the upper one. Keep one symmetric 8 px gap only. */
.careers-form > .careers-check-future{
  margin-top:0!important;
}

@media(max-width:420px){
  .careers-form > .cv-validation-message{
    min-height:8px!important;
    max-height:8px!important;
    padding:0 2px!important;
  }
  .careers-form > .cv-validation-message.is-visible{
    min-height:0!important;
    max-height:132px!important;
    padding:8px 2px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .careers-form .careers-field-row,
  .careers-form > .cv-validation-message{transition:none!important}
}


/* ===== Source style block 56: clean4u-v602-company-limit-morph ===== */

/* ===== V6.02 — smooth company-name limit expansion =====
   The company card itself now owns the warning-height animation. This avoids
   the nested feedback row changing the card's natural height in a single
   reflow, which was the only remaining abrupt limit-feedback expansion. */
.company-field.is-visible{
  grid-template-rows:auto auto 0fr!important;
  transition:
    grid-template-rows .28s cubic-bezier(.22,.8,.24,1),
    max-height .50s cubic-bezier(.2,.8,.2,1),
    opacity .32s ease .05s,
    transform .50s cubic-bezier(.2,.8,.2,1),
    margin .50s cubic-bezier(.2,.8,.2,1),
    padding .50s cubic-bezier(.2,.8,.2,1),
    border-color .34s ease .04s,
    background-color .38s ease .04s,
    visibility 0s linear 0s!important;
}
.company-field.is-visible.has-visible-limit-feedback{
  grid-template-rows:auto auto 1fr!important;
}
/* Inside this one card the parent track performs the height morph, so the
   generic feedback component only fades/moves. Keeping a single height owner
   prevents double animation and layout snapping. */
.company-field > .field-limit-feedback{
  display:block!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  grid-template-rows:none!important;
  margin:0!important;
  opacity:0!important;
  transform:translateY(-2px)!important;
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.22,.8,.24,1)!important;
}
.company-field > .field-limit-feedback.is-visible{
  margin:0!important;
  opacity:1!important;
  transform:translateY(0)!important;
}
.company-field > .field-limit-feedback > .field-limit-feedback-text{
  display:block!important;
  min-height:0!important;
  overflow:hidden!important;
  padding-top:6px;
}
@media(prefers-reduced-motion:reduce){
  .company-field.is-visible{transition:none!important}
  .company-field > .field-limit-feedback{transition:none!important}
}


/* ===== Source style block 57: clean4u-v603-mobile-ipad-polish ===== */

/* ===== V6.03 — mobile hard limits + iPad prefix/contact polish ===== */

/* Keep momentum scrolling contained inside the prefix list. This avoids the
   page and fixed popup fighting over the same gesture on touch devices. */
.dial-list{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
html.clean4u-ipad .dial-menu{
  overscroll-behavior:contain!important;
}

/* iPad portrait: phone actions mirror the two email cards exactly in geometry. */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  html.clean4u-ipad .contact-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:22px!important;
  }

  html.clean4u-ipad .contact-phone-block,
  html.clean4u-ipad .contact-email-block{
    display:grid!important;
    grid-template-rows:18px 36px 56px 56px!important;
    row-gap:11px!important;
    align-content:start!important;
    padding:8px 0 10px!important;
    min-width:0!important;
  }

  html.clean4u-ipad .contact-phone-block > span,
  html.clean4u-ipad .contact-email-block > span{
    grid-row:1!important;
    align-self:start!important;
    margin:0!important;
    padding:0!important;
  }

  html.clean4u-ipad .contact-phone-block > strong,
  html.clean4u-ipad .contact-phone-block .contact-copy-phone{
    grid-row:2!important;
    align-self:center!important;
    margin:0!important;
  }

  html.clean4u-ipad .contact-email-block .contact-form-jump{
    grid-row:2!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
  }

  html.clean4u-ipad .contact-phone-block .contact-actions{
    display:contents!important;
  }

  html.clean4u-ipad .contact-phone-block .contact-action-btn,
  html.clean4u-ipad .contact-email-block .contact-inline-link{
    width:100%!important;
    min-width:0!important;
    height:56px!important;
    min-height:56px!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    margin:0!important;
    align-self:stretch!important;
    justify-self:stretch!important;
  }

  html.clean4u-ipad .contact-phone-block .contact-action-btn{
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  html.clean4u-ipad .contact-email-block .contact-inline-link{
    padding:10px 16px!important;
    justify-content:center!important;
    text-align:center!important;
  }

  html.clean4u-ipad .contact-phone-block .contact-action-btn:nth-child(1),
  html.clean4u-ipad .contact-email-block > .contact-inline-link:nth-child(3){grid-row:3!important}
  html.clean4u-ipad .contact-phone-block .contact-action-btn:nth-child(2),
  html.clean4u-ipad .contact-email-block > .contact-inline-link:nth-child(4){grid-row:4!important}
}


/* ===== Source style block 58: clean4u-v607-ipad-careers-dial-layer-fix ===== */

/* ===== V6.07 — iPad Careers prefix popup always paints above the footer =====
   The lower site area intentionally uses isolation:isolate so its card shadows
   blend cleanly. That also creates a stacking context, so Safari can paint the
   later footer (and its transformed links) above the fixed Careers dial popup.
   While this specific popup is visible we temporarily raise the WHOLE lower
   canvas above the footer. The popup itself is fully opaque, so content behind
   it can never ghost through even during momentum scrolling. */
html.clean4u-ipad .site-footer{
  position:relative!important;
  z-index:1!important;
}

html.clean4u-ipad.clean4u-careers-dial-open .lower-site-canvas,
html.clean4u-ipad .lower-site-canvas:has(.careers-form .dial-menu.is-open),
html.clean4u-ipad .lower-site-canvas:has(.careers-form .dial-menu.is-closing){
  z-index:500!important;
}

html.clean4u-ipad .careers-form .dial-picker{
  position:relative!important;
  z-index:510!important;
}

html.clean4u-ipad .careers-form .dial-menu{
  z-index:520!important;
  background:#fff!important;
  background-color:#fff!important;
  isolation:isolate!important;
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
}

html.clean4u-ipad[data-theme="dark"] .careers-form .dial-menu{
  background:#0a1712!important;
  background-color:#0a1712!important;
}


/* ===== Source style block 59: clean4u-v612-hamburger-scrim-ipad-stability ===== */

/* ===== V6.12 — premium hamburger scrim + stable iPad hamburger geometry ===== */

/* A dedicated viewport scrim blocks every background tap while the hamburger
   is open. It sits below the sticky header/nav, so the controls remain usable. */
.clean4u-hamburger-scrim{
  position:fixed;
  inset:0;
  z-index:1240;
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(8,39,31,.10);
  -webkit-backdrop-filter:blur(7px) saturate(.96);
  backdrop-filter:blur(7px) saturate(.96);
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  transition:
    opacity .26s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .30s;
}
.clean4u-hamburger-scrim.is-open,
.clean4u-hamburger-scrim.is-closing{
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .26s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}
.clean4u-hamburger-scrim.is-open{opacity:1}
.clean4u-hamburger-scrim.is-closing{opacity:0}
html[data-theme="dark"] .clean4u-hamburger-scrim{
  background:rgba(2,12,9,.24);
  -webkit-backdrop-filter:blur(7px) saturate(.88);
  backdrop-filter:blur(7px) saturate(.88);
}

/* Lift the whole header above the scrim only while the hamburger is active.
   This also avoids Safari stacking-context surprises on iPad. */
html.clean4u-hamburger-open .site-header{
  z-index:1300!important;
}

/* iPad Safari can leave :active/transform state alive while a touch turns into
   a scroll. Keep the button's physical box absolutely invariant; only the three
   internal bars animate into the X. */
html.clean4u-ipad .site-header .menu-toggle,
html.clean4u-ipad .site-header .menu-toggle:hover,
html.clean4u-ipad .site-header .menu-toggle:active,
html.clean4u-ipad .site-header .menu-toggle:focus{
  box-sizing:border-box!important;
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  -webkit-transform:none!important;
  translate:none!important;
  scale:none!important;
  zoom:1!important;
  touch-action:manipulation!important;
  will-change:auto!important;
}
/* Retain tactile feedback on iPad without resizing the control. */
html.clean4u-ipad .site-header .menu-toggle:active{
  background:rgba(18,112,78,.065)!important;
}

@media(prefers-reduced-motion:reduce){
  .clean4u-hamburger-scrim{transition:none!important}
}


/* ===== Source style block 60: clean4u-v618-location-autocomplete ===== */

/* ===== V6.19 — LocationIQ-backed location/address search-as-you-type ===== */
.location-input-wrap{z-index:6}
.location-input-wrap.is-autocomplete-open{z-index:70!important}
.location-autocomplete{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 7px);
  z-index:260;
  max-height:min(292px,42vh);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:6px;
  border:1px solid rgba(24,94,68,.15);
  border-radius:14px;
  background:rgba(253,255,254,.985);
  box-shadow:0 18px 42px rgba(8,39,31,.16),0 2px 8px rgba(8,39,31,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px) scale(.988);
  transform-origin:top center;
  transition:opacity .17s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
  scrollbar-width:thin;
  scrollbar-color:rgba(38,119,87,.42) transparent;
}
.location-autocomplete[hidden]{display:none!important}
.location-autocomplete.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.location-autocomplete.is-above{
  top:auto;
  bottom:calc(100% + 7px);
  transform:translateY(6px) scale(.988);
  transform-origin:bottom center;
}
.location-autocomplete.is-above.is-open{transform:translateY(0) scale(1)}
.location-autocomplete::-webkit-scrollbar{width:7px}
.location-autocomplete::-webkit-scrollbar-track{background:transparent}
.location-autocomplete::-webkit-scrollbar-thumb{background:rgba(38,119,87,.35);border:2px solid transparent;border-radius:999px;background-clip:padding-box}
.location-suggestion{
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#18352b;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,transform .16s ease;
}
.location-suggestion:hover,
.location-suggestion.is-active,
.location-suggestion[aria-selected="true"]{background:rgba(29,129,91,.085)}
.location-suggestion:active{transform:scale(.992)}
.location-suggestion-main{min-width:0;display:block}
.location-suggestion-primary{
  display:block;
  overflow:hidden;
  color:#173d30;
  font-size:12px;
  font-weight:780;
  line-height:1.28;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.location-suggestion-secondary{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:#71827a;
  font-size:10.25px;
  font-weight:560;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.location-suggestion-kind{
  align-self:center;
  max-width:88px;
  padding:4px 7px;
  border:1px solid rgba(28,117,83,.13);
  border-radius:999px;
  background:rgba(31,132,94,.065);
  color:#36745d;
  font-size:8.75px;
  font-weight:780;
  line-height:1;
  white-space:nowrap;
}
.location-autocomplete-state{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  color:#718179;
  font-size:10.5px;
  font-weight:620;
  line-height:1.35;
}
.location-autocomplete-spinner{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:2px solid rgba(22,112,79,.16);
  border-top-color:#247957;
  border-radius:50%;
  animation:clean4uLocationSearchSpin .7s linear infinite;
}
@keyframes clean4uLocationSearchSpin{to{transform:rotate(360deg)}}
#city-input.is-location-suggested{animation:clean4uLocationSuggested .72s cubic-bezier(.2,.75,.22,1)}
@keyframes clean4uLocationSuggested{
  0%{border-color:#cedbd4;box-shadow:none}
  38%{border-color:rgba(28,153,105,.48);box-shadow:0 0 0 4px rgba(28,153,105,.09)}
  100%{border-color:#cedbd4;box-shadow:none}
}
html[data-theme="dark"] .location-autocomplete{
  border-color:rgba(183,220,202,.14);
  background:rgba(13,29,23,.99);
  box-shadow:0 20px 46px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.18);
}
html[data-theme="dark"] .location-suggestion{color:#d7e9e0}
html[data-theme="dark"] .location-suggestion:hover,
html[data-theme="dark"] .location-suggestion.is-active,
html[data-theme="dark"] .location-suggestion[aria-selected="true"]{background:rgba(113,193,155,.105)}
html[data-theme="dark"] .location-suggestion-primary{color:#e1f0e9}
html[data-theme="dark"] .location-suggestion-secondary{color:rgba(215,233,224,.56)}
html[data-theme="dark"] .location-suggestion-kind{
  border-color:rgba(166,216,191,.13);
  background:rgba(117,194,158,.09);
  color:#aed4c2;
}
html[data-theme="dark"] .location-autocomplete-state{color:rgba(215,233,224,.58)}
@media(max-width:640px){
  .location-autocomplete{
    max-height:min(270px,39dvh);
    border-radius:13px;
    padding:5px;
  }
  .location-suggestion{min-height:50px;padding:8px 9px}
  .location-suggestion-primary{font-size:11.75px}
  .location-suggestion-secondary{font-size:10px}
  .location-suggestion-kind{font-size:8.5px;padding:4px 6px}
}
@media(prefers-reduced-motion:reduce){
  .location-autocomplete,.location-suggestion,#city-input.is-location-suggested{transition:none!important;animation:none!important}
}


/* ===== Source style block 61: clean4u-v625-faq-page ===== */

/* ===== V6.27 — FAQ interaction refinements ===== */
.faq-page{background:#fff;overflow:clip}
.faq-hero{position:relative;isolation:isolate;overflow:visible;padding:96px 0 78px;background:linear-gradient(145deg,#f7fbf9 0%,#eef8f3 52%,#fff 100%);border-bottom:1px solid rgba(25,94,68,.08)}
.faq-hero:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(20,83,63,.037) 1px,transparent 1px),linear-gradient(90deg,rgba(20,83,63,.037) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 52%,transparent 100%);pointer-events:none}
.faq-hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(18px);pointer-events:none;opacity:.48}
.faq-hero-orb-a{width:390px;height:390px;right:-110px;top:-140px;background:#cbead9}
.faq-hero-orb-b{width:260px;height:260px;left:8%;bottom:-130px;background:#dff2e8}
.faq-hero-inner{text-align:center;position:relative}
.faq-eyebrow{margin-bottom:14px}
.faq-hero h1{max-width:900px;margin:0 auto;font-size:clamp(42px,5.1vw,68px);line-height:1.02;letter-spacing:-.05em;color:var(--ink)}
.faq-hero-lead{max-width:730px;margin:24px auto 0;color:#58665f;font-size:18px;line-height:1.72}
.faq-search-stage{position:relative;width:min(760px,100%);margin:38px auto 0;z-index:20}
.faq-search-box{position:relative;display:flex;align-items:center;height:66px;border:1px solid rgba(24,111,79,.19);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 18px 54px rgba(8,39,31,.10),inset 0 1px 0 rgba(255,255,255,.96);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .25s ease;overflow:hidden}
.faq-search-box:focus-within{border-color:rgba(45,139,99,.62);box-shadow:0 22px 60px rgba(8,39,31,.13),0 0 0 4px rgba(62,170,120,.11);background:#fff}
.faq-search-icon{width:23px;height:23px;flex:0 0 auto;margin-left:21px;color:var(--green-700)}
.faq-search-input{min-width:0;flex:1;height:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink);font-size:17px;padding:0 14px}
.faq-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.faq-search-input::placeholder{color:#87938d;opacity:1}
.faq-search-clear{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;margin-right:11px;border:0;border-radius:13px;background:transparent;color:#6f7d76;cursor:pointer;transition:background .2s ease,color .2s ease,transform .18s ease}
.faq-search-clear[hidden]{display:none!important}
.faq-search-clear:hover{background:#edf7f1;color:var(--green-800)}
.faq-search-clear:active{transform:scale(.94)}
.faq-search-clear svg{width:20px;height:20px}
.faq-search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:min(486px,56dvh);padding:9px;background:rgba(255,255,255,.985);border:1px solid rgba(26,96,71,.14);border-radius:20px;box-shadow:0 24px 70px rgba(5,31,23,.18);text-align:left;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#83c6a5 rgba(16,94,66,.08);transform-origin:top center;animation:faqDropIn .22s cubic-bezier(.2,.8,.2,1)}
.faq-search-results::-webkit-scrollbar{width:8px}
.faq-search-results::-webkit-scrollbar-track{background:rgba(16,94,66,.055);border-radius:999px;margin:9px 0}
.faq-search-results::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#9bd4b7,#5dad84);border:2px solid rgba(255,255,255,.82);border-radius:999px;background-clip:padding-box}
.faq-search-results::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#83c7a4,#469a72);border:2px solid rgba(255,255,255,.82);background-clip:padding-box}
.faq-search-results[hidden]{display:none!important}
@keyframes faqDropIn{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.faq-suggestion{width:100%;display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;border:0;border-radius:14px;background:transparent;color:var(--ink);padding:12px 13px;text-align:left;cursor:pointer;transition:background .18s ease,transform .18s ease}
.faq-suggestion:hover,.faq-suggestion.is-active{background:#eef8f3}
.faq-suggestion:active{transform:scale(.992)}
.faq-suggestion-index{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#e2f2e9;color:var(--green-800);font-size:11px;font-weight:900}
.faq-suggestion-copy{min-width:0}
.faq-suggestion-copy strong{display:block;font-size:14px;line-height:1.35;color:var(--ink);font-weight:800}
.faq-suggestion-copy small{display:block;margin-top:3px;color:#748179;font-size:11px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faq-search-empty{padding:17px 14px;color:#6d7a74;font-size:13px;text-align:center}
.faq-search-hint{margin:12px 0 0;color:#75827c;font-size:12px}

/* Branded selection/touch feedback: no native blue flashes, but normal text remains selectable. */
body ::selection{background:rgba(59,167,119,.24);color:inherit}
body a,body button,body input,body [role="option"]{-webkit-tap-highlight-color:transparent}
body a::selection,body button::selection,body button *::selection,.faq-suggestion::selection,.faq-suggestion *::selection{background:transparent;color:inherit}

.faq-content{padding:92px 0 100px;background:linear-gradient(180deg,#fff 0%,#f9fcfa 100%)}
.faq-content-grid{max-width:980px}
.faq-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:48px;align-items:end;margin-bottom:34px}
.faq-section-heading h2{font-size:clamp(34px,4vw,50px);line-height:1.04;letter-spacing:-.045em;margin:0;color:var(--ink)}
.faq-section-heading>p{margin:0;color:#66736d;font-size:15px;line-height:1.7}
.faq-list{display:grid;gap:12px}
.faq-item{scroll-margin-top:118px;border:1px solid #dde9e3;border-radius:21px;background:#fff;box-shadow:0 7px 25px rgba(8,39,31,.035);overflow:hidden;contain:layout paint style;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease,background .3s ease}
.faq-item:hover{border-color:#c9ddd2;box-shadow:0 12px 32px rgba(8,39,31,.055)}
.faq-item.is-open{border-color:rgba(45,139,99,.33);box-shadow:0 16px 44px rgba(8,39,31,.075)}
.faq-item.is-targeted{animation:faqTargetPulse 1.35s cubic-bezier(.2,.8,.2,1)}
@keyframes faqTargetPulse{0%,100%{box-shadow:0 16px 44px rgba(8,39,31,.075)}32%{box-shadow:0 16px 48px rgba(8,39,31,.10),0 0 0 4px rgba(62,170,120,.16)}}
.faq-question{width:100%;min-height:82px;display:grid;grid-template-columns:46px 1fr 30px;gap:14px;align-items:center;border:0;background:transparent;color:var(--ink);padding:17px 22px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-question:focus-visible{outline:3px solid rgba(62,170,120,.22);outline-offset:-4px;border-radius:18px}
.faq-question-number{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef8f3;color:var(--green-700);font-size:11px;font-weight:900;letter-spacing:.05em;transition:background .28s ease,color .28s ease,transform .28s ease}
.faq-question-text{font-size:17px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.faq-question-icon{position:relative;width:28px;height:28px;border-radius:50%;background:#f2f8f5;transform:rotate(0deg) translateZ(0);backface-visibility:hidden;transition:background .26s ease,transform .30s cubic-bezier(.2,.78,.2,1)}
.faq-question-icon:before,.faq-question-icon:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.7px;border-radius:2px;background:var(--green-800);transform:translate(-50%,-50%);transition:background .26s ease}
.faq-question-icon:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.is-open .faq-question-number{background:var(--green-700);color:#fff;transform:scale(1.03)}
.faq-item.is-open .faq-question-icon{background:#e1f2e8;transform:rotate(45deg) translateZ(0)}
.faq-answer-shell{height:0;overflow:hidden;contain:paint;transition:height .32s cubic-bezier(.2,.76,.2,1)}
.faq-answer-inner{min-height:0;overflow:hidden}
.faq-answer-inner p{margin:0;padding:0 76px 25px 82px;color:#5c6a63;font-size:15px;line-height:1.78;opacity:0;transform:translate3d(0,-4px,0);backface-visibility:hidden;transition:opacity .21s ease,transform .28s cubic-bezier(.2,.76,.2,1)}
.faq-item.is-open .faq-answer-inner p{opacity:1;transform:translate3d(0,0,0)}

.faq-contact-section{padding:52px 0;background:#f9fcfa}
.faq-contact-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:56px;align-items:center;padding:56px;border-radius:30px;background:linear-gradient(126deg,#08271f 0%,#0d3b2e 48%,#1c684d 100%);color:#fff;box-shadow:0 28px 78px rgba(6,34,25,.18);position:relative;overflow:hidden}
.faq-contact-card:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-150px;top:-190px;background:rgba(99,218,157,.14);filter:blur(4px);pointer-events:none}
.faq-contact-copy,.faq-contact-actions{position:relative;z-index:1}
.faq-contact-copy h2{margin:0;font-size:clamp(38px,4vw,54px);line-height:1;letter-spacing:-.045em}
.faq-contact-copy>p:not(.eyebrow){max-width:610px;margin:18px 0 0;color:#d4e6de;font-size:16px;line-height:1.72}
.faq-contact-meta{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:28px}
.faq-contact-meta span{display:grid;gap:2px}
.faq-contact-meta strong{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#8fd7b3}
.faq-contact-meta b,.faq-contact-meta a{font-size:14px;color:#fff;font-weight:750}
.faq-contact-meta a{display:inline-block;transform-origin:left center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .20s cubic-bezier(.2,.8,.2,1),color .20s ease,opacity .20s ease,text-shadow .20s ease}
.faq-contact-meta a:hover{color:#c8f3dd;text-shadow:0 0 18px rgba(150,235,190,.18)}
.faq-contact-meta a:active{transform:scale(.965);opacity:.82}
.faq-contact-meta a:focus{outline:none}
.faq-contact-meta a:focus-visible{outline:2px solid rgba(177,239,207,.52);outline-offset:4px;border-radius:5px}
.faq-contact-actions{display:grid;gap:11px}
.faq-contact-action{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:13px;min-height:67px;padding:10px 16px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(255,255,255,.075);color:#fff;backdrop-filter:blur(8px);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease,border-color .25s ease,box-shadow .25s ease}
.faq-contact-action:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.25);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.faq-contact-action:active{transform:scale(.988)}
.faq-action-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.13)}
.faq-action-icon svg{width:21px;height:21px;fill:currentColor}
.faq-contact-action span:last-child{display:grid}
.faq-contact-action strong{font-size:14px;line-height:1.25}
.faq-contact-action small{font-size:11px;color:#bcd8cc;margin-top:2px}
.faq-contact-action-wa{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,#16bf57 0%,#25d366 38%,#58e78f 50%,#21cb61 63%,#14ac4f 100%);background-size:220% 100%;border-color:#a8dbbd;color:#083b2d;box-shadow:0 10px 24px rgba(18,168,79,.16),inset 0 1px 0 rgba(255,255,255,.26);animation:ctaEmeraldShine 5.5s ease-in-out infinite}
.faq-contact-action-wa::after{content:"";position:absolute;z-index:0;top:-45%;bottom:-45%;width:24%;left:-38%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);filter:blur(.2px);animation:ctaGlassSweep 5.5s ease-in-out infinite;pointer-events:none}
.faq-contact-action-wa>*{position:relative;z-index:1}
.faq-contact-action-wa:hover{background:linear-gradient(112deg,#14b14f 0%,#21c95f 39%,#4dde84 51%,#1bb95a 64%,#129247 100%);background-size:220% 100%;border-color:#bce8cd;box-shadow:0 12px 28px rgba(18,168,79,.22),inset 0 1px 0 rgba(255,255,255,.28)}
.faq-contact-action-wa .faq-action-icon{background:rgba(255,255,255,.24);color:#07382b}
.faq-contact-action-wa strong{color:#07382b}
.faq-contact-action-wa small{color:rgba(8,59,45,.72)}

html[data-theme="dark"] .faq-page{background:#07110e}
html[data-theme="dark"] .faq-hero{background:linear-gradient(145deg,#091712 0%,#0b1d16 54%,#08130f 100%);border-bottom-color:rgba(111,196,153,.11)}
html[data-theme="dark"] .faq-hero:before{background-image:linear-gradient(rgba(111,196,153,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(111,196,153,.045) 1px,transparent 1px)}
html[data-theme="dark"] .faq-hero-orb-a{background:#143f2f;opacity:.55}
html[data-theme="dark"] .faq-hero-orb-b{background:#102d22;opacity:.5}
html[data-theme="dark"] .faq-hero h1,html[data-theme="dark"] .faq-section-heading h2{color:#edf6f1}
html[data-theme="dark"] .faq-hero-lead,html[data-theme="dark"] .faq-section-heading>p{color:#a9bbb2}
html[data-theme="dark"] .faq-search-box{background:rgba(13,30,23,.96);border-color:rgba(105,196,150,.2);box-shadow:0 18px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)}
html[data-theme="dark"] .faq-search-box:focus-within{background:#0d2119;border-color:#398c66;box-shadow:0 20px 58px rgba(0,0,0,.29),0 0 0 4px rgba(62,170,120,.10)}
html[data-theme="dark"] .faq-search-input{color:#e8f2ed}
html[data-theme="dark"] .faq-search-input::placeholder{color:#758b80}
html[data-theme="dark"] .faq-search-clear{color:#94aaa0}
html[data-theme="dark"] .faq-search-clear:hover{background:#163126;color:#cde8da}
html[data-theme="dark"] .faq-search-results{background:#0d1e17;border-color:rgba(96,187,142,.18);box-shadow:0 26px 70px rgba(0,0,0,.36);scrollbar-color:#4f9d76 rgba(118,194,157,.07)}
html[data-theme="dark"] .faq-search-results::-webkit-scrollbar-track{background:rgba(118,194,157,.055)}
html[data-theme="dark"] .faq-search-results::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#68b58b,#3d805f);border-color:#0d1e17;background-clip:padding-box}
html[data-theme="dark"] .faq-search-results::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#78c69a,#4a936d);border-color:#0d1e17;background-clip:padding-box}
html[data-theme="dark"] .faq-suggestion{color:#e7f3ed}
html[data-theme="dark"] .faq-suggestion:hover,html[data-theme="dark"] .faq-suggestion.is-active{background:#153126}
html[data-theme="dark"] .faq-suggestion-index{background:#18382a;color:#8cddb3}
html[data-theme="dark"] .faq-suggestion-copy strong{color:#e7f3ed}
html[data-theme="dark"] .faq-suggestion-copy small,html[data-theme="dark"] .faq-search-empty,html[data-theme="dark"] .faq-search-hint{color:#8fa59a}
html[data-theme="dark"] .faq-content{background:linear-gradient(180deg,#07110e 0%,#081510 100%)}
html[data-theme="dark"] .faq-item{background:#0d1e17;border-color:rgba(111,196,153,.14);box-shadow:0 8px 26px rgba(0,0,0,.13)}
html[data-theme="dark"] .faq-item:hover{border-color:rgba(111,196,153,.24);box-shadow:0 12px 32px rgba(0,0,0,.18)}
html[data-theme="dark"] .faq-item.is-open{border-color:rgba(82,188,137,.38);box-shadow:0 16px 44px rgba(0,0,0,.22)}
html[data-theme="dark"] .faq-question{color:#e8f2ed}
html[data-theme="dark"] .faq-question-number{background:#143026;color:#7dd4a8}
html[data-theme="dark"] .faq-question-icon{background:#132b22}
html[data-theme="dark"] .faq-question-icon:before,html[data-theme="dark"] .faq-question-icon:after{background:#80d4a9}
html[data-theme="dark"] .faq-item.is-open .faq-question-number{background:#2d8b63;color:#fff}
html[data-theme="dark"] .faq-item.is-open .faq-question-icon{background:#17382a}
html[data-theme="dark"] .faq-answer-inner p{color:#a6b9af}
html[data-theme="dark"] .faq-contact-section{background:#081510}

@media(max-width:900px){
  .faq-hero{padding:76px 0 62px}
  .faq-section-heading{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .faq-contact-card{grid-template-columns:1fr;gap:34px;padding:42px}
}
@media(max-width:640px){
  .faq-page .container{width:min(100% - 28px,1160px)}
  .faq-hero{padding:58px 0 48px}
  .faq-hero h1{font-size:clamp(36px,10.2vw,48px)}
  .faq-hero-lead{font-size:15px;line-height:1.65;margin-top:18px}
  .faq-search-stage{margin-top:28px}
  .faq-search-box{height:58px;border-radius:18px}
  .faq-search-icon{width:21px;height:21px;margin-left:17px}
  .faq-search-input{font-size:16px;padding-left:12px;padding-right:8px}
  .faq-search-clear{width:38px;height:38px;margin-right:8px}
  .faq-search-results{top:calc(100% + 8px);max-height:min(430px,52dvh);padding:7px;border-radius:17px;scrollbar-gutter:auto}
  .faq-suggestion{grid-template-columns:30px 1fr;padding:11px 10px;gap:9px}
  .faq-suggestion-index{width:28px;height:28px;border-radius:9px}
  .faq-search-hint{font-size:11px;line-height:1.45;padding-inline:4px}
  .faq-content{padding:70px 0 76px}
  .faq-section-heading h2{font-size:36px}
  .faq-question{grid-template-columns:38px 1fr 26px;gap:11px;min-height:74px;padding:15px 15px}
  .faq-question-number{width:36px;height:36px;border-radius:11px;font-size:10px}
  .faq-question-text{font-size:15px;line-height:1.4}
  .faq-question-icon{width:26px;height:26px}
  .faq-answer-inner p{padding:0 18px 21px 64px;font-size:14px;line-height:1.7}
  .faq-contact-section{padding:39px 0}
  .faq-contact-card{padding:31px 24px;border-radius:25px;gap:27px}
  .faq-contact-copy h2{font-size:40px}
  .faq-contact-copy>p:not(.eyebrow){font-size:14px}
  .faq-contact-meta{gap:14px 24px}
  .faq-contact-actions{gap:9px}
  .faq-contact-action{min-height:64px;border-radius:16px}
}
@media (hover:none),(pointer:coarse){
  /* Touch devices get the same visual motion with less paint/compositing work. */
  .faq-item,.faq-item:hover,.faq-item.is-open{
    box-shadow:0 7px 22px rgba(8,39,31,.04);
    transform:none;
    contain:layout style;
    transition:border-color .20s ease,background .20s ease;
  }
  .faq-question-number{transition:background .20s ease,color .20s ease}
  .faq-answer-shell{contain:layout;transition-duration:.26s}
  .faq-answer-inner{contain:layout style}
  .faq-answer-inner p{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.76,.2,1)}
}
@media(prefers-reduced-motion:reduce){
  .faq-search-results,.faq-item.is-targeted{animation:none!important}
  .faq-answer-shell,.faq-answer-inner p,.faq-question-icon,.faq-question-icon:before,.faq-question-icon:after,.faq-question-number,.faq-contact-action,.faq-contact-meta a{transition:none!important}
  .faq-contact-action-wa,.faq-contact-action-wa::after{animation:none!important}
}


/* ===== Source style block 62: clean4u-v627-faq-search-polish ===== */

/* ===== V6.27 — bounded FAQ suggestions + owned Clean4U scrollbar =====
   The native scrollbar is fully hidden on every browser/device. The result
   shell clips a site-owned rounded rail/thumb, matching the custom textarea
   scrollbars already used elsewhere on Clean4U. */
.faq-hero{z-index:3}
.faq-content{position:relative;z-index:1}
.faq-search-results{
  --faq-search-row-height:72px;
  --faq-search-pad:9px;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate;
  background:#fff;
}
.faq-search-scroll{
  box-sizing:border-box;
  max-height:min(calc((var(--faq-search-row-height) * 5) + (var(--faq-search-pad) * 2)),56dvh);
  padding:var(--faq-search-pad) 18px var(--faq-search-pad) var(--faq-search-pad);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  scroll-behavior:smooth;
}
.faq-search-scroll::-webkit-scrollbar,
.faq-search-scroll::-webkit-scrollbar-track,
.faq-search-scroll::-webkit-scrollbar-thumb,
.faq-search-scroll::-webkit-scrollbar-button,
.faq-search-results::-webkit-scrollbar,
.faq-search-results::-webkit-scrollbar-button{
  width:0!important;
  height:0!important;
  display:none!important;
  background:transparent!important;
}
.faq-search-scrollbar{
  position:absolute;
  z-index:7;
  top:10px;
  right:6px;
  bottom:10px;
  width:5px;
  border-radius:999px;
  background:rgba(21,137,96,.10);
  opacity:0;
  transform:scaleY(.94);
  transform-origin:center;
  pointer-events:none;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),background .2s ease;
}
.faq-search-results.is-scrollable .faq-search-scrollbar{
  opacity:1;
  transform:scaleY(1);
}
.faq-search-scroll-thumb{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:32px;
  min-height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,#2d9b70,#147451);
  box-shadow:0 1px 4px rgba(8,75,54,.18);
  transform:translate3d(0,var(--faq-scroll-top,0px),0);
  will-change:transform,height;
}
@media(hover:hover) and (pointer:fine){
  .faq-search-results.is-scrollable .faq-search-scrollbar{pointer-events:auto;cursor:pointer}
  .faq-search-scroll-thumb{cursor:grab}
  .faq-search-scroll-thumb.is-dragging{cursor:grabbing;filter:brightness(1.06)}
}
.faq-suggestion{
  height:var(--faq-search-row-height);
  box-sizing:border-box;
  align-items:center;
  flex:none;
}
.faq-suggestion-copy strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.faq-search-more-cue{
  position:absolute;
  z-index:4;
  left:1px;
  right:1px;
  bottom:1px;
  height:34px;
  display:grid;
  place-items:end center;
  padding-bottom:5px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.88) 64%,#fff 100%);
  transition:opacity .20s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;
}
.faq-search-more-cue::before{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #4c9b73;
  border-bottom:2px solid #4c9b73;
  transform:rotate(45deg);
  animation:faqSearchMoreNudge .95s cubic-bezier(.4,0,.2,1) infinite;
}
.faq-search-results.is-scrollable:not(.is-at-end) .faq-search-more-cue{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
@keyframes faqSearchMoreNudge{
  0%,100%{transform:translateY(-2px) rotate(45deg)}
  55%{transform:translateY(3px) rotate(45deg)}
}
html[data-theme="dark"] .faq-search-results{background:#0d1e17}
html[data-theme="dark"] .faq-search-scrollbar{background:rgba(91,199,150,.11)}
html[data-theme="dark"] .faq-search-scroll-thumb{background:linear-gradient(180deg,#58c595,#2f8f6a);box-shadow:0 1px 5px rgba(0,0,0,.24)}
html[data-theme="dark"] .faq-search-more-cue{
  background:linear-gradient(to bottom,rgba(13,30,23,0),rgba(13,30,23,.9) 64%,#0d1e17 100%);
}
html[data-theme="dark"] .faq-search-more-cue::before{border-color:#73c69a}

@media(max-width:640px){
  .faq-search-results{
    --faq-search-row-height:78px;
    --faq-search-pad:7px;
  }
  .faq-search-scroll{
    max-height:min(calc((var(--faq-search-row-height) * 5) + (var(--faq-search-pad) * 2)),52dvh);
  }
  .faq-suggestion-copy strong{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .faq-search-scroll{padding-right:16px}
  .faq-search-scrollbar{right:5px;top:9px;bottom:9px;width:5px}
  .faq-search-scroll-thumb{min-height:22px}
  .faq-search-more-cue{height:30px;padding-bottom:4px}
}

@media (hover:none),(pointer:coarse){
  /* Touch scroll chaining: the suggestion list scrolls while it has room,
     then naturally hands the gesture to the page at its boundary. When five
     or fewer rows fit, a swipe over the panel moves the page immediately. */
  .faq-search-scroll{
    scroll-behavior:auto;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y;
  }
  .faq-search-results{
    overscroll-behavior:auto!important;
    touch-action:pan-y;
  }
}
@media(prefers-reduced-motion:reduce){
  .faq-search-more-cue,.faq-search-more-cue::before{transition:none!important;animation:none!important}
  .faq-search-scroll{scroll-behavior:auto}
}


/* ===== Source style block 63: clean4u-v633-faq-touch-stability ===== */

/* V6.33 — iPad/Safari: keep the search results in one isolated layer above
   the FAQ cards and contain list overscroll. Phone scroll-chaining remains as
   requested; tablets do not hand an edge swipe through the open popup. */
html.clean4u-ipad .faq-hero{position:relative!important;z-index:30!important;isolation:isolate!important;overflow:visible!important}
html.clean4u-ipad .faq-content{position:relative!important;z-index:1!important}
html.clean4u-ipad .faq-search-stage{position:relative!important;z-index:220!important;isolation:isolate!important}
html.clean4u-ipad .faq-search-results{
  z-index:230!important;
  pointer-events:auto!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
html.clean4u-ipad .faq-search-scroll{
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
/* Keep phone-only scroll chaining from changing the iPad composition layer. */
@media (min-width:721px) and (hover:none), (min-width:721px) and (pointer:coarse){
  html.clean4u-ipad .faq-search-results{overscroll-behavior:contain!important}
  html.clean4u-ipad .faq-search-scroll{overscroll-behavior-y:contain!important}
}


/* ===== Source style block 64: clean4u-v636-footer-social ===== */

/* ===== V6.37 — dedicated Social Media footer column ===== */
@media(min-width:981px){.site-footer .footer-grid{grid-template-columns:1.08fr 1fr 1.14fr .86fr .92fr!important;gap:28px!important}}
.footer-social-zone{min-width:0}
.footer-social-link{display:inline-flex!important;align-items:center!important;gap:7px!important;width:max-content;max-width:100%;color:#aebfb7!important;text-decoration:none!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .2s ease,transform .2s ease!important}
.footer-social-link svg{width:14px!important;height:14px!important;flex:0 0 14px;transition:transform .2s ease,filter .2s ease!important}
.footer-social-link span{color:inherit!important;font-size:13px!important}
.footer-social-link:hover{color:#fff!important;transform:translateY(-1px)}
.footer-social-link:hover svg{transform:scale(1.08)}
.footer-facebook svg{fill:#1877f2!important;filter:drop-shadow(0 2px 4px rgba(24,119,242,.14))}
.footer-facebook:hover svg{filter:drop-shadow(0 3px 6px rgba(24,119,242,.22))}
.footer-instagram svg{fill:#e4405f;filter:drop-shadow(0 2px 4px rgba(228,64,95,.14))}
.footer-instagram:hover svg{filter:drop-shadow(0 3px 6px rgba(228,64,95,.22))}
@media(max-width:980px){.site-footer .footer-grid{gap:30px 34px!important}}
@media(max-width:640px){.site-footer .footer-grid{gap:26px!important}}


/* ===== Source style block 65: clean4u-v636-faq-polish ===== */

/* ===== V6.37 — stronger numbering + synchronized FAQ theme morph ===== */
.faq-hero{background:linear-gradient(145deg,var(--c4u-faq-hero-a) 0%,var(--c4u-faq-hero-b) 52%,var(--c4u-faq-hero-c) 100%)!important}
.faq-content{background:linear-gradient(180deg,var(--c4u-faq-content-a) 0%,var(--c4u-faq-content-b) 100%)!important}
.faq-contact-section{background-color:var(--c4u-faq-contact-bg)!important}
.faq-search-box{background-color:var(--c4u-faq-search-bg)!important}
.faq-search-box:focus-within{background-color:var(--c4u-faq-search-focus)!important}
.faq-search-results{background-color:var(--c4u-faq-results-bg)!important}
.faq-item{background-color:var(--c4u-faq-item-bg)!important}
.faq-question-number{width:42px!important;height:42px!important;border-radius:13px!important;color:#fff!important;font-size:15px!important;font-weight:950!important;letter-spacing:-.02em!important;background-image:linear-gradient(112deg,#084531 0%,#11694c 28%,#39a36f 44%,#78dda8 52%,#238860 65%,#073a2b 100%)!important;background-size:235% 100%!important;background-position:0% 50%!important;box-shadow:0 8px 20px rgba(13,59,46,.18),inset 0 1px 0 rgba(255,255,255,.17)!important}
.faq-item.is-open .faq-question-number{color:#fff!important;transform:scale(1.045)!important;background-position:72% 50%!important}
.faq-suggestion-index{font-size:12px!important;letter-spacing:-.01em!important}
#faq-contact{scroll-margin-top:112px}
.faq-inline-contact-link{color:var(--green-700);font-weight:850;text-decoration:none;border-bottom:1px solid rgba(45,139,99,.35);transition:color .2s ease,border-color .2s ease}
.faq-inline-contact-link:hover{color:var(--green-900);border-bottom-color:currentColor}
.faq-inline-contact-link:focus-visible{outline:2px solid rgba(45,139,99,.28);outline-offset:3px;border-radius:3px}
html[data-theme="dark"] .faq-inline-contact-link{color:#7dd4a8;border-bottom-color:rgba(125,212,168,.38)}
html[data-theme="dark"] .faq-inline-contact-link:hover{color:#a7ebc8}
html.clean4u-theme-switching .faq-search-box{transition:border-color .62s cubic-bezier(.22,.8,.24,1),box-shadow .62s cubic-bezier(.22,.8,.24,1),color .62s cubic-bezier(.22,.8,.24,1),transform .25s ease!important}
html.clean4u-theme-switching .faq-search-results{transition:border-color .62s cubic-bezier(.22,.8,.24,1),box-shadow .62s cubic-bezier(.22,.8,.24,1),color .62s cubic-bezier(.22,.8,.24,1)!important}
html.clean4u-theme-switching .faq-item{transition:border-color .62s cubic-bezier(.22,.8,.24,1),box-shadow .62s cubic-bezier(.22,.8,.24,1),transform .3s ease!important}
html.clean4u-theme-switching .faq-question,html.clean4u-theme-switching .faq-question-text,html.clean4u-theme-switching .faq-answer-inner p,html.clean4u-theme-switching .faq-section-heading h2,html.clean4u-theme-switching .faq-section-heading>p,html.clean4u-theme-switching .faq-hero h1,html.clean4u-theme-switching .faq-hero-lead,html.clean4u-theme-switching .faq-search-input,html.clean4u-theme-switching .faq-search-input::placeholder,html.clean4u-theme-switching .faq-search-clear,html.clean4u-theme-switching .faq-suggestion-copy strong,html.clean4u-theme-switching .faq-suggestion-copy small,html.clean4u-theme-switching .faq-search-hint{transition:color .62s cubic-bezier(.22,.8,.24,1)!important}
html.clean4u-theme-switching .faq-question-icon{transition:background-color .62s cubic-bezier(.22,.8,.24,1),transform .30s cubic-bezier(.2,.78,.2,1)!important}
html.clean4u-theme-switching .faq-question-icon:before,html.clean4u-theme-switching .faq-question-icon:after{transition:background-color .62s cubic-bezier(.22,.8,.24,1)!important}
@media(max-width:640px){.faq-question{grid-template-columns:42px 1fr 26px!important}.faq-question-number{width:40px!important;height:40px!important;border-radius:12px!important;font-size:14px!important}.faq-answer-inner p{padding-left:68px!important}}
@media(prefers-reduced-motion:reduce){.faq-inline-contact-link{transition:none!important}}


/* ===== Source style block 66: clean4u-v637-iphone-core ===== */

/* ===== V6.37 — iPhone/Safari core polish =====
   iOS Safari automatically zooms focused text controls below 16px. Keep the
   visual layout intact while ensuring every editable control meets that
   threshold on real iPhones only. */
html.clean4u-iphone input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.clean4u-iphone textarea,
html.clean4u-iphone select{
  font-size:16px!important;
}

/* While the hamburger is mounted, the document itself must not pan/rubber-band
   behind the blurred scrim. The nav remains independently scrollable if a
   short iPhone viewport ever needs it. */
html.clean4u-iphone.clean4u-iphone-menu-locked,
html.clean4u-iphone.clean4u-iphone-menu-locked body{
  overscroll-behavior:none!important;
}
html.clean4u-iphone.clean4u-iphone-menu-locked .site-header .main-nav{
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
}


/* ===== Source style block 67: clean4u-v610-touch-dial-anchor-behaviour ===== */

/* ===== V6.10 — calm touch prefix menus + distance-aware dismissal =====
   iPad keeps its WebKit-safe opacity fade. Phones retain the bottom sheet.
   Internal list scrolling never leaks into the document. */
html.clean4u-ipad .dial-menu{overscroll-behavior:contain!important;}
html.clean4u-ipad .dial-list{overscroll-behavior:contain!important;touch-action:pan-y!important;}
html.clean4u-ipad .site-header{z-index:900!important;}
html.clean4u-ipad .dial-menu.is-closing{
  opacity:0!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:opacity .30s cubic-bezier(.22,.72,.24,1), visibility 0s linear .30s!important;
  -webkit-transition:opacity .30s cubic-bezier(.22,.72,.24,1), visibility 0s linear .30s!important;
}
@media (pointer:coarse){
  .dial-menu{overscroll-behavior:contain!important;}
  .dial-list{overscroll-behavior:contain!important;touch-action:pan-y!important;}
}


/* ===== Source style block 68: clean4u-v615-hamburger-final ===== */

/* ===== V6.15 — final hamburger stability / reverse close ===== */

/* V6.10 later sets iPad's sticky header to 900, below the 1240 scrim.
   That is why Safari could blur/cover the hamburger even though the menu had
   technically opened. This final rule intentionally wins the cascade. */
html.clean4u-ipad .site-header{z-index:1400!important;}

/* Keep .open mounted for the whole exit and animate it to the normal closed
   geometry. This is the opening motion reversed instead of an instant unmount. */
@media(max-width:1320px){
  .site-header .main-nav.open.is-closing{
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:translateY(-14px) scale(.985)!important;
    transition:
      opacity .24s ease .10s,
      transform .34s cubic-bezier(.16,1,.3,1) .06s,
      box-shadow .34s ease .06s!important;
  }
  .site-header .main-nav.open.is-closing > a:not(.btn){
    opacity:0!important;
    transform:translateY(-7px)!important;
    transition:
      opacity .22s ease,
      transform .30s cubic-bezier(.16,1,.3,1),
      background .20s ease,
      border-color .20s ease,
      box-shadow .20s ease!important;
  }
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(6){transition-delay:0s,0s,0s,0s,0s!important}
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(5){transition-delay:.030s,.030s,0s,0s,0s!important}
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(4){transition-delay:.060s,.060s,0s,0s,0s!important}
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(3){transition-delay:.090s,.090s,0s,0s,0s!important}
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(2){transition-delay:.120s,.120s,0s,0s,0s!important}
  .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(1){transition-delay:.150s,.150s,0s,0s,0s!important}
}

.clean4u-hamburger-scrim.is-closing{
  transition:opacity .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .40s!important;
}

@media(prefers-reduced-motion:reduce){
  .site-header .main-nav,
  .site-header .main-nav > a:not(.btn),
  .clean4u-hamburger-scrim{transition:none!important}
}


/* ===== Source style block 69: clean4u-v616-ipad-hamburger-close-performance ===== */

/* ===== V6.16 — iPad-only hamburger close performance =====
   Keep phone/desktop untouched. Safari was compositing three expensive things
   at once on close: a full-screen backdrop blur, a scaled translucent nav and
   six staggered links. The scrim controller above now keeps its blur static
   until the nav is done, while these rules make the nav exit compositor-cheap. */

html.clean4u-ipad .site-header .main-nav{
  /* The page behind the menu is already blurred by the dedicated scrim.
     A second live backdrop-filter on the nav is visually redundant and is
     particularly costly while Safari transforms the menu layer. */
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.clean4u-ipad:not([data-theme="dark"]) .site-header .main-nav{
  background:rgba(255,255,255,.995)!important;
}
html.clean4u-ipad[data-theme="dark"] .site-header .main-nav{
  background:rgba(9,22,17,.995)!important;
}

@media(max-width:1320px){
  html.clean4u-ipad .site-header .main-nav.open.is-closing{
    /* Translate only: scaling a large rounded layer is one of Safari's
       costliest close-path operations. The visual direction stays the exact
       reverse of opening without forcing a full layer resample every frame. */
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:translate3d(0,-12px,0)!important;
    -webkit-transform:translate3d(0,-12px,0)!important;
    will-change:transform,opacity!important;
    transition:
      opacity .20s cubic-bezier(.4,0,.2,1) .06s,
      transform .26s cubic-bezier(.4,0,.2,1) 0s!important;
  }

  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn){
    opacity:0!important;
    transform:translate3d(0,-7px,0)!important;
    -webkit-transform:translate3d(0,-7px,0)!important;
    will-change:transform,opacity!important;
    transition:
      opacity .16s cubic-bezier(.4,0,.2,1),
      transform .20s cubic-bezier(.4,0,.2,1)!important;
  }

  /* Reverse the entrance order, but tighten the stagger so it reads as one
     fluid gesture rather than six separate animations. */
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(6){transition-delay:0s,0s!important}
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(5){transition-delay:.012s,.012s!important}
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(4){transition-delay:.024s,.024s!important}
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(3){transition-delay:.036s,.036s!important}
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(2){transition-delay:.048s,.048s!important}
  html.clean4u-ipad .site-header .main-nav.open.is-closing > a:not(.btn):nth-of-type(1){transition-delay:.060s,.060s!important}
}

/* Once the lightweight nav exit has completed, the controller starts this
   short scrim fade by itself. Because it no longer overlaps the nav motion,
   Safari only has one full-screen compositing job to do at a time. */
html.clean4u-ipad .clean4u-hamburger-scrim.is-closing{
  transition:opacity .20s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s!important;
}

@media(prefers-reduced-motion:reduce){
  html.clean4u-ipad .site-header .main-nav,
  html.clean4u-ipad .site-header .main-nav > a:not(.btn),
  html.clean4u-ipad .clean4u-hamburger-scrim{transition:none!important}
}


/* ===== Source style block 70: clean4u-v635-ipad-hamburger-scroll-lock ===== */

/* ===== V6.35 — iPad hamburger: hard page scroll lock =====
   Safari/iPad can still pan the document through a fixed scrim. While the
   hamburger is mounted (including its close animation), freeze the page at the
   exact current scroll position. The nav itself remains usable/scrollable. */
html.clean4u-ipad.clean4u-hamburger-scroll-locked,
html.clean4u-ipad.clean4u-hamburger-scroll-locked body{
  overscroll-behavior:none!important;
}
html.clean4u-ipad.clean4u-hamburger-scroll-locked .site-header .main-nav{
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
}

/* ===== V6.67 — FAQ language polish + symmetric disclosure icon + stable hamburger ===== */
.faq-search-input::placeholder{
  opacity:1;
  transition:opacity .22s cubic-bezier(.16,.72,.24,1),color .22s ease;
}
.faq-search-input.clean4u-placeholder-hidden::placeholder{opacity:0!important}
.faq-contact-card,.faq-contact-action{box-sizing:border-box;min-width:0}
.faq-contact-copy,.faq-contact-actions,.faq-contact-action > span:last-child{min-width:0}

/* Exact-pixel geometry removes the anti-aliased short/long arm that the old
   1.7px bars produced after the 45deg rotation. */
.faq-question-icon:before,.faq-question-icon:after{
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:2px!important;
  margin-left:-6px!important;
  margin-top:-1px!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}
.faq-question-icon:after{transform:rotate(90deg)!important}

@media(max-width:1320px){
  .site-header .main-nav.open,
  .site-header .main-nav.open.is-closing{
    position:fixed!important;
    top:92px!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    max-height:calc(100dvh - 108px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
}
@media(max-width:640px){
  .site-header .main-nav.open,
  .site-header .main-nav.open.is-closing{
    top:84px!important;
    left:14px!important;
    right:14px!important;
    max-height:calc(100dvh - 100px)!important;
  }
}
@media(prefers-reduced-motion:reduce){.faq-search-input::placeholder{transition:none!important}}



/* ===== V6.68 — cross-page language preload + complete footer choreography + iPad menu anchoring ===== */
/* When a non-Romanian language was previously selected, keep the document
   invisible only until the existing translation runtime applies that language.
   This prevents a Romanian first-paint flash between pages. */
html.clean4u-language-preload body{visibility:hidden!important}

/* Footer groups are animated as complete visual units by the language engine.
   Keep their compositor state predictable and avoid child-level snapping. */
.site-footer .footer-grid > div,
.site-footer .footer-bottom > span{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* iPad's header is intentionally translateZ(0) for Safari theme stability.
   That transform makes position:fixed descendants use the header as a fixed
   containing block in WebKit. On iPad, anchor the hamburger absolutely to the
   sticky header instead; because the header itself stays at viewport top, the
   menu is visible at every scroll depth without moving the document. */
@media(max-width:1320px){
  html.clean4u-ipad .site-header .main-nav.open,
  html.clean4u-ipad .site-header .main-nav.open.is-closing{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    max-height:calc(100dvh - 112px)!important;
    z-index:360!important;
  }
}
@media(max-width:640px){
  html.clean4u-ipad .site-header .main-nav.open,
  html.clean4u-ipad .site-header .main-nav.open.is-closing{
    left:14px!important;
    right:14px!important;
    top:calc(100% + 8px)!important;
    max-height:calc(100dvh - 94px)!important;
  }
}


/* ===== V6.68 — mathematically symmetric FAQ disclosure X ===== */
.faq-question-icon{transform:none!important}
.faq-question-icon:before,.faq-question-icon:after{
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:2px!important;
  margin:0!important;
  transform-origin:50% 50%!important;
  -webkit-transform-origin:50% 50%!important;
}
.faq-question-icon:before{transform:translate(-50%,-50%) rotate(0deg)!important}
.faq-question-icon:after{transform:translate(-50%,-50%) rotate(90deg)!important}
.faq-item.is-open .faq-question-icon{transform:none!important}
.faq-item.is-open .faq-question-icon:before{transform:translate(-50%,-50%) rotate(45deg)!important}
.faq-item.is-open .faq-question-icon:after{transform:translate(-50%,-50%) rotate(-45deg)!important}
html[data-theme="dark"] .contact-copy-phone .copy-phone-feedback{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.34)!important;
}


/* ===== V6.69 — viewport hamburger portal + cache-stable handheld behaviour ===== */
@media(max-width:1320px){
  body > .main-nav.clean4u-nav-portal{
    display:flex!important;
    position:fixed!important;
    top:var(--c4u-nav-portal-top,92px)!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    max-height:calc(100dvh - var(--c4u-nav-portal-top,92px) - 16px)!important;
    z-index:1505!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:13px!important;
    padding:18px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,.992)!important;
    border:1px solid rgba(18,112,78,.13)!important;
    border-radius:22px!important;
    box-shadow:0 18px 42px rgba(8,39,31,.13)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transform-origin:top center!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .22s ease,transform .30s cubic-bezier(.16,1,.3,1),box-shadow .30s ease!important;
  }
  body > .main-nav.clean4u-nav-portal.clean4u-portal-mounting{
    opacity:0!important;
    transform:translate3d(0,-12px,0) scale(.988)!important;
  }
  body > .main-nav.clean4u-nav-portal.open.is-closing{
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(0,-12px,0) scale(.988)!important;
  }
  body > .main-nav.clean4u-nav-portal > a:not(.btn){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:flex-start!important;
    width:max-content!important;
    min-width:148px!important;
    max-width:100%!important;
    min-height:44px!important;
    box-sizing:border-box!important;
    padding:11px 17px!important;
    margin:0!important;
    border:1px solid rgba(18,112,78,.13)!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,rgba(250,253,251,.99),rgba(237,247,242,.98))!important;
    color:#173d30!important;
    text-align:left!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1.1!important;
    text-shadow:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(8,39,31,.045)!important;
    opacity:1!important;
    transform:none!important;
  }
  body > .main-nav.clean4u-nav-portal > .btn{
    align-self:stretch!important;
    width:100%!important;
    margin-top:5px!important;
    text-align:center!important;
  }
  body > .main-nav.clean4u-nav-portal .lang-switch,
  body > .main-nav.clean4u-nav-portal .theme-toggle-desktop{display:none!important}
  html[data-theme="dark"] body > .main-nav.clean4u-nav-portal{
    background:rgba(9,22,17,.994)!important;
    border-color:rgba(117,213,165,.16)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.34)!important;
  }
  html[data-theme="dark"] body > .main-nav.clean4u-nav-portal > a:not(.btn){
    background:linear-gradient(180deg,rgba(18,42,33,.99),rgba(13,31,25,.99))!important;
    border-color:rgba(117,213,165,.16)!important;
    color:#e8f5ef!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.13)!important;
  }
}
@media(max-width:640px){
  body > .main-nav.clean4u-nav-portal{left:14px!important;right:14px!important}
}

/* Safari backdrop stability: the portal is outside the sticky/transformed
   header, so neither iPhone nor iPad needs a page-position workaround. */
html.clean4u-iphone .clean4u-hamburger-scrim,
html.clean4u-ipad .clean4u-hamburger-scrim{
  -webkit-transform:translate3d(0,0,0)!important;
  transform:translate3d(0,0,0)!important;
  will-change:opacity!important;
}


/* ===== V6.69 — single-shape FAQ disclosure icon + page entrance ===== */
.faq-question-icon{color:var(--green-800)!important;transform:none!important}
.faq-question-icon::after{content:none!important;display:none!important}
.faq-question-icon::before{
  content:""!important;
  position:absolute!important;
  inset:6px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  background:currentColor!important;
  border-radius:0!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5V14.5M1.5 8H14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  -webkit-mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5V14.5M1.5 8H14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  mask-repeat:no-repeat!important;
  mask-position:center!important;
  mask-size:contain!important;
  transform:rotate(0deg)!important;
  transform-origin:50% 50%!important;
  transition:transform .30s cubic-bezier(.16,1,.3,1),background-color .26s ease!important;
}
.faq-item.is-open .faq-question-icon::before{transform:rotate(45deg)!important}
html[data-theme="dark"] .faq-question-icon{color:#80d4a9!important}

@media(prefers-reduced-motion:no-preference){
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-hero .faq-eyebrow,
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-hero h1,
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-hero-lead,
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-search-stage,
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-section-heading,
  html.clean4u-page-intro:not(.clean4u-page-ready) .faq-list{
    opacity:0!important;
    transform:translate3d(0,14px,0)!important;
  }
  .faq-hero .faq-eyebrow,.faq-hero h1,.faq-hero-lead,.faq-search-stage,.faq-section-heading,.faq-list{
    transition:opacity .62s cubic-bezier(.16,.72,.24,1),transform .72s cubic-bezier(.16,.72,.24,1)!important;
  }
  html.clean4u-page-ready .faq-hero .faq-eyebrow{transition-delay:.02s!important}
  html.clean4u-page-ready .faq-hero h1{transition-delay:.08s!important}
  html.clean4u-page-ready .faq-hero-lead{transition-delay:.14s!important}
  html.clean4u-page-ready .faq-search-stage{transition-delay:.20s!important}
  html.clean4u-page-ready .faq-section-heading{transition-delay:.25s!important}
  html.clean4u-page-ready .faq-list{transition-delay:.31s!important}
}


/* ===== V6.70 — full-width portal menu + synchronized menu/scrim close ===== */
@media(max-width:1320px){
  body > .main-nav.clean4u-nav-portal{
    align-items:stretch!important;
  }
  body > .main-nav.clean4u-nav-portal > a:not(.btn){
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body > .main-nav.clean4u-nav-portal .mobile-policy-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    gap:10px!important;
    margin:2px 0 0!important;
    padding:0!important;
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
  }
  body > .main-nav.clean4u-nav-portal .mobile-policy-link{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:11px 14px!important;
    margin:0!important;
  }
  body > .main-nav.clean4u-nav-portal.open.is-closing{
    transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease!important;
  }
  .clean4u-hamburger-scrim.is-closing{
    transition:opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .30s!important;
    -webkit-transition:opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .30s!important;
  }
}
@media(max-width:520px){
  body > .main-nav.clean4u-nav-portal .mobile-policy-links{grid-template-columns:1fr!important}
}


/* ===== V6.71 — compact policy-style language fade ===== */
@media(max-width:1320px){
  main > section,
  .site-footer{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
}


/* ===== V6.76 — zero-dimming language viewport transition =====
   The translated viewport is fully opaque from frame one. The old immutable
   viewport sits above it and simply dissolves, so geometry can change freely
   underneath without black flashes, jumps, or partially resized live cards. */
@keyframes c4uLanguageViewportOldOut{
  from{opacity:1}
  to{opacity:0}
}

::view-transition-group(root){
  animation:none!important;
  transform:none!important;
}
::view-transition-image-pair(root){
  isolation:isolate!important;
}
::view-transition-new(root){
  z-index:1!important;
  opacity:1!important;
  animation:none!important;
  mix-blend-mode:normal!important;
  transform:none!important;
}
::view-transition-old(root){
  z-index:2!important;
  opacity:1;
  animation:c4uLanguageViewportOldOut 390ms cubic-bezier(.22,.68,.24,1) both!important;
  mix-blend-mode:normal!important;
  transform:none!important;
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
}

/* Pause decorative keyframes while the immutable language snapshots are being
   composited. CSS transitions remain available; only looping shine/sweep
   animations are frozen so they cannot introduce unrelated motion. */
html.clean4u-language-view-transition body *{
  animation-play-state:paused!important;
}


/* ===== V6.88 — desktop policy menu bubbles ===== */
@media(min-width:1321px){
  .header-policy-menu{
    padding:12px!important;
    display:grid!important;
    gap:8px!important;
  }
  .header-policy-menu-title{
    padding:5px 10px 8px!important;
    text-align:center!important;
  }
  .header-policy-item{
    width:100%!important;
    min-height:46px!important;
    padding:11px 14px!important;
    border:1px solid rgba(20,83,63,.14)!important;
    border-radius:14px!important;
    background:rgba(230,244,237,.72)!important;
    color:#205a45!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 4px 12px rgba(8,39,31,.035)!important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  }
  .header-policy-item>span:last-child{
    width:100%!important;
    text-align:center!important;
  }
  .header-policy-item:hover,
  .header-policy-item:focus-visible{
    background:#e4f3eb!important;
    border-color:rgba(20,83,63,.24)!important;
    color:#14533f!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 7px 16px rgba(8,39,31,.07)!important;
    outline:none!important;
  }
  .header-policy-item:active{transform:scale(.985)!important}

  html[data-theme="dark"] .header-policy-item{
    background:rgba(19,54,42,.72)!important;
    border-color:rgba(174,220,199,.12)!important;
    color:#cfe7dc!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 12px rgba(0,0,0,.10)!important;
  }
  html[data-theme="dark"] .header-policy-item:hover,
  html[data-theme="dark"] .header-policy-item:focus-visible{
    background:#15392c!important;
    border-color:rgba(174,220,199,.22)!important;
    color:#eef8f3!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 16px rgba(0,0,0,.18)!important;
  }
}