:root {
  --green: #458036;
  --green-dark: #2d5128;
  --ink: #1e1e1e;
  --muted: #8b8b90;
  --surface: #f8f8f8;
  --light-blue: #f9fbff;
  --white: #fff;
  --container: 1800px;
  --page-pad: 60px;
  --radius: 12px;
  --ease: cubic-bezier(.2,.72,.2,1);
  --shadow: 0 20px 60px rgba(24, 52, 24, .09);
  --xolonium: 'Xolonium', 'XoloniumRegular', Arial, sans-serif;
  --onest: 'Onest', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--onest); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
::selection { background: rgba(69,128,54,.22); }

.container { width: min(var(--container), calc(100% - var(--page-pad) * 2)); margin-inline: auto; }
.section { padding: 100px 0; }
.section-sm { padding: 50px 0; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--xolonium); font-weight: 400; }
h2 { font-size: 60px; line-height: .92; letter-spacing: -.025em; }

.site-header { position: absolute; z-index: 30; inset: 0 0 auto; height: 115px; border-bottom: 1px solid rgba(255,255,255,.3); color: white; transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.site-header.is-scrolled { position: fixed; height: 84px; background: rgba(20,37,22,.88); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.1); box-shadow: 0 10px 35px rgba(0,0,0,.12); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brand { flex: 0 0 auto; }
.brand-mark { display: inline-flex; align-items: stretch; height: 39px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.brand-mark i { width: 16px; background: linear-gradient(180deg,#3eb5e7 0 52%,#b7d42b 52%); }
.brand-mark b { display: flex; align-items: center; padding: 0 14px; color: #fff; background: #3c7d39; font: 700 19px/1 var(--xolonium); letter-spacing: .04em; }
.desktop-nav { display: flex; gap: 30px; align-items: center; margin-left: auto; }
.desktop-nav a, .header-contact a { font-size: 16.25px; font-weight: 500; line-height: 1.5; position: relative; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -9px; height: 1px; background: currentColor; transition: right .25s var(--ease); }
.desktop-nav a:hover::after { right: 0; }
.header-contact { display: flex; gap: 24px; align-items: center; }
.header-divider { width: 1px; height: 38px; background: rgba(255,255,255,.8); }
.header-phone { display: block; font-size: 20px!important; font-weight: 800!important; }
.header-consult { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.menu-toggle, .mobile-menu { display: none; }

.hero { position: relative; height: 922px; color: white; overflow: hidden; background: #223b24; }
.hero-slides, .hero-slide, .hero-vignette { position: absolute; inset: 0; }
.hero-slide { background-image: var(--bg), linear-gradient(115deg,#395d2e,#16301c); background-size: cover; background-position: center; opacity: 0; transform: scale(1.055); transition: opacity 1.1s var(--ease), transform 7s linear; }
.hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-vignette { z-index: 2; background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.12) 100%), linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.25)); }
.hero-content { position: relative; z-index: 3; padding-top: 258px; }
.hero h1 { max-width: 1120px; margin-bottom: 42px; font-weight: 700; font-size: 50px; line-height: 1; letter-spacing: -.02em; }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-copy { max-width: 780px; }
.hero-copy p { font-size: 25px; line-height: 1.1; margin-bottom: 70px; }
.button { min-height: 65px; padding: 18px 30px; display: inline-flex; gap: 12px; justify-content: center; align-items: center; border-radius: 10px; font-weight: 600; letter-spacing: .04em; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button-primary { min-width: 321px; color: #fff; background: var(--green); box-shadow: 0 12px 30px rgba(38,80,31,.22); }
.button-primary:hover { background: #3b7130; box-shadow: 0 18px 36px rgba(38,80,31,.28); }
.button-arrow { font-size: 25px; line-height: 1; transition: transform .25s var(--ease); }
.button:hover .button-arrow { transform: translateX(5px); }
.slider-controls { display: flex; gap: 25px; }
.slider-controls button { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.4); color: #fff; font-size: 43px; font-weight: 200; line-height: 1; display: grid; place-items: center; backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.slider-controls button:hover { background: rgba(255,255,255,.55); transform: scale(1.04); }
.hero-progress { position: absolute; z-index: 4; height: 2px; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.2); }
.hero-progress span { display: block; width: 0; height: 100%; background: rgba(255,255,255,.85); animation: heroProgress 6s linear infinite; }
@keyframes heroProgress { to { width: 100%; } }

.section-link-row { display: flex; justify-content: flex-end; margin-bottom: 40px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); font: 400 16.25px/1.5 var(--xolonium); }
.text-link span { font: 27px/1 var(--onest); transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.directions { padding-top: 100px; padding-bottom: 100px; }
.directions-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 388px); gap: 25px; }
.directions-heading { padding-top: 4px; }
.directions-heading h2 { margin: 0; }
.direction-card, .direction-image { border-radius: 12px; overflow: hidden; }
.direction-card { background: var(--surface); padding: 35px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.direction-card:hover { transform: translateY(-7px); background: #fff; box-shadow: var(--shadow); }
.direction-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.direction-head h3 { margin: 0; font-size: 28px; line-height: .98; }
.round-arrow { flex: 0 0 62px; width: 62px; height: 62px; border: 1px solid #b9b9bc; border-radius: 50%; display: grid; place-items: center; font-size: 23px; color: #555; transition: background .25s,color .25s,border-color .25s,transform .25s; }
.direction-card:hover .round-arrow { background: var(--green); border-color: var(--green); color: white; transform: rotate(45deg); }
.direction-card p { margin: 0; font-size: 24px; line-height: 1.15; max-width: 96%; }
.direction-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.direction-image:hover img { transform: scale(1.04); }

.about { position: relative; min-height: 1088px; color: #fff; overflow: hidden; }
.about-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), linear-gradient(120deg,#314f2a,#162a19); background-size: cover; background-position: center 55%; transform: scale(1.01); }
.about-inner { position: relative; z-index: 1; padding: 150px 0; }
.about-intro { display: grid; grid-template-columns: 1.15fr .95fr; gap: 175px; margin-bottom: 176px; }
.about-intro h2 { font-size: 37.5px; line-height: 1.1; margin: 0; max-width: 770px; }
.about-copy { display: grid; gap: 30px; }
.about-copy p { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 500; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.stat-card { min-height: 331px; padding: 35px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,16,10,.05); display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(2px); }
.stat-card strong { font: 400 52.5px/1.1 var(--xolonium); }
.stat-card strong small { font-size: 40px; }
.stat-card .stat-word { font-size: 48px; }
.stat-card p { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 500; }

.products { padding-top: 100px; padding-bottom: 70px; }
.section-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 70px; }
.section-heading-row h2 { margin: 0; }
.product-groups { display: grid; gap: 60px; }
.product-group { display: grid; grid-template-columns: 345px minmax(0, 1fr); gap: 20px; }
.product-group-label { padding: 16px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.product-group-label h3 { margin: 0; font-size: 24px; line-height: 1.05; }
.product-group-label span { font-size: 28px; line-height: .75; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: start; }
.product-card { min-height: 390px; background: var(--surface); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-placeholder { height: 250px; border-radius: 4px; background: #fff; position: relative; display: grid; place-items: center; overflow: hidden; }
.product-placeholder::after { content: ''; width: 85%; height: 80%; background: #8b8b90; transition: transform .4s var(--ease), filter .4s; }
.product-card:hover .product-placeholder::after { transform: scale(1.025); filter: brightness(.95); }
.product-card h4 { font-size: 16px; line-height: 1.1; margin: 18px 0 auto; min-height: 36px; }
.product-card > div:last-child { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; }
.product-card a { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.product-card a:hover { color: var(--green-dark); }

.logistics { padding-top: 60px; padding-bottom: 50px; }
.logistics-card { min-height: 480px; position: relative; overflow: hidden; border-radius: 12px; background: var(--light-blue); padding: 40px; display: flex; align-items: center; }
.logistics-copy { position: relative; z-index: 2; width: 58%; }
.logistics-copy h2 { margin-bottom: 40px; }
.logistics-copy p { font-size: 24px; line-height: 1.15; width: min(930px,100%); margin-bottom: 40px; }
.logistics-map { position: absolute; right: -30%; top: 0; height: 100%; width: 80%; object-fit: contain; object-position: left center; pointer-events: none; }

.features { padding-top: 50px; padding-bottom: 100px; }
.features h2 { margin-bottom: 48px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.feature-card { min-height: 350px; padding: 35px; border-radius: 10px; background: #fff; border: 1px solid #f0f0f0; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.feature-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.feature-icon { display: grid; place-items: center; width: 60px; height: 60px; color: #ec5d56; font: 500 30px/1 var(--xolonium); border: 1px solid rgba(236,93,86,.32); border-radius: 50%; }
.feature-card h3 { margin: 48px 0 15px; font-size: 25px; line-height: 1.1; }
.feature-card p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.5; font-weight: 500; max-width: 520px; }

.documents { padding-top: 70px; padding-bottom: 50px; }
.documents-layout { display: grid; grid-template-columns: 650px minmax(0,1fr); gap: 78px; min-height: 450px; }
.documents-copy { display: flex; flex-direction: column; justify-content: space-between; }
.documents-copy h2 { margin: 0; font-size: 44px; line-height: .99; }
.documents-controls { display: flex; gap: 30px; }
.documents-controls button { width: 40px; height: 44px; background: transparent; color: var(--green); font-size: 32px; display: grid; place-items: center; transition: transform .2s, color .2s; }
.documents-controls button:hover { color: var(--green-dark); transform: translateX(-3px); }
.documents-controls button + button:hover { transform: translateX(3px); }
.documents-viewport { overflow: hidden; width: 100%; }
.documents-track { display: flex; gap: 30px; transition: transform .55s var(--ease); will-change: transform; }
.document-card { flex: 0 0 315px; height: 450px; border-radius: 15px; background: #8b8b90; display: flex; align-items: flex-end; padding: 20px; color: rgba(255,255,255,.8); font-size: 14px; overflow: hidden; position: relative; }
.document-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.08)); transform: translateY(100%); transition: transform .45s var(--ease); }
.document-card:hover::before { transform: translateY(0); }

.contact { padding-top: 50px; padding-bottom: 50px; }
.contact-card {  border-radius: 25px; overflow: hidden;  color: #fff; background: #324b29; }
.contact-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), linear-gradient(130deg,#52733d,#132717); background-size: cover; background-position: center; transition: transform 8s linear; }
.contact-card:hover .contact-bg { transform: scale(1.025); }
.contact-title {     z-index: 1; }
.contact-title h2 {   margin: 0; }
.contact-form {  z-index: 2;      border-radius: 20px; background: rgba(63,122,47,.22); backdrop-filter: blur(9px); }
.contact-form > label:not(.consent):not(.hp-field), .select-wrap, .region-field { display: block; position: relative; min-height: 75px; border-bottom: 1px solid rgba(255,255,255,.4); padding-top: 34px; }
.contact-form label > span:not(.consent span) { position: absolute; left: 0; top: 38px; font-size: 20px; font-weight: 500; pointer-events: none; transition: transform .2s, font-size .2s, opacity .2s; transform-origin: left center; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; outline: 0; color: white; background: transparent; min-height: 40px; resize: none; appearance: none; }
.contact-form label:focus-within > span:not(.consent span), .contact-form label.has-value > span:not(.consent span), .select-wrap.has-value > span { transform: translateY(-24px); font-size: 12px; opacity: .75; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.select-wrap::after { content: '⌄'; position: absolute; right: 0; bottom: 12px; pointer-events: none; transition: transform .18s var(--ease); }

/* V21 — Country and Region share one deterministic label baseline.
   Region is a text input (no chevron); Country remains the custom picker. */
.country-select > span,
.region-field > span {
  position: absolute;
  left: 0;
  top: 10px;
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  opacity: .75;
  pointer-events: none;
  transform: none !important;
}
.region-field {
  display: block;
  position: relative;
  min-height: 75px;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-top: 34px;
}
.region-field::after { content: none !important; }
.region-field input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0;
  margin: 0;
}

/* Country select is intentionally custom-rendered. Native Windows/Chromium
   popups can ignore option colors and make unselected rows invisible. The
   real <select> stays in the form for the existing API payload, while this
   accessible listbox handles presentation and interaction consistently. */
.country-select { overflow: visible; z-index: 6; }
.country-value-input { display: none !important; }
.country-select-trigger {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 30px 0 0;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}
.country-select-trigger > span { display: block; min-width: 0; }
.country-select-trigger:focus-visible { outline: 2px solid rgba(255,255,255,.92); outline-offset: 4px; border-radius: 4px; }
.country-select.is-open::after { transform: rotate(180deg); }
.country-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid rgba(19,39,23,.10);
  border-radius: 12px;
  background: #fff;
  color: #132717;
  box-shadow: 0 18px 45px rgba(8,31,12,.24);
}
.country-select-menu[hidden] { display: none; }
.country-select-option {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  background: #fff;
  color: #132717;
  text-align: left;
  font: inherit;
  line-height: 1.3;
}
.country-select-option:hover,
.country-select-option:focus-visible { background: #edf3ea; outline: none; }
.country-select-option[aria-selected="true"] { background: #dfeadb; font-weight: 600; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 25px; font-size: 16px; }
.consent input { width: 20px; min-height: 20px; accent-color: #fff; }
.form-footer { display: flex; align-items: center; gap: 20px; margin-top: 42px; }
.button-light { min-width: 212px; color: var(--green); background: #fff; font-family: var(--xolonium); }
.button-light:hover { background: #f2f6f0; box-shadow: 0 15px 35px rgba(0,0,0,.12); }
.form-status { font-size: 14px; max-width: 330px; }

.site-footer { padding: 50px 0 0; }
.footer-card { border-radius: 25px 25px 0 0; background: var(--ink); color: #fff; padding: 49px 60px 30px; }
.footer-main { display: grid; grid-template-columns: 190px 190px 310px 1fr; gap: 65px; align-items: start; }
.footer-brand { padding-right: 25px; }
.footer-nav, .footer-products, .footer-contacts { display: flex; flex-direction: column; gap: 18px; }
.footer-nav a, .footer-products a, .footer-contacts a, .footer-contacts p { font-size: 20px; line-height: 1.5; font-weight: 500; margin: 0; }
.footer-products strong, .footer-contacts strong { font-size: 25px; line-height: 1.1; }
.footer-contacts { max-width: 470px; justify-self: end; }
.contact-label-inline { color: rgba(255,255,255,.58); font-size: .78em; font-weight: 500; margin-right: 4px; }
.footer-main a:hover { color: #badbae; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.4); margin-top: 37px; padding-top: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; font-size: 16.25px; }
.footer-bottom > * { text-align: center; }
.footer-bottom > *:first-child { text-align: left; }

.reveal { opacity: 0; transition: opacity .75s var(--ease), transform .75s var(--ease), clip-path .85s var(--ease); transition-delay: var(--delay, 0s); }
.reveal-up { transform: translateY(35px); }
.reveal-clip { clip-path: inset(0 100% 0 0 round 12px); }
.reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .reveal { opacity: 1!important; transform: none!important; clip-path: none!important; }
}

@media (max-width: 1700px) {
  :root { --page-pad: 42px; }
  .desktop-nav { gap: 22px; }
  .header-contact { gap: 18px; }
  .hero h1 { font-size: 46px; }
  .product-group { grid-template-columns: 280px minmax(0,1fr); }
  .product-grid { grid-template-columns: repeat(4,minmax(220px,1fr)); overflow: hidden; }
  .documents-layout { grid-template-columns: 540px minmax(0,1fr); }
}

@media (max-width: 1360px) {
  :root { --page-pad: 32px; }
  h2 { font-size: 52px; }
  .desktop-nav { display: none; }
  .header-contact { margin-left: auto; }
  .menu-toggle { display: grid; width: 48px; height: 48px; place-content: center; gap: 7px; border-radius: 50%; background: rgba(255,255,255,.12); }
  .menu-toggle span { display: block; width: 22px; height: 1px; background: #fff; transition: transform .3s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-menu { display: block; position: fixed; inset: 84px 0 auto; padding: 36px var(--page-pad) 42px; background: rgba(20,37,22,.97); transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .35s, visibility .35s; }
  .mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .mobile-menu nav { display: grid; gap: 4px; }
  .mobile-menu-contact { display: flex; gap: 30px; margin-top: 30px; }
  .hero { height: 850px; }
  .hero-content { padding-top: 230px; }
  .hero h1 { max-width: 940px; font-size: 43px; }
  .hero-copy p { font-size: 21px; }
  .directions-grid { grid-template-rows: repeat(2,340px); }
  .direction-card { padding: 28px; }
  .direction-card p { font-size: 20px; }
  .about { min-height: auto; }
  .about-inner { padding: 120px 0; }
  .about-intro { gap: 90px; margin-bottom: 110px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-card { min-height: 260px; }
  .product-group { grid-template-columns: 240px minmax(0,1fr); }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-card { min-height: 360px; }
  .product-placeholder { height: 220px; }
  .documents-layout { grid-template-columns: 430px minmax(0,1fr); }
  .footer-main { grid-template-columns: 150px 160px 280px 1fr; gap: 35px; }
}

@media (max-width: 1024px) {
  :root { --page-pad: 24px; }
  .section { padding: 72px 0; }
  .header-contact { display: none; }
  .site-header { height: 84px; }
  .hero { height: 780px; }
  .hero-content { padding-top: 190px; }
  .hero h1 { font-size: 38px; max-width: 780px; }
  .hero-bottom { align-items: flex-end; }
  .hero-copy { max-width: 650px; }
  .hero-copy p { font-size: 19px; margin-bottom: 48px; }
  .slider-controls button { width: 62px; height: 62px; font-size: 34px; }
  .directions-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto repeat(2,320px); }
  .directions-heading { grid-column: 1 / -1; padding-bottom: 15px; }
  .directions-heading h2 br { display: none; }
  .about-intro { grid-template-columns: 1fr; gap: 42px; margin-bottom: 80px; }
  .about-intro h2 { font-size: 38px; }
  .product-group { grid-template-columns: 1fr; gap: 12px; }
  .product-group-label { border-top: 1px solid #e8e8e8; padding-top: 24px; }
  .product-grid { grid-template-columns: repeat(2,1fr); overflow: visible; }
  .logistics-card { min-height: 450px; }
  .logistics-copy { width: 70%; }
  .logistics-map { right: -45%; width: 100%; opacity: .75; }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .documents-layout { grid-template-columns: 1fr; gap: 40px; }
  .documents-copy { min-height: 230px; }
  .documents-copy h2 br { display: none; }
  .contact-title { z-index: 2; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 45px; }
  .footer-contacts { justify-self: start; }
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .footer-bottom > * { text-align: left; }
}

@media (max-width: 700px) {
  :root { --page-pad: 16px; }
  h2 { font-size: 38px; line-height: .98; }
  .container { width: calc(100% - var(--page-pad) * 2); }
  .site-header, .site-header.is-scrolled { height: 72px; }
  .brand-mark { height: 34px; }
  .brand-mark b { font-size: 16px; padding: 0 11px; }
  .brand-mark i { width: 13px; }
  .menu-toggle { width: 42px; height: 42px; }
  .mobile-menu { top: 72px; }
  .mobile-menu-contact { flex-direction: column; gap: 12px; }
  .hero { height: min(760px, 100svh); min-height: 670px; }
  .hero-content { padding-top: 150px; }
  .hero h1 { font-size: clamp(30px,8vw,40px); line-height: 1.02; margin-bottom: 30px; }
  .hero-copy p { font-size: 17px; line-height: 1.35; margin-bottom: 34px; }
  .hero-bottom { display: block; }
  .button { min-height: 58px; width: 100%; min-width: 0; }
  .slider-controls { margin-top: 38px; justify-content: flex-end; gap: 14px; }
  .slider-controls button { width: 54px; height: 54px; }
  .directions { padding-top: 70px; }
  .section-link-row { margin-bottom: 30px; }
  .directions-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 14px; }
  .direction-card, .direction-image { min-height: 270px; }
  .direction-head h3 { font-size: 24px; }
  .direction-card p { font-size: 18px; }
  .round-arrow { width: 50px; height: 50px; flex-basis: 50px; }
  .about-inner { padding: 80px 0; }
  .about-intro { gap: 30px; margin-bottom: 55px; }
  .about-intro h2 { font-size: 31px; }
  .about-copy p { font-size: 17px; line-height: 1.55; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { min-height: 210px; padding: 28px; }
  .stat-card strong { font-size: 44px; }
  .stat-card p { font-size: 20px; }
  .section-heading-row { margin-bottom: 45px; align-items: center; }
  .section-heading-row .text-link { display: none; }
  .product-groups { gap: 45px; }
  .product-grid { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .product-grid::-webkit-scrollbar { display: none; }
  .product-card { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }
  .logistics-card { min-height: 560px; padding: 28px; align-items: flex-start; }
  .logistics-copy { width: 100%; position: relative; z-index: 3; }
  .logistics-copy h2 { font-size: 36px; margin-bottom: 28px; }
  .logistics-copy p { font-size: 18px; line-height: 1.4; }
  .logistics-map { width: 150%; height: 50%; right: -55%; top: auto; bottom: 0; opacity: .45; }
  .features h2 { margin-bottom: 34px; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { min-height: 280px; padding: 28px; }
  .feature-card h3 { margin-top: 36px; }
  .feature-card p { font-size: 17px; }
  .documents { padding-top: 35px; }
  .documents-copy { min-height: 190px; }
  .documents-copy h2 { font-size: 34px; }
  .document-card { flex-basis: 260px; height: 370px; }
  .documents-track { gap: 16px; }
  .contact { padding-top: 20px; }
  .contact-card {  border-radius: 18px; }
  .contact-form {  border-radius: 14px; }
  .form-split { grid-template-columns: 1fr; gap: 0; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .footer-card { width: 100%; border-radius: 18px 18px 0 0; padding: 38px 22px 24px; }
  .footer-main { grid-template-columns: 1fr; gap: 38px; }
  .footer-nav, .footer-products, .footer-contacts { gap: 10px; }
  .footer-nav a, .footer-products a, .footer-contacts a, .footer-contacts p { font-size: 17px; }
  .footer-bottom { grid-template-columns: 1fr; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   V2 polish — premium interactions and refined responsive navigation
   -------------------------------------------------------------------------- */

/* One agricultural hero image: intentional, calm, no carousel noise. */
.hero-media { position: absolute; inset: 0; z-index: 1; background-image: var(--bg), linear-gradient(115deg,#395d2e,#16301c); background-size: cover; background-position: center 48%; transform: scale(1.015); animation: heroBreath 16s ease-in-out infinite alternate; }
.hero-vignette { z-index: 2; background:
  radial-gradient(circle at 72% 58%, rgba(6,24,7,0) 0 24%, rgba(5,19,7,.18) 68%, rgba(3,13,5,.3) 100%),
  linear-gradient(90deg, rgba(5,18,6,.66) 0%, rgba(8,25,9,.36) 45%, rgba(5,17,7,.13) 78%),
  linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.29));
}
@keyframes heroBreath { from { transform: scale(1.015); } to { transform: scale(1.045); } }
.hero-signature { min-width: 300px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-bottom: 8px; color: rgba(255,255,255,.72); -webkit-user-select: none; user-select: none; }
.hero-signature span { width: 62px; height: 1px; background: rgba(255,255,255,.5); }
.hero-signature small { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Product accordions. Expanded state intentionally uses a minus; collapsed uses plus. */
.product-group { align-items: start; }
.product-group-label { width: 100%; color: var(--ink); background: transparent; border: 0; text-align: left; font-family: inherit; cursor: pointer; border-radius: 10px; transition: color .25s var(--ease), background .25s var(--ease); }
.product-group-label:hover { color: var(--green-dark); }
.product-group-label:focus-visible { outline: 2px solid rgba(69,128,54,.45); outline-offset: 5px; }
.product-group-label h3 { transition: transform .3s var(--ease); }
.product-group-label:hover h3 { transform: translateX(3px); }
.group-toggle-icon { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(30,30,30,.2); border-radius: 50%; display: grid; place-items: center; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.group-toggle-icon i { position: absolute; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .32s var(--ease), opacity .25s var(--ease); }
.group-toggle-icon i:last-child { transform: rotate(90deg) scaleX(0); }
.product-group.is-collapsed .group-toggle-icon i:last-child { transform: rotate(90deg) scaleX(1); }
.product-group-label:hover .group-toggle-icon { border-color: var(--green); background: rgba(69,128,54,.07); }
.product-grid-wrap { min-width: 0; display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--ease), opacity .35s var(--ease); }
.product-grid-wrap > .product-grid { min-height: 0; }
.product-group.is-collapsed .product-grid-wrap { grid-template-rows: 0fr; opacity: .35; }
.product-group.is-collapsed .product-grid { overflow: hidden !important; }
.product-card { border: 1px solid rgba(32,54,29,.035); background: linear-gradient(180deg,#fafafa 0%,#f6f7f5 100%); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(28,53,27,.09); }
.product-placeholder { box-shadow: inset 0 0 0 1px rgba(20,40,20,.025); }
.product-card a { transition: color .2s var(--ease), opacity .2s var(--ease); }

/* More cohesive, purpose-built feature iconography. */
.features { position: relative; background: linear-gradient(180deg,#fff 0%,#fbfcfa 45%,#fff 100%); }
.features-grid { gap: 22px; }
.feature-card { position: relative; overflow: hidden; min-height: 350px; border: 1px solid rgba(36,65,32,.075); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset; }
.feature-card::after { content: ''; position: absolute; inset: auto 35px 0; height: 2px; background: linear-gradient(90deg,var(--green),rgba(69,128,54,0)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.feature-card:hover { transform: translateY(-7px); border-color: rgba(69,128,54,.13); box-shadow: 0 24px 64px rgba(36,67,31,.09); }
.feature-card:hover::after { transform: scaleX(1); }
.feature-icon { width: 64px; height: 64px; color: var(--green-dark); border: 1px solid rgba(69,128,54,.19); background: linear-gradient(145deg,rgba(69,128,54,.095),rgba(69,128,54,.025)); box-shadow: 0 10px 30px rgba(47,91,40,.055); }
.feature-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { margin-top: 46px; letter-spacing: -.015em; }
.feature-card p { color: #777d78; line-height: 1.48; }

/* Refined mobile/tablet navigation: compact glass panel rather than a giant full-width sheet. */
@media (max-width: 1360px) {
  .mobile-menu { inset: 98px var(--page-pad) auto auto; width: min(520px, calc(100vw - (var(--page-pad) * 2))); max-height: calc(100svh - 118px); overflow: auto; padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: linear-gradient(150deg,rgba(16,38,20,.965),rgba(10,27,14,.94)); box-shadow: 0 30px 90px rgba(0,0,0,.3); backdrop-filter: blur(24px) saturate(125%); transform: translateY(-12px) scale(.985); transform-origin: top right; }
  .site-header.is-scrolled .mobile-menu { top: 96px; }
  .mobile-menu.is-open { transform: translateY(0) scale(1); }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 20px; border-bottom: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .12em; }
  .mobile-menu-head span, .mobile-menu-head small { font-size: 11px; font-weight: 600; }
  .mobile-menu nav { gap: 0; padding: 10px 0 14px; }
  .mobile-menu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
  .mobile-menu-contact > div { min-width: 0; padding: 15px 16px; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); }
  .mobile-menu-contact small { display: block; margin-bottom: 6px; color: rgba(255,255,255,.46); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
  .mobile-menu-contact a { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-signature { min-width: 240px; }
  .product-group-label { min-height: 62px; }
}

@media (max-width: 1024px) {
  .product-group-label { align-items: center; padding: 18px 0; }
  .product-group-label h3 br { display: none; }
  .group-toggle-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .hero-signature { display: none; }
}

@media (max-width: 700px) {
  .mobile-menu { inset: 82px 12px auto; width: auto; max-height: calc(100svh - 94px); padding: 20px; border-radius: 18px; }
  .site-header.is-scrolled .mobile-menu { top: 82px; }
  .mobile-menu-contact { grid-template-columns: 1fr; }
  .product-group-label { border-top: 1px solid rgba(30,30,30,.1); border-radius: 0; }
  .product-group-label h3 { font-size: 22px; }
  .product-grid-wrap { min-width: 0; }
  .feature-card { min-height: 265px; border-radius: 12px; }
  .feature-icon { width: 58px; height: 58px; }
  .feature-icon svg { width: 28px; height: 28px; }
}


/* --------------------------------------------------------------------------
   V3 precision fixes — optical centering, resilient media and form controls
   -------------------------------------------------------------------------- */

/* The menu is self-explanatory: keep only the compact brand/year marker. */
@media (max-width: 1360px) {
  .mobile-menu-head { justify-content: flex-end; }
}

/* Vector arrow instead of a font glyph: mathematically centered at every DPI. */
.round-arrow {
  position: relative;
  line-height: 0;
  isolation: isolate;
}
.round-arrow svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  transition: transform .38s var(--ease);
}
.direction-card:hover .round-arrow { transform: none; }
.direction-card:hover .round-arrow svg { transform: rotate(45deg); }
.direction-card:focus-within .round-arrow svg { transform: rotate(45deg); }

/* Logistics art must always fill the banner, even when the card becomes taller. */
.logistics-card { contain: paint; }
.logistics-map {
  max-width: none;
  object-fit: cover;
  object-position: left center;
  transform: scale(1.008);
  transform-origin: right center;
}
.logistics-copy h2 {
  font-size: clamp(42px, 3.15vw, 60px);
  line-height: .94;
  letter-spacing: -.025em;
}
.logistics-title-line {
  display: block;
  white-space: nowrap;
}

/* Real custom checkbox: the generic input reset previously removed the native box. */
.consent { align-items: center; }
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.consent input[type="checkbox"]::before {
  content: '';
  width: 6px;
  height: 10px;
  border: solid var(--green-dark);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .18s var(--ease);
}
.consent input[type="checkbox"]:checked {
  background: #fff;
  border-color: #fff;
}
.consent input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(45deg) scale(1); }
.consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}
.consent span { line-height: 1.35; }

@media (max-width: 1360px) {
  .logistics-copy h2 { font-size: clamp(40px, 3.75vw, 52px); }
  .logistics-map { right: -32%; width: 84%; }
}

@media (max-width: 1024px) {
  .logistics-copy { width: 68%; }
  .logistics-copy h2 { font-size: clamp(34px, 4vw, 42px); }
  .logistics-map { right: -40%; width: 102%; opacity: .82; }
}

@media (max-width: 700px) {
  .logistics-title-line { white-space: normal; text-wrap: balance; }
  .logistics-copy h2 { max-width: 13ch; font-size: clamp(32px, 10vw, 38px); }
  .logistics-map { width: 170%; height: 54%; right: -64%; opacity: .48; object-fit: cover; }
  .consent { align-items: flex-start; gap: 11px; }
  .consent input[type="checkbox"] { margin-top: 2px; }
}

/* Better line composition across responsive widths. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   V4 interaction polish — glass navigation, native document scrolling,
   and deep links from product directions into the matching catalogue group.
   -------------------------------------------------------------------------- */

/* Direction tiles are real links now; preserve the card look and add a clear
   keyboard focus without introducing a new visual language. */
.direction-card,
.direction-image { color: inherit; }
.direction-card:focus-visible,
.direction-image:focus-visible {
  outline: 2px solid rgba(69,128,54,.55);
  outline-offset: 5px;
}
.direction-image { position: relative; display: block; }
.direction-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(69,128,54,0), rgba(27,61,24,.09));
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.direction-image:hover::after { opacity: 1; }

/* A short, restrained highlight confirms which catalogue family was opened. */
.product-group.is-jump-highlight .product-group-label {
  color: var(--green-dark);
}
.product-group.is-jump-highlight .product-group-label::after {
  transform: scaleX(1);
  opacity: 1;
}
.product-group-label { position: relative; }
.product-group-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: min(86px, 32%);
  height: 2px;
  border-radius: 99px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}

/* Documents use a native horizontal scroller. This lets a Mac/Windows
   touchpad swipe the certificates directly while keeping the arrow buttons. */
.documents-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}
.documents-viewport::-webkit-scrollbar { display: none; }
.documents-track {
  width: max-content;
  min-width: 100%;
  transform: none !important;
  transition: none;
}
.document-card { scroll-snap-align: start; scroll-snap-stop: normal; }
.documents-viewport:focus-visible {
  outline: 2px solid rgba(69,128,54,.4);
  outline-offset: 7px;
  border-radius: 15px;
}

/* Glass navigation: no redundant heading/brand marker, only generous breathing
   room and layered translucent surfaces over the page behind it. */
@media (max-width: 1360px) {
  .mobile-menu {
    padding: 34px 26px 26px;
    border: 1px solid rgba(255,255,255,.22);
    background:
      linear-gradient(145deg, rgba(35,72,40,.57) 0%, rgba(12,39,20,.46) 58%, rgba(8,28,15,.50) 100%);
    -webkit-backdrop-filter: blur(34px) saturate(148%);
    backdrop-filter: blur(34px) saturate(148%);
    box-shadow:
      0 28px 85px rgba(4,20,9,.28),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(255,255,255,.055);
    isolation: isolate;
  }
  .mobile-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(circle at 14% 0%, rgba(255,255,255,.16), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%);
  }
  .mobile-menu nav { padding: 0 0 16px; }
  .mobile-menu-contact > div {
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }
}

@media (max-width: 700px) {
  .mobile-menu { padding: 28px 20px 20px; }
}

/* --------------------------------------------------------------------------
   V5 finishing layer — restrained premium motion and interaction detail
   -------------------------------------------------------------------------- */

/* Soft cursor-following light. It is intentionally low-contrast and only
   activates on devices that really have a mouse/trackpad pointer. */
@media (hover: hover) and (pointer: fine) {
  .direction-card,
  .feature-card {
    --spot-x: 50%;
    --spot-y: 50%;
  }
  .direction-card { position: relative; isolation: isolate; }
  .direction-card::before,
  .feature-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(69,128,54,.105), rgba(69,128,54,.025) 31%, transparent 67%);
    transition: opacity .3s var(--ease);
  }
  .direction-card:hover::before,
  .feature-card:hover::before { opacity: 1; }

  /* The arrow responds to the pointer by only a few pixels. This keeps the
     interaction tactile without making the industrial UI feel playful. */
  .direction-card .round-arrow {
    --mag-x: 0px;
    --mag-y: 0px;
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
    transition: background .25s, color .25s, border-color .25s, transform .28s var(--ease), box-shadow .28s var(--ease);
  }
  .direction-card:hover .round-arrow {
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
    box-shadow: 0 10px 26px rgba(45,81,40,.14);
  }
}

/* Card-to-catalogue transition: a short press/confirmation before scrolling. */
.direction-card.is-navigating,
.direction-image.is-navigating {
  transform: translateY(-2px) scale(.992);
}
.direction-card.is-navigating .round-arrow {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.direction-card.is-navigating .round-arrow svg { transform: rotate(45deg) translate(1px,-1px); }
.direction-image { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.direction-image.is-navigating { box-shadow: 0 18px 50px rgba(35,70,29,.13); }

/* Reveal media with a diagonal leading edge, echoing the geometry already used
   by the logistics block. Falls back to the regular reveal when motion is off. */
.direction-image.reveal-clip {
  clip-path: polygon(0 0, 10% 0, 0 100%, 0 100%);
  transition: opacity .75s var(--ease) var(--delay,0s), transform .75s var(--ease) var(--delay,0s), clip-path 1.05s var(--ease) var(--delay,0s);
}
.direction-image.reveal-clip.is-visible { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }

/* Documents: keep a visible continuation cue, support grab-to-scroll on mouse,
   and make the end-state of the arrow controls obvious. */
.documents-viewport {
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent 100%);
  mask-image: linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent 100%);
}
.documents-viewport.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.documents-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.documents-controls button:disabled {
  opacity: .24;
  cursor: default;
  transform: none !important;
}
.document-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .document-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(31,50,31,.12);
    background: #85858b;
  }
}

/* Mobile/tablet glass menu: let the page remain perceptible behind it, but
   quietly separate the active navigation layer with a soft backdrop. */
@media (max-width: 1360px) {
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 24;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(8,18,10,.16);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .32s var(--ease), visibility .32s;
  }
  body.menu-open::after { opacity: 1; visibility: visible; }
  .site-header { z-index: 30; }
  .mobile-menu {
    filter: blur(7px);
    transition: transform .36s var(--ease), opacity .3s var(--ease), visibility .3s, filter .36s var(--ease);
  }
  .mobile-menu.is-open { filter: blur(0); }
}

/* Form details: a brighter focus line and a slightly more substantial glass
   surface make keyboard/mouse interaction feel intentional. */
.contact-form {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 70px rgba(14,34,15,.10);
}
.contact-form > label:not(.consent):not(.hp-field),
.select-wrap,
.region-field {
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.contact-form > label:not(.consent):not(.hp-field):focus-within,
.select-wrap:focus-within,
.region-field:focus-within {
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 1px 0 rgba(255,255,255,.16);
}

/* Hero gets a tiny pointer parallax layered into the existing slow breathing.
   The values never exceed a few pixels. */
.hero-media {
  --hero-x: 0px;
  --hero-y: 0px;
  animation-name: heroBreathPremium;
}
@keyframes heroBreathPremium {
  from { transform: translate3d(var(--hero-x),var(--hero-y),0) scale(1.015); }
  to { transform: translate3d(var(--hero-x),var(--hero-y),0) scale(1.045); }
}

/* Reduced motion always wins over decorative polish. */
@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none !important; transform: scale(1.015) !important; }
  .direction-image.reveal-clip { clip-path: none !important; transition: none !important; }
  .direction-card::before, .feature-card::before { display: none !important; }
  .mobile-menu { filter: none !important; }
}

/* Keep the spotlight beneath the actual card content, not beneath the card's
   painted background. */
@media (hover: hover) and (pointer: fine) {
  .direction-card::before,
  .feature-card::before { z-index: 0; }
  .direction-card > *,
  .feature-card > * { position: relative; z-index: 1; }
  .feature-card::after { z-index: 2; }
}

/* Small production-hardening details. */
section[id] { scroll-margin-top: 112px; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(69,128,54,.55);
  outline-offset: 4px;
}
.site-header a:focus-visible,
.site-footer a:focus-visible,
.mobile-menu a:focus-visible {
  outline-color: rgba(255,255,255,.75);
}
@media (max-width: 1360px) {
  body.menu-open::after { pointer-events: auto; }
}

/* === V6: approved logo, bilingual navigation and real certificates === */
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  width: 132px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.12));
}
.footer-brand .brand-logo { width: 150px; max-height: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.55);
}
.lang-switch button {
  min-width: 28px;
  padding: 4px 5px;
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  background: transparent;
  font: 650 12px/1 var(--onest);
  letter-spacing: .08em;
  transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.lang-switch button:hover { color: #fff; transform: translateY(-1px); }
.lang-switch button.is-active { color: #173219; background: rgba(255,255,255,.9); }
.lang-switch > span { font-size: 11px; opacity: .5; }
.mobile-menu-tools { display: none; }

/* Preserve the existing document proportions while replacing placeholders with
   the actual certificates. */
.document-card {
  padding: 0;
  background: #eceeea;
  border: 1px solid rgba(31,48,31,.09);
  color: #fff;
  isolation: isolate;
}
.document-card::before {
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, transparent 43%, rgba(10,24,12,.12) 58%, rgba(10,24,12,.9) 100%);
  transform: none;
  opacity: .9;
  transition: opacity .3s var(--ease);
}
.document-card:hover::before { transform: none; opacity: 1; }
.document-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #fff;
  transition: transform .55s var(--ease), filter .4s var(--ease);
}
.document-overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 72px 20px 20px;
  pointer-events: none;
}
.document-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  background: rgba(16,38,20,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
}
.document-kicker { font-size: 10px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.document-title { font-family: var(--xolonium); font-size: 17px; line-height: 1.08; font-weight: 400; }
.document-product { font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.82); }
.document-open {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .03em;
  color: #d9ebd2;
  transform: translateY(3px);
  opacity: .78;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .document-card:hover .document-preview { transform: scale(1.022); filter: saturate(.93) contrast(1.02); }
  .document-card:hover .document-open { transform: translateY(0); opacity: 1; }
}

/* English copy is naturally longer in several high-impact headings. Slightly
   rebalance type without changing the approved layout. */
html[lang="en"] .hero h1 { max-width: 1180px; font-size: 47px; }
html[lang="en"] .direction-card h3 { font-size: 26px; }
html[lang="en"] .about-copy p { line-height: 1.43; }
html[lang="en"] .footer-main { grid-template-columns: 190px 175px 325px 1fr; gap: 54px; }

@media (max-width: 1700px) {
  .brand-logo { width: 118px; }
  .lang-switch-header { padding-inline: 7px; }
  html[lang="en"] .hero h1 { font-size: 43px; }
}

@media (max-width: 1360px) {
  .lang-switch-header { display: none; }
  .mobile-menu-tools {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 16px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .lang-switch-mobile {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.13);
  }
  html[lang="en"] .hero h1 { font-size: 41px; }
  html[lang="en"] .footer-main { grid-template-columns: 150px 150px 270px 1fr; gap: 30px; }
}

@media (max-width: 1024px) {
  .brand-logo { width: 112px; }
  .footer-brand .brand-logo { width: 136px; }
  html[lang="en"] .hero h1 { font-size: clamp(36px,5vw,41px); }
  html[lang="en"] .direction-card h3 { font-size: 23px; }
}

@media (max-width: 720px) {
  .brand-logo { width: 98px; }
  .document-overlay { padding: 58px 16px 16px; }
  .document-title { font-size: 15px; }
  .document-product { font-size: 12px; }
  html[lang="en"] .hero h1 { font-size: clamp(31px,8.5vw,37px); }
}

/* === V8: UX, layout and performance hardening === */

/* Keyboard users can bypass the long navigation immediately. */
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 18px;
  top: 14px;
  padding: 11px 15px;
  border-radius: 9px;
  color: #fff;
  background: #18351b;
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* The signature is decorative. Prevent browser selection from ever painting a
   grey/green rectangle over it, including on nested translated spans. */
.hero-signature,
.hero-signature * {
  -webkit-user-select: none !important;
  user-select: none !important;
  pointer-events: none;
}
.hero-signature *::selection,
.hero-signature::selection { background: transparent !important; color: inherit !important; }

/* LCP hero: the photograph is now an actual high-priority image rather than a
   CSS background discovered late during parsing. A local-looking gradient is
   visible instantly while the remote design asset is still arriving. */
.hero-media {
  overflow: hidden;
  background-image:
    radial-gradient(circle at 52% 65%, rgba(83,126,58,.36), transparent 42%),
    linear-gradient(180deg, #889286 0%, #466138 21%, #1d4022 62%, #102d19 100%);
  background-size: cover;
  background-position: center;
}
.hero-media-image {
  position: absolute;
  inset: -4% 0 auto;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}

/* Below-fold backgrounds are injected only shortly before entering the
   viewport, so they no longer compete with the first-screen image. */
.about-bg {
  background-image:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    var(--lazy-bg, linear-gradient(120deg,#314f2a,#162a19)),
    linear-gradient(120deg,#314f2a,#162a19);
}
.contact-bg {
  background-image:
    linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),
    var(--lazy-bg, linear-gradient(130deg,#52733d,#132717)),
    linear-gradient(130deg,#52733d,#132717);
}

/* Avoid awkward single-word endings in long editorial copy without forcing
   brittle manual line breaks across breakpoints. */
h1, h2, h3 { text-wrap: balance; }
.hero-copy p,
.direction-card p,
.about-copy p,
.logistics-copy p,
.feature-card p,
.contact-title h2 { text-wrap: pretty; }

/* Footer contacts: stable label/value alignment and deliberate two-line
   address instead of leaving "д. 4" alone on a third line. */
.footer-contacts { max-width: 560px; width: 100%; }
.footer-contact-list { display: grid; gap: 13px; margin-top: 2px; }
.footer-contact-row {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
}
.footer-contact-row > a { font-size: inherit; line-height: inherit; }
.footer-contact-label {
  color: rgba(255,255,255,.52);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .035em;
}
.footer-address { align-items: start; }
.footer-address-value { display: grid; gap: 1px; }
.footer-address-value > span { white-space: nowrap; }

/* Long-page navigation helper. It stays quiet until it is actually useful. */
.back-to-top {
  position: fixed;
  z-index: 24;
  right: 26px;
  bottom: 26px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(31,76,34,.74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(20,50,22,.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.94);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .25s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: rgba(45,81,40,.94); transform: translateY(-2px) scale(1.02); }
.back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1360px) {
  .footer-contacts { max-width: 520px; }
  .footer-contact-row { grid-template-columns: 70px minmax(0,1fr); font-size: 18px; }
}
@media (max-width: 1024px) {
  .footer-contact-row { grid-template-columns: 72px minmax(0,1fr); }
  .back-to-top { right: 18px; bottom: 18px; width: 48px; height: 48px; }
}
@media (max-width: 520px) {
  .footer-contact-row { grid-template-columns: 64px minmax(0,1fr); gap: 10px; font-size: 16px; }
  .footer-contact-label { font-size: 12px; }
  .footer-address-value > span { white-space: normal; }
  .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top, .skip-link { transition: none !important; }
}

/* --------------------------------------------------------------------------
   V9 — production contact form + explicit newsletter consent.
   -------------------------------------------------------------------------- */
.form-consents {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.form-consents .consent { margin-top: 0; }
.consent-newsletter {
  color: rgba(255,255,255,.84);
  font-size: 14px;
}
.form-footer { margin-top: 28px; }
.form-status { line-height: 1.4; }
.contact-form button[disabled] { cursor: wait; opacity: .72; }

/* Honeypot is intentionally present in the DOM but never visible or reachable. */
.contact-form .hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  left: -10000px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}


@media (max-width: 700px) {
  .form-consents { gap: 14px; margin-top: 20px; }
  .consent-newsletter { font-size: 13px; }
  .form-footer { margin-top: 24px; }
}

/* V10 — product photography */
.product-image {
  height: 250px;
  border-radius: 5px;
  background: #171917;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20,40,20,.035);
}
.product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.035));
}
.product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform .55s var(--ease), filter .4s var(--ease);
}
.product-card:hover .product-image img {
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.02);
}
@media (max-width: 1280px) {
  .product-image { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-image img,
  .product-card:hover .product-image img { transition: none; transform: none; }
}

/* ========================================================================== 
   V15 targeted media restoration.
   Keep the stable V14/V10 layout. Only restore the three broken image blocks.
   ========================================================================== */

/* About: deterministic local photo, no JS/lazy custom property dependency. */
.about-bg {
  background-image:
    linear-gradient(rgba(7, 27, 12, .58), rgba(7, 27, 12, .64)),
    url('../assets/images/site/about-bg.webp') !important;
  background-size: cover !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
}

/* Contact: same principle. The photograph is a real local asset and always
   paints behind the glass form, including with JS disabled. */
.contact-bg {
  background-image:
    linear-gradient(90deg, rgba(16, 45, 20, .28), rgba(10, 38, 15, .40)),
    url('../assets/images/site/contact-bg.webp') !important;
  background-size: cover !important;
  background-position: center 50% !important;
  background-repeat: no-repeat !important;
}

/* Logistics in Frame 13 is not a zoomed image shifted off-canvas. It is a
   right-hand photograph with a deliberate diagonal leading edge. */
.logistics-card {
  isolation: isolate;
  contain: paint;
}
.logistics-map {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 55% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.logistics-copy {
  width: 58% !important;
}

/* Preserve a diagonal image on tablets, but give copy enough room. */
@media (max-width: 1024px) {
  .logistics-map {
    width: 58% !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 8% 100%);
    opacity: .72 !important;
  }
  .logistics-copy { width: 67% !important; }
}

/* On phones the image becomes a lower visual panel instead of colliding with
   the copy. This is the only breakpoint where the diagonal changes direction. */
@media (max-width: 700px) {
  .logistics-card { min-height: 570px; }
  .logistics-copy { width: 100% !important; }
  .logistics-map {
    width: 100% !important;
    height: 47% !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    object-position: center center !important;
    opacity: .58 !important;
  }
}

/* ========================================================================== 
   V16 targeted visual bugfix — use real <img> elements for the two large
   backgrounds so they cannot silently fall back to a flat CSS gradient.
   Product photography and the rest of the stable layout remain untouched.
   ========================================================================== */

/* About image: full-bleed image + overlay, matching the approved V10/Figma
   composition. The actual photograph is now an HTML asset, not a CSS URL. */
.about-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 58% !important;
  transform: scale(1.01);
  background: none !important;
  z-index: 0;
}
.about::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(rgba(5, 27, 10, .56), rgba(5, 27, 10, .66));
}
.about-inner { z-index: 1; }

/* Contact image: real HTML image. The tint stays separate so the crop is
   visible while keeping the form readable. */
.contact-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 48% !important;
  background: none !important;
  z-index: 0;
}
.contact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 52, 21, .30), rgba(8, 31, 12, .48));
}
.contact-title,
.contact-form { z-index: 2; }
.contact-card:hover .contact-bg { transform: scale(1.018); }

/* Logistics: Frame 13 uses a clean diagonal from ~75% at the top to ~50% at
   the bottom. Keep the original photo at nearly its natural aspect ratio,
   avoiding the zoomed/cropped look from the old 80%-wide off-canvas image. */
.logistics-map {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 50% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%) !important;
  pointer-events: none;
}
.logistics-copy { width: 58% !important; }

@media (max-width: 1024px) {
  .logistics-map {
    width: 56% !important;
    clip-path: polygon(48% 0, 100% 0, 100% 100%, 5% 100%) !important;
    opacity: .76 !important;
  }
  .logistics-copy { width: 68% !important; }
}

@media (max-width: 700px) {
  .about-bg { object-position: 42% center !important; }
  .contact-bg { object-position: 42% center !important; }
  .logistics-card { min-height: 570px; }
  .logistics-copy { width: 100% !important; }
  .logistics-map {
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 46% !important;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%) !important;
    opacity: .58 !important;
  }
}

/* V21 final alignment guard: do not let generic floating-label state move
   the Country/Region captions out of the shared baseline. */
.contact-form .country-select.has-value > span,
.contact-form .region-field.has-value > span,
.contact-form .region-field:focus-within > span {
  top: 10px;
  transform: none !important;
  font-size: 12px;
  opacity: .75;
}

/* ========================================================================== 
   V23 — real-device mobile hardening (iOS Safari / narrow phones)
   Desktop/tablet layout is intentionally untouched.
   ========================================================================== */
@media (max-width: 600px) {
  html, body, .page-shell { width: 100%; max-width: 100%; }
  html, body { overflow-x: clip; }
  main, section, header, footer, .container,
  .directions-grid, .about-inner, .about-intro, .stats-grid,
  .product-groups, .product-group, .product-grid-wrap,
  .logistics-card, .features-grid, .documents-layout,
  .contact-card, .contact-form { min-width: 0; max-width: 100%; }

  :root { --page-pad: 16px; }
  .section { padding-block: 58px; }
  .section-sm { padding-block: 28px; }

  /* Header / hero: keep the first screen readable at true device scale. */
  .site-header, .site-header.is-scrolled { height: 72px; }
  .brand-logo { width: 92px; }
  .menu-toggle { width: 42px; height: 42px; }
  .hero { height: auto; min-height: 680px; }
  .hero-content { padding-top: 142px; padding-bottom: 38px; }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(29px, 8.4vw, 35px);
    line-height: 1.03;
    margin-bottom: 26px;
    overflow-wrap: normal;
    word-break: normal;
  }
  .hero-copy { max-width: 100%; }
  .hero-copy p { font-size: 16px; line-height: 1.42; margin-bottom: 28px; }
  .hero .button { min-height: 56px; font-size: 15px; }
  .hero-media-image { inset: 0; height: 100%; object-position: 52% center; }

  /* Directions: at <=1024px the old rule hid the authored <br>, joining
     the two title lines. Restore the intended Figma composition on phones. */
  .directions { padding-top: 56px; padding-bottom: 58px; }
  .section-link-row { margin-bottom: 24px; }
  .text-link { font-size: 16px; }
  .directions-heading { width: 100%; padding-bottom: 8px; overflow: hidden; }
  .directions-heading h2 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(31px, 9vw, 36px);
    line-height: .98;
    overflow-wrap: normal;
    word-break: normal;
  }
  .directions-heading h2 br { display: block !important; }
  .directions-heading h2 .i18n-text { display: inline; }
  .direction-card, .direction-image { min-height: 238px; }
  .direction-card { padding: 24px 22px; }
  .direction-head { gap: 14px; }
  .direction-head h3 { font-size: 21px; line-height: 1.04; }
  .direction-card p { font-size: 16px; line-height: 1.32; max-width: 100%; }
  .round-arrow { width: 46px; height: 46px; flex-basis: 46px; }

  /* About: prevent long Xolonium headings from visually clipping on iOS. */
  .about { width: 100%; }
  .about-inner { padding: 66px 0; }
  .about-intro { gap: 26px; margin-bottom: 42px; }
  .about-intro h2 {
    max-width: 100%;
    font-size: clamp(27px, 7.6vw, 31px);
    line-height: 1.08;
    letter-spacing: -.015em;
    overflow-wrap: break-word;
  }
  .about-copy p { font-size: 16px; line-height: 1.5; }
  .stat-card { min-height: 185px; padding: 24px; }
  .stat-card strong { font-size: 39px; }
  .stat-card strong small { font-size: 29px; }
  .stat-card .stat-word { font-size: 35px; }
  .stat-card p { font-size: 17px; }

  /* Catalogue: keep intentional horizontal swipe but size cards to the
     actual device viewport and keep group headings from concatenating. */
  .products { padding-top: 58px; padding-bottom: 52px; }
  .section-heading-row { margin-bottom: 34px; }
  .section-heading-row h2 { font-size: 34px; }
  .product-groups { gap: 34px; }
  .product-group-label { min-height: 58px; padding: 16px 0; gap: 12px; }
  .product-group-label h3 { max-width: calc(100% - 52px); font-size: 21px; line-height: 1.04; }
  .product-group-label h3 br { display: block !important; }
  .product-grid { gap: 12px; scroll-padding-inline: 0; }
  .product-card {
    flex: 0 0 min(86vw, 340px);
    min-height: 355px;
    padding: 12px;
  }
  .product-image { height: 220px; }
  .product-card h4 { overflow-wrap: break-word; }

  /* Logistics / advantages: reduce giant vertical blocks without changing
     desktop geometry. */
  .logistics-card { min-height: 520px; padding: 24px; }
  .logistics-copy h2 { max-width: 12ch; font-size: clamp(30px, 8.6vw, 35px); }
  .logistics-copy p { font-size: 16px; line-height: 1.42; }
  .features h2 { font-size: 34px; }
  .feature-card { min-height: 240px; padding: 24px; }
  .feature-card h3 { margin-top: 30px; font-size: 22px; }
  .feature-card p { font-size: 16px; }

  /* Documents and contact form: use the full phone width; no narrow island. */
  .documents-copy h2 { font-size: 31px; }
  .contact { padding-top: 14px; }
  .contact .container { width: 100%; padding-inline: 12px; }
  .contact-card {   border-radius: 18px; }
  .contact-title h2 {
    
    
    
    overflow-wrap: break-word;
  }
  .contact-form > label:not(.consent):not(.hp-field),
  .select-wrap, .region-field { min-height: 72px; }
  .form-consents { gap: 12px; }
  .consent, .consent-newsletter { font-size: 13px; }
  .form-footer .button { width: 100%; min-width: 0; }

  .footer-card { padding-inline: 20px; }
  .footer-contact-row { grid-template-columns: 58px minmax(0,1fr); gap: 10px; }

  /* Menu should stay inside the visible phone viewport even with Safari UI. */
  .mobile-menu { inset: 82px 10px auto; max-height: calc(100dvh - 94px); }
}

@media (max-width: 380px) {
  :root { --page-pad: 14px; }
  .hero h1 { font-size: 28px; }
  .directions-heading h2 { font-size: 30px; }
  .direction-head h3 { font-size: 20px; }
  .product-card { flex-basis: 88vw; }
}

/* ========================================================================== 
   V24 — final mobile + current price-list pass
   Source: price list supplied 01.09.2026. Desktop layout remains intact.
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.page-shell { overflow-x: hidden; }

.section-heading-copy { min-width: 0; }
.product-price-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

/* Product pricing is deliberately a separate block so long product names and
   consultation actions remain stable on both desktop and narrow phones. */
.product-card { min-height: 455px; }
.product-card h4 {
  min-height: 0;
  margin: 16px 0 12px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}
.product-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}
.product-price {
  color: var(--green-dark);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.product-price--request {
  font-size: 15px;
  font-weight: 700;
}
.product-packaging {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.product-card .product-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
}
.product-image--placeholder {
  display: grid;
  place-items: center;
  border: 1px solid rgba(69,128,54,.12);
  background:
    radial-gradient(circle at 70% 30%, rgba(69,128,54,.12), transparent 36%),
    linear-gradient(135deg,#eef3ec,#fafbf9);
}
.product-placeholder-mark {
  color: rgba(45,81,40,.72);
  font: 700 34px/1 var(--xolonium);
  letter-spacing: .08em;
}

@media (max-width: 600px) {
  html, body { overflow-x: hidden; overflow-x: clip; }
  body, .page-shell { min-width: 0; width: 100%; }
  .container { max-width: 100%; }
  h1, h2, h3, h4 { max-width: 100%; }

  /* iOS Safari can otherwise magnify text after orientation/layout changes. */
  input, textarea, button { -webkit-text-size-adjust: 100%; }

  .section-heading-row {
    align-items: flex-start;
    margin-bottom: 34px;
  }
  .section-heading-copy { max-width: calc(100% - 24px); }
  .product-price-note {
    max-width: 30ch;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  /* Preserve the authored line break that the tablet rules remove. */
  .directions-heading h2 br,
  .product-group-label h3 br { display: block !important; }
  .directions-heading h2,
  .product-group-label h3,
  .about-intro h2,
  .contact-title h2,
  .logistics-copy h2 {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .product-card {
    flex-basis: min(86vw, 338px);
    min-height: 430px;
    padding: 12px;
  }
  .product-image { height: 205px; }
  .product-card h4 {
    margin-top: 14px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.14;
  }
  .product-price { font-size: 18px; }
  .product-price--request { font-size: 14px; }
  .product-packaging { font-size: 12px; }
  .product-card .product-actions {
    gap: 10px;
    flex-wrap: wrap;
  }
  .product-card .product-actions a { font-size: 12.5px; }

  /* Real-device spacing: no section is allowed to become wider than the
     viewport even when a long Xolonium word is present. */
  .directions-grid,
  .product-groups,
  .product-group,
  .product-grid-wrap,
  .documents-layout,
  .features-grid,
  .about-intro,
  .stats-grid,
  .contact-card,
  .contact-form { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .product-card { flex-basis: calc(100vw - 38px); }
  .section-heading-row h2 { font-size: 31px; }
  .directions-heading h2 { font-size: 29px; }
  .about-intro h2 { font-size: 27px; }
}


/* --------------------------------------------------------------------------
   V25 — replace structuring-agent placeholder with real product image and
   hide the floating back-to-top button on phones to keep the mobile view clean.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .back-to-top { display: none !important; }
}


/* ========================================================================== 
   V27 — final real-device polish
   - text links animate only their chevron (no border/container overshoot)
   - documents are deterministic on iOS/Samsung and the final card is reachable
   - mobile document title keeps authored line breaks
   - price-list station code keeps its opening parenthesis
   - mobile catalogue shortcut is compact
   - mobile menu is higher-contrast, larger and single-line
   ========================================================================== */

/* Text-link label must inherit the link size. Older generic `span` rules were
   also styling/moving the label itself, which made the chevron overshoot. */
.text-link {
  padding-right: 4px;
  overflow: visible;
}
.text-link .i18n-text {
  font: inherit;
  line-height: inherit;
  transform: none !important;
}
.text-link > span:last-child {
  flex: 0 0 auto;
  font: 27px/1 var(--onest);
  transition: transform .2s var(--ease);
}
.text-link:hover > span:last-child { transform: translateX(2px); }

/* Price note: desktop stays inline; on phones the code is its own clean line. */
.price-note-code { white-space: nowrap; }

@media (max-width: 768px) {
  /* The section is content, not decoration. Do not let an IntersectionObserver
     or Samsung reveal-animation quirk leave it clipped/transparent. */
  .documents-viewport.reveal,
  .documents-viewport.reveal-clip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .documents-layout { gap: 28px; min-height: 0; }
  .documents-copy {
    min-height: 0;
    gap: 26px;
  }
  .documents-copy h2 {
    max-width: 100%;
    font-size: clamp(27px, 7.6vw, 31px);
    line-height: 1.02;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .documents-copy h2 br { display: block !important; }
  .documents-controls { gap: 18px; }

  /* Full-width touch scroller with inertial scrolling. Extra end-space means
     Safari can physically move the final certificate fully into view. */
  .documents-viewport {
    width: calc(100% + (var(--page-pad) * 2));
    max-width: none;
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: var(--page-pad);
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--page-pad);
    -webkit-mask-image: none !important;
    mask-image: none !important;
    touch-action: pan-x pan-y;
  }
  .documents-track {
    min-width: max-content;
    width: max-content;
    padding-right: max(72px, calc(100vw - 292px));
    box-sizing: content-box;
  }
  .document-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* The catalogue shortcut above Directions is a quiet secondary control,
     not a second hero-sized CTA. */
  .directions .section-link-row {
    justify-content: flex-start;
    margin-bottom: 22px;
  }
  .directions .text-link {
    gap: 6px;
    width: auto;
    font: 500 14px/1.25 var(--onest);
    padding: 8px 11px;
    border: 1px solid rgba(69,128,54,.22);
    border-radius: 999px;
    background: rgba(69,128,54,.055);
  }
  .directions .text-link > span:last-child { font-size: 18px; }

  /* Readable phone navigation. The old selector assigned a fixed 24px width
     to both spans, including the actual label. */
  .mobile-menu {
    background: linear-gradient(150deg, rgba(25,63,30,.97), rgba(12,39,20,.965));
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
  }
  .mobile-menu nav { width: 100%; }
  .mobile-menu-contact a { font-size: 15px; }

  .product-price-note {
    max-width: 100%;
    padding-left: 1px;
    overflow: visible;
  }
  .product-price-note .price-note-code {
    display: block;
    margin-top: 2px;
  }
}


/* ========================================================================== 
   V28 — final interaction cleanup
   - remove redundant mobile "View catalogue" shortcut
   - restore normal mobile inset around Documents without breaking touch scroll
   - make Country use the same floating-label behavior as the other form fields
   - remove the country chevron instead of animating it abruptly
   ========================================================================== */

/* Country starts like an ordinary empty field. It floats only while the picker
   is open/focused or after a value has actually been selected. */
.contact-form .country-select > span {
  top: 38px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  opacity: 1;
  transform: none !important;
  transition: top .2s var(--ease), font-size .2s var(--ease), opacity .2s var(--ease);
}
.contact-form .country-select.has-value > span,
.contact-form .country-select.is-open > span,
.contact-form .country-select:focus-within > span {
  top: 10px;
  font-size: 12px;
  opacity: .75;
  transform: none !important;
}
.country-select::after { content: none !important; }
.country-select-trigger { padding-right: 0; cursor: pointer; }

@media (max-width: 600px) {
  /* The hero CTA and each direction card already navigate into the catalogue,
     so this duplicate shortcut is unnecessary on a small screen. */
  .directions .section-link-row { display: none !important; }

  /* Keep Documents aligned with the same 16/14px page gutter as every other
     section. The scroller remains native and the last certificate stays fully
     reachable, but no longer visually starts flush against the screen edge. */
  .documents .container.documents-layout {
    width: 100%;
    padding-inline: var(--page-pad);
    box-sizing: border-box;
  }
  .documents-viewport {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .documents-track {
    padding-right: max(56px, calc(100vw - 292px));
  }
}


/* ========================================================================== 
   V53 — mobile stability fixes without changing V52 layout
   ========================================================================== */

/* Safari may automatically enlarge text after rotation or when it thinks a
   column is too narrow. Keep typography at authored sizes. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Product accordion: a real clipping box. JS sets measured max-height and then
   hidden=true after collapse, so horizontally scrolled cards can never remain
   as a visible strip. */
.product-grid-wrap {
  display: block !important;
  min-width: 0;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: max-height .4s var(--ease), opacity .26s var(--ease) !important;
  contain: layout paint;
}
.product-grid-wrap[hidden] { display: none !important; }
.product-grid-wrap.is-animating { overflow: hidden !important; }
.product-group.is-collapsed .product-grid-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden !important;
  pointer-events: none;
}
.product-group.is-collapsed .product-grid {
  overflow: hidden !important;
  visibility: hidden;
}
.product-grid {
  overscroll-behavior-inline: contain;
}

/* iOS: fixed-size form controls avoid focus zoom and secondary text autosizing. */
@media (max-width: 700px) {
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .country-select-trigger {
    font-size: 16px;
  }
  .contact-title h2 {
    
    
    overflow-wrap: normal;
    word-break: normal;
  }
}


/* ========================================================================== 
   V54 — lock mobile catalogue cards to the horizontal axis
   Prevent reveal/hover transforms and tiny overflow-y scrolling from making
   cards drift up/down while swiping the horizontal catalogue.
   ========================================================================== */
@media (max-width: 768px) {
  .product-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
  }

  .product-card,
  .product-card.reveal,
  .product-card.reveal-up,
  .product-card.reveal.is-visible,
  .product-card.reveal-up.is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition-property: box-shadow, border-color, background !important;
    transition-duration: .2s !important;
  }

  .product-card:hover,
  .product-card:active,
  .product-card:focus-within {
    transform: none !important;
  }

  .product-card .product-image img,
  .product-card:hover .product-image img,
  .product-card:active .product-image img {
    transform: none !important;
  }

  .product-card {
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .product-grid-wrap {
    overflow: hidden;
  }

  .product-group:not(.is-collapsed) .product-grid-wrap {
    overflow: visible;
  }

  .product-group.is-collapsed .product-grid-wrap,
  .product-grid-wrap.is-animating {
    overflow: hidden !important;
  }
}