/* UNISAT Smart Systems - public site styles.
   Recreates the "Ingenious" smart-home theme (Catamaran heavy display type,
   Roboto body, green gradients, orange pill buttons, angled section edges,
   dark footer) without its framework CSS. Mobile-first. */

/* ── Fonts (self-hosted). Catamaran has no Cyrillic: Russian headings use
   Fira Sans for the Cyrillic range under the same family name. ─────────── */
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url(/fonts/roboto-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url(/fonts/roboto-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url(/fonts/roboto-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url(/fonts/roboto-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url(/fonts/roboto-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url(/fonts/roboto-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url(/fonts/roboto-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Catamaran'; font-weight: 600; font-display: swap; src: url(/fonts/catamaran-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Catamaran'; font-weight: 700; font-display: swap; src: url(/fonts/catamaran-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Catamaran'; font-weight: 800; font-display: swap; src: url(/fonts/catamaran-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Catamaran'; font-weight: 900; font-display: swap; src: url(/fonts/catamaran-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: 'Catamaran'; font-weight: 600; font-display: swap; src: url(/fonts/fira-sans-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Catamaran'; font-weight: 700; font-display: swap; src: url(/fonts/fira-sans-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Catamaran'; font-weight: 800; font-display: swap; src: url(/fonts/fira-sans-cyrillic-800-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Catamaran'; font-weight: 900; font-display: swap; src: url(/fonts/fira-sans-cyrillic-800-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Open Sans (variable 300-800, self-hosted): the Russian pages, as on the WordPress site */
@font-face { font-family: 'Open Sans'; font-weight: 300 800; font-display: swap; src: url(/fonts/open-sans-cyrillic-var.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Open Sans'; font-weight: 300 800; font-display: swap; src: url(/fonts/open-sans-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --green: #2e9b6e; --green-2: #58b089; --green-dark: #228f70; --green-soft: #eaf6f0;
  --orange: #ff6c3a; --orange-2: #ff8559; --blue: #5d96c3;
  --ink: #363636; --head: #2b2b2b; --muted: #7d7d7d; --line: #e6e6e6;
  --light: #f6f7f8; --dark: #292e31; --footer: #2f2f2f;
  --grad: linear-gradient(120deg, #228f70 0%, #2e9b6e 45%, #59ab67 100%);
  --display: 'Catamaran', 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 20px; --wrap: 1240px; --sec-y: 64px; --cut: 40px;
  --shadow: 0 14px 40px rgba(20, 40, 30, .14); --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --sec-y: 84px; --cut: 60px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --sec-y: 100px; --cut: 80px; } }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
body { margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--green-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--head); font-family: var(--display); font-weight: 800; line-height: 1.12; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.w-text { max-width: 880px; } .w-narrow { max-width: 900px; } .w-wide { max-width: 1340px; }
.center { text-align: center; } .muted { color: var(--muted); } .small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--dark); color: #fff; padding: 10px 16px; }
.skip:focus { left: 10px; top: 10px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ico { display: inline-block; vertical-align: middle; flex: none; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.u-title { font: 900 clamp(32px, 4.6vw, 54px)/1.08 var(--display); text-transform: uppercase; color: var(--head); text-align: center; margin: 0 0 18px; letter-spacing: .01em; }
.u-title--light, .u-bg-green .u-title, .u-bg-dark .u-title, .u-has-photo .u-title { color: #fff; }
.u-lead { max-width: 860px; margin: 0 auto 30px; text-align: center; color: var(--ink); }
.u-lead--light, .u-bg-green .u-lead, .u-bg-dark .u-lead { color: rgba(255,255,255,.92); }
.display { font: 900 clamp(30px, 4vw, 46px)/1.1 var(--display); text-transform: uppercase; margin: 0 0 .4em; }
.display--sm { font-size: clamp(24px, 3vw, 32px); }
.display--md { font-size: clamp(28px, 3.6vw, 40px); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); text-transform: uppercase; margin: 1.5em 0 .5em; }
.prose h3 { font-size: 21px; margin: 1.3em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .3em 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose table, .table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.table-scroll { overflow-x: auto; }
.u-bg-green .prose, .u-bg-dark .prose { color: rgba(255,255,255,.92); }
.u-bg-green .prose a, .u-bg-dark .prose a { color: #fff; }
.u-bar { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--ink); margin: 8px auto 12px; }
.u-link { font-weight: 500; color: var(--green-dark); }

/* ── Buttons (orange pill = primary, as on the live site) ─────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 34px; border: 2px solid transparent; border-radius: 40px; font: 500 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn--primary, .btn--gold { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(255,108,58,.28); }
.btn--primary:hover, .btn--gold:hover { background: var(--orange-2); color: #fff; box-shadow: 0 10px 24px rgba(255,108,58,.36); }
.btn--ghost, .btn--outline { background: transparent; color: var(--head); border-color: var(--head); }
.btn--ghost:hover, .btn--outline:hover { background: var(--head); color: #fff; }
.u-bg-green .btn--outline, .u-bg-dark .btn--outline, .u-has-photo .btn--outline { color: #fff; border-color: #fff; }
.u-bg-green .btn--outline:hover, .u-bg-dark .btn--outline:hover { background: #fff; color: var(--green-dark); }
.btn--light { background: #fff; color: var(--green-dark); }
.btn--light:hover { color: var(--orange); box-shadow: var(--shadow); }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--sm { min-height: 38px; padding: 8px 20px; font-size: 13px; }
.btn-link { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid currentColor; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.btns--center { justify-content: center; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--head); cursor: pointer; border-radius: 50%; }
.iconbtn:hover { background: var(--light); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(6px); transition: box-shadow .3s; }
.masthead.is-stuck { box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.masthead__inner { display: flex; align-items: center; gap: 24px; min-height: 70px; max-width: 1440px; }
.brand img { width: 140px; height: auto; }
@media (min-width: 1100px) { .brand img { width: 165px; } .masthead__inner { min-height: 84px; } }
.mainnav { display: none; flex: 1; justify-content: flex-end; }
.masthead__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.masthead__shop { display: none; }
@media (min-width: 1060px) { .mainnav { display: flex; } .masthead__tools { margin-left: 8px; } .masthead__shop { display: inline-flex; border-radius: 6px; } .burger { display: none !important; } }
.mainnav .nav { display: flex; list-style: none; margin: 0; padding: 0; }
.mainnav .nav > li { position: relative; display: flex; align-items: center; }
.mainnav .nav > li > a { display: block; padding: 28px 16px; font: 700 15px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--head); position: relative; }
.mainnav .nav > li > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 20px; height: 2px; background: var(--green); transform: scaleX(0); transition: transform .3s var(--ease); }
.mainnav .nav > li:hover > a::after, .mainnav .nav > li.is-active > a::after { transform: scaleX(1); }
.mainnav .nav__toggle { display: none; }
.mainnav .has-sub > a { padding-right: 26px; }
.mainnav .has-sub > a::before { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; }
.mainnav .nav__sub { position: absolute; top: 100%; left: 0; min-width: 250px; list-style: none; margin: 0; padding: 10px 0; background: #fff; box-shadow: var(--shadow); border-top: 3px solid var(--green); border-radius: 0 0 8px 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.mainnav .has-sub:hover .nav__sub, .mainnav .has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.mainnav .nav__sub a { display: block; padding: 9px 22px; font: 500 14.5px/1.3 var(--sans); color: var(--head); }
.mainnav .nav__sub a:hover, .mainnav .nav__sub a[aria-current] { color: var(--green-dark); background: var(--green-soft); }
.langswitch { display: inline-grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 6px; font: 700 13px/1 var(--display); letter-spacing: .06em; color: var(--head); }
.langswitch:hover { background: var(--green-soft); color: var(--green-dark); }
.burger { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--head); border-radius: 2px; }
.burger span:nth-child(2) { width: 70%; margin-left: auto; }
.drawer { position: fixed; inset: 0; z-index: 200; background: rgba(15,20,18,.45); }
.drawer[hidden] { display: none; }
.drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 88vw); background: #fff; padding: 16px 22px 28px; overflow-y: auto; animation: drawerIn .3s var(--ease); display: flex; flex-direction: column; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer .nav { list-style: none; margin: 0; padding: 0; }
.drawer .nav > li { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; }
.drawer .nav > li > a { flex: 1; padding: 15px 0; font: 700 16px/1.2 var(--display); text-transform: uppercase; color: var(--head); }
.drawer .nav > li.is-active > a { color: var(--green-dark); }
.drawer .nav__toggle { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.drawer .nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer .nav__sub { display: none; flex-basis: 100%; list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--green); }
.drawer .nav__sub.is-open { display: block; }
.drawer .nav__sub a { display: block; padding: 9px 0; font-size: 15px; color: var(--ink); }
.drawer__cta { margin-top: 22px; }
.drawer__contact { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; font-size: 14px; }
.drawer__contact a { color: var(--head); display: flex; gap: 10px; align-items: center; }

/* ── Sections & angled edges ─────────────────────────────────────────────── */
.u-sec { padding: var(--sec-y) 0; position: relative; }
.u-sec--tight { padding: 24px 0; }
.u-bg-white { background: #fff; } .u-bg-light { background: var(--light); }
.u-bg-green { background: var(--grad); color: #fff; } .u-bg-dark { background: var(--dark); color: #fff; }
.u-angled { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); padding-top: calc(var(--sec-y) + var(--cut) * .6); padding-bottom: calc(var(--sec-y) + var(--cut) * .6); margin: calc(var(--cut) * -0.5) 0; }
.u-has-photo { background-size: cover; background-position: center; background-image: linear-gradient(rgba(25,35,30,.62), rgba(25,35,30,.62)), var(--bg-sm); color: #fff; }
@media (min-width: 900px) { .u-has-photo { background-image: linear-gradient(rgba(25,35,30,.55), rgba(25,35,30,.55)), var(--bg-lg); } }
.u-has-photo .u-lead, .u-has-photo .prose { color: rgba(255,255,255,.92); }

/* Page header */
.u-phead { position: relative; background: var(--grad); color: #fff; padding: 70px 0 calc(70px + var(--cut)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); text-align: center; isolation: isolate; }
.u-phead[style] { background-image: var(--grad); }
.u-phead[style]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg-sm) center / cover; opacity: .18; mix-blend-mode: luminosity; }
@media (min-width: 900px) { .u-phead[style]::before { background-image: var(--bg-lg); } .u-phead { padding-top: 90px; } }
.u-phead__title { font: 900 clamp(34px, 5.4vw, 60px)/1.05 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.u-phead__sub { max-width: 820px; margin: 16px auto 0; color: rgba(255,255,255,.9); }
.u-phead + .u-sec, .u-phead + section { margin-top: calc(var(--cut) * -0.4); }

/* Hotspot hero */
.u-hero { position: relative; background: linear-gradient(180deg, #f1f2f4 0%, #fff 100%); overflow: hidden; }
.u-hero__stage { position: relative; max-width: 1600px; margin: 0 auto; }
.u-hero__stage > img { width: 100%; height: auto; }
.u-spot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.u-spot__btn { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); background: var(--green-2); color: #fff; font: 700 24px/1 var(--sans); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(88,176,137,.6); animation: pulse 2.4s infinite; transition: transform .2s, background .2s; }
.u-spot__btn:hover, .u-spot__btn[aria-expanded="true"] { background: var(--orange); transform: scale(1.1); animation: none; }
.u-spot__btn[aria-expanded="true"] span { transform: rotate(45deg); }
.u-spot__btn span { transition: transform .2s; display: block; margin-top: -2px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(88,176,137,.55); } 70% { box-shadow: 0 0 0 16px rgba(88,176,137,0); } 100% { box-shadow: 0 0 0 0 rgba(88,176,137,0); } }
@media (max-width: 699px) { .u-spot__btn { width: 28px; height: 28px; font-size: 18px; border-width: 2px; } }
.u-spot__card { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: min(280px, 80vw); background: #fff; color: var(--ink); padding: 16px 18px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.55; }
.u-spot__card strong { display: block; font: 800 17px/1.2 var(--display); text-transform: uppercase; color: var(--head); margin-bottom: 6px; }
.u-spot__card p { margin: 0 0 8px; }
.u-spot__card::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; }
.u-hero__card { position: absolute; right: 2.5%; bottom: 6%; width: clamp(140px, 17vw, 230px); aspect-ratio: 1; border-radius: 30px 30px 30px 30px; overflow: hidden; background: linear-gradient(135deg, #5d96c3, #6a3fa0); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; transition: transform .3s var(--ease); }
.u-hero__card:hover { transform: translateY(-4px) rotate(-1deg); color: #fff; }
.u-hero__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.u-hero__card span { position: relative; padding: 12px 16px; font: 800 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent); }
@media (max-width: 599px) { .u-hero__card { display: none; } }

/* Image banner */
.u-banner { padding: 40px 0; }
.u-banner--narrow .wrap { max-width: 820px; }
.u-banner--half .wrap { max-width: 640px; }
@media (min-width: 900px) {
  .u-banner-row { display: flex; justify-content: center; gap: 24px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
  .u-banner-row > .u-banner { flex: 1 1 0; min-width: 0; }
  .u-banner-row .wrap { padding: 0; max-width: none; }
}
.u-banner img { width: 100%; border-radius: 10px; }
.u-banner--full img { border-radius: 0; }
.u-banner a { display: block; transition: transform .3s var(--ease), box-shadow .3s; border-radius: 10px; }
.u-banner a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Icon rows */
.u-icons__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 20px; }
.u-icons__list li { width: calc(50% - 10px); max-width: 150px; text-align: center; }
.u-icons__list a { color: inherit; display: block; }
.u-icons__ico { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%; background: var(--green-2); box-shadow: 0 8px 20px rgba(46,155,110,.25); transition: transform .3s var(--ease), background .3s; }
.u-icons__ico img { width: 50%; height: auto; }
.u-icons__list a:hover .u-icons__ico { transform: translateY(-4px); background: var(--green); }
.u-icons__label { display: block; font: 700 15px/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--head); }
.u-bg-green .u-icons__ico { background: rgba(255,255,255,.18); box-shadow: none; }
.u-bg-green .u-icons__label, .u-bg-dark .u-icons__label, .u-has-photo .u-icons__label { color: #fff; }
.u-icons__desc { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; opacity: .9; }
.u-bg-green .u-icons__desc, .u-bg-dark .u-icons__desc, .u-has-photo .u-icons__desc { color: rgba(255,255,255,.92); }
@media (min-width: 700px) { .u-icons__list { display: grid; grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr)); justify-items: center; gap: 34px 20px; max-width: calc(var(--cols-md, 3) * 210px); margin-inline: auto; } .u-icons__list li { width: 100%; max-width: 200px; } .u-icons__ico { width: 116px; height: 116px; } }
@media (min-width: 1100px) { .u-icons__list { grid-template-columns: repeat(var(--cols-lg, 4), minmax(0, 1fr)); max-width: calc(var(--cols-lg, 4) * 200px); } .u-icons__ico { width: 140px; height: 140px; } .u-icons__label { font-size: 17px; } }

/* Image + text panels */
.u-split { position: relative; display: grid; grid-template-columns: 1fr; }
.u-split__media { position: relative; min-height: 280px; overflow: hidden; }
.u-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* product cut-outs: centred at a sensible size, clear of the slanted edges -
   never stretched to fill the half (that blew small photos up and ran them
   into the seams) */
.u-split--contain .u-split__media { display: flex; align-items: center; justify-content: center; padding: 34px var(--gutter); min-height: 0; }
.u-split--contain .u-split__media img { position: static; width: auto; height: auto; max-width: min(100%, 420px); max-height: 320px; object-fit: contain; }
@media (min-width: 900px) {
  .u-split--contain .u-split__media { padding: calc(46px + var(--cut) * .8) clamp(30px, 5vw, 80px); }
  .u-split--contain .u-split__media img { max-width: min(100%, 460px); max-height: 380px; }
}
.u-split__body { display: flex; align-items: center; padding: 50px var(--gutter); }
.u-split__content { max-width: 560px; }
.u-split .u-title { text-align: left; font-size: clamp(30px, 3.6vw, 46px); }
.u-split--img-left .u-split__content { margin-right: auto; }
@media (min-width: 900px) {
  .u-split { grid-template-columns: 1fr 1fr; min-height: 480px; }
  .u-split--img-right .u-split__media { order: 2; }
  .u-split__body { padding: 70px clamp(40px, 6vw, 100px); }
  /* text beside a right-hand picture hugs the picture but stays LEFT-aligned:
     long right-aligned paragraphs are hard to read */
  .u-split--img-right .u-split__body { justify-content: flex-end; }
  .u-split--angled.u-bg-green, .u-split--angled.u-bg-dark { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); margin: calc(var(--cut) * -0.5) 0; }
  .u-split--angled.u-bg-green .u-split__body, .u-split--angled.u-bg-dark .u-split__body { padding-top: calc(70px + var(--cut) * .5); padding-bottom: calc(70px + var(--cut) * .5); }
  /* stacked angled panels share one slanted seam (no white wedge between them) */
  :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) + :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) { margin-top: calc(var(--cut) * -1 - 1px); }
}
.u-mini-icons { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 26px; }
.u-mini-icons li { width: 100px; text-align: center; font: 700 13px/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.u-mini-icons img { width: 84px; height: 84px; margin: 0 auto 10px; padding: 16px; border-radius: 50%; background: var(--green-2); object-fit: contain; box-shadow: 0 8px 20px rgba(46,155,110,.25); }
@media (max-width: 560px) { .u-mini-icons { gap: 12px 14px; } .u-mini-icons li { width: 76px; font-size: 11.5px; } .u-mini-icons img { width: 64px; height: 64px; padding: 12px; } }

/* Centred media */
.u-center__media { max-width: 760px; margin: 10px auto 0; }
.u-center__media img { width: 100%; }

/* Logo band */
.u-logos { position: relative; padding: calc(var(--cut) + 30px) 0; clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); }
.u-logos__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.u-logos__list li { width: clamp(90px, 13vw, 118px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.12); transition: transform .3s var(--ease); }
.u-logos__list li:hover { transform: translateY(-5px); }
.u-logos__list a { display: grid; place-items: center; width: 100%; height: 100%; }
.u-logos__list img { width: 66%; height: 66%; object-fit: contain; }
.u-logos.u-bg-white .u-logos__list li { box-shadow: 0 0 0 1px var(--line); }

/* Partner cards */
.u-partners { position: relative; color: #fff; background: var(--dark) var(--bg-sm) center / cover; padding: calc(var(--sec-y) + var(--cut)) 0; isolation: isolate; }
@media (min-width: 900px) { .u-partners { background-image: var(--bg-lg); } }
.u-partners::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(30,32,34,.72); }
.u-partners--green { background-color: var(--green); }
.u-partners--green::before { background: linear-gradient(120deg, rgba(38,145,105,.93), rgba(84,178,120,.9)); }
.u-partners__grid { display: grid; gap: 70px 22px; margin-top: 70px; }
@media (min-width: 800px) { .u-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.u-pcard { position: relative; background: #fff; color: var(--ink); text-align: center; padding: 64px 26px 30px; border-radius: 4px; box-shadow: var(--shadow); }
.u-pcard__logo { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #fff; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.u-pcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.u-pcard p { font-size: 15px; }
.u-pcard__bar { display: block; width: 36px; height: 3px; background: var(--green-2); margin: 16px auto 12px; }
.u-pcard__name { font: 600 21px/1.2 var(--display); color: var(--green); text-transform: uppercase; }
.u-pcard__sub { margin: 6px 0 0; font: 700 14px/1.3 var(--sans); text-transform: uppercase; color: var(--head); }

/* Projects */
.u-projects__grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 640px) { .u-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .u-projects__grid { display: flex; flex-wrap: wrap; justify-content: center; } .u-projects__grid > * { width: calc((100% - 3 * 28px) / 4); } }
.u-projects__intro { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px; }
.u-projects__intro h3 { font: 700 24px/1.2 var(--display); }
.u-project { display: block; text-align: center; color: var(--ink); }
.u-project__img { overflow: hidden; border-radius: 4px; margin-bottom: 16px; background: var(--light); }
.u-project__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease); }
.u-project:hover img { transform: scale(1.06); }
.u-project h3 { font: 700 22px/1.2 var(--display); }
.u-project p { font-size: 14.5px; margin: 0; }
.u-article__cover { margin-bottom: 30px; border-radius: 8px; overflow: hidden; }

/* Picture cards */
.u-cards__grid { display: grid; gap: 50px 26px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 640px) { .u-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .u-cards__grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-cards__grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.u-card { position: relative; display: block; text-align: center; color: var(--ink); }
.u-cards__dot { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--green-2); border: 4px solid #fff; z-index: 1; }
.u-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 14px; }
.u-card h3 { font: 700 18px/1.25 var(--display); margin-bottom: 6px; }
.u-card p { font-size: 14.5px; margin: 0; }

/* Progress rings */
.u-stats__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 44px; }
.u-stats__list li { text-align: center; }
.u-ring { --p: 80; --track: rgba(255,255,255,.22); --fill: var(--green-2); position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin: 0 auto 12px; color: #fff; }
.u-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--fill) calc(var(--p) * 1%), var(--track) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.u-bg-white .u-ring, .u-bg-light .u-ring { --track: #e4e8e6; --fill: var(--green); color: var(--head); }
.u-ring span { position: relative; font: 800 26px/1 var(--display); }
@media (min-width: 900px) { .u-ring { width: 134px; height: 134px; } .u-ring span { font-size: 30px; } }
.u-stats.u-has-photo { background-image: linear-gradient(rgba(28,31,33,.8), rgba(28,31,33,.8)), var(--bg-sm); }
@media (min-width: 900px) { .u-stats.u-has-photo { background-image: linear-gradient(rgba(28,31,33,.76), rgba(28,31,33,.76)), var(--bg-lg); } }
.u-stats__label { font: 600 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }

/* FAQ */
.u-faq__item { background: #fff; border-radius: 6px; margin-bottom: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.u-faq__item summary { list-style: none; cursor: pointer; padding: 16px 20px 16px 52px; position: relative; font: 700 16px/1.35 var(--display); text-transform: uppercase; color: var(--head); }
.u-faq__item summary::-webkit-details-marker { display: none; }
.u-faq__item summary::before { content: '+'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font: 700 16px/1 var(--sans); }
.u-faq__item[open] summary::before { content: '–'; background: var(--green); color: #fff; }
.u-faq__item .prose { padding: 0 20px 18px 52px; }

/* CTA + contact band */
.u-cta { text-align: center; }
.u-contact__card { max-width: 980px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 8px; padding: 30px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.18); text-align: left; }
@media (min-width: 768px) { .u-contact__card { padding: 40px 44px; } }

/* How to reach us */
.u-reach { display: grid; grid-template-columns: 1fr; background: var(--light); }
.u-reach__map { min-height: 340px; background: #e7ece9; }
.u-reach__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.u-reach__body { padding: 50px var(--gutter); }
.u-reach .u-title { text-align: left; font-size: clamp(28px, 3.4vw, 40px); }
.u-reach__details { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 600px) { .u-reach__details { grid-template-columns: 1fr 1fr; } }
.u-reach__details > div { display: flex; gap: 14px; }
.u-reach__details h3 { font: 700 17px/1.2 var(--display); color: var(--green); margin-bottom: 4px; }
.u-reach__details p { margin: 0; font-size: 15px; }
.u-reach__ico { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--green-2); color: #fff; }
@media (min-width: 900px) { .u-reach { grid-template-columns: 1fr 1fr; } .u-reach__map, .u-reach__map iframe { min-height: 460px; } .u-reach__body { padding: 70px clamp(40px, 6vw, 90px); } }
.mapbox__placeholder { height: 100%; min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, #eef2ef 0 14px, #e5ebe7 14px 28px); }
.mapbox__placeholder p { margin: 0 0 8px; }

/* Rich text / gallery / spacer (generic blocks) */
.sec { padding: var(--sec-y) 0; } .richtext.bg-light { background: var(--light); }
.richtext.al-center { text-align: center; }
.sec .display { text-align: inherit; }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { margin: 0; overflow: hidden; border-radius: 4px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--ease); }
.gallery img:hover { transform: scale(1.04); }
figcaption { font-size: 13px; color: var(--muted); padding: 8px 2px 0; }
.slider { position: relative; overflow: hidden; border-radius: 6px; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.slider__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; cursor: pointer; }
.slider__btn--prev { left: 12px; } .slider__btn--prev .chev { transform: rotate(180deg); } .slider__btn--next { right: 12px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.slider__dots button { width: 24px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255,255,255,.6); cursor: pointer; }
.slider__dots button[aria-current="true"] { background: var(--orange); }
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(10,10,10,.92); display: grid; place-items: center; padding: 40px 16px; }
.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; color: #fff; background: rgba(255,255,255,.12); border: 0; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lightbox__close { top: 16px; right: 16px; } .lightbox__prev { left: 12px; top: 50%; } .lightbox__next { right: 12px; top: 50%; } .lightbox__prev .chev { transform: rotate(180deg); }
.spacer--sm { height: 24px; } .spacer--md { height: 56px; } .spacer--lg { height: 110px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form__grid { display: grid; gap: 16px 22px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field__label { font: 700 13px/1.2 var(--sans); color: var(--head); }
.field__label abbr { color: var(--orange); text-decoration: none; margin-left: 2px; }
.field input, .field textarea, .field select { width: 100%; font: 400 15px/1.4 var(--sans); color: var(--head); padding: 12px 14px; background: #fafbfa; border: 1px solid #dfe3e1; border-radius: 6px; transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: 0; background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,155,110,.16); }
.field.has-error input, .field.has-error textarea { border-color: #d0402a; }
.field__error { color: #c23b22; font-size: 12.5px; }
.form__note { font-size: 13px; color: var(--muted); margin: 14px 0 18px; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form__status { margin-top: 14px; font-size: 14.5px; }
.form__status.is-ok { padding: 14px 16px; background: var(--green-soft); border-left: 3px solid var(--green); color: #1b5e43; border-radius: 4px; }
.form__status.is-error { padding: 12px 14px; background: #fdf1ee; border-left: 3px solid #d0402a; color: #8a2a18; border-radius: 4px; }
.modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; padding: 36px 30px 30px; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,.35); overflow-y: auto; }
.modal::backdrop { background: rgba(15,20,18,.55); }
.modal__close { position: absolute; right: 10px; top: 10px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--footer); color: #ddd; font-size: 14.5px; }
.footer a { color: #ddd; } .footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 34px; padding-top: 60px; padding-bottom: 44px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.footer__brand img { width: 150px; margin-bottom: 16px; }
.footer__brand p { color: #b9b9b9; max-width: 380px; }
.footer__links { display: flex; flex-direction: column; gap: 10px; font: 600 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 12px; }
.footer__contact > * { display: flex; gap: 10px; align-items: center; }
.footer__contact .ico { color: var(--green-2); }
.social { display: flex; gap: 8px; margin-top: 14px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: background .2s; }
.social a:hover { background: var(--green); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #9f9f9f; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: 22px; }
.footer__bottom .legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__bottom .legal a { color: #bdbdbd; }
.credit { display: inline-flex; align-items: center; gap: 8px; }
.credit img { height: 25px; width: auto; }
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(255,108,58,.35); }
.totop[hidden] { display: none; }
.totop:hover { background: var(--orange-2); }

/* ── Cookie consent ──────────────────────────────────────────────────────── */
.cc-banner { position: fixed; z-index: 300; left: 12px; right: 12px; bottom: 12px; background: #fff; color: var(--ink); border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.25); border-top: 4px solid var(--green); padding: 20px 20px 18px; display: grid; gap: 14px; max-height: calc(100dvh - 24px); overflow-y: auto; animation: ccIn .4s var(--ease); }
@keyframes ccIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cc-banner[hidden] { display: none; }
.cc-title { font: 800 21px/1.2 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.cc-text { font-size: 14px; line-height: 1.55; margin: 0; }
.cc-text a { text-decoration: underline; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-actions [data-cc="customize"] { grid-column: 1 / -1; order: 3; }
.cc-banner .btn--dark, .cc-modal .btn--dark { border-radius: 40px; }
@media (min-width: 760px) {
  .cc-banner--bottom { left: 50%; right: auto; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); grid-template-columns: 1fr auto; align-items: center; gap: 26px; padding: 22px 26px; animation: ccInC .4s var(--ease); }
  @keyframes ccInC { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translateX(-50%); } }
  .cc-banner--bottom-left { right: auto; width: 440px; }
  .cc-banner--center { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 560px; animation: none; }
  .cc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .cc-actions [data-cc="customize"] { order: 0; }
  .cc-banner--bottom-left .cc-actions, .cc-banner--center .cc-actions { display: grid; }
}
.cc-modal { width: min(720px, calc(100vw - 24px)); }
.cc-cat { border-top: 1px solid var(--line); padding: 16px 0 12px; }
.cc-cat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cc-cat__name { font: 800 15px/1.3 var(--display); text-transform: uppercase; color: var(--head); }
.cc-cat p { font-size: 14px; margin: 6px 0 0; }
.cc-always { font-size: 12px; font-weight: 700; color: var(--green-dark); text-transform: uppercase; }
.cc-switch { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 14px; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-switch__ui { flex: none; position: relative; width: 46px; height: 26px; border-radius: 13px; background: #c9c9c9; transition: background .2s; }
.cc-switch__ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.cc-switch input:checked + .cc-switch__ui { background: var(--green); }
.cc-switch input:checked + .cc-switch__ui::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch__ui { outline: 2px solid var(--orange); outline-offset: 2px; }
.cc-details { margin-top: 8px; font-size: 13px; }
.cc-details summary { cursor: pointer; color: var(--green-dark); font-weight: 700; }
.cc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.cc-table th, .cc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 599px) { .cc-table thead { display: none; } .cc-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); } .cc-table td { display: block; border: 0; padding: 2px 0; } }
.cc-actions--modal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cc-fab { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--green-dark); box-shadow: 0 4px 18px rgba(0,0,0,.18); display: grid; place-items: center; cursor: pointer; }
.cc-fab[hidden] { display: none; }
.cc-fab:hover { color: #fff; background: var(--green); }

/* ── Staff bar + holding pages (maintenance wall, e-shop) ────────────────── */
.staffbar { position: relative; z-index: 70; background: var(--dark); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.staffbar a { color: #fff; text-decoration: underline; margin-left: 8px; }
.hold { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 18px; background: radial-gradient(circle at 15% 10%, rgba(88,176,137,.35), transparent 40%), radial-gradient(circle at 90% 90%, rgba(93,150,195,.35), transparent 45%), linear-gradient(135deg, #1f3a33 0%, #24493f 50%, #263f52 100%); color: #fff; }
.hold__box { position: relative; width: 100%; max-width: 640px; text-align: center; background: #fff; color: var(--ink); padding: 46px 32px 34px; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.hold__logo { width: 190px; margin: 0 auto 26px; }
.hold__title { font: 900 clamp(28px, 4.4vw, 42px)/1.1 var(--display); text-transform: uppercase; color: var(--head); margin: 0 0 14px; }
.hold__text { font-size: 16.5px; color: #555; margin: 0 auto 24px; max-width: 520px; }
.hold__contacts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.hold__contacts a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--light); color: var(--head); font-weight: 500; }
.hold__contacts a:hover { background: var(--green-soft); color: var(--green-dark); }
.hold__contacts .ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--green-2); color: #fff; }
.hold__social { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.hold__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--light); color: var(--head); }
.hold__social a:hover { background: var(--green); color: #fff; }
.hold__staff { margin: 22px 0 0; font-size: 12px; }
.hold__staff a { color: var(--muted); text-decoration: underline; }
.hold--shop { justify-content: space-between; padding: 0; }
.hold__bar { width: 100%; max-width: 1200px; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; }
.hold__bar img { width: 140px; }
.hold__langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--light); }
.hold__langs a { min-width: 42px; padding: 7px 12px; border-radius: 999px; text-align: center; font: 700 12.5px/1 var(--display); letter-spacing: .08em; color: var(--muted); transition: background .2s, color .2s; }
.hold__langs a:hover { color: var(--green-dark); }
.hold__langs a[aria-current] { background: var(--green); color: #fff; }
.hold__langs--corner { position: absolute; top: 16px; right: 16px; }
@media (max-width: 480px) { .hold__langs--corner { position: static; display: flex; width: max-content; margin: -22px auto 22px; } }
.hold__langs--dark { background: rgba(255,255,255,.16); }
.hold__langs--dark a { color: rgba(255,255,255,.85); }
.hold__langs--dark a:hover { color: #fff; }
.hold__langs--dark a[aria-current] { background: #fff; color: var(--green-dark); }
.hold__shop { width: 100%; max-width: 1200px; display: grid; gap: 40px; align-items: center; padding: 20px 24px 40px; }
@media (min-width: 900px) { .hold__shop { grid-template-columns: 1.1fr 1fr; padding: 40px 24px 60px; } }
.hold__copy { background: rgba(255,255,255,.97); color: var(--ink); border-radius: 16px; padding: 36px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
@media (min-width: 600px) { .hold__copy { padding: 46px 44px; } }
.hold__copy .hold__title { text-align: left; }
.hold__copy .hold__text { margin-left: 0; max-width: none; }
.hold__badge { display: inline-block; padding: 6px 14px; border-radius: 20px; background: var(--green-soft); color: var(--green-dark); font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.hold__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.hold__list li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.hold__list .ico { color: var(--green); }
.hold__copy .btns { margin: 24px 0 8px; }
.hold__copy .btn--light { border-color: var(--line); color: var(--head); }
.hold__copy .hold__social { justify-content: flex-start; }
.hold__pic img { width: 100%; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.hold__pic--deco { position: relative; min-height: 360px; display: none; }
@media (min-width: 900px) { .hold__pic--deco { display: block; } }
.hold__pic--deco span { position: absolute; border-radius: 40px; transform: rotate(45deg); }
.hold__pic--deco span:nth-child(1) { width: 240px; height: 240px; left: 15%; top: 10%; background: linear-gradient(135deg, rgba(88,176,137,.9), rgba(46,155,110,.6)); }
.hold__pic--deco span:nth-child(2) { width: 170px; height: 170px; left: 50%; top: 45%; background: linear-gradient(135deg, rgba(255,108,58,.9), rgba(255,133,89,.6)); }
.hold__pic--deco span:nth-child(3) { width: 120px; height: 120px; left: 22%; top: 62%; background: linear-gradient(135deg, rgba(93,150,195,.9), rgba(106,63,160,.6)); }
.hold__foot { font-size: 12.5px; color: rgba(255,255,255,.7); padding: 18px; }

/* reveal (JS adds .js) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media print { .masthead, .footer, .cc-banner, .cc-fab, .totop { display: none !important; } }

/* Process steps: V-shaped bands, two-tone halves, icon circle in the middle */
.u-steps { --v: 26px; overflow: hidden; }
.u-steps .u-title { text-align: center; margin: var(--sec-y) 0 30px; }
.u-steps__list { list-style: none; margin: 0; padding: 0; }
.u-step { --a: #fff; --b: #f4f5f5; --ink-s: var(--ink); position: relative; padding: calc(44px + var(--v)) 0 calc(40px + var(--v)); background: var(--a); clip-path: polygon(0 0, 50% var(--v), 100% 0, 100% calc(100% - var(--v)), 50% 100%, 0 calc(100% - var(--v))); color: var(--ink-s); }
.u-step + .u-step { margin-top: calc(var(--v) * -1 - 1px); }
.u-step--light { --a: #ececec; --b: #dcdddd; }
.u-step--green { --a: #3aa577; --b: #5bb98b; --ink-s: #fff; }
.u-step--dark { --a: #4a4a4a; --b: #3a3a3a; --ink-s: #fff; }
.u-step__inner { display: grid; gap: 14px; justify-items: center; text-align: center; }
.u-step__mid { display: grid; justify-items: center; gap: 10px; }
.u-step__ico { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--orange); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.u-step__ico img { width: 46%; height: auto; }
.u-step--c-white .u-step__ico { background: #fff; }
.u-step--c-white .u-step__ico img { filter: brightness(0) saturate(100%) invert(22%); }
.u-step--c-dark .u-step__ico { background: #3a3a3a; }
.u-step--c-green .u-step__ico { background: var(--green-2); }
.u-step__title { margin: 0; font: 800 19px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; color: #444; }
.u-step--c-orange .u-step__title { color: var(--orange); }
.u-step--dark .u-step__title { color: #fff; }
.u-step__text { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; }
.u-step--green .u-step__text, .u-step--dark .u-step__text { color: rgba(255,255,255,.94); }
@media (min-width: 900px) {
  .u-steps { --v: 40px; }
  .u-step { padding: calc(36px + var(--v)) 0 calc(30px + var(--v)); background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); }
  .u-step__inner { grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 28px; }
  .u-step__mid { grid-column: 2; grid-row: 1; }
  .u-step__text--l { grid-column: 1; grid-row: 1; justify-self: end; }
  .u-step__text--r { grid-column: 3; grid-row: 1; justify-self: start; }
  .u-step__ico { width: 110px; height: 110px; }
}

/* ══ E-shop (shop host) ═══════════════════════════════════════════════════ */
.shopsearch { display: none; align-items: center; position: relative; }
.shopsearch input { width: 220px; height: 40px; padding: 0 40px 0 14px; border: 1px solid #dfe3e1; border-radius: 20px; background: #fafbfa; font: 400 14px var(--sans); color: var(--head); transition: border-color .2s, width .3s var(--ease), background .2s; }
.shopsearch input:focus { outline: 0; border-color: var(--green); background: #fff; width: 260px; }
.shopsearch button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--head); display: grid; place-items: center; cursor: pointer; }
.shopsearch button:hover { color: var(--green); }
@media (min-width: 1200px) { .is-shop .shopsearch { display: flex; } }
.shopsearch--drawer { display: flex; margin: 4px 0 14px; }
.shopsearch--drawer input, .shopsearch--drawer input:focus { width: 100%; }
.basketlink { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--head); transition: background .2s, color .2s; }
.basketlink:hover { background: var(--green-soft); color: var(--green-dark); }
.basketlink__n { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--orange); color: #fff; font: 700 11px/19px var(--sans); text-align: center; }
.basketlink__n[hidden] { display: none; }
.is-shop .mainnav .nav > li > a { font-size: 13.5px; }

.crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin: 0 8px; color: #b9bfbc; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green-dark); }
.crumbs [aria-current] { color: var(--head); }

.shophead { background: var(--light); padding: 28px 0 26px; border-bottom: 1px solid var(--line); }
.shophead__title { font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--display); color: var(--head); margin: 0; text-transform: uppercase; }
.shophead__text { max-width: 820px; margin-top: 12px; color: #555; }
.shophead--404 { padding: 70px 0; text-align: center; }
.shophead--404 .shophero__search { margin: 22px auto; }
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.subcat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: #fff; border: 1px solid #dfe3e1; color: var(--head); font: 500 13.5px var(--sans); transition: border-color .2s, color .2s; }
.subcat em { font-style: normal; font-size: 12px; color: var(--muted); }
.subcat:hover { border-color: var(--green); color: var(--green-dark); }

.listing { padding: 28px 0 70px; }
.listing__inner { display: grid; gap: 28px; }
@media (min-width: 900px) { .listing__inner { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .listing__side { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; } }
.filters { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.filters__head strong { font: 800 15px var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--head); }
.filters__head a { font-size: 13px; color: var(--green-dark); }
.fbox { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; color: var(--ink); }
.fbox input { accent-color: var(--green); width: 16px; height: 16px; margin: 0; flex: none; }
.fbox span { flex: 1; min-width: 0; }
.fbox em { font-style: normal; font-size: 12px; color: var(--muted); }
.fbox--stock { padding: 10px 12px; border-radius: 8px; background: var(--green-soft); margin-bottom: 4px; }
.facet { border-top: 1px solid var(--line); padding: 10px 0 6px; }
.facet summary { cursor: pointer; font: 700 14px var(--sans); color: var(--head); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: '+'; font-weight: 400; font-size: 18px; color: var(--muted); }
.facet[open] summary::after { content: '–'; }
.facet__list { margin-top: 6px; max-height: 260px; overflow: auto; padding-right: 4px; }
.facet__price { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.facet__price input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dfe3e1; border-radius: 6px; font: 400 14px var(--sans); }
.filters__go { margin-top: 12px; }
@media (min-width: 900px) { .filters__go { display: none; } .toolbar__filters { display: none !important; } }
@media (max-width: 899px) {
  .listing__side { display: none; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .listing__side.is-open { display: block; }
}
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.toolbar__count { font-size: 14px; color: var(--muted); margin-right: auto; }
.toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.toolbar__sort select { height: 38px; padding: 0 30px 0 12px; border: 1px solid #dfe3e1; border-radius: 6px; background: #fff; font: 500 14px var(--sans); color: var(--head); }
.toolbar__filters { display: inline-flex; gap: 6px; }

.pgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .shop-home .pgrid, .shop-product .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow .25s, transform .25s var(--ease), border-color .25s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: transparent; }
.pcard__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pcard__img { display: block; aspect-ratio: 1 / 1; padding: 14px; background: #fff; }
.pcard__img img { width: 100%; height: 100%; object-fit: contain; }
.pcard__noimg { display: grid; place-items: center; width: 100%; height: 100%; color: #c9cfcc; background: var(--light); border-radius: 8px; }
.pcard__body { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 14px; flex: 1; }
.pcard__brand { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.pcard__name { font: 500 14px/1.35 var(--sans); color: var(--head); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em; }
.pcard__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.pcard__add { position: absolute; top: 10px; right: 10px; height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 18px; background: var(--green); color: #fff; font: 700 14px var(--sans); cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, background .2s; }
.pcard:hover .pcard__add, .pcard__add:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .pcard__add { opacity: 1; transform: none; } }
.pcard__add:hover { background: var(--green-dark); }
.pcard__add.is-done { background: var(--orange); }

.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 700 16px var(--sans); color: var(--head); }
.price del { font-weight: 400; font-size: .85em; color: var(--muted); }
.price--sale strong { color: #d0402a; }
.price__ask { font: 500 13px var(--sans); color: var(--muted); }
.price--big { font-size: 28px; }
.price--big small { font: 400 13px var(--sans); color: var(--muted); }
.price--big .price__ask { font-size: 17px; }
.stock { display: inline-block; padding: 3px 8px; border-radius: 10px; font: 600 11.5px/1.3 var(--sans); }
.stock--instock { background: var(--green-soft); color: var(--green-dark); }
.stock--onbackorder { background: #eef3f8; color: #3d6a92; }
.stock--outofstock { background: #f6f0ee; color: #a24b37; }

.empty { padding: 50px 20px; text-align: center; color: var(--muted); background: var(--light); border-radius: 12px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.pager a, .pager span { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 20px; font: 500 14px var(--sans); color: var(--head); border: 1px solid var(--line); }
.pager a:hover { border-color: var(--green); color: var(--green-dark); }
.pager [aria-current] { background: var(--green); border-color: var(--green); color: #fff; }

/* shop home */
.shophero { background: var(--grad); color: #fff; padding: 46px 0 52px; }
.shophero__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .shophero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.shophero__badge { display: inline-block; padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,.18); font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.shophero h1 { font: 900 clamp(32px, 4.6vw, 52px)/1.05 var(--display); text-transform: uppercase; margin: 14px 0 12px; color: #fff; }
.shophero p { font-size: 17px; max-width: 640px; color: rgba(255,255,255,.92); margin: 0; }
.shophero__search { display: flex; gap: 8px; max-width: 560px; margin-top: 24px; }
.shophero__search input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 26px; font: 400 16px var(--sans); color: var(--head); }
.shophero__search input:focus { outline: 3px solid rgba(255,255,255,.5); }
.shophero__search .btn { height: 52px; border-radius: 26px; }
.shophead .shophero__search input { border: 1px solid #dfe3e1; }
.shophero__list { list-style: none; margin: 0; padding: 22px 24px; border-radius: 14px; background: rgba(255,255,255,.12); display: grid; gap: 12px; }
.shophero__list li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
@media (max-width: 560px) { .shophero__search .btn span { display: none; } }
.shopsec { padding: 54px 0; }
.shopsec--light { background: var(--light); }
.shopsec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.shopsec__head a { font-weight: 600; color: var(--green-dark); }
.shopsec__title { font: 800 clamp(24px, 3vw, 32px)/1.1 var(--display); text-transform: uppercase; color: var(--head); margin: 0 0 22px; }
.shopsec__head .shopsec__title { margin: 0; }
.cattiles { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .cattiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cattiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.cattile { display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--head); transition: box-shadow .25s, border-color .25s, transform .25s var(--ease); }
.cattile:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-2px); }
.cattile__img { aspect-ratio: 4 / 3; display: block; margin-bottom: 12px; }
.cattile__img img { width: 100%; height: 100%; object-fit: contain; }
.cattile__name { font: 800 17px/1.2 var(--display); text-transform: uppercase; }
.cattile__n { font-size: 13px; color: var(--muted); margin-top: 2px; }
.shophelp { background: var(--dark); color: #fff; padding: 40px 0; }
.shophelp__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.shophelp h2 { font: 800 26px var(--display); text-transform: uppercase; margin: 0 0 6px; color: #fff; }
.shophelp p { margin: 0; color: rgba(255,255,255,.8); max-width: 620px; }
.shophelp__links { display: flex; flex-wrap: wrap; gap: 10px; }
.shophelp .btn { display: inline-flex; align-items: center; gap: 8px; }

/* product page */
.pdp { padding: 26px 0 60px; }
.pdp__top { display: grid; gap: 30px; }
@media (min-width: 1000px) { .pdp__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 50px; align-items: start; } }
.pdp__main { display: block; aspect-ratio: 1 / 1; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: zoom-in; }
.pdp__main img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.pdp__thumb { flex: none; width: 74px; height: 74px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb.is-on { border-color: var(--green); box-shadow: 0 0 0 2px rgba(46,155,110,.2); }
.pdp__brand { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); }
.pdp__name { font: 800 clamp(24px, 3vw, 34px)/1.15 var(--display); color: var(--head); margin: 8px 0 6px; }
.pdp__sku { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.pdp__price { margin: 6px 0 10px; }
.pdp__stock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); margin: 0 0 20px; }
.pdp__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pdp__add { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 28px; }
.qty { display: inline-flex; align-items: center; border: 1px solid #dfe3e1; border-radius: 25px; height: 50px; overflow: hidden; background: #fff; }
.qty button { width: 42px; height: 100%; border: 0; background: transparent; color: var(--head); cursor: pointer; display: grid; place-items: center; }
.qty button:hover { background: var(--green-soft); }
.qty input { width: 44px; border: 0; text-align: center; font: 600 16px var(--sans); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 38px; }
.qty--sm button { width: 32px; }
.qty--sm input { width: 34px; font-size: 14px; }
.pdp__ask { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--green-dark); }
.pdp__short { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.pdp__perks { list-style: none; padding: 16px 18px; margin: 20px 0 0; border-radius: 12px; background: var(--green-soft); display: grid; gap: 8px; font-size: 14px; color: var(--green-dark); }
.pdp__perks li { display: flex; gap: 8px; align-items: center; }
.pdp__more { display: grid; gap: 34px; margin-top: 44px; }
@media (min-width: 1000px) { .pdp__more { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .pdp__more > :only-child { grid-column: 1 / -1; max-width: 900px; } }
.pdp__sec h2 { font: 800 22px var(--display); text-transform: uppercase; color: var(--head); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--green); display: inline-block; }
.pdp__sec .prose img { border-radius: 8px; margin: 12px 0; }
.pdp__sec .prose table, .specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs th, .specs td, .pdp__sec .prose td, .pdp__sec .prose th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 45%; font-weight: 500; color: var(--muted); }
.specs tr:nth-child(odd) { background: var(--light); }

/* basket */
.basket { padding: 26px 0 70px; }
.basket__inner { display: grid; gap: 30px; }
@media (min-width: 1000px) { .basket__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } .basket__order { position: sticky; top: 100px; } }
.basket__loading, .basket__empty { color: var(--muted); padding: 30px 0; }
.basket__empty a { color: var(--green-dark); font-weight: 600; }
.brow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: 'img info del' 'img qty price'; gap: 8px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .brow { grid-template-columns: 80px minmax(0, 1fr) auto 110px auto; grid-template-areas: 'img info qty price del'; } }
.brow__img { grid-area: img; display: block; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.brow__img img { width: 100%; height: 100%; object-fit: contain; }
.brow__info { grid-area: info; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.brow__name { font: 500 15px/1.3 var(--sans); color: var(--head); }
.brow__sku { font-size: 12px; color: var(--muted); }
.brow .qty { grid-area: qty; justify-self: start; }
.brow__price { grid-area: price; font: 700 15px var(--sans); text-align: right; color: var(--head); }
.brow__del { grid-area: del; justify-self: end; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.brow__del:hover { background: #f6f0ee; color: #a24b37; }
.basket__order { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 10px 30px rgba(20,40,30,.06); }
.basket__order h2 { font: 800 22px var(--display); text-transform: uppercase; color: var(--head); margin: 0 0 8px; }
.basket__intro { font-size: 14px; color: #555; margin: 0 0 18px; }
.basket__order .form { display: flex; flex-direction: column; gap: 14px; }
.basket__order .field textarea { min-height: 70px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { accent-color: var(--green); width: 17px; height: 17px; }
.basket__order .form__note { margin: 0; }
.basket__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 1px solid var(--line); font-size: 15px; }
.basket__total small { color: var(--muted); font-size: 12px; }
.basket__total strong { font: 800 22px var(--sans); color: var(--head); }
.btn--block { width: 100%; justify-content: center; }
.basket__note { font-size: 12.5px; color: var(--muted); margin: 0; }
.basket__done { padding: 40px 28px; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); font-size: 17px; font-weight: 500; }

.shoptoast { position: fixed; left: 50%; bottom: 22px; z-index: 80; display: flex; gap: 16px; align-items: center; padding: 14px 20px; border-radius: 30px; background: var(--dark); color: #fff; font-size: 14.5px; box-shadow: 0 14px 40px rgba(0,0,0,.25); transform: translate(-50%, 140%); opacity: 0; transition: transform .35s var(--ease), opacity .35s; max-width: calc(100vw - 32px); }
.shoptoast.is-on { transform: translate(-50%, 0); opacity: 1; }
.shoptoast a { color: #8fe0b8; font-weight: 600; white-space: nowrap; }
.is-shop .mainnav .nav > li > a { white-space: nowrap; font-size: 13px; letter-spacing: .5px; padding-left: 9px; padding-right: 9px; }
.is-shop .mainnav .nav > li > a::after { left: 9px; right: 9px; }
@media (min-width: 1400px) { .is-shop .mainnav .nav > li > a { font-size: 13.5px; padding-left: 12px; padding-right: 12px; } .is-shop .mainnav .nav > li > a::after { left: 12px; right: 12px; } }
.is-shop .brand { flex: none; }
.is-shop .shopsearch:not(.shopsearch--drawer) { display: none; }
@media (min-width: 1400px) { .is-shop .shopsearch:not(.shopsearch--drawer) { display: flex; } .is-shop .searchlink { display: none; } }
.shophead__search { margin-top: 16px; }
.is-shop .mainnav .nav > li.has-sub > a { padding-right: 20px; }
@media (min-width: 1400px) { .is-shop .shopsearch:not(.shopsearch--drawer) { display: none; } .is-shop .searchlink { display: grid; } }
@media (min-width: 1600px) { .is-shop .shopsearch:not(.shopsearch--drawer) { display: flex; } .is-shop .searchlink { display: none; } }
.is-shop .mainnav .nav > li.has-sub > a::before { right: 7px; }
.is-shop .mainnav .nav > li.has-sub > a::after { right: 20px; }

/* slanted sections that meet share one seam (no white wedge between them) */
:is(.u-phead, .u-angled) + .u-angled { margin-top: calc(var(--cut) * -1 - 1px); }
@media (min-width: 900px) {
  :is(.u-phead, .u-angled, .u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) + :is(.u-angled, .u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) { margin-top: calc(var(--cut) * -1 - 1px); }
}
/* long lists in a text panel (e.g. "Security package") read better in two columns */
@media (min-width: 600px) {
  .u-split__body .prose ul:has(> li:nth-child(7)) { columns: 2; column-gap: 30px; }
  .u-split__body .prose ul:has(> li:nth-child(7)) li { break-inside: avoid; }
}

/* Contacts: the map tucks under the slanted header and the green form band
   meets it on one seam; on phones the address comes first, then the map */
.u-phead { z-index: 1; }
.u-phead + .u-reach { margin-top: calc(var(--cut) * -1); }
.u-reach + .u-angled { margin-top: calc(var(--cut) * -1 - 1px); }
.u-reach__map { position: relative; }
@media (max-width: 899px) {
  .u-reach__body { order: -1; padding-top: calc(50px + var(--cut)); padding-bottom: 40px; }
  .u-reach__map, .u-reach__map iframe { min-height: calc(300px + var(--cut)); }
  .u-reach .u-mapcard { padding-bottom: calc(24px + var(--cut)); }
}
@media (min-width: 900px) {
  .u-reach__body { padding: calc(70px + var(--cut) * .6) clamp(40px, 6vw, 90px) calc(60px + var(--cut)); }
  .u-reach .u-mapcard { padding-top: calc(24px + var(--cut) * .6); padding-bottom: calc(24px + var(--cut)); }
}
/* consent-gated map: a calm map-like card instead of an empty hatched box */
.u-mapcard {
  background:
    linear-gradient(162deg, transparent 70%, rgba(150, 196, 214, .55) 70%),
    linear-gradient(118deg, transparent 46%, rgba(255,255,255,.95) 46% 47.6%, transparent 47.6%),
    linear-gradient(28deg, transparent 57%, rgba(255,255,255,.9) 57% 58.2%, transparent 58.2%),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(255,255,255,.55) 54px 56px),
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,.55) 74px 76px),
    #e2ebe5 !important;
  color: var(--head);
}
.u-mapcard__pin { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); color: #fff; box-shadow: 0 12px 26px rgba(255,108,58,.35); }
.u-mapcard__pin svg { transform: rotate(45deg); }
.u-mapcard p { background: rgba(255,255,255,.88); padding: 6px 12px; border-radius: 8px; }
.u-mapcard p.small { font-size: 12.5px; color: var(--muted); }
/* a page that ends with a slanted section runs into the footer on one seam */
main { position: relative; z-index: 1; }
main:has(> .u-angled:last-child) + .footer { margin-top: calc(var(--cut) * -1); }
main:has(> .u-angled:last-child) + .footer .footer__grid { padding-top: calc(60px + var(--cut)); }
@media (min-width: 900px) {
  main:has(> :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark):last-child) + .footer { margin-top: calc(var(--cut) * -1); }
  main:has(> :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark):last-child) + .footer .footer__grid { padding-top: calc(60px + var(--cut)); }
}

/* a straight section after a slanted one tucks underneath it, so the wedge
   shows the section's own photo/background instead of a white strip */
.u-angled { position: relative; z-index: 1; }
.u-angled + :is(.u-sec:not(.u-angled), .u-split:not(.u-split--angled), .u-reach) { margin-top: calc(var(--cut) * -1 - 1px); }
.u-angled + .u-sec:not(.u-angled) { padding-top: calc(var(--sec-y) + var(--cut) * .7); }
@media (min-width: 900px) {
  :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) { z-index: 1; }
  :is(.u-angled, .u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) + :is(.u-split:not(.u-split--angled), .u-split--angled.u-bg-white, .u-split--angled.u-bg-light) { margin-top: calc(var(--cut) * -1 - 1px); }
  :is(.u-angled, .u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) + :is(.u-split:not(.u-split--angled), .u-split--angled.u-bg-white, .u-split--angled.u-bg-light) .u-split__body { padding-top: calc(70px + var(--cut)); }
  :is(.u-split--angled.u-bg-green, .u-split--angled.u-bg-dark) + .u-sec:not(.u-angled) { margin-top: calc(var(--cut) * -1 - 1px); padding-top: calc(var(--sec-y) + var(--cut) * .7); }
}

/* ══ Main menu (v2) ═══════════════════════════════════════════════════════
   Pill hover, a real chevron with breathing room, a centred dropdown card
   with a pointer, and a short green bar under the current section.        */
.masthead .mainnav .nav { gap: 2px; align-items: center; }
.masthead .mainnav .nav > li > a {
  display: inline-flex; align-items: center; gap: 7px; margin: 16px 0; padding: 11px 15px;
  border-radius: 999px; font: 700 14.5px/1 var(--display); letter-spacing: .05em; color: var(--head);
  transition: background .2s, color .2s;
}
.masthead .mainnav .nav > li > a:hover, .masthead .mainnav .nav > li:focus-within > a, .masthead .mainnav .nav > li.has-sub:hover > a { background: var(--green-soft); color: var(--green-dark); }
.masthead .mainnav .nav > li > a::after { left: calc(50% - 11px); right: auto; width: 22px; bottom: -7px; height: 3px; border-radius: 3px; transform: scaleX(0); }
.masthead .mainnav .nav > li.is-active > a { color: var(--green-dark); }
.masthead .mainnav .nav > li.is-active > a::after { transform: scaleX(1); }
.masthead .mainnav .nav > li:not(.is-active):hover > a::after { transform: scaleX(0); }
.masthead .mainnav .has-sub > a { padding-right: 13px; }
.masthead .mainnav .has-sub > a::before { display: none; }
.nav__chev { flex: none; opacity: .55; transition: transform .25s var(--ease), opacity .2s; }
.masthead .mainnav .has-sub:hover .nav__chev, .masthead .mainnav .has-sub:focus-within .nav__chev { transform: rotate(180deg); opacity: 1; }
.drawer .nav__chev { display: none; }

.masthead .mainnav .nav__sub {
  top: calc(100% - 4px); left: 50%; min-width: 236px; padding: 8px; border: 1px solid var(--line); border-top: 0;
  border-radius: 14px; box-shadow: 0 22px 50px rgba(20, 40, 30, .16), 0 2px 6px rgba(20, 40, 30, .06);
  transform: translate(-50%, 10px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.masthead .mainnav .nav__sub::before { /* pointer */
  content: ''; position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.masthead .mainnav .nav__sub::after { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* hover bridge */
.masthead .mainnav .has-sub:hover .nav__sub, .masthead .mainnav .has-sub:focus-within .nav__sub { transform: translate(-50%, 0); }
.masthead .mainnav .nav__sub li + li { margin-top: 2px; }
.masthead .mainnav .nav__sub a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 10px; font: 500 14.5px/1.3 var(--sans); color: var(--head); transition: background .15s, color .15s, padding .2s;
}
.masthead .mainnav .nav__sub a::after { content: '›'; font-size: 18px; line-height: 1; color: var(--green); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.masthead .mainnav .nav__sub a:hover, .masthead .mainnav .nav__sub a:focus-visible { background: var(--green-soft); color: var(--green-dark); }
.masthead .mainnav .nav__sub a:hover::after, .masthead .mainnav .nav__sub a:focus-visible::after { opacity: 1; transform: none; }
.masthead .mainnav .nav__sub a[aria-current] { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.masthead .mainnav .nav__sub a[aria-current]::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--green); }

/* tools: E-Shop pill + language chip */
.masthead .masthead__shop { gap: 8px; border-radius: 999px !important; padding: 0 18px; height: 40px; align-items: center; border-width: 2px; }
.masthead .masthead__shop:hover { background: var(--green); border-color: var(--green); color: #fff; }
.masthead .langswitch { min-width: 42px; height: 40px; border-radius: 999px; border: 1px solid var(--line); }
.masthead .langswitch:hover { border-color: var(--green); }
@media (min-width: 1060px) and (max-width: 1239px) { .masthead .mainnav .nav > li > a { padding: 11px 10px; font-size: 13.5px; } }

/* shop host: six long category names - keep them compact */
.is-shop .masthead .mainnav .nav > li > a { padding: 10px 9px; font-size: 13px; letter-spacing: .03em; white-space: nowrap; }
@media (min-width: 1400px) { .is-shop .masthead .mainnav .nav > li > a { padding: 10px 12px; font-size: 13.5px; } }

/* mobile drawer */
.drawer .nav > li > a { padding: 16px 4px; }
.drawer .nav > li.is-active > a { color: var(--green-dark); }
.drawer .nav__toggle { border-radius: 50%; }
.drawer .nav__toggle:hover { background: var(--green-soft); }
.drawer .nav__toggle svg { transition: transform .25s var(--ease); }
.drawer .nav__sub { margin: 0 0 12px 4px; padding: 4px 0 4px 14px; border-left: 2px solid var(--green-soft); }
.drawer .nav__sub a { padding: 10px 12px; border-radius: 8px; }
.drawer .nav__sub a:hover, .drawer .nav__sub a[aria-current] { background: var(--green-soft); color: var(--green-dark); }
.drawer .nav__sub a[aria-current] { font-weight: 700; }
.masthead .mainnav .nav > li.has-sub:hover > a::after, .masthead .mainnav .nav > li.has-sub:focus-within > a::after { transform: scaleX(0); }

/* ══ WordPress look (unisatcy.com, Ingenious theme) ════════════════════════
   Matched 2026-10-21 after Egor's sign-off of the differences list: header,
   type scale, buttons, alignment, chevron edges, photo backgrounds, the
   Smart Office colours, sliders. Rules below override the earlier ones.   */

/* Header: full width, logo 30px from the edge, WP menu order (E-SHOP box
   and RU inside the menu); over the first section on pages that start with
   a page header or the home hero, solid white once scrolled. */
.masthead__inner { max-width: none; padding: 0 20px; }
@media (min-width: 1100px) { .masthead__inner { padding: 0 30px; min-height: 80px; } .brand img { width: 185px; } }
.brand { position: relative; display: block; flex: none; }
.brand img { transition: opacity .25s; }
.brand__light { position: absolute; left: 0; top: 0; opacity: 0; }
.mainnav { justify-content: flex-end; }
@media (min-width: 1200px) { .mainnav { padding-right: clamp(0px, 4vw, 64px); } }
body:not(.is-shop) .masthead .mainnav .nav { gap: 0; }
body:not(.is-shop) .masthead .mainnav .nav > li > a {
  margin: 0; padding: 22px 20px; border-radius: 0; background: none; color: var(--ink);
  font: 600 15px/36px var(--display); letter-spacing: 0; text-transform: uppercase;
}
body:not(.is-shop) .masthead .mainnav .nav > li > a:hover, body:not(.is-shop) .masthead .mainnav .nav > li:focus-within > a,
body:not(.is-shop) .masthead .mainnav .nav > li.has-sub:hover > a { background: none; color: inherit; }
body:not(.is-shop) .masthead .mainnav .nav > li > a::after { left: 18px; right: 18px; width: auto; bottom: 25px; height: 1px; border-radius: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
body:not(.is-shop) .masthead .mainnav .nav > li:hover > a::after, body:not(.is-shop) .masthead .mainnav .nav > li.is-active > a::after { transform: scaleX(1); }
body:not(.is-shop) .masthead .mainnav .nav > li.is-active > a { color: inherit; }
body:not(.is-shop) .masthead .mainnav .has-sub > a { padding-right: 20px; }
@media (min-width: 1060px) and (max-width: 1279px) { body:not(.is-shop) .masthead .mainnav .nav > li > a { padding-left: 11px; padding-right: 11px; font-size: 14px; } body:not(.is-shop) .masthead .mainnav .nav > li > a::after { left: 9px; right: 9px; } }
.mainnav .nav__shop a { border: 2px solid currentColor; border-radius: 3px; }
body:not(.is-shop) .masthead .mainnav .nav__shop { margin: 0 20px; }
body:not(.is-shop) .masthead .mainnav .nav > li.nav__shop > a { padding: 4px 15px; line-height: 22px; letter-spacing: .05em; }
body:not(.is-shop) .masthead .mainnav .nav__shop > a::after, body:not(.is-shop) .masthead .mainnav .nav__lang > a::after { display: none; }
body:not(.is-shop) .masthead .mainnav .nav > li.nav__shop > a:hover { background: var(--green); border-color: var(--green); color: #fff; }
@media (min-width: 1060px) and (max-width: 1279px) { body:not(.is-shop) .masthead .mainnav .nav__shop { margin: 0 8px; } }
@media (min-width: 1060px) { body:not(.is-shop) .masthead__tools .langswitch { display: none; } }
.masthead .mainnav .nav__sub { color: var(--head); }

.has-overlay .masthead { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.has-overlay .masthead.is-stuck { position: fixed; top: 0; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.08); animation: hdrIn .35s var(--ease); }
@keyframes hdrIn { from { transform: translateY(-100%); } to { transform: none; } }
.hdr-light .masthead:not(.is-stuck) { color: #fff; }
.hdr-light .masthead:not(.is-stuck) .mainnav .nav > li > a { color: #fff; }
body.hdr-light .masthead:not(.is-stuck) .mainnav .nav > li.nav__shop > a:hover { background: #fff; border-color: #fff; color: var(--green-dark); }
.hdr-light .masthead:not(.is-stuck) .brand__dark { opacity: 0; }
.hdr-light .masthead:not(.is-stuck) .brand__light { opacity: 1; }
.hdr-light .masthead:not(.is-stuck) .langswitch { color: #fff; border-color: rgba(255,255,255,.5); }
.hdr-light .masthead:not(.is-stuck) .burger span { background: #fff; }
/* the first section runs up under the header */
.has-overlay .u-phead { padding-top: 150px; }
@media (min-width: 900px) { .has-overlay .u-phead { padding-top: 160px; } }
.has-overlay .staffbar + .skip + .masthead { top: auto; }

/* Page header: WP vertical green (#4ca584 → #65b180), 60px title, 20px
   subtitle on the full text width, bottom edge a downward chevron. */
.u-phead { --pv: 60px; background: linear-gradient(180deg, #4ca584 0%, #65b180 100%); padding-bottom: calc(80px + var(--pv)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pv)), 50% 100%, 0 calc(100% - var(--pv))); }
.u-phead[style] { background-image: linear-gradient(180deg, #4ca584 0%, #65b180 100%); }
.u-phead__title { line-height: .95; letter-spacing: 0; }
.u-phead__sub { max-width: 1170px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.25; color: #fff; }
@media (max-width: 699px) { .u-phead { --pv: 30px; } }

/* Type scale: WP display titles are 60px Catamaran 900 on a tight 0.8 line;
   intros run the full 1170px text width. */
.u-title { font-size: clamp(34px, 4.6vw, 60px); line-height: .9; letter-spacing: 0; margin-bottom: 24px; }
.u-split .u-title { font-size: clamp(32px, 4vw, 56px); line-height: .92; }
.u-lead { max-width: 1170px; }
.wrap { max-width: calc(1170px + 2 * var(--gutter)); }

/* Buttons: bigger WP pills */
.btn { min-height: 50px; padding: 14px 44px; font-size: 15px; letter-spacing: .06em; }
.btn--sm { min-height: 40px; padding: 9px 22px; font-size: 13px; }
.btn--light { color: var(--green); }

/* Icon rows: 150px light-green circles with the WP drop shadow, big
   two-line labels; directly under a page header they follow its chevron
   (centre icons lower) - see the iconRow "wave" option. */
.u-icons__ico { background: #65b289; box-shadow: 4px 5px 8px rgba(0,0,0,.22); }
.u-icons__list a:hover .u-icons__ico { background: var(--green-2); }
.u-icons__label { font: 600 clamp(15px, 1.4vw, 20px)/1.25 var(--display); letter-spacing: 0; color: var(--ink); }
@media (min-width: 1100px) { .u-icons__ico { width: 150px; height: 150px; } .u-icons__list { gap: 34px 50px; max-width: calc(var(--cols-lg, 4) * 200px); } }
@media (min-width: 900px) { .u-icons--wave .u-icons__list li { transform: translateY(var(--dy, 0)); } }
.u-phead + .u-icons:not(.u-angled) { margin-top: 0; padding-top: 8px; }
@media (max-width: 899px) { .u-phead + .u-icons:not(.u-angled) { padding-top: 40px; } }

/* Faint photo behind a light section (WP bg_gray / bg_big): the photo is
   already washed out, so no dark veil and the text stays dark. */
.u-bg-white.u-has-photo, .u-bg-light.u-has-photo { background-image: var(--bg-sm); color: var(--ink); }
@media (min-width: 900px) { .u-bg-white.u-has-photo, .u-bg-light.u-has-photo { background-image: var(--bg-lg); } }
:is(.u-bg-white, .u-bg-light).u-has-photo :is(.u-title, .u-icons__label) { color: var(--head); }
:is(.u-bg-white, .u-bg-light).u-has-photo :is(.u-lead, .prose) { color: var(--ink); }

/* Image + text panels: photo behind the whole band, WP dark gradient,
   text alignment, chevron edges, "overlay" layout (picture across the band) */
.u-split--photo { background-size: cover; background-position: center; }
.u-split--photo.u-bg-white, .u-split--photo.u-bg-light { background-image: var(--bg-sm); }
.u-split--photo.u-bg-dark { background-image: linear-gradient(180deg, rgba(39,42,43,.93), rgba(84,84,84,.9)), var(--bg-sm); }
.u-split--photo.u-bg-green { background-image: linear-gradient(120deg, rgba(34,143,112,.92), rgba(89,171,103,.9)), var(--bg-sm); }
@media (min-width: 900px) {
  .u-split--photo.u-bg-white, .u-split--photo.u-bg-light { background-image: var(--bg-lg); }
  .u-split--photo.u-bg-dark { background-image: linear-gradient(180deg, rgba(39,42,43,.93), rgba(84,84,84,.9)), var(--bg-lg); }
  .u-split--photo.u-bg-green { background-image: linear-gradient(120deg, rgba(34,143,112,.92), rgba(89,171,103,.9)), var(--bg-lg); }
}
.u-bg-dark:not(.u-split--photo):not(.u-has-photo) { background: linear-gradient(180deg, #272a2b 0%, #545454 100%); }
.u-split.u-al-right .u-split__content, .u-split.u-al-right .u-title { text-align: right; }
.u-split.u-al-right .btns, .u-split.u-al-right .u-mini-icons { justify-content: flex-end; }
.u-split.u-al-center .u-split__content, .u-split.u-al-center .u-title { text-align: center; }
.u-split.u-al-center .btns, .u-split.u-al-center .u-mini-icons { justify-content: center; }
@media (min-width: 900px) {
  .u-split--angled.u-split--chevron { clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))) !important; }
  .u-split--chevron .u-split__body { padding-top: calc(70px + var(--cut)); padding-bottom: calc(70px + var(--cut)); }
  .u-split--overlay { min-height: 560px; }
  .u-split--overlay .u-split__media { min-height: 0; }
  .u-split--overlay .u-split__body { padding-top: calc(110px + var(--cut)); }
}
/* panels on WP's 1170 grid: the text column runs to the grid edge */
@media (min-width: 1200px) {
  .u-split.u-split--img-left .u-split__body { padding-left: 65px; padding-right: max(40px, calc(100% - 585px)); justify-content: flex-start; }
  .u-split.u-split--img-right .u-split__body { padding-right: 65px; padding-left: max(40px, calc(100% - 585px)); justify-content: flex-end; }
  .u-split__content { max-width: 570px; }
}

/* Home hero: WP grey polygon pattern behind the floor plan, scroll cue */
.u-hero { background: #eef0f1 url(/img/hero-pattern.webp) center / cover no-repeat; }
.has-overlay .u-hero__stage { padding-top: 40px; }
@media (min-width: 900px) { .has-overlay .u-hero__stage { padding-top: 24px; } }
.u-hero__cue { position: absolute; left: 50%; bottom: 22px; width: 34px; height: 54px; margin-left: -17px; border: 3px solid #fff; border-radius: 20px; z-index: 2; opacity: .9; }
.u-hero__cue::after { content: ''; position: absolute; left: 50%; top: 10px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (max-width: 699px) { .u-hero__cue { display: none; } }
.u-spot__btn { width: 48px; height: 48px; background: rgba(88,176,137,.85); border: 0; font-size: 30px; font-weight: 400; }
@media (max-width: 699px) { .u-spot__btn { width: 30px; height: 30px; font-size: 20px; } }

/* Logo band: chevron edges, big white circles, one row that turns */
.u-logos { --cut: 60px; clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); padding: calc(var(--cut) + 20px) 0 calc(var(--cut) + 50px); }
.u-logos.u-bg-green { background: linear-gradient(180deg, #2a936f 0%, #55a96c 100%); }
@media (min-width: 900px) { .u-logos__list li { width: 164px; } .u-logos__list { gap: 30px; } }
.u-logos--turn .u-logos__list { flex-wrap: nowrap; justify-content: center; overflow: hidden; padding: 10px 0 40px; }
.u-logos--turn .u-logos__list li { flex: none; transition: opacity .5s, transform .5s var(--ease); }
.u-logos--turn .u-logos__list li:nth-child(n+7) { display: none; }
@media (min-width: 900px) {
  .u-logos--turn .u-logos__list li:nth-child(2), .u-logos--turn .u-logos__list li:nth-child(5) { transform: translateY(20px); }
  .u-logos--turn .u-logos__list li:nth-child(3), .u-logos--turn .u-logos__list li:nth-child(4) { transform: translateY(40px); }
}
@media (max-width: 899px) { .u-logos--turn .u-logos__list li:nth-child(n+4) { display: none; } .u-logos--turn .u-logos__list li { width: 28vw; } }
.u-logos__list li.is-leaving { opacity: 0; }

/* Partner cards over the dark room photo: the photo shows (WP), green on Partners */
.u-partners::before { background: rgba(30,32,34,.38); }
.u-partners--green::before { background: linear-gradient(180deg, rgba(38,145,105,.94), rgba(84,178,120,.9)); }
.u-pcard { padding: 74px 30px 34px; }
.u-pcard p { font-size: 16px; line-height: 1.75; }
.u-pcard__logo { width: 116px; height: 116px; top: -58px; }
.u-pcard__name { font: 500 22px/1.2 var(--display); color: #58b089; }
.u-pcard__sub { font: 500 14px/1.3 var(--sans); }

/* Progress rings: WP white rings on the dark photo, sentence-case labels */
.u-stats.u-angled { clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); }
.u-ring { --fill: #fff; --track: rgba(255,255,255,.3); }
.u-ring::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.u-ring span { font: 400 32px/1 var(--sans); }
.u-stats__label { font: 500 20px/1.2 var(--display); text-transform: none; letter-spacing: 0; }
.u-stats__list { gap: 30px 64px; }
.u-stats--side { display: grid; grid-template-columns: 1fr; padding: 0; }
.u-stats__body { padding: calc(var(--sec-y) + var(--cut) * .6) var(--gutter); }
.u-stats__media { position: relative; min-height: 300px; }
.u-stats__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .u-stats--side { grid-template-columns: 1fr 1fr; }
  .u-stats--side .u-stats__body { display: flex; justify-content: flex-end; padding-right: 50px; padding-left: max(40px, calc(100% - 585px)); }
  .u-stats--side .u-stats__content { max-width: 570px; text-align: right; }
  .u-stats--side .u-title { text-align: right; }
  .u-stats--side .u-stats__list { justify-content: flex-end; gap: 30px 50px; }
  .u-stats--side .btns { justify-content: flex-end; }
}

/* FAQ: WP grey gradient band peaking at the top, big outlined +/- circles */
.u-faq { --cut: 60px; background: linear-gradient(180deg, #a9a9a9 0%, #d2d2d2 45%, #fff 100%) !important; clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% 100%, 0 100%); padding-top: calc(var(--sec-y) + var(--cut) * .4); }
.u-faq .wrap.w-text { max-width: calc(1170px + 2 * var(--gutter)); }
.u-faq .u-title { color: #555; }
.u-faq__item { background: none; box-shadow: none; border-radius: 0; margin: 0 0 4px; }
.u-faq__item summary { padding: 12px 0 12px 62px; font: 500 clamp(16px, 1.4vw, 19px)/1.3 var(--sans); color: var(--head); min-height: 50px; display: flex; align-items: center; }
.u-faq__item summary::before { left: 0; width: 46px; height: 46px; border: 3px solid #555; color: #555; font: 400 34px/1 var(--sans); background: none !important; }
.u-faq__item[open] summary::before { content: '\2212'; color: #555; }
.u-faq__item .prose { padding: 0 0 12px 62px; }

/* Process steps: WP tilts the side texts along the V of the band, big circles */
.u-step__ico { width: 120px; height: 120px; }
.u-step__title { font: 600 20px/1.2 var(--display); }
.u-step__text { font-size: 17px; line-height: 1.45; }
@media (min-width: 900px) {
  .u-step__ico { width: 150px; height: 150px; }
  .u-step__text--l { transform: rotate(4deg); }
  .u-step__text--r { transform: rotate(-4deg); }
  .u-step__inner { grid-template-columns: 1fr 230px 1fr; }
}

/* Contact form band: WP labels and the green send button */
.field__label { font: 500 15px/1.2 var(--sans); }
.u-contact .btn--primary, .u-contact__card .btn--primary { background: #58b089; box-shadow: none; }
.u-contact .btn--primary:hover, .u-contact__card .btn--primary:hover { background: var(--green); }
.u-contact__card { max-width: 1170px; border-radius: 2px; }

/* Text panels: right-aligned bullet lists read as plain lines */
.u-al-right .prose ul, .u-al-center .prose ul { list-style: none; padding-left: 0; }
.js .u-banner-row.slide-in > .u-banner { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .u-banner-row.slide-in > .u-banner:last-child { transition-delay: .2s; }
.js .u-banner-row.slide-in.is-in > .u-banner { opacity: 1; transform: none; }

/* ── Smart Office: the WordPress page runs in blue / purple ──────────────── */
.page-smart-office main {
  --grad: linear-gradient(120deg, #5d96c3 0%, #6770b9 55%, #5a46a2 100%);
  --green: #6770b9; --green-2: #686bb8; --green-dark: #5a5fa8; --green-soft: #eceefa;
  --orange: #686bb8; --orange-2: #7b7fc6; --dark: #333742;
}
.page-smart-office .btn--primary { box-shadow: none; }
.page-smart-office .btn--light { color: #6770b9; }
.page-smart-office .u-phead { background: linear-gradient(90deg, rgba(90,80,170,.9) 0%, rgba(75,110,160,.7) 55%, rgba(60,140,150,.55) 100%); min-height: 690px; display: flex; align-items: center; justify-content: center; }
.page-smart-office .u-phead[style]::before { opacity: 1; mix-blend-mode: normal; z-index: -2; }
.page-smart-office .u-phead[style] { background-image: linear-gradient(90deg, rgba(95,82,170,.82) 0%, rgba(80,110,165,.62) 55%, rgba(60,140,150,.5) 100%); }
.page-smart-office .u-phead__title { font-size: clamp(34px, 4vw, 56px); }
.page-smart-office .u-phead__sub { font: 400 17px/1.4 var(--display); }
.page-smart-office .u-phead .btns { margin-top: 30px; }
/* icon band: purple left half, blue right half, white circles with dark icons */
.page-smart-office .u-icons.u-bg-green { background: linear-gradient(90deg, #686cb8 0 50%, #658dc2 50% 100%); clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); }
.page-smart-office .u-phead + .u-icons.u-angled { margin-top: calc(var(--cut) * -1 - 1px); }
.page-smart-office .u-bg-green .u-icons__ico { background: #fff; box-shadow: 4px 5px 8px rgba(0,0,0,.25); }
.page-smart-office .u-bg-green .u-icons__ico img { filter: brightness(0) saturate(100%) invert(15%); }
.page-smart-office .u-icons__label { text-transform: none; font-size: 22px; }
.page-smart-office .u-icons__desc { font-size: 16px; color: rgba(255,255,255,.75) !important; }
/* alternating panels: blue beside a right-hand picture, purple beside a left one */
.page-smart-office .u-split.u-bg-green.u-split--img-right { background: linear-gradient(160deg, #5d96c3 0%, #6089c0 100%); }
.page-smart-office .u-split.u-bg-green.u-split--img-left { background: linear-gradient(160deg, #686bb8 0%, #533b9b 100%); }
.page-smart-office .u-stats.u-bg-green { background: linear-gradient(160deg, #5d96c3 0%, #5a49a3 100%); }
.page-smart-office .u-stats--side.u-bg-green { background: #fff; }
.page-smart-office .u-stats--side .u-stats__body { background: linear-gradient(160deg, #5d96c3 0%, #5a49a3 100%); }
.page-smart-office .u-ring { --fill: #3c3f63; --track: #333742; }
.page-smart-office .u-ring::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.page-smart-office .u-bg-dark { background: #333742 !important; }
.page-smart-office .u-cta.u-bg-green { background: linear-gradient(120deg, #686bb8 0%, #5d96c3 100%); }
/* a page that opens with a full-bleed panel (Partners): room for the header */
@media (min-width: 900px) { .has-overlay main > .u-split--overlay:first-child { min-height: 640px; } .has-overlay main > .u-split--overlay:first-child .u-split__body { padding-top: 150px; } }
@media (max-width: 899px) { .has-overlay main > .u-split:first-child .u-split__media { margin-top: 70px; } }
/* measured against WP at 1440: panel titles 60/48, text column 570 (cut-outs)
   or 535 (beside a photo) on the 1170 grid; icon labels 21px, mini 18px */
.u-split .u-title { font-size: clamp(32px, 4.2vw, 60px); line-height: .8; }
.u-icons__label { font: 700 clamp(15px, 1.5vw, 21px)/1.2 var(--display); }
.u-mini-icons { gap: 14px 44px; }
.u-mini-icons li { width: 120px; font: 700 18px/1.2 var(--display); }
.u-mini-icons img { width: 106px; height: 106px; padding: 20px; background: #65b289; box-shadow: 4px 5px 8px rgba(0,0,0,.22); }
.u-project h3, .u-projects__intro h3 { font-size: 24px; }
@media (min-width: 1200px) {
  .u-split.u-split--img-left .u-split__body { padding-left: 50px; }
  .u-split.u-split--img-right .u-split__body { padding-right: 50px; }
  .u-split--contain.u-split--img-left .u-split__body { padding-left: 15px; }
  .u-split--contain.u-split--img-right .u-split__body { padding-right: 15px; }
  .u-split--contain .u-split__content { max-width: 570px; width: 570px; }
  .u-split--cover .u-split__content { max-width: 535px; width: 535px; }
  .mainnav { padding-right: 10px; }
}
.u-mini-icons { gap: 14px 30px; }
.page-home .u-split--contain .u-title { font-size: clamp(32px, 3.9vw, 55px); }
.page-home .u-split--contain .btns { justify-content: center; }
.u-split.u-al-center .u-title { font-size: clamp(28px, 2.8vw, 40px); }
.page-smart-office .u-phead[style]::before { z-index: -2; }
.page-smart-office .u-phead[style]::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(96,84,172,.86) 0%, rgba(82,108,168,.66) 55%, rgba(60,140,150,.5) 100%); }
.page-smart-office .u-phead .wrap { max-width: 1320px; }
.page-smart-office .u-phead__title { font-size: clamp(30px, 3.6vw, 52px); }
.page-smart-office .u-icons__list { max-width: 1170px !important; gap: 34px 30px; }
.page-smart-office .u-icons__list li { max-width: 270px; }
.page-smart-office .u-split--contain .u-split__content { width: auto; max-width: 665px; }
.page-smart-office .prose ul { list-style: none; padding-left: 20px; }
.u-stats--side .u-ring { width: 126px; height: 126px; }
.u-stats--side .u-stats__list { gap: 30px 60px; flex-wrap: nowrap; }
/* overlay panels: the photo is washed out under the text, as on WP */
.u-split--overlay.u-bg-white, .u-split--overlay.u-bg-light { background-image: linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)), var(--bg-sm); }
@media (min-width: 900px) { .u-split--overlay.u-bg-white, .u-split--overlay.u-bg-light { background-image: linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)), var(--bg-lg); } }
:is(.u-bg-white, .u-bg-light).u-has-photo:not(.u-split) { background-image: linear-gradient(rgba(240,240,238,.9), rgba(240,240,238,.9)), var(--bg-sm); }
@media (min-width: 900px) { :is(.u-bg-white, .u-bg-light).u-has-photo:not(.u-split) { background-image: linear-gradient(rgba(240,240,238,.9), rgba(240,240,238,.9)), var(--bg-lg); } }
@media (min-width: 1100px) { .u-icons__list { max-width: 1200px; gap: 34px 0; } .u-icons__list li { max-width: none; } }
.u-faq__item summary { font-weight: 700; }
.u-reach__ico { width: 70px; height: 70px; padding: 20px; background: #65b289; }
.u-reach__details h3 { font: 500 22px/1.2 var(--display); color: #58b089; }
.u-reach__details p { font-size: 16px; line-height: 1.75; }
.u-reach__details > div { align-items: flex-start; gap: 16px; }
.masthead .masthead__inner { max-width: none; }
.u-split--overlay { background-position: center top; }
.page-smart-office .u-phead .wrap { max-width: 1420px; }
@media (min-width: 1200px) {
  .page-smart-office .u-split--contain.u-split--img-left .u-split__content { margin-left: -85px; width: 665px; max-width: 665px; }
  .u-split--overlay.u-split--img-left .u-split__body { padding-left: 15px; }
  .u-split--overlay.u-split--img-right .u-split__body { padding-right: 15px; }
  .u-split--overlay .u-split__content { width: 570px; max-width: 570px; }
}
.page-smart-office .u-cta.u-bg-green { background: linear-gradient(180deg, #5a8dc2 0%, #5048a0 100%); clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% 100%, 0 100%); }
.page-smart-office .u-cta .u-title { text-transform: capitalize; }
.page-smart-office .u-cta .u-lead { max-width: 1170px; color: #fff; }
/* a light angled section right under the page header tucks under its chevron
   (no edge of its own on top, square bottom for the next band's V) */
.u-phead + .u-sec.u-angled:is(.u-bg-light, .u-bg-white) { clip-path: none; margin-top: calc(var(--pv, 60px) * -1 - 2px); padding-top: calc(var(--sec-y) + 60px); margin-bottom: 0; }
.u-phead { z-index: 3; }
@media (max-width: 899px) { .has-overlay .u-hero__stage { padding-top: 72px; } }
.page-smart-office .u-phead__title { font-size: clamp(30px, 3.4vw, 49px); font-weight: 800; }

/* ── Round 2 (Egor's screenshots 2026-10-21) ─────────────────────────────
   Hero as on WP: the floor plan runs (almost) edge to edge and the band is
   one screen tall; the Smart Office card is WP's "bslider" (blue -> purple,
   round except the top-left corner, label tilted over the picture). */
.u-hero { max-height: 100svh; min-height: 0; }
.u-hero__stage { max-width: none; }
.has-overlay .u-hero__stage { padding-top: 0; }
.u-hero__card { position: absolute; right: clamp(24px, 3.2vw, 70px); bottom: clamp(40px, 6svh, 70px); top: auto; width: auto; aspect-ratio: auto; padding: 16px 32px; display: block; overflow: visible; z-index: 3;
  background: linear-gradient(135deg, #5d96c3, #4a208c); border-radius: 4px 100px 100px 100px; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: box-shadow .5s ease, transform .2s ease; }
.u-hero__card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,.3); }
.u-hero__card img { position: static; width: 220px; height: auto; opacity: 1; }
.u-hero__card .u-hero__card-label { position: absolute; top: 40px; left: 10px; padding: 0; background: none; font: 400 15px/1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: #fff; transform: rotate(-30deg); transform-origin: left top; }
@media (max-width: 1099px) { .u-hero__card { display: none; } }

/* Partner banners: WP's two desktop halves meet in one strip; phone banners below 768px */
.u-banner--split .u-banner__mob { display: none; }
@media (max-width: 767px) { .u-banner--split .u-banner__desk { display: none; } .u-banner--split .u-banner__mob { display: block; } }
@media (min-width: 768px) {
  .u-banner-row:has(.u-banner--split) { display: flex; gap: 0; max-width: calc(1170px + 2 * var(--gutter)); margin: 0 auto; padding: 44px var(--gutter) 30px; }
  .u-banner-row:has(.u-banner--split) > .u-banner { flex: 1 1 0; min-width: 0; padding: 0; }
  .u-banner-row:has(.u-banner--split) .wrap { padding: 0; max-width: none; }
  .u-banner--split img, .u-banner--split a { border-radius: 0; }
  .u-banner--split a:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
}

/* Partners: the photo runs under the green band's slanted edge - no white wedge */
.u-split--overlay + .u-angled { margin-top: calc(var(--cut) * -1 - 1px); }
@media (min-width: 900px) {
  .u-hero__stage { margin-top: -3.2vw; }
  .u-spot__btn { width: clamp(40px, 2.9vw, 60px); height: clamp(40px, 2.9vw, 60px); font-size: clamp(28px, 2vw, 40px); background: rgba(88,176,137,.82); }
}
@media (min-width: 900px) {
  /* WP fullscreen slider: one screen tall, the plan scales to whichever of
     width / height needs more (1920x1080 grid), centred, sides may crop */
  .u-hero { height: 100svh; max-height: none; }
  .u-hero__stage { position: absolute; left: 50%; top: 0; width: max(100%, 177.78svh); margin: 0; transform: translate(-50%, -5.7%); }
}
@media (min-width: 900px) { .u-hero__stage { top: 50%; transform: translate(-50%, -50%); } }
/* exact WP slider geometry (measured from its hotspots at 1280-2000px):
   the plan is fitted into the screen at 16:9, scaled 1.111x and centred;
   "+" buttons are 5.35% of the plan height; card ~40px from the corner */
@media (min-width: 900px) {
  .u-hero__stage { width: calc(min(100vw, 177.78svh) * 1.111); top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .u-spot__btn { width: calc(min(100vw, 177.78svh) * .0334); height: calc(min(100vw, 177.78svh) * .0334); font-size: calc(min(100vw, 177.78svh) * .024); }
  .u-hero__card { right: 36px; bottom: 50px; padding: 12px 24px; }
}
.u-hero { overflow: hidden; }
@media (max-width: 899px) { .has-overlay .u-hero__stage { padding-top: 76px; } }
@media (max-width: 899px) { .u-split--overlay { background-position: 30% top; } .u-split--overlay .u-split__media { min-height: 140px; } }
/* card label stays inside the card (it ran past the square corner) */
.u-hero__card .u-hero__card-label { top: 46px; left: 14px; font-size: 14px; white-space: nowrap; }
/* rings band with a picture (Smart Office): same slope as the panels around
   it, so the seams meet with no white wedges */
.u-stats--side.u-angled { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); margin: calc(var(--cut) * -1 - 1px) 0 0; padding: 0; }
.u-stats--side .u-stats__body { padding-top: calc(var(--sec-y) + var(--cut)); padding-bottom: calc(var(--sec-y) + var(--cut)); }
.u-stats--side + :is(.u-split, .u-sec) { margin-top: calc(var(--cut) * -1 - 1px); }
/* a light panel with a background photo runs under the next band's slope */
@media (min-width: 900px) {
  :is(.u-split--photo, .u-has-photo):is(.u-bg-white, .u-bg-light) + :is(.u-split--angled.u-bg-dark, .u-split--angled.u-bg-green, .u-angled) { margin-top: calc(var(--cut) * -1 - 1px); }
}
.u-phead + .u-split--photo { margin-top: calc(var(--pv, 60px) * -1 - 2px); clip-path: none !important; }
@media (min-width: 900px) { .u-phead + .u-split--photo .u-split__body { padding-top: calc(110px + var(--pv, 60px)); } }

/* ── Round 3 (Egor 2026-10-21) ──────────────────────────────────────────── */
/* 1. Text wrapping: balanced headings, no orphans in paragraphs/labels */
h1, h2, h3, h4, .u-title, .u-phead__title, .u-pcard__name, .u-icons__label, .u-stats__label, .u-step__title, .cc-title, .hold__title, .shophead__title { text-wrap: balance; }
p, li, .prose, .u-lead, .u-phead__sub, .u-icons__desc, .u-step__text, .u-pcard p, .u-card p, .u-project p, .footer__brand p, summary { text-wrap: pretty; }
.btn, .nav a, .langswitch { text-wrap: nowrap; }

/* 3. Smart Office card: label sits inside the card, along the picture's top edge */
.u-hero__card { padding: 30px 26px 20px; isolation: isolate; }
.u-hero__card img { width: 200px; filter: drop-shadow(0 10px 14px rgba(20, 10, 60, .35)); transition: transform .35s var(--ease); }
.u-hero__card:hover img { transform: translateY(-4px) scale(1.02); }
.u-hero__card .u-hero__card-label { top: 54px; left: 24px; font: 700 13px/1 var(--display); letter-spacing: .12em; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: rotate(-28deg); transform-origin: left bottom; z-index: 2; }
.u-hero__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); pointer-events: none; }

/* 4. Hotspots: the hover target never moves (the hover is read on the wrapper,
   the circle scales inside it), so the pointer near the edge no longer
   flickers between hovered / not hovered */
.u-spot__btn:hover { transform: none; }
.u-spot { padding: 6px; margin: -6px; }
.u-spot:hover .u-spot__btn, .u-spot__btn:focus-visible { background: var(--orange); transform: scale(1.1); animation: none; }
.u-spot__btn { will-change: transform; }

/* 5. More air inside the slanted sections (content clear of the slopes) */
@media (min-width: 900px) {
  .u-split__body { padding-top: calc(100px + var(--cut)); padding-bottom: calc(100px + var(--cut)); }
  .u-split--angled.u-split--chevron .u-split__body { padding-top: calc(100px + var(--cut)); padding-bottom: calc(100px + var(--cut)); }
  .u-sec.u-angled { padding-top: calc(var(--sec-y) + var(--cut) * 1.1); padding-bottom: calc(var(--sec-y) + var(--cut) * 1.1); }
  .u-stats--side .u-stats__body { padding-top: calc(var(--sec-y) + var(--cut) * 1.3); padding-bottom: calc(var(--sec-y) + var(--cut) * 1.3); }
  .u-phead { padding-bottom: calc(100px + var(--pv)); }
  .u-logos { padding-top: calc(var(--cut) + 40px); padding-bottom: calc(var(--cut) + 60px); }
  .u-faq { padding-bottom: calc(var(--sec-y) + 20px); }
  .u-step { padding-top: calc(48px + var(--v)); padding-bottom: calc(44px + var(--v)); }
}
@media (max-width: 899px) {
  .u-split__body { padding-top: 60px; padding-bottom: 60px; }
  .u-sec.u-angled { padding-top: calc(var(--sec-y) + var(--cut)); padding-bottom: calc(var(--sec-y) + var(--cut)); }
}
.u-spot__btn[aria-expanded="true"] { background: var(--orange); transform: scale(1.1); animation: none; }
.u-sec.u-stats--side.u-angled { padding: 0; }
.u-split__body .prose ul:has(> li:nth-child(7)) > li:first-child { margin-top: 0; }
.u-split__body .prose ul:has(> li:nth-child(7)) { margin-top: 0; }

/* ══ Seams (round 4): one shape per seam, drawn by the lower section, which
   overlaps the upper one; nothing behind can show through. Classes come
   from renderSections(): sx-t-<top shape>, sx-b-<bottom, last section only>. */
main > .sx { position: relative; margin-top: 0 !important; margin-bottom: 0 !important; clip-path: none !important; }
main > .sx:is(.sx-t-slope, .sx-t-v, .sx-t-peak) { margin-top: calc(var(--cut) * -1 - 1px) !important; }
main > .sx.sx-t-slope.sx-b-none { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%) !important; }
main > .sx.sx-t-v.sx-b-none { clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% 100%, 0 100%) !important; }
main > .sx.sx-t-peak.sx-b-none { clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% 100%, 0 100%) !important; }
main > .sx.sx-t-none.sx-b-slope { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%) !important; }
main > .sx.sx-t-none.sx-b-v { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))) !important; }
main > .sx.sx-t-slope.sx-b-slope { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%) !important; }
main > .sx.sx-t-slope.sx-b-v { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))) !important; }
main > .sx.sx-t-v.sx-b-slope { clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%) !important; }
main > .sx.sx-t-v.sx-b-v { clip-path: polygon(0 0, 50% var(--cut), 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))) !important; }
main > .sx.sx-t-peak.sx-b-slope { clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% calc(100% - var(--cut)), 0 100%) !important; }
main > .sx.sx-t-peak.sx-b-v { clip-path: polygon(0 var(--cut), 50% 0, 100% var(--cut), 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))) !important; }
/* room for the shapes: a shaped top needs the cut above the content, and a
   section that runs under the next one needs the cut below it */
main > .sx.u-sec:not(.sx-t-none) { padding-top: calc(var(--sec-y) + var(--cut)) !important; }
main > .sx.u-sec:has(+ .sx:not(.sx-t-none)) { padding-bottom: calc(var(--sec-y) + var(--cut)) !important; }
main > .sx.u-sec.u-stats--side { padding: 0 !important; }
main > .sx.u-stats--side .u-stats__body { padding-top: calc(var(--sec-y) + var(--cut) * 1.3); padding-bottom: calc(var(--sec-y) + var(--cut) * 1.3); }
main > .sx.u-split:not(.sx-t-none) .u-split__body { padding-top: calc(90px + var(--cut)) !important; }
main > .sx.u-split:has(+ .sx:not(.sx-t-none)) .u-split__body { padding-bottom: calc(90px + var(--cut)) !important; }
main > .sx.u-split:not(.sx-t-none) .u-split__media:not(:empty) { margin-top: 0; }
main > .sx.u-phead { padding-bottom: calc(100px + var(--cut)) !important; }
main > .sx.u-logos { padding-top: calc(var(--cut) + 40px) !important; padding-bottom: calc(var(--cut) + 60px) !important; }
main > .sx.u-partners { padding-top: calc(var(--sec-y) + var(--cut)) !important; padding-bottom: calc(var(--sec-y) + var(--cut)) !important; }
main > .sx.u-reach .u-reach__body { padding-bottom: calc(60px + var(--cut)); }
main > .sx.u-steps { padding-bottom: var(--cut); }
@media (max-width: 899px) { main > .sx.u-split:not(.sx-t-none) .u-split__body { padding-top: calc(50px + var(--cut)) !important; } main > .sx.u-split:has(+ .sx:not(.sx-t-none)) .u-split__body { padding-bottom: calc(50px + var(--cut)) !important; } }
/* footer under the last section's bottom edge */
main:has(> .sx:last-child:not(.sx-b-none)) + .footer { margin-top: calc(var(--cut) * -1) !important; }
main:has(> .sx:last-child:not(.sx-b-none)) + .footer .footer__grid { padding-top: calc(60px + var(--cut)) !important; }
main:has(> .sx:last-child.sx-b-none) + .footer { margin-top: 0 !important; }
main:has(> .sx:last-child.sx-b-none) + .footer .footer__grid { padding-top: 60px !important; }
main > .sx:nth-child(1) { z-index: 1 !important; }
main > .sx:nth-child(2) { z-index: 2 !important; }
main > .sx:nth-child(3) { z-index: 3 !important; }
main > .sx:nth-child(4) { z-index: 4 !important; }
main > .sx:nth-child(5) { z-index: 5 !important; }
main > .sx:nth-child(6) { z-index: 6 !important; }
main > .sx:nth-child(7) { z-index: 7 !important; }
main > .sx:nth-child(8) { z-index: 8 !important; }
main > .sx:nth-child(9) { z-index: 9 !important; }
main > .sx:nth-child(10) { z-index: 10 !important; }
main > .sx:nth-child(11) { z-index: 11 !important; }
main > .sx:nth-child(12) { z-index: 12 !important; }
main > .sx:nth-child(13) { z-index: 13 !important; }
main > .sx:nth-child(14) { z-index: 14 !important; }
main > .sx:nth-child(15) { z-index: 15 !important; }
main > .sx:nth-child(16) { z-index: 16 !important; }
main > .sx:nth-child(17) { z-index: 17 !important; }
main > .sx:nth-child(18) { z-index: 18 !important; }
main > .sx:nth-child(19) { z-index: 19 !important; }
main > .sx:nth-child(20) { z-index: 20 !important; }
main > .sx:nth-child(21) { z-index: 21 !important; }
main > .sx:nth-child(22) { z-index: 22 !important; }
main > .sx:nth-child(23) { z-index: 23 !important; }
main > .sx:nth-child(24) { z-index: 24 !important; }
main > .sx:nth-child(25) { z-index: 25 !important; }
main > .sx:nth-child(26) { z-index: 26 !important; }
main > .sx:nth-child(27) { z-index: 27 !important; }
main > .sx:nth-child(28) { z-index: 28 !important; }
main > .sx:nth-child(29) { z-index: 29 !important; }
main > .sx:nth-child(30) { z-index: 30 !important; }
main > .sx:nth-child(31) { z-index: 31 !important; }
main > .sx:nth-child(32) { z-index: 32 !important; }
main > .sx:nth-child(33) { z-index: 33 !important; }
main > .sx:nth-child(34) { z-index: 34 !important; }
main > .sx:nth-child(35) { z-index: 35 !important; }
main > .sx:nth-child(36) { z-index: 36 !important; }
main > .sx:nth-child(37) { z-index: 37 !important; }
main > .sx:nth-child(38) { z-index: 38 !important; }
main > .sx:nth-child(39) { z-index: 39 !important; }
main > .sx:nth-child(40) { z-index: 40 !important; }
@media (max-width: 899px) { .u-stats--side .u-stats__list { flex-wrap: wrap; gap: 26px 30px; } .u-stats--side { grid-template-columns: minmax(0, 1fr); } .u-stats--side .u-stats__content { text-align: center; } .u-stats--side .u-title { text-align: center; } .u-stats--side .btns { justify-content: center; } }
/* hotspots: calm hover - no orange switch, the pulse never stops/restarts
   (that restart is what flashed when the mouse crossed the plan) */
.u-spot__btn, .u-spot__btn:hover, .u-spot:hover .u-spot__btn, .u-spot__btn[aria-expanded="true"] { animation: none !important; box-shadow: 0 4px 14px rgba(30, 90, 60, .25); }
.u-spot__btn { transition: transform .35s var(--ease), background-color .35s ease, box-shadow .35s ease !important; }
.u-spot:hover .u-spot__btn, .u-spot__btn:focus-visible { background: rgba(46, 155, 110, .95) !important; transform: scale(1.08) !important; box-shadow: 0 6px 20px rgba(30, 90, 60, .35); }
.u-spot__btn[aria-expanded="true"] { background: var(--green-dark) !important; transform: scale(1.08) !important; }
.u-spot::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .u-spot::before { display: none; } }
/* the two halves are always exactly 50/50 (content can never widen a column -
   that shifted the green / photo halves of neighbouring rows by ~15px) */
@media (min-width: 900px) {
  .u-split, .u-split--overlay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .u-stats--side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .u-split__body, .u-stats__body { min-width: 0; }
  .u-split__content { width: auto !important; max-width: 570px; }
  .u-split--cover .u-split__content { max-width: 535px; }
  .page-smart-office .u-split--contain .u-split__content { max-width: 665px; }
}
/* office: the rings band is text + photo only - no white band under it */
main > .sx.u-sec.u-stats--side.u-angled.u-stats--side { padding: 0 !important; background: transparent !important; }
/* phones: one column that can never be widened by a long (Russian) word */
@media (max-width: 899px) { .u-split { grid-template-columns: minmax(0, 1fr); } }
.u-title, .u-phead__title { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 899px) { .u-stats--side .u-stats__media { min-height: 0; } .u-stats--side .u-stats__media img { position: static; height: auto; aspect-ratio: 4 / 3; } }
.u-mini-icons li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.lang-ru .u-mini-icons li { width: 132px; font-size: 16px; }
.u-stats__media, .u-split__media { background-color: #333742; }
.u-split--contain .u-split__media, .u-split--overlay .u-split__media { background-color: transparent; }
/* office card label: lower and further left, along the picture's left edge */
.u-hero__card .u-hero__card-label { top: 78px; left: 10px; }
.u-project h3 { margin-top: 4px; }
.u-banner-row { position: relative; z-index: 0; background: #fff; }
main > .sx.u-banner-row:has(+ .sx:not(.sx-t-none)) { padding-bottom: calc(30px + var(--cut)) !important; }
@media (max-width: 767px) { main > .sx.u-banner-row:has(+ .sx:not(.sx-t-none)), main > .sx.u-banner:has(+ .sx:not(.sx-t-none)) { padding-bottom: calc(20px + var(--cut)) !important; } }
@media (max-width: 767px) { .u-banner-row .u-banner { padding: 10px 0; } .u-banner-row .u-banner:first-child { padding-top: 34px; } }
/* phones: logo band circles fit the screen; long right-aligned texts read left */
@media (max-width: 767px) {
  .u-logos--turn .u-logos__list { gap: 12px; padding-bottom: 20px; }
  .u-logos--turn .u-logos__list li { width: calc((100vw - 2 * var(--gutter) - 24px) / 3); }
  .u-logos--turn .u-logos__list li:nth-child(2) { transform: translateY(14px); }
  .u-split.u-al-right .u-split__content, .u-split.u-al-right .u-title, .u-stats--side .u-stats__content { text-align: left; }
  .u-split.u-al-right .btns, .u-split.u-al-right .u-mini-icons { justify-content: flex-start; }
}
@media (min-width: 768px) { .u-banner-row:has(.u-banner--split) { box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax) !important; } }

/* ── Russian pages: Open Sans everywhere (WP: *:lang(ru) { font-family: Open Sans }),
   the footer stays Roboto. WP faked bold from a 400 face; real weights here. */
.lang-ru { --display: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; --sans: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
.lang-ru main, .lang-ru .masthead, .lang-ru .drawer, .lang-ru .cc-banner, .lang-ru .cc-modal { font-family: var(--sans); }
.lang-ru main :is(h1, h2, h3, h4, .u-title, .u-phead__title) { font-family: var(--display); font-weight: 700; letter-spacing: 0; line-height: 1.12; }
.lang-ru .u-phead__title { font-weight: 700; }
.lang-ru .u-split .u-title { line-height: 1.1; }
.lang-ru :is(.u-icons__label, .u-mini-icons li, .u-stats__label, .u-step__title, .u-pcard__name, .u-faq__item summary, .u-project h3, .u-card h3) { font-family: var(--display); font-weight: 600; letter-spacing: 0; }
.lang-ru .masthead .mainnav .nav > li > a { font-family: var(--display); font-weight: 500; font-size: 14.5px; }
.lang-ru .btn { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; }
.lang-ru .footer, .lang-ru .footer * { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }
/* RU: WP's Open Sans is regular weight (only 400 was loaded); 4 icons per row */
.lang-ru main :is(h1, h2, h3, h4, .u-title, .u-phead__title) { font-weight: 500; hyphens: manual; }
.lang-ru :is(.u-icons__label, .u-mini-icons li, .u-stats__label, .u-step__title, .u-pcard__name, .u-faq__item summary, .u-project h3, .u-card h3) { font-weight: 400; hyphens: manual; overflow-wrap: normal; }
.lang-ru .masthead .mainnav .nav > li > a { font-weight: 400; }
.lang-ru .btn { font-weight: 400; }
@media (min-width: 900px) {
  .lang-ru .u-mini-icons { flex-wrap: nowrap; gap: 14px 4px; }
  .lang-ru .u-mini-icons li { width: auto; flex: 1 1 0; min-width: 0; font-size: 15px; }
  .lang-ru .u-mini-icons img { width: 96px; height: 96px; }
}
/* RU: long words must fit the text column without breaking */
.lang-ru main :is(.u-title, .u-phead__title) { overflow-wrap: normal; word-break: normal; }
.lang-ru .u-split .u-title { font-size: clamp(26px, 3.3vw, 48px); }
.lang-ru .u-title { font-size: clamp(28px, 3.8vw, 54px); }
@media (min-width: 900px) { .lang-ru .u-mini-icons li { font-size: 14.5px; line-height: 1.3; hyphens: auto; } }
@media (max-width: 899px) { .lang-ru .u-mini-icons li { font-size: 12.5px; width: 120px; } .lang-ru .u-icons__label { font-size: 14px; } }
@media (min-width: 900px) { .u-hero .u-hero__card { bottom: 56px !important; top: auto !important; right: 40px !important; } }
/* Smart Office card label, measured on the picture: the room's left wall top
   edge rises at 29.2deg from (33,90) in card px (picture 200px at 26,30).
   The label's baseline runs parallel, 6px above it, starting at the room's
   corner - in line with the wall and with the card's square corner. */
.u-hero .u-hero__card { padding: 30px 26px 20px !important; }
.u-hero__card img { width: 200px !important; }
.u-hero__card .u-hero__card-label { top: auto !important; left: 35px !important; bottom: calc(100% - 82px) !important; font: 700 12.5px/1 var(--display) !important; letter-spacing: .12em !important;
  transform: rotate(-29.2deg) !important; transform-origin: left bottom !important; white-space: nowrap; }
.lang-ru .u-hero__card .u-hero__card-label { font-weight: 600 !important; letter-spacing: .08em !important; }
/* hero scroll cue, exactly as WP's RevSlider button: 35x55 white outline,
   8px green dot (#549660) that drops 29% -> 50% and fades, 2.5s; clickable */
.u-hero__cue { width: 35px; height: 55px; margin-left: -17.5px; padding: 0; border: 3px solid #fff; border-radius: 23px; background: transparent; cursor: pointer; opacity: 1; bottom: 28px; transition: opacity .2s; }
.u-hero__cue:hover { opacity: .8; }
.u-hero__cue:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.u-hero__cue::after { display: none; }
.u-hero__cue span { position: absolute; left: 50%; top: 29%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #549660; animation: cueDot 2.5s linear infinite; }
@keyframes cueDot { 0% { opacity: 1; top: 29%; } 15% { opacity: 1; top: 50%; } 50% { opacity: 0; top: 50%; } 100% { opacity: 0; top: 29%; } }
@media (prefers-reduced-motion: reduce) { .u-hero__cue span { animation: none; } }
/* label up-left into the card corner (Egor), same 29.2deg */
.u-hero__card .u-hero__card-label { left: 19px !important; bottom: calc(100% - 66px) !important; }
.u-hero__card .u-hero__card-label { left: 11px !important; }
.u-hero__card .u-hero__card-label { left: 14px !important; bottom: calc(100% - 71px) !important; }
.u-hero__card .u-hero__card-label { left: 16px !important; bottom: calc(100% - 75px) !important; }