/* ============================================================
   FORTAN — Figma design (fortan-md, node 6071:94)
   Pixel-perfect implementation
   ============================================================ */

@font-face {
  font-family: 'Onest';
  src: url('../Onest/Onest-VariableFont_wght.woff2') format('woff2-variations'),
       url('../Onest/Onest-VariableFont_wght.woff2') format('woff2'),
       url('../Onest/Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Anchor scroll offset so sections don't land under the sticky header */
html { scroll-behavior: smooth; }
:target,
[id] { scroll-margin-top: 20px; }

/* Menu anchors land with the section title ~28px below the viewport top —
   the negative margins swallow each section's own top padding. The smart
   header hides itself during anchor scrolling (see script.js). */
#catalog  { scroll-margin-top: -36px; }
#about    { scroll-margin-top: -32px; }
#dealers  { scroll-margin-top: -52px; }
#contacts { scroll-margin-top: -20px; }

/* Screen-reader only utility (WordPress convention) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

:root {
  --red: #ab222e;
  --black: #15161a;
  --dark: #1f1f1f;
  --grey: #7d7d7d;
  --grey-mid: #5b5b5b;
  --grey-border: #d9d9d9;
  --light: #f7f7f7;
  --white: #ffffff;
  /* Layout scale — unified 1440 container.
     Everything visible (hero/category rows, delivery band, header) AND every
     inner content section (stats, products, advantages, footer columns) shares
     one 1440px max width. Narrower sections were widened from the old 1110px
     content column; nothing exceeds the 1440 cap. */
  --shell: 1440px;
  --content: 1440px;
  --gutter: 40px;
}

body {
  font-family: 'Onest', sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Tapping the +/− and "add to quote" buttons quickly was triggering the
   mobile double-tap-to-zoom gesture. touch-action: manipulation disables only
   that gesture on tap targets (pinch-zoom and scrolling still work). */
button,
a,
.qty__btn,
.product__plus,
.dot,
.hero__arrow { touch-action: manipulation; }

/* ============================================================
   SITE WRAPPER — Global constraint for all content
   ============================================================ */
.site-wrapper {
  width: 100%;
  background: var(--white);
}

/* ============================================================
   BOOTSTRAP GRID SYSTEM
   ============================================================ */
.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-fluid {
  width: 100%;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.row > * {
  padding: 0 15px;
}

/* Columns */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Small devices (≥576px) */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* XXL devices (≥1400px) */
@media (min-width: 1400px) {
  .col-xxl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* Flexbox utilities */
.d-flex { display: flex; }
.d-none { display: none; }
.d-block { display: block; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }

/* Spacing utilities */
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

.row.g-0 { margin: 0; }
.row.g-0 > * { padding: 0; }
.row.g-1 { margin: -0.125rem; }
.row.g-1 > * { padding: 0.125rem; }
.row.g-2 { margin: -0.25rem; }
.row.g-2 > * { padding: 0.25rem; }
.row.g-3 { margin: -0.5rem; }
.row.g-3 > * { padding: 0.5rem; }
.row.g-4 { margin: -0.75rem; }
.row.g-4 > * { padding: 0.75rem; }
.row.g-5 { margin: -1.5rem; }
.row.g-5 > * { padding: 1.5rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* ============================================================
   HEADER — 130px, Figma 6322:4 (Banner 1480×130)
   ============================================================ */
.header {
  background: var(--white);
  /* Smart sticky: stays in the flow, hides on scroll down, slides back on
     scroll up (class toggling in script.js). */
  position: sticky;
  top: 0;
  /* Above Leaflet's panes/controls (up to 1000), below the mobile menu
     (2000), call sheet (2100), FAB (9000) and modal (9999). */
  z-index: 1100;
  transition: transform .25s ease, box-shadow .25s ease;
}

.header--hidden { transform: translateY(-100%); }

/* Reappears at full height on scroll-up; only a subtle shadow distinguishes it. */
.header--stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  /* No space-between: leftover space is absorbed by the nav's auto margins,
     so the language switcher / cart / phone stay pinned to the right at the
     SAME position in every language (menu labels differ in width). */
  justify-content: flex-start;
  gap: 28px;
  height: 130px;
  /* Header content aligns with the shell (same width as the hero card) */
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.logo { display: flex; align-items: center; }
.logo__img { height: 36px; width: auto; }

.header__burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.header__burger span {
  display: block;
  height: 2px;
  background: var(--black);
}

/* Mobile fullscreen menu — Figma 6158:19795: red overlay, light logo +
   close button on top, centered white links, language row, outlined phone. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--red);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  overflow-y: auto;
}

.mobile-menu.is-open { opacity: 1; visibility: visible; }

body.menu-open { overflow: hidden; }
body.menu-open .fortan-fab { display: none; }

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  flex-shrink: 0;
}

/* The light logo has a red mark that disappears on the red overlay —
   render the whole logo white, as in the design. */
.mobile-menu__bar .logo__img { height: 26px; filter: brightness(0) invert(1); }

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 88px;
}

.mobile-menu__nav .nav__link {
  color: var(--white);
  font-size: 30px;
  font-weight: 800;
  line-height: 38px;
  padding: 0;
  border: none;
  border-radius: 0;
}

.mobile-menu__lang {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 68px;
}

.mobile-menu__lang a,
.mobile-menu__lang span {
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  line-height: 38px;
  text-transform: uppercase;
}

.mobile-menu__lang .is-current { opacity: .45; }

.mobile-menu__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 64px;
  margin-top: auto;
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-menu__phone:hover { background: rgba(255, 255, 255, 0.08); }

/* The menu only opens from the burger, which exists below 1024px. */
@media (min-width: 1025px) {
  .mobile-menu { display: none; }
}

/* Call sheet — opened by phone CTAs; number always visible (call /
   copy / WhatsApp), so a blocked repeated tel: launch is never a
   dead end. Bottom sheet on mobile, centered dialog on desktop. */
.call-sheet {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.call-sheet.is-open { opacity: 1; visibility: visible; }

/* While the sheet is open, the floating call button would sit on top of it. */
.call-sheet.is-open ~ .fortan-fab { display: none; }

.call-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.call-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  padding: 26px 24px 24px;
  border-radius: 14px 14px 0 0;
  transform: translateY(18px);
  transition: transform .22s ease;
}

.call-sheet.is-open .call-sheet__panel { transform: none; }

@media (min-width: 601px) {
  .call-sheet { align-items: center; padding: 0 20px; }
  .call-sheet__panel { border-radius: 0; }
}

.call-sheet__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
}

.call-sheet__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey);
  margin-bottom: 14px;
}

.call-sheet__number {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 6px;
  white-space: nowrap;
}

.call-sheet__number--alt {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey);
}

.call-sheet__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.call-sheet__copy {
  flex: 1;
  padding: 14px 10px;
  background: var(--white);
  border: 1px solid var(--grey-border);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
}

.call-sheet__copy.is-copied {
  border-color: #1d9e5f;
  color: #1d9e5f;
}

.call-sheet__wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background: #1d9e5f;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  /* Centers the menu and absorbs language-dependent width differences. */
  margin-left: auto;
  margin-right: auto;
}

.nav__link {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--black);
  text-transform: uppercase;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 0;
  line-height: 15px;
  transition: border-color 0.2s ease, border-radius 0.2s ease;
}

.nav__link:hover {
  border-color: var(--grey);
}

.nav__link--active {
  border-color: var(--red);
  border-radius: 0;
}

.btn-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  padding: 16px 24px;
  border-radius: 0;
  white-space: nowrap;
  transition: background .15s ease;
}
.btn-phone:hover { background: #8c1c26; }

/* ============================================================
   HERO — 720px, Figma 6071:246
   ============================================================ */
.hero {
  position: relative;
  background: #000 url('../img/cover.jpg') center right / cover no-repeat;
  color: var(--white);
  min-height: 580px;
  /* Hero is a centered card capped at the shell width, with 40px gutters
     on screens narrower than the shell. 580px keeps the design's 1840:720
     aspect at the 1440px shell. */
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--shell);
  margin: 0 auto;
  /* Per-slide background color is swapped by JS — fade it smoothly. */
  transition: background-color .5s ease;
}

.hero__inner {
  position: relative;
  min-height: 580px;
  /* Slides are stacked in one grid cell so the outgoing and incoming slide
     occupy the EXACT same box (absolute positioning ignored the container
     padding, making the text jump left during the cross-fade). */
  display: grid;
  align-items: center;
  /* Title block sits 60px from the hero's left edge and is vertically centred
     (Figma 6322:36 — heading at x=60.5, y=228.3 in a 1480×580 hero; 228.3 is
     exactly (580-123)/2). Equal top/bottom padding keeps align-items:center
     honest — the old 105/78 pair pushed the text ~14px low. */
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 60px;
  padding-right: 165px;
}

.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hero__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero__price {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 40px;
  margin-top: 8px;
  border-radius: 0;
  line-height: 1;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: none;
  border-radius: 0;
  font-size: 26px;
  cursor: pointer;
  z-index: 5;
  transition: background .2s;
}

.hero__arrow:hover { background: var(--red); }
.hero__arrow--prev { left: 0; }
.hero__arrow--next { right: 0; }

.hero__dots {
  position: absolute;
  bottom: 43px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 11px;
}

.dot {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px;
  min-width: 42px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background .25s;
}

.dot.is-active { background: var(--red); border-color: var(--red); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 25px 50px;
  border-radius: 0;
  border: none;
  transition: filter .15s;
}

.btn-red:hover { filter: brightness(1.08); }

.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--red);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 0;
  border: none;
  transition: filter .15s;
}

.btn-white:hover { filter: brightness(0.95); }

/* ============================================================
   CATEGORY CARDS — 600×600, Figma 6071:277
   ============================================================ */
.cats { padding: 20px 0 0; }

.cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Card row is flush with the hero card edges (shell width) */
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
}

.cat {
  position: relative;
  aspect-ratio: 1;
  max-height: 466px;
  padding: 28px 36px;
  display: block;
  overflow: hidden;
}

.cat--red   { background: var(--red); color: var(--white); }
.cat--grey  { background: #5b5b5b; color: var(--white); }
.cat--light { background: var(--light); color: var(--dark); }

.cat__title {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 600;
  line-height: 32px;
  text-transform: uppercase;
}

.cat__img {
  position: absolute;
  /* Design v2: the card image is the full Figma export INCLUDING the colored
     background — it covers the whole card; title and "+" overlay on top.
     The .cat--{color} background remains as fallback when no image is set. */
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.cat__plus {
  position: absolute;
  bottom: 32px;
  right: 31px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: none;
  border-radius: 0;
}

.cat__plus img { width: 12px; height: 12px; }

/* ============================================================
   STATS — Figma 6071:306 (exact values)
   ============================================================ */
.stats {
  background: var(--white);
  display: flex;
  justify-content: center;
  /* Design v2: 30px (@1920) between the category cards and the stats
     border — 24px at the 1440px shell. */
  margin-top: 54px;
}

.stats__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat__num {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
  text-transform: uppercase;
}

.stat__label {
  font-size: 19px;
  font-weight: 500;
  color: var(--grey);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 0;
  line-height: 30px;
}

/* ============================================================
   SECTION HEAD — Figma 6071:320
   ============================================================ */
.section-head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 20px;
  padding-top: 50px;
  border-top: 1px solid var(--grey-border);
}

.section-head__title {
  flex: 0 0 330px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  /* Figma renders section titles uppercase regardless of content casing */
  text-transform: uppercase;
}

.section-head__text {
  flex: 1;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.6;
  max-width: 743px;
  padding-top: 2px;
}

/* ============================================================
   PRODUCT GRID — Figma 6071:327
   ============================================================ */
/* 64px top padding = the design's gap between the stats border and the
   section-head border (83px @1920, scaled to the 1440px shell). */
.catalog { padding-top: 64px; padding-bottom: 60px; }

.catalog__grid-wrap {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 350px));
  /* Gap widened with the 1440 content column (cards grew ~261px → ~343px). */
  gap: 26px;
  justify-content: center;
}

.products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.product {
  position: relative;
  background: var(--light);
  border: 1px solid var(--grey-border);
  padding: 1px 1px 0;
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow .2s;
}

.product:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

.product__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--light);
}

.product__body {
  padding: 16px 56px 20px 20px;
  min-height: 79px;
}

.product__name {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 8px;
}

.product__spec {
  font-size: 11px;
  color: var(--grey);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
}

.product__price {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.product__plus {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--red);
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 2px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s, transform .15s;
}

.product__plus:hover { background: var(--red); }
.product__plus:hover img { filter: brightness(0) invert(1); }
.product__plus:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.product__plus img { width: 12px; height: 12px; pointer-events: none; }

.product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   DELIVERY BANNER — Figma 6071:484 (exact values)
   Background: #8b8b8b, text: WHITE
   ============================================================ */
.delivery { padding: 20px var(--gutter); }

.delivery__inner {
  position: relative;
  /* Design v2 (6129:7199): delivery is a rounded card on the CONTENT width
     (1480 @1920 -> 1110 at the shell), 534px tall -> 420px. */
  min-height: 420px;
  max-width: var(--content);
  margin: 0 auto;
  border-radius: 0;
  background: #8b8b8b center / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.delivery__text {
  position: relative;
  z-index: 2;
  color: var(--white);
  display: flex;
  flex-direction: column;
  /* flex-start keeps the CTA compact — stretch turned it into a full-width band */
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  max-width: 100%;
  margin: 0;
  padding: 47px 70px;
  min-height: 420px;
}

.delivery__copy {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.delivery__title {
  font-size: 38px;
  font-weight: 800;
  line-height: 44px;
  text-transform: uppercase;
  margin-bottom: 0;
  color: var(--white);
}

.delivery__sub {
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 0;
  font-weight: 400;
  color: var(--white);
}

.delivery__inner .btn-red {
  font-size: 16px;
  padding: 16px 32px;
}

/* ============================================================
   ADVANTAGES — Figma 6071:492
   ============================================================ */
.adv {
  padding: 60px 0 80px;
}

.adv__title {
  font-size: 28px;
  font-weight: 800;
  /* Figma 6071:494 — title renders uppercase */
  text-transform: uppercase;
  padding-top: 40px;
  margin-bottom: 10px;
  line-height: 1.1;
}

.adv__lead {
  color: var(--grey);
  font-size: 14px;
  max-width: 100%;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

.adv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 100px;
}

.adv__item {
  border-top: 1px solid var(--grey-border);
  /* Design v2 compacted the advantage cards (176px vs 239px @1920). */
  padding: 18px 0 24px;
}

.adv__num { color: var(--red); font-weight: 800; font-size: 14px; }
.adv__name { font-size: 16px; font-weight: 800; margin: 10px 0 8px; text-transform: uppercase; }
.adv__desc { color: var(--grey); font-size: 14px; line-height: 1.4; }

/* ============================================================
   AUDIENCE CARDS — Figma 6129:7283 ("Работаем с каждым")
   ============================================================ */
.aud__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}

.aud__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--grey-border);
  background: var(--white);
  padding: 36px 30px;
  min-height: 338px;
}

.aud__chip {
  display: inline-block;
  border: 1px solid var(--red);
  color: var(--red);
  background: #fdf6f6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 14px;
  margin-bottom: 22px;
}

.aud__card-title {
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: 14px;
}

.aud__card-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-mid);
  margin-bottom: 22px;
}

.aud__card-text p { margin: 0; }

.aud__cta {
  margin-top: auto;
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  transition: opacity .2s;
  /* CTA can render as <button> (opens the contact modal) — strip the
     browser's default button chrome so it looks like the design link. */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.aud__cta:hover { opacity: .75; }

@media (max-width: 1024px) {
  .aud__grid { grid-template-columns: 1fr; gap: 20px; }
  .aud__card { min-height: 0; }
}

/* ============================================================
   AUDIENCE ACCORDION — Figma 6071:610
   ============================================================ */
.aud { padding: 80px 0 60px; }

.aud__eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
  line-height: 12px;
}

.aud__title {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 36px;
  color: var(--dark);
}

.aud__sub {
  color: var(--grey);
  font-size: 15px;
  margin-bottom: 46px;
  max-width: 757px;
}

.accordion__item { border-top: 1px solid var(--grey-border); }
.accordion__item:last-child { border-bottom: 1px solid var(--grey-border); }

.accordion__head {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  font-size: 56px;
  font-weight: 700;
  color: var(--dark);
  padding: 26px 0;
  text-align: left;
  text-transform: uppercase;
  transition: color .2s;
  line-height: 1;
  min-height: 104px;
}

.accordion__head:hover,
.accordion__item.is-open .accordion__head { color: var(--dark); }

.accordion__icon {
  flex-shrink: 0;
  width: 54px;
  height: 40px;
  border: 2px solid var(--red);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.accordion__icon img {
  width: 18px;
  height: 18px;
  transition: transform .25s;
}

.accordion__item.is-open .accordion__icon img { transform: rotate(90deg); }

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  color: var(--grey);
  font-size: 15px;
}

.accordion__item.is-open .accordion__body { max-height: 200px; padding-bottom: 24px; }

/* ============================================================
   PARTNERS — Figma 6071:660
   ============================================================ */
/* Partners — slow, seamless, full-width logo marquee (designer request).
   The track holds two identical groups; translating it by -50% loops with no
   jump. Pauses on hover and respects reduced-motion. */
.partners { overflow: hidden; }

.partners__viewport {
  width: 100%;
  overflow: hidden;
}

.partners__track {
  display: flex;
  width: max-content;
  animation: partners-marquee 45s linear infinite;
}

.partners:hover .partners__track { animation-play-state: paused; }

/* Second row exists only for the mobile two-row carousel. */
.partners__track--b { display: none; }

.partners__group {
  display: flex;
  flex: 0 0 auto;
}

/* Square cells matching the design (Figma 6129:7258 — ~273×272 at 1920). */
.partners__logo {
  flex: 0 0 auto;
  width: 245px;
  height: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8bbc0;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  border: 1px solid var(--grey-border);
  margin-left: -1px;
}

.partners__logo img {
  max-width: 56%;
  max-height: 92px;
  object-fit: contain;
}

@keyframes partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes partners-marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

/* ============================================================
   FOOTER — Design v2 (Figma 6129:7345)
   Logo, four real-contact columns, requisites band, copyright bar.
   ============================================================ */
.footer { background: #000; color: #9e9e9e; margin-top: 0; }

.footer__logo-bar {
  /* Logo on the left, primary nav on the right (Figma footer).
     Side gutters come from .container so they survive on mobile. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid #3a3a3a;
}

.footer__logo-bar .logo__img { height: 36px; }
.footer__nav {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.footer__nav .nav__link {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0;
  border: none;
}
.footer__nav .nav__link:hover,
.footer__nav .nav__link--active {
  color: var(--red);
  border: none;
}
@media (max-width: 768px) {
  .footer__nav { display: none; }
}

/* Contacts spread edge-to-edge (Figma 6129:7348): content-width columns with
   the address widest (wraps to two lines), Email pinned to the right. */
.footer__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-top: 44px;
  padding-bottom: 56px;
  /* Bottom divider — contacts sit between two lines (Figma 6129:7347),
     the top one being the logo-bar border. */
  border-bottom: 1px solid #2c2c2c;
}

.footer__col { flex: 0 0 auto; }
.footer__col:first-child { flex: 0 1 300px; }

/* Column headings — sentence case, regular weight, light grey
   (Figma 6129:7346: heading ~#b4b4b4, NOT uppercase/bold/white). */
.footer__h {
  color: #b6b6b6;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.footer__col p,
.footer__col a {
  display: block;
  color: #7c7c7c;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.footer__col a:hover { color: var(--white); }

.footer__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 220px;
  font-size: 14px;
  line-height: 1.7;
  color: #7c7c7c;
}

.footer__hours-row span:last-child { color: #cfcfcf; }

/* Requisites — a contained highlighted card on the black footer, NOT a
   full-width band (Figma 6129:7371: the #161616 card sits at content width). */
.footer__req {
  padding-top: 44px;
  padding-bottom: 44px;
}

.footer__req-inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  background: #161616;
  border-radius: 0;
  padding: 28px 36px;
}

.footer__req-label {
  flex: 0 0 auto;
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 2px;
}

/* Three two-row columns, spread across the band (Figma 6129:7371). */
.footer__req-groups {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 40px 90px;
  flex-wrap: wrap;
}

.footer__req-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__req-row {
  display: flex;
  gap: 30px;
  font-size: 12px;
  line-height: 1.7;
}

/* Label white, value grey — matching the design. */
.footer__req-key {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.footer__req-val { color: #8a8a8a; }

/* Tablet footer (Figma 6158:18238): single-column contacts in the order
   Address / Hours / Email / Phones, and single-column inline requisites. */
@media (max-width: 768px) {
  /* Single stacked column on tablet/mobile. */
  .footer .footer__grid { flex-direction: column; gap: 32px; }
  .footer__col:first-child { flex-basis: auto; }
  .footer__col:nth-child(2) { order: 4; } /* phones last */
  .footer__col:nth-child(3) { order: 2; } /* hours */
  .footer__col:nth-child(4) { order: 3; } /* email */

  .footer__req-inner { flex-direction: column; gap: 14px; }
  .footer__req-groups { flex-direction: column; gap: 10px; }
  .footer__req-col { gap: 10px; }
}

/* Mobile footer (Figma 6158:16335): requisites stack label-over-value,
   copyright centred on two lines. */
@media (max-width: 600px) {
  .footer__req-col { gap: 16px; }
  .footer__req-row { flex-direction: column; gap: 3px; }

  .footer__bottom .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

.footer__bottom {
  background: var(--red);
  padding: 16px 0;
  font-size: 11px;
  color: #ffd9dc;
  letter-spacing: 0.3px;
}

.footer__bottom .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__bottom a { color: #fff; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp { padding: 40px 0 60px; }

.pdp__top { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }

.pdp__main-img {
  background: var(--light) center/contain no-repeat;
  border-radius: 0;
  aspect-ratio: 1/1;
  border: 1px solid var(--grey-border);
}

/* Gallery — Figma 6289:4106: the additional product images stack vertically
   below the main image at the same large size (not small thumbnail chips),
   each in its own bordered light frame. Click swaps the main image (script.js). */
.pdp__gallery { display: flex; flex-direction: column; gap: 16px; }

.pdp__thumbs { display: flex; flex-direction: column; gap: 16px; margin: 0; }

.pdp__thumb {
  border: 1px solid var(--grey-border);
  background: var(--light);
  cursor: pointer;
  transition: border-color .15s;
}

.pdp__thumb:hover,
.pdp__thumb.is-active { border-color: var(--red); }

.pdp__thumb img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
}

.pdp__title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pdp__price {
  font-size: 16px;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pdp__reviews { font-size: 13px; color: var(--grey); margin-bottom: 18px; }
.pdp__desc { color: var(--grey); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }

.pdp__buy { display: flex; gap: 14px; align-items: stretch; margin-bottom: 16px; }

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--grey-border);
  border-radius: 0;
  overflow: hidden;
}

.qty__btn {
  width: 44px;
  min-height: 50px;
  background: var(--light);
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.qty__val {
  width: 54px;
  text-align: center;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.pdp__add {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  padding: 16px 34px;
}

.specs { width: 100%; max-width: 320px; border-collapse: collapse; margin-top: 8px; }
.specs td { padding: 9px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.specs td:first-child { color: var(--grey); }
.specs td:last-child { text-align: right; font-weight: 700; }

.consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--red);
  color: var(--white);
  border-radius: 0;
  overflow: hidden;
  margin: 50px 0;
}

.consult__text { padding: 50px 44px; }
.consult__title { font-size: 36px; font-weight: 800; line-height: 1.05; text-transform: none; }
.consult__sub { font-size: 14px; margin: 16px 0 26px; opacity: .92; }
.consult__img { background: rgba(0,0,0,0.18) center/cover no-repeat; min-height: 240px; }

.related { padding-bottom: 60px; }


/* Full-section background image with a red gradient over the left so the
   text stays readable while the image shows on the right. */
.consult--home {
  position: relative;
  background-color: var(--red);
  background-image: var(--bg-d);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  overflow: hidden;
  min-height: 345px;
}


.consult--home .consult__text {
  position: relative;
  z-index: 1;
  /* max-width: 56%; */
  color: var(--white);
  padding: 47px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.consult--home .consult__title {
  font-size: 38px;
  line-height: 44px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.consult--home .consult__sub {
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 28px;
  opacity: .92;
}

/* Responsive background images (desktop / tablet / mobile) for the consult and
   delivery banners. The template sets --bg-d / --bg-t / --bg-m inline; tablet
   and mobile fall back to desktop when not provided. (Consult sets its own
   desktop image in the .consult--home rule above.) */
.delivery__inner--responsive { background-image: var(--bg-d); }

@media (max-width: 1024px) {
  .consult--home,
  .delivery__inner--responsive { background-image: var(--bg-t, var(--bg-d)); }
}

@media (max-width: 600px) {
  .consult--home,
  .delivery__inner--responsive { background-image: var(--bg-m, var(--bg-t, var(--bg-d))); }
  .consult--home {
    height: 624px;
  }

  .delivery__inner { min-height: 624px; }
  .consult__text {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .consult--home .consult__text {
     padding: 32px 24px;
      position: relative;
    z-index: 1;
    color: var(--white);
    display: block; 
    max-width: 68%;
  }
  .consult--home .consult__title { font-size: 28px; line-height: 32px; }


}

/* ============================================================
   TECHNOLOGY — Figma 6129:7207
   Four features with icons (left) + brick comparison card (right).
   ============================================================ */
.tech { padding: 70px 0 60px; }

.section-head--stacked {
  display: block;
  padding-top: 40px;
  margin-bottom: 36px;
}

.tech__title {
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 10px;
}

.tech__lead {
  color: var(--grey);
  font-size: 14px;
}

.tech__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
  gap: 56px;
  align-items: start;
}

.tech__features {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.tech__feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.tech__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--red);
  color: var(--red);
  background: #fdf6f6;
}

.tech__icon svg { width: 20px; height: 20px; }

.tech__feature-title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tech__feature-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey-mid);
  max-width: 520px;
}

.tech__compare {
  background: var(--light);
  padding: 36px 30px;
}

.tech__compare-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 18px;
}

.tech__table {
  width: 100%;
  border-collapse: collapse;
}

.tech__table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-border);
  font-size: 13px;
  color: var(--grey-mid);
}

.tech__table tr:last-child td { border-bottom: none; }

.tech__table td:last-child {
  text-align: right;
  /* Design v2 highlights the values in green */
  color: #1d9e5f;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.3px;
}

@media (max-width: 1024px) {
  .tech__layout { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  /* Tablet/mobile designs (Figma 6129:14974, 6158:15936) drop the category
     cards entirely — the hero leads straight into the stats. */
  .cats { display: none; }

  /* Hero is full-bleed on tablet and mobile. */
  .hero { width: 100%; max-width: none; }

  .tech__title { font-size: 26px; }
  .tech__compare { padding: 26px 20px; }
  .delivery__text { padding: 32px 24px; min-height: 0; display: block;}
  .delivery__title { font-size: 30px; line-height: 36px; }
  .fortan-modal__box { padding: 32px 22px 26px; }

  .delivery__copy { margin-bottom: 32px;}
}

/* ============================================================
   DEFAULT PAGE (legal/info pages)
   ============================================================ */
.page-content { padding: 56px 0 80px; }

.page-content__title {
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 28px;
  max-width: 800px;
}

.page-content__body {
  max-width: 800px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey-mid);
}

.page-content__body h2 {
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark);
  margin: 34px 0 12px;
}

.page-content__body p { margin-bottom: 14px; }

.page-content__body ul {
  margin: 0 0 14px 18px;
  list-style: disc;
}

.page-content__body li { margin-bottom: 6px; }

.page-content__body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   CONTACT MODAL — opened by the audience-card CTAs
   Styled after design v2: white card, red accents, uppercase labels.
   ============================================================ */
.fortan-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fortan-modal.is-open { display: flex; }

.fortan-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 22, 26, .62);
}

.fortan-modal__box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  padding: 40px 38px 34px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}

.fortan-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  transition: color .15s;
}

.fortan-modal__close:hover { color: var(--dark); }

.fortan-cform__title {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fortan-cform__sub {
  font-size: 13px;
  color: var(--grey-mid);
  margin-bottom: 22px;
}

.fortan-modal .wpcf7 label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--grey-mid);
  margin-bottom: 14px;
}

.fortan-modal .wpcf7 input[type="text"],
.fortan-modal .wpcf7 input[type="tel"],
.fortan-modal .wpcf7 select,
.fortan-modal .wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--grey-border);
  background: var(--light);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dark);
}

.fortan-modal .wpcf7 input:focus,
.fortan-modal .wpcf7 select:focus,
.fortan-modal .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--white);
}

.fortan-modal .wpcf7 textarea { min-height: 110px; resize: vertical; }

.fortan-modal .wpcf7 input[type="submit"] {
  width: 100%;
  border: none;
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background .15s;
}

.fortan-modal .wpcf7 input[type="submit"]:hover { background: #8a1c26; }

.fortan-modal .wpcf7-not-valid-tip { font-size: 11px; text-transform: none; letter-spacing: 0; }
.fortan-modal .wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; }

body.fortan-modal-open { overflow: hidden; }

/* ============================================================
   SECTION VISIBILITY — Customizer "Section Visibility (mobile & tablet)"
   Hidden sections disappear on tablet too (≤1024px), not just phones.
   ============================================================ */
@media (max-width: 1024px) {
  .fortan-hide-mobile { display: none !important; }
}

/* ============================================================
   iOS INPUT ZOOM FIX — Safari auto-zooms the page when a focused
   field's font-size is under 16px. Force 16px on touch-size screens
   so the zoom never triggers (script.js adds a viewport belt-and-braces
   for plugin-rendered fields).
   ============================================================ */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea,
  .qty__val,
  .quote-cart__item-input,
  .search-form input {
    font-size: 16px !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Base desktop styles are already sized for the 1440px shell —
   the next step down is 1200px. */
@media (max-width: 1200px) {
  .hero__inner { padding-right: 80px; }
  .hero__title { font-size: 52px; line-height: 52px; }
  .hero__price { font-size: 34px; }
  .delivery__title { font-size: 52px; line-height: 58px; }
  .accordion__head { font-size: 44px; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv__grid { gap: 0 40px; }
  .delivery__text { padding-top: 48px; padding-bottom: 48px; }
  .showcase__card { min-height: 360px; }
}

@media (max-width: 1024px) {
  .header__inner {
    height: auto;
    min-height: 72px;
    padding: 14px var(--gutter);
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Tablet/mobile header (Figma 6158:17504 / 6158:19796): logo left,
     cart + burger right. Nav, language and phone move into the
     fullscreen menu. */
  .header__burger { display: flex; }
  .header__cart { margin-left: auto; }
  .nav,
  .header__inner > .lang-dd,
  .header__inner > .btn-phone { display: none; }

  /* Figma 6322:894 — tablet hero is 768×1040 (portrait block photo). */
  .hero { min-height: 1040px; }
  /* Figma 6322:897 — tablet heading sits at x=88, y=165.7 from the hero's top
     (not centred like desktop), so anchor to the top instead. */
  .hero__inner { min-height: 1040px; align-items: start; padding: 166px 40px 88px 88px; }
  .hero__title { font-size: 48px; line-height: 48px; }
  .hero__price { font-size: 32px; padding: 10px 28px; }
  .hero__slide { left: 0; right: 0; }
  .hero__arrow--prev { left: 0; }
  .hero__arrow--next { right: 0; }

  .cats__grid { grid-template-columns: 1fr; }
  .cat { max-height: none; min-height: 280px; }

  .stats__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 40px;
  }

  .stat { flex: 0 1 calc(50% - 20px); }

  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .section-head__title { flex: none; font-size: 32px; }

  /* .delivery__inner { min-height: 520px; } */
  .delivery__text { padding-top: 48px; padding-bottom: 32px; gap: 40px; }
  .delivery__title { font-size: 48px; line-height: 52px; }

  .adv__grid { grid-template-columns: 1fr; gap: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__mid { grid-template-columns: 1fr; margin-top: 48px; padding-top: 48px; }
  .footer__logo-bar { padding-top: 64px; padding-bottom: 32px; }

  /* Tablet PDP (Figma 6158:17503): image full-width on top, then
     description + buy button on the left, specs on the right. */
  .pdp__top { grid-template-columns: 1fr; }
  .pdp__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    grid-template-areas:
      "title title"
      "price price"
      "desc  specs"
      "buy   specs";
    align-items: start;
  }
  .pdp__title { grid-area: title; }
  .pdp__price { grid-area: price; }
  .pdp__desc  { grid-area: desc; }
  .pdp__buy   { grid-area: buy; align-self: end; }
  .pdp__info .specs { grid-area: specs; margin-top: 0; max-width: none; }
  .consult { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }

  .btn-phone { font-size: 12px; padding: 10px 12px; }

  /* Mobile design (Figma 6158:15936): centered hero text, no arrows. */
  .hero { min-height: 480px; }
  /* Figma 6322:447 — mobile heading at y=84 from the hero's top, roughly
     centred horizontally (x=53 of 390). */
  .hero__inner { min-height: 480px; align-items: start; padding: 84px 20px 100px; text-align: center; }
  .hero__title { font-size: 36px; line-height: 36px; }
  .hero__price { font-size: 24px; }
  .hero__arrow { display: none; }
  .hero__dots { gap: 8px; }
  .dot { min-width: 36px; height: 32px; font-size: 11px; }

  /* 2×2 stats grid, centered (mobile design) */
  .stat { text-align: center; }
  .stat__num { font-size: 42px; }
  .stat__label { font-size: 14px; line-height: 1.4; }

  .products,
  .products--4 { grid-template-columns: 1fr; }

  .delivery__title { font-size: 36px; line-height: 40px; }
  .delivery__inner .btn-red { font-size: 18px; padding: 18px 28px; }

  .adv__title { font-size: 28px; }
  .aud__title { font-size: 28px; }
  .accordion__head { font-size: 32px; padding: 24px 0; }
  .accordion__icon { width: 48px; height: 40px; }

  /* Partners on mobile: two scrolling rows (designer request "in 2 randuri"),
     the second row sliding the opposite way. Smaller cells than desktop. */
  .partners__track--b { display: flex; animation: partners-marquee-rev 28s linear infinite; }
  .partners__track--a { animation-duration: 28s; }
  .partners__logo { width: 150px; height: 150px; }
  .partners__logo img { max-height: 60px; max-width: 60%; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__logo-bar { padding-top: 48px; padding-bottom: 24px; }

  /* Mobile PDP (Figma 6158:16842): everything in a single column. */
  .pdp__info { display: block; }
  .pdp__info .specs { max-width: none; }
  .pdp__title { font-size: 28px; }
  .pdp__buy { flex-direction: column; }
  /* Quantity stepper: full-width box, but the − 1 + controls centred. */
  .qty { width: 100%; justify-content: center; }
  .qty__val { width: 80px; flex: none; }
  .consult__title { font-size: 28px; }
}


/* ============================================================
   CART & QUOTE PAGE STYLES
   ============================================================ */

/* Header Cart Icon */
.header__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  transition: color .2s;
}

.header__cart:hover { color: var(--red); }

.header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notification Toast */
.fortan-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--dark);
  color: var(--white);
  padding: 16px 32px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: transform .3s, opacity .3s;
  z-index: 9999;
}

.fortan-notification.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Add to Quote Button States — green success flash after adding */
.btn-add-to-quote.is-added,
.product__plus.is-added {
  background: var(--red);
  color: var(--white);
  pointer-events: none;
}

.product__plus.is-added img { filter: brightness(0) invert(1); }

/* Quote Page */
.quote-page { padding: 120px 0 80px; }

.quote-page__content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  margin-top: 48px;
}

.quote-page__back {
  margin-top: 48px;
  text-align: center;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border: 2px solid var(--grey-border);
  color: var(--dark);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: border-color .2s, color .2s;
}

.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Quote Cart */
.quote-cart__loading {
  padding: 40px;
  text-align: center;
  color: var(--grey);
}

.quote-cart__empty {
  padding: 60px 40px;
  text-align: center;
  background: var(--grey-bg);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.quote-cart__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--grey-border);
}

.quote-cart__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--white);
}

.quote-cart__item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quote-cart__item-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
}

.quote-cart__item-price {
  font-size: 14px;
  color: var(--grey);
}

.quote-cart__item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-cart__item-input {
  width: 60px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--grey-border);
  font-size: 14px;
  font-weight: 600;
}

.quote-cart__item-input::-webkit-outer-spin-button,
.quote-cart__item-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quote-cart__item-unit {
  font-size: 14px;
  color: var(--grey);
  min-width: 32px;
}

.quote-cart__item-remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--grey);
  cursor: pointer;
  transition: color .2s;
}

.quote-cart__item-remove:hover { color: var(--red); }

.quote-cart__summary {
  padding: 20px;
  background: var(--grey-bg);
  margin-top: 1px;
}

.quote-cart__total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.quote-cart__total strong {
  font-weight: 700;
  color: var(--dark);
}

/* Quote Form */
.quote-page__form {
  position: sticky;
  top: 100px;
}

.quote-page__form-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

.quote-page__form-notice {
  padding: 24px;
  background: var(--grey-bg);
  text-align: center;
}

.quote-page__form-notice pre {
  text-align: left;
  font-size: 12px;
  margin-top: 16px;
  background: var(--dark);
  color: var(--white);
  padding: 16px;
  overflow-x: auto;
}

/* Contact Form 7 Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--grey-border);
  font-family: inherit;
  font-size: 16px;
  transition: border-color .2s;
}

/* The client-type dropdown matches the inputs, with a custom arrow. */
.wpcf7 select {
  background-color: #fff;
  color: var(--dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%206%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23999%27%20stroke-width%3D%271.5%27%20d%3D%27M1%201l4%204%204-4%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  padding-right: 44px;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--red);
}

.wpcf7 textarea { min-height: 120px; resize: vertical; }

.wpcf7 p { margin-bottom: 16px; }

.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 18px 32px;
  background: var(--red);
  color: var(--white);
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter .15s;
}

.wpcf7 input[type="submit"]:hover { filter: brightness(1.1); }

.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  font-size: 14px;
}

/* Language Switcher */
/* Language dropdown — fixed-width trigger (language code only) so the
   header layout never shifts between languages. */
.lang-dd {
  position: relative;
}

.lang-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--black);
  cursor: pointer;
  transition: border-color .2s;
}

.lang-dd__btn:hover { border-color: var(--grey-border); }

.lang-dd__chevron { transition: transform .2s; }
.lang-dd.is-open .lang-dd__chevron { transform: rotate(180deg); }

.lang-dd__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--grey-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 200;
}

.lang-dd.is-open .lang-dd__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dd__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--dark);
  text-decoration: none;
  transition: background .15s;
}

.lang-dd__list a:hover { background: var(--light); }

.lang-dd__list a strong {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.lang-dd__list a span { color: var(--grey); font-size: 12px; }

@media (max-width: 1024px) {
  .quote-page__content {
    grid-template-columns: 1fr;
  }

  .quote-page__form {
    position: static;
  }
}

@media (max-width: 480px) {
  .quote-cart__item {
    flex-wrap: wrap;
  }

  .quote-cart__item-info {
    flex: 1 1 100%;
    margin-bottom: 12px;
  }

  .quote-cart__item-qty {
    flex: 1;
  }
}

/* ============================================================
   ARCHIVE (catalog) + breadcrumbs
   ============================================================ */
.archive { padding: 120px 0 80px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--grey);
  text-decoration: none;
}

.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs__sep { color: var(--grey-border); }

.archive__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-top: 32px;
}

.archive__sidebar-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 16px;
}

.archive__cats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive__cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-border);
  font-size: 14px;
  transition: color .15s;
}

.archive__cat:hover,
.archive__cat.is-active { color: var(--red); }

.archive__cat-count {
  color: var(--grey);
  font-size: 12px;
}

.archive__main .products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.archive__pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--grey-border);
  color: var(--dark);
  text-decoration: none;
  padding: 0 12px;
  transition: all .15s;
}

.archive__pagination .page-numbers.current,
.archive__pagination .page-numbers:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.archive__empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--grey);
  font-size: 16px;
}

@media (max-width: 768px) {
  .archive__layout {
    grid-template-columns: 1fr;
  }
  .archive__main .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Quote cart enhancements */
.quote-cart__item-img {
  width: 64px;
  height: 64px;
  background: var(--light) center/cover no-repeat;
  border-radius: 6px;
  flex-shrink: 0;
}

.quote-cart__item-sum {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
}

.quote-cart__total--grand strong {
  color: var(--red);
  font-size: 20px;
}

.quote-cart__note {
  font-size: 12px;
  color: var(--grey);
  margin-top: 8px;
}

.fortan-notification__link {
  color: var(--white);
  text-decoration: underline;
  margin-left: 12px;
  font-weight: 600;
}

/* Footer newsletter feedback */
.footer__form-msg {
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
}

/* ============================================================
   404 / SEARCH / PROJECTS
   ============================================================ */
.not-found,
.search-results,
.projects-archive,
.project { padding: 120px 0 80px; }

.not-found__head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}

.not-found__title {
  font-size: 120px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 8px;
}

.not-found__sub {
  font-size: 28px;
  margin-bottom: 16px;
}

.not-found__text {
  color: var(--grey);
  margin-bottom: 24px;
}

.not-found__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.not-found__search,
.search-form {
  display: flex;
  border: 2px solid var(--grey-border);
  border-radius: 6px;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}

.not-found__search input,
.search-form input {
  flex: 1;
  border: 0;
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
  font-family: inherit;
}

.not-found__search button,
.search-form button {
  background: var(--red);
  color: var(--white);
  border: 0;
  padding: 0 22px;
  font-size: 20px;
  cursor: pointer;
}

.not-found__suggestions {
  margin-top: 60px;
}

.not-found__suggestions h3 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 20px;
}

.search__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.search__result {
  padding: 20px;
  border: 1px solid var(--grey-border);
  border-radius: 8px;
}

.search__result h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.search__result h2 a {
  color: var(--dark);
}

.search__result h2 a:hover {
  color: var(--red);
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.project-card {
  display: block;
  border: 1px solid var(--grey-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.project-card__img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.project-card__body { padding: 16px; }
.project-card__title { font-size: 18px; margin-bottom: 6px; }
.project-card__meta {
  display: flex;
  gap: 12px;
  color: var(--grey);
  font-size: 13px;
}

.project__head { margin-bottom: 24px; }
.project__hero img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; }
.project__content { margin: 24px 0; line-height: 1.7; }
.project__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.project__gallery-img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }

@media (max-width: 768px) {
  .projects__grid,
  .project__gallery {
    grid-template-columns: 1fr;
  }
  .not-found__title { font-size: 80px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__item {
  border-bottom: 1px solid var(--grey-border);
}
.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-size: 17px;
  font-weight: 600;
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq__a {
  display: none;
  padding: 0 0 20px;
  color: var(--grey-mid);
  line-height: 1.6;
}
.faq__item.is-open .faq__a { display: block; }
.faq__item.is-open .faq__q span { transform: rotate(45deg); }
.faq__q span { transition: transform .2s; }

/* ============================================================
   LOCATIONS (map + list)
   ============================================================ */
.locations { background: var(--light); }

/* Design v2 (6129:7313): zone chips above a full-width monochrome map. */
.locations__zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.locations__zone {
  border: 1px solid var(--grey-border);
  background: var(--white);
  color: var(--grey-mid);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: all .15s;
}

.locations__zone:hover { border-color: var(--grey); color: var(--dark); }

.locations__zone.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.fortan-pin { background: none; border: none; }

.locations__map {
  height: 480px;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #e8e8e8;
}

.locations__map--wide { height: 500px; }


@media (max-width: 768px) {
  .locations__map,
  .locations__map--wide {
    height: 360px;
  }
}

/* ============================================================
   STICKY MOBILE CTA (call + WhatsApp)
   ============================================================ */
.fortan-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 9000;
}

.fortan-fab__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .15s;
}

.fortan-fab__btn:hover { transform: scale(1.08); }
.fortan-fab__btn--call { background: var(--red); }
.fortan-fab__btn--wa { background: #25d366; }

@media (max-width: 1024px) {
  .fortan-fab {
    display: flex;
  }
  /* Lift FAB so it doesn't overlap typical CTAs at the bottom of the viewport */
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ============================================================
   Product category — image, SEO text & FAQ (taxonomy archive)
   ============================================================ */
.archive__cat-image {
  margin: 0 0 28px;
}
.archive__cat-image img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.archive__seo {
  max-width: var(--content);
  margin: 0 0 36px;
  color: #4a4a4a;
  font-size: 16px;
  line-height: 1.7;
}
.archive__seo h2 { font-size: 24px; line-height: 1.3; margin: 26px 0 12px; color: #161616; }
.archive__seo h3 { font-size: 19px; line-height: 1.3; margin: 22px 0 10px; color: #161616; }
.archive__seo p { margin: 0 0 14px; }
.archive__seo ul,
.archive__seo ol { margin: 0 0 14px; padding-left: 20px; }
.archive__seo li { margin-bottom: 6px; }
.archive__seo a { color: var(--red); text-decoration: underline; }

.cat-faq {
  max-width: var(--content);
  margin: 52px auto 0;
}
.cat-faq__title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #161616;
}
.cat-faq__item {
  border-bottom: 1px solid #e6e6e6;
  padding: 18px 0;
}
.cat-faq__q {
  position: relative;
  padding-right: 34px;
  font-size: 17px;
  font-weight: 600;
  color: #161616;
  cursor: pointer;
  list-style: none;
}
.cat-faq__q::-webkit-details-marker { display: none; }
.cat-faq__q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 24px;
  line-height: 1;
  color: var(--red);
}
.cat-faq__item[open] .cat-faq__q::after { content: '\2212'; }
.cat-faq__a {
  padding-top: 12px;
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}
.cat-faq__a p { margin: 0 0 10px; }

/* ============================================================
   Blog — archive grid, post card & single post
   ============================================================ */
.blog { padding: 44px 0 80px; }
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.blog-card {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.blog-card__link { display: block; color: inherit; text-decoration: none; }
.blog-card__img {
  aspect-ratio: 16 / 10;
  background: #d9d9d9 center / cover no-repeat;
}
.blog-card__img--empty { background: #ececec; }
.blog-card__body { padding: 18px 20px 22px; }
.blog-card__date { font-size: 13px; color: #999; }
.blog-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 8px 0 10px;
  color: #161616;
}
.blog-card__excerpt { font-size: 14px; line-height: 1.6; color: #666; margin: 0; }
.blog-card__more { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 600; font-size: 14px; }

.post-single { padding: 40px 0 80px; }
.container--narrow { max-width: calc(var(--content) + 2 * var(--gutter)); }
.post__title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  margin: 14px 0 12px;
  color: #161616;
}
.post__meta { font-size: 14px; color: #999; margin-bottom: 26px; }
.post__meta-sep { margin: 0 6px; }
.post__hero { margin: 0 0 30px; }
.post__hero img { width: 100%; height: auto; border-radius: 12px; display: block; }
.post__body { font-size: 17px; line-height: 1.8; }
.post-related {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid #eaeaea;
}
.post-related__title {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #161616;
}

@media (max-width: 900px) {
  .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blog__grid { grid-template-columns: 1fr; }
  .post__title { font-size: 28px; }
}

/* ============================================================
   Footer legal links row (managed "Footer" menu)
   ============================================================ */
.footer__legal {
  border-top: 1px solid #2c2c2c;
}
.footer__legal .container {
  padding-top: 26px;
  padding-bottom: 26px;
}
.footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__legal-list a {
  color: #cfcfcf;
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease;
}
.footer__legal-list a:hover { color: var(--red); }
.footer__legal-list li:last-child a { color: var(--red); }
@media (max-width: 600px) {
  .footer__legal-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   Certificate lightbox
   ============================================================ */
.cert-lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.cert-lb[hidden] { display: none; }
.cert-lb__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
}
.cert-lb__stage {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-lb__img {
  display: none;
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.cert-lb__img.is-active { display: block; }
.cert-lb__close {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
}
.cert-lb__close:hover { opacity: 1; }
.cert-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-lb__nav:hover { background: rgba(255, 255, 255, .26); }
.cert-lb__prev { left: 24px; }
.cert-lb__next { right: 24px; }
@media (max-width: 600px) {
  .cert-lb { padding: 16px; }
  .cert-lb__nav { width: 44px; height: 44px; font-size: 28px; }
  .cert-lb__prev { left: 8px; }
  .cert-lb__next { right: 8px; }
}

.footer__credit-link {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.footer__credit-link:hover { text-decoration: underline; }