/* ==========================================================================
   Design Tints — clean HTML5 / CSS / BEM rebuild
   Every element in the markup carries exactly one BEM class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face { font-family: 'GT Walsheim Pro'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/gt-walsheim-pro-400.woff2') format('woff2'); }
@font-face { font-family: 'GT Walsheim Pro'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/gt-walsheim-pro-500.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/public-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/public-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/public-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/public-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/roboto-600.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-slab-400.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --font-heading: 'GT Walsheim Pro', 'Public Sans', Arial, sans-serif;
  --font-body: 'Public Sans', Arial, sans-serif;
  --font-alt: 'Roboto', Arial, sans-serif;

  --color-dark: #2c2c2c;        /* primary dark (header, footer, dark sections) */
  --color-accent: #d2ef00;      /* lime yellow */
  --color-heading: #0a1119;
  --color-heading-2: #121c27;
  --color-text: #4b535d;
  --color-text-light: #c4c4c4;
  --color-muted: #848b94;
  --color-grey: #8d9295;
  --color-white: #fff;
  --color-bg: #f5f5f5;
  --color-bg-grey: #e7e7e7;
  --color-border: #d3d5d6;
  --color-border-2: #d2d4d5;
  --color-navy: #121c27;

  --container: 1650px;
  --container-narrow: 1320px;
  --gutter: 15px;

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition: 0.25s var(--ease);
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-locked="true"] { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 500; color: var(--color-heading); line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site { position: relative; overflow: clip; }
.main { position: relative; }

/* --------------------------------------------------------------------------
   4. Shared building blocks
   -------------------------------------------------------------------------- */

/* pill button (letter hover animation added by JS: .btn__char) */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 35px;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 50px;
  font-weight: 400;
  color: var(--color-dark);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  overflow: hidden;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}
.btn:hover { background: var(--color-dark); color: var(--color-white); }
.btn__text { position: relative; display: inline-block; }
.btn__text::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 0.2s cubic-bezier(0.75, 0, 0.125, 1), opacity 0.2s;
}
.btn__char { display: inline-block; transition: transform 0.2s cubic-bezier(0.75, 0, 0.125, 1), opacity 0.2s; white-space: pre; }
.btn:hover .btn__char { opacity: 0; transform: translateY(-14px); }
.btn:hover .btn__text::before { opacity: 1; transform: translateY(0); }
.btn__icon { width: 16px; height: 16px; fill: currentColor; }

/* "Read more" text link with long arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-heading-2);
  transition: color var(--transition);
}
.link-more__svg { width: 32px; height: 10px; transform: translateX(10px); transition: transform 0.2s linear; }
.link-more:hover .link-more__svg { transform: translateX(16px); }

/* section heading pieces (shared naming through block__subtitle / __title / __text) */
[class$="__subtitle"] {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 19px;
}

/* generic container */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* --------------------------------------------------------------------------
   5. Header (home variant: topbar + navbar)
   -------------------------------------------------------------------------- */
.header { position: relative; z-index: 1001; background: var(--color-dark); }

.topbar { padding: 5px 0; }
.topbar__container { display: flex; align-items: center; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); min-height: 90px; }
.topbar__logo { display: inline-block; margin-right: auto; }
.topbar__logo-img { width: 212px; height: 60px; object-fit: contain; }
.topbar__contacts { display: flex; align-items: center; gap: 125px; margin-right: auto; padding-right: 10%; }
.topbar__social { display: flex; align-items: center; gap: 11px; }
.topbar__social-link { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: 17px; color: var(--color-text-light); }
.topbar__social-link:hover { color: var(--color-accent); }
.topbar__social-svg { width: 0; height: 0; }

.contact-box { display: flex; align-items: center; gap: 25px; }
.contact-box__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); flex: 0 0 40px; }
.contact-box__svg { width: 16px; height: 16px; fill: currentColor; }
.contact-box__text { font-size: 15px; line-height: 25px; color: var(--color-text-light); }
.contact-box__link { color: inherit; }
.contact-box__link:hover { color: var(--color-accent); }

.navbar { position: relative; z-index: 2; background: var(--color-dark); }
[data-header="home"] .navbar { background: var(--color-dark); }
.navbar__container { display: flex; align-items: center; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); min-height: 90px; }
.navbar__logo { display: inline-block; margin-right: 40px; }
.navbar__logo-img { width: 212px; height: 60px; object-fit: contain; }
.navbar__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.navbar__phone-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); transition: background var(--transition), color var(--transition); }
.navbar__phone-icon:hover { background: var(--color-white); }
.navbar__phone-svg { width: 16px; height: 16px; fill: currentColor; }
.navbar__phone { font-family: var(--font-heading); font-size: 18px; color: var(--color-white); margin-right: 20px; white-space: nowrap; }
.navbar__search, .header-sticky__search {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--transition), color var(--transition);
}
.navbar__search:hover, .header-sticky__search:hover { background: var(--color-white); }
.navbar__search-svg, .header-sticky__search-svg { width: 18px; height: 18px; fill: currentColor; }
.navbar__panel, .header-sticky__panel {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.navbar__dot, .header-sticky__dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--color-white);
  transition: transform 0.5s var(--ease);
}
.navbar__dot:nth-child(1), .header-sticky__dot:nth-child(1) { left: 16px; top: 16px; }
.navbar__dot:nth-child(2), .header-sticky__dot:nth-child(2) { right: 16px; top: 16px; transition-delay: 0.3s; }
.navbar__dot:nth-child(3), .header-sticky__dot:nth-child(3) { left: 16px; bottom: 16px; transition-delay: 0.2s; }
.navbar__dot:nth-child(4), .header-sticky__dot:nth-child(4) { right: 16px; bottom: 16px; transition-delay: 0.1s; }
.navbar__panel:hover .navbar__dot:nth-child(1), .header-sticky__panel:hover .header-sticky__dot:nth-child(1) { transform: translate(13px, 13px); }
.navbar__panel:hover .navbar__dot:nth-child(2), .header-sticky__panel:hover .header-sticky__dot:nth-child(2) { transform: translate(-13px, 13px); }
.navbar__panel:hover .navbar__dot:nth-child(3), .header-sticky__panel:hover .header-sticky__dot:nth-child(3) { transform: translate(13px, -13px); }
.navbar__panel:hover .navbar__dot:nth-child(4), .header-sticky__panel:hover .header-sticky__dot:nth-child(4) { transform: translate(-13px, -13px); }

/* primary menu */
.menu { margin-right: auto; }
.menu__list { display: flex; align-items: center; }
.menu__item { position: relative; margin: 0 16px; }
.menu__link {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-size: 17px; line-height: 90px; color: var(--color-white);
  transition: color var(--transition);
}
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--color-accent); }
.menu__caret { width: 0; height: 0; margin-left: 10px; }
.menu__toggle { display: none; }
.menu__submenu {
  position: absolute; top: 100%; left: 0; z-index: 99;
  min-width: 325px; padding: 18px 0; margin-top: 30px;
  background: var(--color-navy);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.09);
  opacity: 0; visibility: hidden;
  transition: 0.3s linear;
}
.menu__item:hover > .menu__submenu { opacity: 1; visibility: visible; margin-top: 0; }
.menu__subitem { position: relative; }
.menu__sublink {
  display: block; padding: 9px 26px;
  font-family: var(--font-heading); font-size: 15px; line-height: 17px; color: var(--color-white);
  transition: color var(--transition), padding var(--transition);
}
.menu__sublink:hover { color: var(--color-accent); padding-left: 32px; }

/* inner-page variant: info bar + single navbar */
.infobar { background: var(--color-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.infobar__container { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); min-height: 45px; }
.infobar__tagline { font-size: 13px; color: var(--color-text-light); }
.infobar__contacts { display: flex; align-items: center; gap: 60px; }
.infobar__link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-light); }
.infobar__link:hover { color: var(--color-accent); }
.infobar__svg { width: 12px; height: 12px; fill: var(--color-accent); }
[data-header="inner"] .navbar__container { min-height: 100px; }
[data-header="inner"] .menu { margin-left: auto; margin-right: 50px; }

/* sticky header (slides in after 100px scroll) */
.header-sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--color-dark);
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
}
.header-sticky[data-visible="true"] { transform: translateY(0); }
.header-sticky__container { display: flex; align-items: center; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); min-height: 90px; }
.header-sticky__logo { display: inline-block; margin-right: 40px; }
.header-sticky__logo-img { width: 145px; height: 41px; object-fit: contain; }
.header-sticky .menu { margin: 0 auto; }
.header-sticky__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.header-sticky__phone-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.header-sticky__phone-svg { width: 16px; height: 16px; fill: currentColor; }
.header-sticky__phone { font-family: var(--font-heading); font-size: 18px; color: var(--color-white); margin-right: 20px; white-space: nowrap; }

/* mobile header + drawer */
.header-mobile { display: none; position: sticky; top: 0; z-index: 1002; align-items: center; justify-content: space-between; padding: 15px 20px; background: var(--color-dark); }
.header-mobile__logo-img { height: 45px; width: auto; }
.header-mobile__burger { position: relative; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end; }
.header-mobile__line { display: block; height: 2px; width: 28px; background: var(--color-white); border-radius: 2px; transition: width var(--transition); }
.header-mobile__line:nth-child(2) { width: 20px; }
.header-mobile__burger:hover .header-mobile__line { width: 28px; }
.mobile-menu { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.4s; }
.mobile-menu__drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85%;
  padding: 70px 30px 30px; background: var(--color-dark); overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.5s var(--ease);
}
.mobile-menu[data-open="true"] { pointer-events: auto; }
.mobile-menu[data-open="true"] .mobile-menu__backdrop { opacity: 1; }
.mobile-menu[data-open="true"] .mobile-menu__drawer { transform: translateX(0); }
.mobile-menu__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; }
.mobile-menu__close::before, .mobile-menu__close::after { content: ''; position: absolute; left: 8px; top: 17px; width: 20px; height: 2px; background: var(--color-white); transform: rotate(45deg); }
.mobile-menu__close::after { transform: rotate(-45deg); }
.mobile-menu__logo-img { height: 45px; width: auto; margin-bottom: 30px; }
.mobile-menu__search { position: relative; margin-bottom: 25px; }
.mobile-menu__search-input { width: 100%; height: 48px; padding: 0 48px 0 16px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; background: transparent; color: var(--color-white); outline: 0; }
.mobile-menu__search-btn { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.mobile-menu__search-svg { width: 14px; height: 14px; fill: currentColor; }
.mobile-menu__item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-menu__link { display: block; padding: 14px 0; font-family: var(--font-heading); font-size: 17px; color: var(--color-white); }
.mobile-menu__toggle { position: absolute; right: 0; top: 10px; width: 32px; height: 32px; }
.mobile-menu__toggle::before, .mobile-menu__toggle::after { content: ''; position: absolute; left: 10px; top: 15px; width: 12px; height: 2px; background: var(--color-white); transition: transform var(--transition); }
.mobile-menu__toggle::after { transform: rotate(90deg); }
.mobile-menu__item[data-open="true"] .mobile-menu__toggle::after { transform: rotate(0); }
.mobile-menu__submenu { display: none; padding: 0 0 10px 15px; }
.mobile-menu__item[data-open="true"] .mobile-menu__submenu { display: block; }
.mobile-menu__sublink { display: block; padding: 8px 0; font-family: var(--font-heading); font-size: 15px; color: var(--color-text-light); }

/* --------------------------------------------------------------------------
   6. Side panel, search popup, video popup, scroll-top
   -------------------------------------------------------------------------- */
.side-panel { position: fixed; inset: 0; z-index: 99999; pointer-events: none; }
.side-panel__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96); }
.side-panel__content {
  position: absolute; top: 0; right: 0; bottom: 0; width: 535px; max-width: 100%;
  padding: 80px 50px 50px; overflow-y: auto;
  background: rgba(12, 18, 26, 0.96);
  transform: translateX(100%); transition: transform 0.5s var(--ease);
}
.side-panel[data-open="true"] { pointer-events: auto; }
.side-panel[data-open="true"] .side-panel__overlay { opacity: 1; }
.side-panel[data-open="true"] .side-panel__content { transform: translateX(0); }
.side-panel__close { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; font-size: 25px; line-height: 40px; color: var(--color-white); transition: color var(--transition); }
.side-panel__close:hover { color: var(--color-accent); }
.side-panel__logo { width: 435px; max-width: 100%; margin-bottom: 60px; }
.side-panel__text { font-size: 15px; line-height: 25px; color: var(--color-text-light); margin-bottom: 65px; }
.side-panel__box { display: flex; align-items: center; gap: 25px; margin-bottom: 36px; }
.side-panel__box-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-heading); }
.side-panel__box-svg { width: 20px; height: 20px; fill: currentColor; }
.side-panel__box-title { font-size: 20px; line-height: 26px; text-transform: capitalize; color: var(--color-white); margin-bottom: 14px; }
.side-panel__box-text { font-size: 15px; line-height: 25px; color: var(--color-text-light); }
.side-panel__box-link:hover { color: var(--color-accent); }
.side-panel__social { display: inline-flex; gap: 20px; margin-top: 30px; }
.side-panel__social-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(141, 146, 150, 0.1); color: var(--color-grey); transition: background var(--transition), color var(--transition); }
.side-panel__social-link:hover { background: var(--color-accent); color: var(--color-dark); }
.side-panel__social-svg { width: 16px; height: 16px; fill: currentColor; }

.search-popup { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
.search-popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.5s; }
.search-popup__logo { position: absolute; top: 0; left: 100px; z-index: 1; opacity: 0; transition: opacity 0.5s 0.3s; }
.search-popup__logo-img { width: 146px; height: 41px; object-fit: contain; margin-top: 20px; }
.search-popup__content {
  position: absolute; top: 0; left: 0; right: 0; height: 400px;
  display: flex; align-items: center; flex-wrap: wrap; padding: 0 15px;
  background: rgba(44, 44, 44, 0.9); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.search-popup[data-open="true"] { pointer-events: auto; }
.search-popup[data-open="true"] .search-popup__overlay { opacity: 1; }
.search-popup[data-open="true"] .search-popup__content { transform: translateY(0); }
.search-popup[data-open="true"] .search-popup__logo { opacity: 1; }
.search-popup__close { position: absolute; top: 20px; right: 60px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--color-white); }
.search-popup__close-svg { width: 20px; height: 20px; fill: currentColor; }
.search-popup__form { position: relative; width: 100%; max-width: 1290px; margin: 0 auto; }
.search-popup__input { width: 100%; height: 95px; padding: 0 40px 0 0; border: 0; background: transparent; font-family: var(--font-heading); font-size: 25px; color: var(--color-white); outline: 0; }
.search-popup__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.search-popup__submit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--color-white); }
.search-popup__submit-svg { width: 24px; height: 24px; fill: currentColor; }
.search-popup__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-white); transform: scaleX(0); transition: transform 0.6s 0.4s var(--ease); }
.search-popup[data-open="true"] .search-popup__line { transform: scaleX(1); }

.video-popup { position: fixed; inset: 0; z-index: 99997; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.video-popup[data-open="true"] { pointer-events: auto; opacity: 1; }
.video-popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.video-popup__frame { position: relative; width: 90%; max-width: 1100px; aspect-ratio: 16 / 9; background: #000; }
.video-popup__close { position: absolute; top: -44px; right: 0; width: 44px; height: 44px; font-size: 30px; color: var(--color-white); }
.video-popup__iframe { width: 100%; height: 100%; border: 0; }

.scroll-top {
  position: fixed; right: 40px; bottom: 20px; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; color: var(--color-white);
  box-shadow: inset 0 0 0 2px #d4d4d4;
  opacity: 0; visibility: hidden; transform: translateY(15px);
  transition: all var(--transition);
}
.scroll-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.scroll-top__ring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(0); }
.scroll-top__path { fill: none; stroke: var(--color-dark); stroke-width: 4; stroke-dasharray: 308; stroke-dashoffset: 308; transition: stroke-dashoffset 10ms linear; }
.scroll-top__svg { position: relative; width: 14px; height: 14px; fill: var(--color-dark); }
.scroll-top:hover .scroll-top__svg { fill: var(--color-accent); }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--color-dark); color: var(--color-text-light); }
.footer__container { display: flex; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.footer__main { padding: 126px 0 90px; }
.footer__about { flex: 0 0 50%; max-width: 50%; padding-right: 30px; }
.footer__links { flex: 0 0 50%; max-width: 50%; padding-left: 70px; border-left: 1px solid rgba(255, 255, 255, 0.15); margin-left: 0; }
.footer__logo { display: inline-block; margin-bottom: 42px; }
.footer__logo-img { width: 284px; height: 80px; object-fit: contain; }
.footer__text { max-width: 527px; font-size: 15px; line-height: 25px; margin-bottom: 40px; }
.footer__heading { font-size: 20px; line-height: 23px; color: var(--color-white); margin-bottom: 20px; }
.footer__info { font-size: 15px; line-height: 25px; margin-bottom: 8px; }
.footer__info-link:hover { color: var(--color-accent); }
.footer__social { display: flex; gap: 20px; margin-top: 36px; }
.footer__social-link { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: 15px; color: var(--color-white); }
.footer__social-link:hover { color: var(--color-accent); }
.footer__social-svg { width: 0; height: 0; }
.footer__columns { display: flex; gap: 20px; }
.footer__column { flex: 1; }
.footer__item { margin-top: 12px; }
.footer__item:first-child { margin-top: 0; }
.footer__link { position: relative; display: inline-flex; font-size: 15px; line-height: 17px; color: var(--color-text-light); }
.footer__link:hover { color: var(--color-accent); }
.footer__newsletter { display: flex; align-items: flex-start; gap: 20px; margin-top: 8px; }
.footer__bell { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.footer__bell-svg { width: 16px; height: 16px; fill: currentColor; }
.footer__newsletter-text { max-width: 481px; font-size: 15px; line-height: 25px; }
.footer__bottom { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.footer__bottom .footer__container { align-items: center; justify-content: space-between; min-height: 55px; }
.footer__copyright { font-size: 15px; line-height: 25px; }
.footer__copyright-link { color: var(--color-white); }
.footer__legal { font-size: 15px; line-height: 25px; text-align: right; }
.footer__legal-link { color: #c7c9ca; }
.footer__legal-link:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   8. Carousel primitives (Swiper core rules under our own class names)
   -------------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__viewport { position: relative; overflow: hidden; z-index: 1; list-style: none; padding: 0; }
.carousel__track { position: relative; display: flex; width: 100%; height: 100%; z-index: 1; box-sizing: content-box; transition-property: transform; }
.carousel__slide { position: relative; flex-shrink: 0; width: 100%; height: 100%; }
.carousel__arrow {
  position: absolute; top: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-top: -25px;
  color: var(--color-white); cursor: pointer; opacity: 0;
  transition: 0.3s linear;
}
.carousel__arrow[data-dir="prev"] { left: -60px; }
.carousel__arrow[data-dir="next"] { right: -60px; }
.carousel:hover .carousel__arrow { opacity: 1; }
.carousel__arrow-svg { width: 20px; height: 38px; fill: #bdbdbd; }
.carousel__arrow:hover .carousel__arrow-svg { fill: var(--color-dark); }
.carousel__arrow--disabled { opacity: 0.3; pointer-events: none; }

/* --------------------------------------------------------------------------
   9. Entrance animations (data-animate, triggered by JS with IntersectionObserver)
   -------------------------------------------------------------------------- */
[data-animate] { opacity: 0; }
[data-animate][data-animated="true"] { animation-duration: 1s; animation-fill-mode: both; opacity: 1; }
[data-animate="fade-in"][data-animated="true"] { animation-name: fadeIn; }
[data-animate="fade-in-up"][data-animated="true"] { animation-name: fadeInUp; }
[data-animate="fade-in-down"][data-animated="true"] { animation-name: fadeInDown; }
[data-animate="fade-in-left"][data-animated="true"] { animation-name: fadeInLeft; }
[data-animate="fade-in-right"][data-animated="true"] { animation-name: fadeInRight; }
[data-animate="slide-in-up"][data-animated="true"] { animation-name: slideInUp; }
[data-animate="slide-in-left"][data-animated="true"] { animation-name: slideInLeft; }
[data-animate="zoom-in"][data-animated="true"] { animation-name: zoomIn; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: none; } }
@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
/* split text: hidden until GSAP has split it to avoid a flash */
html[data-js] [data-split]:not([data-split-ready="true"]) { visibility: hidden; }

/* ==========================================================================
   HOME PAGE SECTIONS
   ========================================================================== */

/* hero ------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--color-dark); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--color-dark); opacity: 0.7; }
.hero__container { position: relative; max-width: 1850px; margin: 0 auto; padding: 70px 30px 70px 110px; min-height: 462px; }
.hero__title { max-width: 832px; font-size: 60px; line-height: 70px; color: var(--color-white); }
.hero__row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px 20px; margin-top: 34px; }
.hero__action .btn { padding: 0 30px; }
.hero__text { max-width: 416px; font-size: 15px; line-height: 26px; color: var(--color-white); }

/* consult bar ------------------------------------------------------------ */
.consult { background: var(--color-dark); padding: 54px 0 49px; }
.consult__container { display: flex; align-items: flex-start; flex-wrap: wrap; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.consult__title { flex: 0 0 50%; max-width: 50%; align-self: center; padding-top: 44px; padding-bottom: 36px; font-size: 20px; line-height: 23px; color: #fffefe; }
.consult__advice { flex: 0 0 33.333%; max-width: 33.333%; padding-right: 30px; }
.consult__advice-head { display: flex; align-items: center; gap: 30px; margin-top: 4px; }
.consult__avatars { width: 113px; height: 49px; }
.consult__advice-link { font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; }
.consult__advice-link:hover { color: var(--color-accent); }
.consult__advice-text { max-width: 416px; margin-top: 22px; font-size: 15px; line-height: 26px; color: var(--color-text-light); }
.consult__review { flex: 0 0 16.666%; max-width: 16.666%; min-width: 230px; }
.consult__review-logo { display: inline-block; margin-bottom: 8px; }
.consult__review-img { width: 130px; height: auto; }
.consult__review-text { font-size: 15px; line-height: 26px; color: var(--color-text-light); }

/* services carousel ------------------------------------------------------ */
.services { background: var(--color-bg-grey); padding: 92px 0 62px; overflow: hidden; }
.services__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.services__head { text-align: center; margin-bottom: 80px; position: relative; }
.services__subtitle { margin-bottom: 22px; }
.services__title { font-size: 35px; line-height: 40px; color: var(--color-heading); }
.services__text { max-width: 749px; margin: 17px auto 0; font-size: 17px; line-height: 27px; }
.services__divider { position: relative; display: block; width: 380px; max-width: 100%; height: 1px; margin: 27px auto 0; background: #d8d9da; }
.services__divider::before { content: ''; position: absolute; left: 50%; top: -1px; width: 105px; height: 3px; margin-left: -52px; background: #000; }
.services-carousel { position: relative; }
.services-carousel__viewport { overflow: hidden; margin: 0 -15px; padding: 0 15px; }
.services-carousel__track { display: flex; align-items: stretch; }
.services-carousel__slide { flex-shrink: 0; height: auto; }
.services-carousel__arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 20px; height: 38px; margin-top: -19px; color: #bdbdbd; opacity: 0; transition: 0.3s linear; }
.services-carousel__arrow[data-dir="prev"] { left: -40px; transform: scaleX(-1); }
.services-carousel__arrow[data-dir="next"] { right: -40px; }
.services-carousel:hover .services-carousel__arrow { opacity: 1; }
.services-carousel__arrow-svg { width: 20px; height: 38px; fill: currentColor; }
.services-carousel__arrow:hover { color: var(--color-dark); }

.service-card { position: relative; height: 100%; padding: 35px 45px 37px; background: var(--color-bg); border: 1px solid var(--color-border); transition: var(--transition); }
.service-card:hover { background: var(--color-white); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
.service-card__number { position: absolute; top: 32px; right: 30px; font-family: var(--font-heading); font-size: 17px; color: var(--color-muted); }
.service-card__icon { width: 50px; height: 50px; margin-top: 2px; }
.service-card__title { margin: 45px 0 17px; padding-top: 26px; font-size: 23px; line-height: 1.364; color: var(--color-heading-2); border-top: 1px solid var(--color-border); }
.service-card__link:hover { color: var(--color-muted); }
.service-card__text { font-size: 15px; line-height: 25px; }
.service-card .link-more { margin-top: 33px; }

/* tint types grid -------------------------------------------------------- */
.tint-types { padding: 70px 0; }
.tint-types__container { max-width: 1340px; margin: 0 auto; padding: 0 10px; }
.tint-types__title { max-width: 537px; margin: 0 auto 60px; font-size: 35px; line-height: 50px; text-align: center; color: var(--color-dark); }
.tint-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 10px; }
.tint-card { display: flex; flex-direction: column; gap: 20px; padding: 10px; background: var(--color-white); border: 1px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.11); transition: transform 0.4s, box-shadow 0.4s; }
.tint-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }
.tint-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tint-card__title { font-family: var(--font-alt); font-size: 24px; line-height: 24px; font-weight: 600; color: var(--color-dark); }
.tint-card__text { font-size: 15px; line-height: 26px; color: var(--color-dark); padding-bottom: 10px; }

/* about ------------------------------------------------------------------ */
.about { display: flex; flex-wrap: wrap; background: var(--color-bg); }
.about__media { position: relative; flex: 0 0 50%; min-height: 663px; background-size: cover; background-position: center; overflow: hidden; }
.about__block { position: absolute; width: 179px; height: 179px; background: rgba(255, 255, 255, 0.3); animation-duration: 1.2s; }
.about__block:nth-child(1) { left: 179px; bottom: 0; }
.about__block:nth-child(2) { left: 0; bottom: 179px; }
.about__body { flex: 0 0 50%; padding: 135px 50px 110px; }
.about__subtitle { color: var(--color-dark); }
.about__title { max-width: 350px; font-size: 35px; line-height: 50px; color: var(--color-dark); }
.about__text { max-width: 855px; margin-top: 30px; font-size: 15px; line-height: 26px; color: var(--color-dark); }
.about__title + .about__text { margin-top: 23px; }
.about__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 30px 60px; margin-top: 42px; }
.video-link { display: inline-flex; align-items: center; gap: 20px; font-family: var(--font-heading); font-size: 17px; color: var(--color-dark); }
.video-link__btn { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--color-dark); border: 1px solid #d0d0d0; color: var(--color-white); transition: 0.3s; }
.video-link:hover .video-link__btn { background: var(--color-accent); color: var(--color-dark); }
.video-link__svg { width: 12px; height: 14px; fill: currentColor; margin-left: 3px; }

/* values + counters ------------------------------------------------------ */
.values { display: flex; flex-wrap: wrap; background: var(--color-white); }
.values__body { flex: 0 0 50%; padding: 50px 50px 50px 50px; }
.values__subtitle { margin-bottom: 15px; }
.values__lead { display: flex; align-items: flex-start; gap: 15px; padding: 37px 0 42px; border-bottom: 1px solid var(--color-border-2); }
.values__lead-line { flex: 0 0 14px; height: 38px; margin: 10px 48px 0 0; }
.values__lead-text { font-family: var(--font-heading); font-size: 20px; line-height: 35px; color: var(--color-heading); }
.values__list { margin-top: 28px; }
.values__item { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: 17px; line-height: 26px; color: var(--color-heading); }
.values__item:first-child { margin-top: 0; }
.values__check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #dedfe0; color: var(--color-heading); }
.values__check-svg { width: 11px; height: 11px; fill: currentColor; }
.values__body .btn { margin-top: 49px; }
.values__media { position: relative; flex: 0 0 50%; min-height: 493px; background-size: cover; background-position: center; }
.values__stats { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.counter { flex: 1; display: flex; align-items: center; gap: 30px; padding: 40px 20px 40px 20px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); }
.counter__icon { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; flex: 0 0 57px; margin-top: 8px; border-radius: 50%; background: var(--color-dark); color: var(--color-accent); }
.counter__svg { width: 22px; height: 22px; fill: currentColor; }
.counter__number { display: flex; align-items: flex-start; gap: 5px; font-size: 45px; line-height: 52px; color: var(--color-heading); }
.counter__suffix { font-size: 40px; line-height: 45px; color: var(--color-dark); transform: translateY(-3px); }
.counter__label { margin-top: 17px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--color-text); }

/* why choose / tabs ------------------------------------------------------ */
.why { padding: 107px 0 0; }
.why__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.why__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.why__intro { max-width: 903px; }
.why__subtitle { color: var(--color-heading-2); }
.why__title { max-width: 505px; font-size: 45px; line-height: 55px; }
.why__text { margin-top: 26px; font-size: 17px; line-height: 28px; }
.why__cta { padding-bottom: 8px; }
.tabs { margin-top: 38px; }
.tabs__nav { display: flex; flex-wrap: wrap; gap: 0 50px; }
.tabs__tab { position: relative; padding: 15px 0; font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--color-heading); transition: color var(--transition); }
.tabs__tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-heading); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__tab:hover { color: var(--color-muted); }
.tabs__panels { border-top: 1px solid var(--color-border-2); }
.tabs__panel { display: none; padding-top: 65px; }
.tabs__panel[data-active="true"] { display: block; animation: fadeIn 0.6s both; }

.why-reasons { display: flex; flex-wrap: wrap; gap: 30px; }
.why-reasons__media { position: relative; flex: 0 0 38%; max-width: 491px; overflow: hidden; }
.why-reasons__img { width: 100%; height: auto; }
.why-reasons__circle { position: absolute; width: 330px; height: 330px; left: -102px; bottom: -96px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); animation-duration: 1.2s; }
.why-reasons__body { flex: 1; min-width: 300px; padding-top: 47px; }
.why-reasons__title { font-size: 30px; line-height: 40px; }
.why-reasons__text { margin-top: 23px; font-size: 15px; line-height: 26px; }
.why__reasons { margin-top: 24px; }
.why__reason { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; font-family: var(--font-heading); font-size: 17px; line-height: 30px; color: var(--color-heading); }
.why__reason:first-child { margin-top: 0; }
.why__reason-icon { display: flex; align-items: center; width: 18px; height: 30px; color: var(--color-heading-2); }
.why__reason-svg { width: 12px; height: 12px; fill: currentColor; }
.why-reasons__note { display: flex; align-items: center; gap: 25px; margin: 36px 0 0 45px; padding: 20px 30px 20px 20px; background: var(--color-navy); border-radius: 8px; }
.why-reasons__note-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: #353e47; color: var(--color-text); }
.why-reasons__note-svg { width: 20px; height: 20px; fill: currentColor; }
.why-reasons__note-text { font-family: var(--font-heading); font-size: 17px; line-height: 26px; text-transform: capitalize; color: var(--color-white); }

.why-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 30px; padding: 0 15px; }
.feature { display: flex; align-items: flex-start; gap: 25px; }
.feature__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.feature__svg { width: 20px; height: 20px; fill: currentColor; }
.feature__title { font-size: 20px; line-height: 26px; text-transform: capitalize; color: var(--color-heading); margin-bottom: 14px; }
.feature__text { font-size: 15px; line-height: 25px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.step { text-align: center; }
.step__media { overflow: hidden; }
.step__img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s; }
.step:hover .step__img { transform: scale(1.05); }
.step__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; position: relative; border-radius: 50%; background: var(--color-accent); font-family: var(--font-heading); font-size: 16px; color: var(--color-dark); }
.step__divider { display: block; width: 1px; height: 20px; margin: 10px auto; background: var(--color-border); }
.step__title { font-size: 20px; line-height: 26px; }
.step__text { margin-top: 12px; font-size: 15px; line-height: 25px; }

.commitment { display: flex; flex-wrap: wrap; gap: 30px; }
.commitment__media { flex: 0 0 38%; min-height: 420px; background-size: cover; background-position: center; }
.commitment__body { flex: 1; min-width: 300px; }
.commitment__lead { display: flex; align-items: center; gap: 25px; margin-bottom: 40px; }
.commitment__lead-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.commitment__lead-svg { width: 26px; height: 26px; fill: currentColor; }
.commitment__lead-title { font-size: 22px; line-height: 32px; text-transform: capitalize; }
.commitment__lead-text { margin-top: 8px; font-size: 15px; line-height: 25px; }
.commit { display: flex; align-items: center; gap: 25px; margin-top: 25px; }
.commit__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: var(--color-bg-grey); color: var(--color-dark); }
.commit__svg { width: 20px; height: 20px; fill: currentColor; }
.commit__title { font-size: 20px; line-height: 26px; }
.commit__text { margin-top: 6px; font-size: 15px; line-height: 25px; }

/* clients ---------------------------------------------------------------- */
.clients { padding: 93px 0 0; }
.clients__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.clients__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-top: 77px; margin-bottom: 42px; border-top: 1px solid var(--color-border); }
.clients__intro { max-width: 515px; }
.clients__title { font-size: 45px; line-height: 55px; }
.clients__text { max-width: 570px; font-size: 15px; line-height: 26px; padding-bottom: 5px; }
.clients-carousel__viewport { overflow: hidden; }
.clients-carousel__track { display: flex; }
.clients-carousel__slide { flex-shrink: 0; }
.client-logo { position: relative; display: flex; align-items: center; justify-content: center; height: 108px; padding: 10px; border: 1px solid var(--color-border-2); border-right: 0; overflow: hidden; }
.clients-carousel__slide:last-child .client-logo { border-right: 1px solid var(--color-border-2); }
.client-logo__img { max-height: 55px; width: auto; object-fit: contain; transition: transform var(--transition); }
.client-logo__img-hover { position: absolute; left: 50%; top: 50%; max-height: 55px; width: auto; transform: translate(-50%, 100%); opacity: 0; transition: var(--transition); }
.client-logo:hover .client-logo__img { transform: translateY(-120%); }
.client-logo:hover .client-logo__img-hover { transform: translate(-50%, -50%); opacity: 1; }

/* projects --------------------------------------------------------------- */
.projects { margin-top: 110px; padding: 123px 0 0; background: var(--color-dark); overflow: hidden; }
.projects__container { max-width: 1850px; margin: 0 auto; padding: 0 15px; }
.projects__head { text-align: center; }
.projects__subtitle { color: var(--color-text-light); margin-bottom: 21px; }
.projects__title { font-size: 45px; line-height: 52px; color: var(--color-white); }
.projects__text { max-width: 1060px; margin: 16px auto 0; font-size: 17px; line-height: 27px; color: var(--color-text-light); }
.projects__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 75px; margin: 55px 0 68px; }
.projects__filter { position: relative; padding: 15px 0 7px; font-family: var(--font-heading); font-size: 17px; text-transform: capitalize; color: var(--color-white); transition: 0.3s linear; }
.projects__filter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-white); transform: scaleX(0); transition: transform 0.3s; }
.projects__filter[aria-pressed="true"]::after, .projects__filter:hover::after { transform: scaleX(1); }
.projects__filter-count { position: absolute; top: 10px; right: -13px; font-size: 15px; line-height: 1; }
.projects-carousel__viewport { overflow: hidden; }
.projects-carousel__track { display: flex; }
.projects-carousel__slide { flex-shrink: 0; }
.project-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; padding: 20px 30px; background-size: cover; background-position: center; text-align: center; overflow: hidden; }
.project-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 17, 25, 0.9) 0%, rgba(10, 17, 25, 0) 50%); transition: opacity 0.45s var(--ease); }
.project-card::after { content: ''; position: absolute; inset: 0; background: rgba(10, 17, 25, 0.6); opacity: 0; transition: opacity 0.45s var(--ease); }
.project-card:hover::after { opacity: 1; }
.project-card__body { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 2; transition: transform 0.45s var(--ease); }
.project-card:hover .project-card__body { transform: translateY(-20px); }
.project-card__category { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: 15px; line-height: 25px; color: var(--color-white); }
.project-card__title { display: block; font-family: var(--font-heading); font-size: 23px; line-height: 38px; font-weight: 500; color: var(--color-white); }

/* testimonials ----------------------------------------------------------- */
.testimonials { padding: 60px 0 0; margin-top: 1px; }
.testimonials__container { display: flex; flex-wrap: wrap; align-items: center; gap: 0; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.testimonials__media { position: relative; flex: 0 0 36%; max-width: 455px; }
.testimonials__img { width: 100%; height: auto; }
.testimonials__quote { position: absolute; right: 25px; bottom: 25px; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(6px); color: var(--color-white); }
.testimonials__quote-svg { width: 30px; height: 30px; fill: currentColor; }
.testimonials__body { flex: 1; min-width: 300px; padding-left: 55px; }
.testimonials__subtitle { color: var(--color-heading-2); }
.testimonials__title { font-size: 45px; line-height: 55px; }
.testimonials__text { margin-top: 14px; font-size: 17px; line-height: 26px; font-weight: 500; color: var(--color-heading); }
.testimonials__divider { position: relative; display: block; width: 380px; max-width: 100%; height: 1px; margin: 27px 0 55px; background: #d8d9da; }
.testimonials__divider::before { content: ''; position: absolute; left: 0; top: -1px; width: 105px; height: 3px; background: #000; }
.testimonials-carousel { position: relative; }
.testimonials-carousel__viewport { overflow: hidden; }
.testimonials-carousel__track { display: flex; }
.testimonials-carousel__slide { flex-shrink: 0; }
.testimonial { margin: 0; }
.testimonial__text { max-width: 740px; padding-bottom: 29px; font-family: var(--font-heading); font-size: 20px; line-height: 35px; color: var(--color-text); }
.testimonial__footer { display: flex; align-items: center; gap: 30px; margin-top: 5px; }
.testimonial__avatar { width: 62px; height: 62px; border-radius: 50%; background: var(--color-bg-grey); }
.testimonial__name { display: flex; align-items: center; gap: 15px; font-size: 15px; font-weight: 500; color: var(--color-heading); }
.testimonial__stars { display: inline-flex; gap: 1px; }
.testimonial__star { width: 14px; height: 14px; fill: var(--color-heading); }
.testimonial__role { margin-top: 3px; font-size: 15px; color: var(--color-muted); }
.testimonials__nav { position: absolute; right: 20px; bottom: 0; z-index: 2; display: flex; gap: 37px; }
.testimonials-carousel__arrow { display: flex; align-items: center; color: var(--color-heading); transition: color var(--transition), opacity var(--transition); }
.testimonials-carousel__arrow[data-dir="prev"] { transform: scaleX(-1); }
.testimonials-carousel__arrow-svg { width: 36px; height: 11px; }
.testimonials-carousel__arrow--disabled { opacity: 0.3; pointer-events: none; }
.testimonials-carousel__arrow:hover { color: var(--color-muted); }

/* ceo message ------------------------------------------------------------ */
.ceo { padding: 100px 0 0; }
.ceo__container { display: flex; flex-wrap: wrap; max-width: 1810px; margin: 0 auto; padding: 0 15px; }
.ceo__media { position: relative; flex: 0 0 50%; min-height: 602px; background-size: cover; background-position: center; overflow: hidden; }
.ceo__block { position: absolute; width: 179px; height: 179px; background: rgba(255, 255, 255, 0.3); animation-duration: 1s; }
.ceo__block:nth-child(1) { right: 179px; bottom: 0; }
.ceo__block:nth-child(2) { right: 0; bottom: 179px; }
.ceo__body { flex: 0 0 50%; padding: 87px 50px 85px; background: var(--color-dark); }
.ceo__subtitle { font-weight: 700; color: var(--color-bg-grey); margin-bottom: 150px; }
.ceo__text { max-width: 805px; font-family: var(--font-heading); font-size: 26px; line-height: 38px; color: var(--color-bg-grey); }
.ceo__signature { margin-top: 60px; }
.ceo__name { font-size: 17px; line-height: 25px; color: var(--color-white); margin-bottom: 6px; }
.ceo__role { font-size: 15px; color: var(--color-muted); }

/* cta -------------------------------------------------------------------- */
.cta { position: relative; margin-top: 70px; background-size: cover; background-position: center; }
.cta__overlay { position: absolute; inset: 0; background: var(--color-dark); opacity: 0.5; }
.cta__container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: var(--container-narrow); min-height: 461px; margin: 0 auto; padding: 60px var(--gutter); }
.cta__title { font-size: 35px; line-height: 45px; color: var(--color-white); }
.cta__text { max-width: 580px; margin: 20px 0 32px; font-size: 15px; line-height: 26px; color: var(--color-white); }

/* blog teasers ----------------------------------------------------------- */
.blog { padding: 0 0 0; }
.blog__container { max-width: 1340px; margin: 0 auto; padding: 0 10px; }
.blog-carousel__viewport { overflow: hidden; }
.blog-carousel__track { display: flex; align-items: stretch; }
.blog-carousel__slide { flex-shrink: 0; height: auto; padding-top: 30px; }
.post-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-border); background: transparent; }
.post-card__media { position: relative; display: block; overflow: hidden; }
.post-card__img { width: 100%; aspect-ratio: 418 / 157; object-fit: cover; transition: transform 0.5s; }
.post-card:hover .post-card__img { transform: scale(1.06); }
.post-card__date { position: absolute; right: 19px; top: 50px; width: 71px; padding: 11px 0 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); text-align: center; }
.post-card__day { display: block; font-size: 35px; line-height: 45px; font-weight: 500; color: var(--color-white); }
.post-card__month { display: block; margin-top: -7px; font-size: 15px; line-height: 33px; color: var(--color-white); }
.post-card__meta { display: block; padding: 12px 15px 12px 34px; background: var(--color-navy); font-family: var(--font-heading); font-size: 13px; line-height: 26px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--color-muted); }
.post-card__body { flex: 1; padding: 22px 34px 28px; }
.post-card__title { padding-bottom: 21px; font-size: 23px; line-height: 33px; text-transform: capitalize; color: var(--color-heading); }
.post-card__link:hover { color: var(--color-muted); }
.post-card__divider { display: block; width: 50px; height: 2px; margin-bottom: 23px; background: var(--color-heading); }
.post-card .link-more { margin-top: 23px; letter-spacing: 0.16px; text-transform: capitalize; color: var(--color-heading); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* page title banner ------------------------------------------------------ */
.page-title { position: relative; background: #a9abad center / cover no-repeat; }
.page-title__overlay { position: absolute; inset: 0; background: var(--color-navy); opacity: 0.4; mix-blend-mode: multiply; }
.page-title__container { position: relative; max-width: var(--container-narrow); margin: 0 auto; padding: 83px var(--gutter) 26px; min-height: 371px; }
.page-title__heading { max-width: 900px; font-size: 60px; line-height: 1.15; font-weight: 400; color: var(--color-white); }
.page-title__lead { max-width: 600px; margin-top: 13px; font-size: 17px; line-height: 27px; color: #dbdbdb; }
.page-title__line { position: relative; display: block; width: 654px; max-width: 100%; height: 1px; margin-top: 27px; background: rgba(255, 255, 255, 0.3); }
.page-title__line::before { content: ''; position: absolute; left: 0; top: -2px; width: 55px; height: 3px; background: var(--color-white); }
.breadcrumb { margin-top: 67px; }
.breadcrumb__list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 13px; font-family: var(--font-heading); font-size: 15px; line-height: 26px; text-transform: capitalize; color: var(--color-white); }
.breadcrumb__item { display: inline-flex; align-items: center; }
.breadcrumb__item:not(:last-child)::after { content: '\2192'; margin-left: 13px; font-size: 18px; }
.breadcrumb__link:hover { color: var(--color-accent); }
[data-page="blog"] .page-title__overlay, [data-page="post"] .page-title__overlay, [data-page="legal"] .page-title__overlay { opacity: 0.9; }
[data-page="post"] .page-title__heading { font-size: 45px; }
[data-page="services"] .page-title { background-image: none; background-color: #a9adb0; }

/* about: intro ----------------------------------------------------------- */
.intro { display: flex; flex-wrap: wrap; }
.intro__lead { flex: 0 0 50%; padding: 80px 50px 80px 20px; background: var(--color-bg-grey); }
.intro__subtitle { color: var(--color-heading-2); margin-bottom: 20px; }
.intro__title { max-width: 625px; font-size: 45px; line-height: 55px; margin-bottom: 38px; }
.intro__body { flex: 0 0 50%; padding: 80px 20px 60px 20px; background: var(--color-white); }
.intro__text { max-width: 685px; font-size: 15px; line-height: 25px; margin-bottom: 25px; }
.intro__mission { margin-top: 60px; max-width: 760px; }
.intro__mission-title { font-size: 25px; line-height: 1.36; margin-bottom: 22px; }
.intro__mission-text { font-family: var(--font-heading); font-size: 17px; line-height: 28px; color: var(--color-heading); }

/* about: timeline -------------------------------------------------------- */
.timeline { position: relative; padding: 104px 0 103px; background: var(--color-dark) center / cover no-repeat; }
.timeline__overlay { position: absolute; inset: 0; background: rgba(44, 44, 44, 0.85); }
.timeline__container { position: relative; max-width: 1620px; margin: 0 auto; padding: 0 var(--gutter); }
.timeline-carousel { position: relative; padding: 0 120px; }
.timeline-carousel__viewport { overflow: hidden; }
.timeline-carousel__track { display: flex; }
.timeline-carousel__slide { flex-shrink: 0; }
.timeline-carousel__arrow { position: absolute; top: 70px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 50%; background: #353e47; color: var(--color-white); transition: 0.3s linear; }
.timeline-carousel__arrow[data-dir="prev"] { left: 0; transform: scaleX(-1); }
.timeline-carousel__arrow[data-dir="next"] { right: 0; }
.timeline-carousel__arrow:hover { background: var(--color-accent); color: var(--color-dark); }
.timeline-carousel__arrow-svg { width: 14px; height: 14px; fill: currentColor; }
.milestone { max-width: 300px; }
.milestone__label { font-family: var(--font-heading); font-size: 15px; color: var(--color-white); }
.milestone__title { position: relative; margin-top: 13px; padding-bottom: 37px; font-size: 23px; line-height: 1.36; color: var(--color-white); }
.milestone__title::after { content: ''; position: absolute; left: 0; right: -30px; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.2); }
.milestone__dot { position: relative; display: block; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--color-white); }
.milestone__text { padding: 30px 45px 0 0; font-size: 15px; line-height: 25px; color: var(--color-text-light); }

/* about: enhance --------------------------------------------------------- */
.enhance { padding: 110px 0 80px; }
.enhance__container { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.enhance__media { position: relative; flex: 0 0 47.6%; max-width: 614px; overflow: hidden; }
.enhance__img { width: 100%; height: auto; }
.enhance__block { position: absolute; width: 179px; height: 179px; background: rgba(255, 255, 255, 0.3); animation-duration: 1.2s; }
.enhance__block:nth-child(2) { left: 179px; bottom: 0; }
.enhance__block:nth-child(3) { left: 0; bottom: 179px; }
.enhance__body { flex: 1; min-width: 300px; padding-left: 0; }
.enhance__subtitle { color: var(--color-heading-2); }
.enhance__title { max-width: 473px; font-size: 45px; line-height: 55px; }
.enhance__text { margin-top: 26px; font-size: 15px; line-height: 26px; }
.enhance__progress { margin: 29px 0 21px; }
.progress { margin-top: 35px; }
.progress:first-child { margin-top: 0; }
.progress__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; font-family: var(--font-heading); font-size: 17px; color: var(--color-heading); }
.progress__track { height: 2px; background: rgba(10, 19, 32, 0.08); }
.progress__bar { display: block; width: 0; height: 100%; background: #000; transition: width 1.4s; }

/* about: features grid --------------------------------------------------- */
.features { padding: 15px 0 0; }
.features__container { max-width: var(--container-narrow); margin: 0 auto; padding: 50px var(--gutter) 0; border-top: 1px solid var(--color-border); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; }
.features .feature__icon { width: 71px; height: 71px; flex-basis: 71px; border: 1px solid var(--color-border); }
.features .feature__svg { width: 30px; height: 30px; }
.features .feature__body { padding-top: 15px; }
.features .feature__text { margin-top: 4px; }

/* about: stats band ------------------------------------------------------ */
.stats { margin-top: 103px; padding: 61px 0 62px; background: var(--color-bg-grey); }
.stats__container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.stat { display: flex; align-items: center; gap: 25px; padding-left: 20px; }
.stat__icon { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; border-radius: 50%; background: #d1d2d3; color: var(--color-text); }
.stat__svg { width: 18px; height: 18px; fill: currentColor; }
.stat__number { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 44px; line-height: 1.1; color: var(--color-heading); white-space: nowrap; }
.stat__label { max-width: 131px; font-family: var(--font-heading); font-size: 13px; line-height: 25px; letter-spacing: 3.2px; text-transform: uppercase; }

/* about: work with us cta ------------------------------------------------ */
.work-cta { position: relative; background: var(--color-dark) center / cover no-repeat; }
.work-cta__overlay { position: absolute; inset: 0; background: rgba(44, 44, 44, 0.85); }
.work-cta__container { position: relative; max-width: var(--container-narrow); margin: 0 auto; padding: 107px var(--gutter) 60px; }
.work-cta__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.work-cta__subtitle { color: var(--color-text-light); }
.work-cta__title { max-width: 700px; font-size: 40px; line-height: 50px; color: var(--color-white); }
.work-cta__tags { display: flex; flex-wrap: wrap; gap: 20px 60px; margin-top: 60px; padding-left: 25px; }
.work-cta__tag { font-family: var(--font-heading); font-size: 15px; color: var(--color-white); }

/* testimonials: image right variant (service pages) ---------------------- */
.testimonials[data-layout="image-right"] { padding: 0; }
.testimonials[data-layout="image-right"] .testimonials__container { flex-direction: row-reverse; max-width: none; padding: 0; align-items: stretch; }
.testimonials[data-layout="image-right"] .testimonials__media { flex: 0 0 50%; max-width: none; min-height: 500px; }
.testimonials[data-layout="image-right"] .testimonials__img { width: 100%; height: 100%; object-fit: cover; }
.testimonials[data-layout="image-right"] .testimonials__quote { display: none; }
.testimonials[data-layout="image-right"] .testimonials__body { flex: 0 0 50%; padding: 80px 50px 80px 15px; background: var(--color-bg-grey); }

/* cta: plain variant ----------------------------------------------------- */
.cta[data-variant="plain"] { background-image: none !important; background: var(--color-bg); }
.cta[data-variant="plain"] .cta__overlay { display: none; }
.cta[data-variant="plain"] .cta__title, .cta[data-variant="plain"] .cta__text { color: var(--color-heading); }

/* service pages ---------------------------------------------------------- */
.service-intro { padding: 60px 0 0; }
.service-intro__container { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.service-intro__text { font-size: 17px; line-height: 27px; color: var(--color-dark); }
.service-intro__title { margin-top: 90px; font-size: 35px; line-height: 45px; }
.pillars { padding: 50px 0 0; }
.pillars__container { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1010px; margin: 0 auto; padding: 0 var(--gutter); }
.pillar { position: relative; padding: 0 30px; text-align: center; }
.pillar + .pillar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.pillar__svg { width: 22px; height: 22px; fill: currentColor; }
.pillar__title { margin-top: 30px; font-size: 20px; line-height: 26px; }
.pillar__text { margin-top: 18px; font-size: 15px; line-height: 25px; }
.solutions { padding: 50px 0 0; }
.solutions__container { display: flex; flex-wrap: wrap; max-width: 1010px; margin: 0 auto; padding: 0 var(--gutter); background: #f3f1ee; }
.solutions__media { flex: 0 0 33%; padding: 30px 0 30px 20px; }
.solutions__img { width: 100%; height: 100%; object-fit: cover; }
.solutions__body { flex: 1; min-width: 300px; padding: 30px 30px 40px 40px; }
.solutions__head { display: flex; align-items: flex-start; gap: 20px; }
.solutions__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; margin-top: 6px; border-radius: 50%; background: var(--color-heading); color: var(--color-white); }
.solutions__svg { width: 18px; height: 18px; fill: currentColor; }
.solutions__title { font-size: 25px; line-height: 1.3; margin-bottom: 10px; }
.solutions__text { font-size: 15px; line-height: 25px; }
.solutions__divider { display: block; height: 1px; margin: 25px 0 28px; background: var(--color-border); }
.solutions__lists { display: flex; flex-wrap: wrap; gap: 0 40px; margin-bottom: 30px; }
.solutions__list { flex: 1; min-width: 200px; }
.solutions__item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; color: var(--color-heading); }
.solutions__item-svg { width: 8px; height: 10px; fill: var(--color-heading); }
.process { margin-top: 70px; padding: 80px 0 90px; background: var(--color-dark); }
.process__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.process__title { margin-bottom: 60px; font-size: 35px; text-align: center; color: var(--color-white); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.process__step { position: relative; }
.process__label { display: block; font-family: var(--font-heading); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-text-light); }
.process__step-title { margin-top: 12px; font-size: 20px; line-height: 26px; color: var(--color-white); }
.process__number { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); font-family: var(--font-heading); font-size: 16px; color: var(--color-white); background: var(--color-dark); z-index: 1; }
.process__step::before { content: ''; position: absolute; left: 0; right: 0; top: 83px; height: 1px; background: rgba(255, 255, 255, 0.15); }
.process__text { margin-top: 22px; font-size: 15px; line-height: 25px; color: var(--color-text-light); }

/* pricing (frosted films page) ------------------------------------------- */
.pricing { padding: 100px 0 90px; }
.pricing__container { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.pricing__head { text-align: center; margin-bottom: 70px; }
.pricing__title { max-width: 700px; margin: 0 auto; font-size: 35px; line-height: 45px; }
.pricing__text { margin-top: 15px; font-size: 17px; line-height: 27px; }
.pricing__divider { position: relative; display: block; width: 380px; max-width: 100%; height: 1px; margin: 27px auto 0; background: #d8d9da; }
.pricing__divider::before { content: ''; position: absolute; left: 50%; top: -1px; width: 105px; height: 3px; margin-left: -52px; background: #000; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { padding: 40px 30px; background: var(--color-white); border: 1px solid var(--color-border); }
.plan[data-popular="true"] { background: var(--color-navy); color: var(--color-white); transform: translateY(-20px); border-color: var(--color-navy); }
.plan__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 12px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: inherit; }
.plan__star { width: 12px; height: 12px; fill: currentColor; }
.plan__price { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-family: var(--font-heading); font-size: 50px; line-height: 1; color: inherit; }
.plan__period { padding: 6px 14px; border-radius: 4px; background: var(--color-bg-grey); font-size: 13px; color: var(--color-dark); }
.plan__text { margin-top: 20px; font-size: 14px; line-height: 25px; color: inherit; }
.plan__download { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; color: inherit; }
.plan__download-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-navy); color: var(--color-white); }
.plan[data-popular="true"] .plan__download-icon { background: var(--color-white); color: var(--color-navy); }
.plan__download-svg { width: 12px; height: 12px; fill: currentColor; transform: rotate(180deg); }
.plan__features { margin-top: 30px; }
.plan__feature { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; color: inherit; }
.plan__feature[data-included="false"] { opacity: 0.6; }
.plan__feature-svg { width: 12px; height: 12px; fill: currentColor; }
.plan__btn { display: inline-flex; align-items: center; height: 42px; margin-top: 30px; padding: 0 26px; border-radius: 21px; background: var(--color-navy); font-family: var(--font-heading); font-size: 14px; color: var(--color-white); transition: background var(--transition), color var(--transition); }
.plan[data-popular="true"] .plan__btn { background: var(--color-white); color: var(--color-navy); }
.plan__btn:hover { background: var(--color-accent); color: var(--color-dark); }

/* gallery ---------------------------------------------------------------- */
.gallery { padding: 60px 0 100px; }
.gallery__container { max-width: 1050px; margin: 0 auto; padding: 0 var(--gutter); }
.gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-bottom: 30px; }
.gallery__filter { padding: 4px 12px; border: 1px solid var(--color-dark); font-family: var(--font-heading); font-size: 13px; color: var(--color-dark); background: var(--color-white); transition: background var(--transition); }
.gallery__filter[aria-pressed="true"], .gallery__filter:hover { background: var(--color-accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-card { display: flex; flex-direction: column; background: var(--color-bg-grey); }
.gallery-card[data-hidden="true"] { display: none; }
.gallery-card__media { display: block; overflow: hidden; }
.gallery-card__img { width: 100%; aspect-ratio: 320 / 200; object-fit: cover; transition: transform 0.6s; }
.gallery-card:hover .gallery-card__img { transform: scale(1.05); }
.gallery-card__body { padding: 15px 20px 18px; }
.gallery-card__category { display: inline-block; padding: 1px 6px; background: var(--color-dark); font-size: 9px; color: var(--color-white); }
.gallery-card__title { margin-top: 2px; font-family: var(--font-heading); font-size: 16px; font-weight: 400; color: var(--color-dark); }
.gallery-card__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 16px; border-radius: 15px; background: var(--color-accent); font-family: var(--font-heading); font-size: 13px; color: var(--color-dark); transition: background var(--transition), color var(--transition); }
.gallery-card__btn:hover { background: var(--color-dark); color: var(--color-white); }
.gallery-card__btn-svg { width: 11px; height: 11px; fill: currentColor; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination:empty { display: none; }
.pagination__page { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--color-bg); border: 1px solid var(--color-border); font-family: var(--font-heading); font-size: 15px; color: var(--color-dark); transition: 0.3s; }
.pagination__page:hover, .pagination__page[aria-current="page"] { background: var(--color-accent); }
.pagination__dots { display: flex; align-items: center; padding: 0 6px; }

/* contact ---------------------------------------------------------------- */
.contact { padding: 60px 0 0; }
.contact__container { display: flex; flex-wrap: wrap; gap: 0; max-width: 1420px; margin: 0 auto; padding: 70px 70px 60px; background: var(--color-bg-grey); }
.contact__body { flex: 0 0 50%; padding-right: 60px; }
.contact__title { font-size: 35px; line-height: 45px; }
.contact__text { margin-top: 10px; font-size: 15px; line-height: 25px; }
.contact__info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 30px; margin-top: 60px; }
.contact-info { display: flex; align-items: flex-start; gap: 20px; }
.contact-info__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); }
.contact-info__svg { width: 16px; height: 16px; fill: currentColor; }
.contact-info__title { font-size: 17px; line-height: 26px; margin-bottom: 6px; }
.contact-info__text { font-size: 14px; line-height: 22px; }
.contact-info__link:hover { color: var(--color-accent); }
.contact__social { display: flex; gap: 20px; margin-top: 50px; }
.contact__social-link { font-family: var(--font-heading); font-size: 13px; color: var(--color-dark); }
.contact__social-link:hover { color: var(--color-accent); }
.contact__form { flex: 0 0 50%; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form__input, .contact-form__textarea, .contact-form__select, .sidebar-form__input, .sidebar-form__textarea {
  width: 100%; padding: 0 20px; height: 48px; border: 1px solid #e9e9e9; background: var(--color-white); border-radius: 3px;
  font-family: var(--font-heading); font-size: 13px; color: var(--color-dark); outline: 0; transition: border-color var(--transition);
}
.contact-form__textarea, .sidebar-form__textarea { height: auto; min-height: 140px; padding: 14px 20px; resize: vertical; }
.contact-form__input:focus, .contact-form__textarea:focus, .sidebar-form__input:focus, .sidebar-form__textarea:focus { border-color: var(--color-dark); }
.contact-form__fieldset { margin: 0; padding: 0; border: 0; }
.contact-form__legend { font-size: 13px; color: var(--color-text); margin-bottom: 4px; }
.contact-form__radio { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.contact-form__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%232c2c2c' d='M0 0h10L5 6z'/></svg>"); background-repeat: no-repeat; background-position: right 20px center; color: var(--color-text); }
.contact-form__file { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px dashed var(--color-border); background: var(--color-white); font-family: var(--font-heading); font-size: 13px; color: var(--color-dark); cursor: pointer; }
.contact-form__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g-recaptcha { margin: 4px 0; }
.contact-form__captcha, .sidebar-form__captcha { display: flex; align-items: center; gap: 12px; width: 230px; height: 70px; padding: 0 12px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa; font-size: 14px; color: var(--color-text); }
.contact-form__captcha-box, .sidebar-form__captcha-box { width: 24px; height: 24px; border: 2px solid #c8c8c8; border-radius: 3px; background: var(--color-white); }
.contact-form__captcha-brand, .sidebar-form__captcha-brand { margin-left: auto; font-size: 10px; color: #4a90e2; }
.contact-form__submit, .sidebar-form__submit { align-self: flex-start; height: 34px; padding: 0 20px; background: var(--color-accent); font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-dark); transition: background var(--transition), color var(--transition); }
.contact-form__submit:hover, .sidebar-form__submit:hover { background: var(--color-dark); color: var(--color-white); }
.form__message { display: none; font-size: 14px; color: var(--color-heading); }
.form__message[data-visible="true"] { display: block; }
.location { padding: 90px 0 0; text-align: center; }
.location__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.location__title { font-size: 35px; line-height: 45px; }
.location__text { margin-top: 12px; font-size: 15px; line-height: 25px; }
.location__divider { position: relative; display: block; width: 200px; height: 1px; margin: 25px auto 0; background: #d8d9da; }
.location__divider::before { content: ''; position: absolute; left: 50%; top: -1px; width: 80px; height: 3px; margin-left: -40px; background: #000; }
.location__card { margin-top: 60px; }
.location__img { width: 235px; height: 235px; margin: 0 auto; border-radius: 50%; object-fit: cover; }
.location__city { margin-top: 30px; font-size: 20px; }
.location__label { display: block; margin-top: 8px; font-family: var(--font-heading); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.location__address { margin-top: 36px; font-size: 14px; line-height: 24px; }
.map { margin-top: 60px; line-height: 0; }
.map__iframe { width: 100%; height: 500px; border: 0; filter: grayscale(1); }

/* blog listing ----------------------------------------------------------- */
.blog-list { padding: 80px 0 100px; }
.blog-list__container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.blog-list__main { flex: 1; min-width: 300px; }
.blog-item { margin-bottom: 60px; border: 1px solid var(--color-border); background: var(--color-white); }
.blog-item[data-hidden="true"] { display: none; }
.blog-item__media { position: relative; display: block; overflow: hidden; }
.blog-item__img { width: 100%; aspect-ratio: 810 / 385; object-fit: cover; transition: transform 0.5s; }
.blog-item:hover .blog-item__img { transform: scale(1.04); }
.blog-item__date { position: absolute; left: 20px; top: 20px; width: 71px; padding: 11px 0 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); text-align: center; }
.blog-item__day { display: block; font-size: 35px; line-height: 45px; font-weight: 500; color: var(--color-white); }
.blog-item__month { display: block; margin-top: -7px; font-size: 15px; line-height: 33px; color: var(--color-white); }
.blog-item__body { padding: 30px 30px 35px; }
.blog-item__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; font-family: var(--font-heading); font-size: 13px; color: var(--color-text); }
.blog-item__meta-item { display: inline-flex; align-items: center; gap: 8px; }
.blog-item__meta-svg { width: 12px; height: 12px; fill: var(--color-dark); }
.blog-item__title { margin-top: 20px; font-size: 23px; line-height: 33px; }
.blog-item__link:hover { color: var(--color-muted); }
.blog-item__divider { display: block; height: 1px; margin: 20px 0; background: var(--color-border); }
.blog-item__excerpt { font-size: 15px; line-height: 25px; }
.blog-item .link-more { margin-top: 25px; }
.sidebar { flex: 0 0 330px; }
.sidebar__widget { margin-bottom: 40px; padding: 30px; background: var(--color-bg-grey); }
.sidebar-form { display: flex; flex-direction: column; gap: 14px; }
.phone-card { position: relative; padding: 55px 30px 40px; text-align: center; color: var(--color-white); background: var(--color-navy) center / cover no-repeat; overflow: hidden; }
.phone-card::before { content: ''; position: absolute; inset: 0; background: rgba(18, 28, 39, 0.8); }
.phone-card__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #ee3b3b; color: #ee3b3b; animation: pulse 2s infinite; }
.phone-card__svg { width: 18px; height: 18px; fill: currentColor; }
.phone-card__number { position: relative; display: block; margin-top: 20px; font-family: var(--font-heading); font-size: 25px; color: var(--color-white); }
.phone-card__text { position: relative; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--color-white); }
.sidebar__widget:has(.phone-card) { padding: 0; background: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 59, 59, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(238, 59, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 59, 59, 0); } }

/* single post ------------------------------------------------------------ */
.post { padding: 80px 0 100px; }
.post__container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.post__article { flex: 1; min-width: 300px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 40px; font-family: var(--font-heading); font-size: 13px; color: var(--color-text); }
.post__meta-item { display: inline-flex; align-items: center; gap: 8px; }
.post__meta-svg { width: 12px; height: 12px; fill: var(--color-dark); }
.post__avatar { width: 30px; height: 30px; border-radius: 50%; }
.rich-text { font-family: var(--font-alt); font-size: 15px; line-height: 1.6; color: var(--color-text); }
.rich-text__heading { margin: 40px 0 20px; font-family: var(--font-alt); font-size: 32px; font-weight: 600; line-height: 1.25; color: var(--color-dark); }
.rich-text__subheading { margin: 30px 0 15px; font-family: var(--font-alt); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--color-dark); }
.rich-text__text { margin: 0 0 15px; }
.rich-text__list { margin: 0 0 15px 20px; list-style: disc; }
.rich-text__item { margin: 6px 0; }
.rich-text__link { color: var(--color-dark); text-decoration: underline; }
.rich-text__link:hover { color: var(--color-accent); }
.rich-text__strong { font-weight: 700; }
.rich-text__img { margin: 20px 0; }
.rich-text__table { width: 100%; margin: 20px 0; border-collapse: collapse; }
.rich-text__cell { padding: 8px 12px; border: 1px solid var(--color-border); text-align: left; }
.rich-text__quote { margin: 20px 0; padding: 15px 25px; border-left: 3px solid var(--color-accent); background: var(--color-bg-grey); }
.post-share { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 50px; padding: 25px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.post-share__label { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font-family: var(--font-heading); font-size: 14px; color: var(--color-dark); }
.post-share__label-svg { width: 14px; height: 14px; fill: currentColor; }
.post-share__link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg-grey); color: var(--color-dark); transition: background var(--transition), color var(--transition); }
.post-share__link:hover { background: var(--color-accent); }
.post-share__svg { width: 14px; height: 14px; fill: currentColor; }

/* shop / products -------------------------------------------------------- */
.shop { padding: 80px 0 100px; }
.shop__container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.shop__main { flex: 1; min-width: 300px; }
.shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.shop__count { font-size: 15px; }
.shop__sort { height: 44px; padding: 0 20px; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-white); font-size: 14px; color: var(--color-text); }
.shop__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
.product { text-align: center; }
.product__media { display: block; overflow: hidden; background: var(--color-white); }
.product__img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s; }
.product:hover .product__img { transform: scale(1.05); }
.product__title { margin-top: 15px; font-size: 20px; }
.product__link:hover { color: var(--color-muted); }
.shop__sidebar { flex: 0 0 330px; }
.shop-widget { margin-bottom: 40px; border: 1px solid var(--color-border); }
.shop-widget__title { padding: 20px 25px; background: var(--color-navy); font-size: 20px; color: var(--color-white); }
.shop-widget__empty { padding: 20px 25px; font-size: 15px; }
.product-cats__item { border-bottom: 1px solid var(--color-border); }
.product-cats__item:last-child { border-bottom: 0; }
.product-cats__item > .product-cats__link, .product-cats__item > .product-cats__count { display: inline-flex; padding: 12px 25px 12px; }
.product-cats__link { font-size: 14px; color: var(--color-dark); }
.product-cats__link:hover { color: var(--color-muted); }
.product-cats__count { float: right; padding: 12px 25px 0 0; font-size: 13px; }
.product-cats__sublist { clear: both; }
.product-cats__subitem { display: flex; justify-content: space-between; padding: 10px 25px 10px 40px; border-top: 1px solid var(--color-border); font-size: 13px; }
.product-cats__subitem .product-cats__count { float: none; padding: 0; }

/* legal pages ------------------------------------------------------------ */
.legal { padding: 60px 0 100px; }
.legal__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.legal .rich-text { font-family: var(--font-body); font-size: 15px; line-height: 1.7; }
.legal .rich-text__heading { font-family: var(--font-heading); font-weight: 500; }
.legal .rich-text__subheading { font-family: var(--font-heading); font-weight: 500; font-size: 20px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1500px) {
  .topbar__contacts { gap: 60px; padding-right: 4%; }
  .navbar__phone { display: none; }
}
@media (max-width: 1400px) {
  .hero__container { padding-left: 60px; }
  .projects-carousel__slide { width: 33.333%; }
}
@media (max-width: 1199px) {
  .header, .header-sticky { display: none; }
  .header-mobile { display: flex; }
  .hero__container { padding: 60px 20px; min-height: 420px; }
  .hero__title { font-size: 46px; line-height: 56px; }
  .consult__title, .consult__advice, .consult__review { flex-basis: 100%; max-width: 100%; padding: 0 0 20px; }
  .about__media, .about__body, .values__body, .values__media, .ceo__media, .ceo__body, .intro__lead, .intro__body { flex-basis: 100%; }
  .about__body, .values__body, .ceo__body { padding: 70px 30px; }
  .values__media { min-height: 420px; }
  .why-features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats__container { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
  .testimonials[data-layout="image-right"] .testimonials__media, .testimonials[data-layout="image-right"] .testimonials__body { flex-basis: 100%; }
  .testimonials[data-layout="image-right"] .testimonials__body { padding: 60px 30px; }
  .contact__body, .contact__form { flex-basis: 100%; padding-right: 0; }
  .contact__form { margin-top: 50px; }
  .contact__container { padding: 50px 30px; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .plan[data-popular="true"] { transform: none; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .pillars__container { grid-template-columns: 1fr; gap: 40px; }
  .pillar + .pillar::before { display: none; }
  .footer__about, .footer__links { flex-basis: 100%; max-width: 100%; padding: 0; border: 0; }
  .footer__links { margin-top: 50px; }
  .timeline-carousel { padding: 0 80px; }
}
@media (max-width: 991px) {
  .tint-types__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .features__grid { grid-template-columns: 1fr; }
  .why-reasons__media, .commitment__media { flex-basis: 100%; max-width: none; }
  .why-reasons__body { padding-top: 0; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .blog-list__container, .post__container, .shop__container { gap: 40px; }
  .sidebar, .shop__sidebar { flex-basis: 100%; }
  .enhance__media { flex-basis: 100%; max-width: none; }
  .process__title, .service-intro__title { font-size: 30px; }
  .page-title__heading { font-size: 44px; }
  [data-page="post"] .page-title__heading { font-size: 34px; }
  .cta__title, .work-cta__title, .clients__title, .testimonials__title, .why__title, .projects__title { font-size: 34px; line-height: 44px; }
  .ceo__subtitle { margin-bottom: 60px; }
  .ceo__text { font-size: 22px; line-height: 34px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero__title { font-size: 36px; line-height: 44px; }
  .services__title, .tint-types__title, .about__title, .intro__title, .enhance__title, .contact__title, .location__title, .pricing__title { font-size: 28px; line-height: 38px; }
  .services { padding: 60px 0 40px; }
  .services__head { margin-bottom: 40px; }
  .why { padding-top: 60px; }
  .why-features, .steps, .process__grid, .stats__container, .contact__info, .gallery__grid, .shop__grid, .contact-form__row { grid-template-columns: 1fr; }
  .tabs__nav { gap: 0 25px; }
  .tabs__tab { font-size: 16px; }
  .projects__filters { gap: 10px 30px; margin: 30px 0 40px; }
  .project-card { min-height: 380px; }
  .testimonials__media { flex-basis: 100%; max-width: none; }
  .testimonials__body { padding-left: 0; padding-top: 40px; }
  .testimonials__nav { position: static; margin-top: 20px; }
  .clients { padding-top: 40px; }
  .clients__head { padding-top: 40px; }
  .cta__container { min-height: 360px; }
  .footer__main { padding: 70px 0 50px; }
  .footer__columns { flex-direction: column; gap: 40px; }
  .footer__bottom .footer__container { flex-direction: column; gap: 10px; text-align: center; }
  .footer__legal { text-align: center; }
  .page-title__container { padding-top: 60px; min-height: 300px; }
  .breadcrumb { margin-top: 40px; }
  .about__body, .values__body, .ceo__body, .intro__lead, .intro__body { padding: 50px 20px; }
  .timeline-carousel { padding: 0 0 90px; }
  .timeline-carousel__arrow { top: auto; bottom: 0; }
  .timeline-carousel__arrow[data-dir="prev"] { left: calc(50% - 75px); }
  .timeline-carousel__arrow[data-dir="next"] { right: calc(50% - 75px); }
  .solutions__media { flex-basis: 100%; padding: 20px 20px 0; }
  .solutions__body { padding: 20px; }
  .map__iframe { height: 360px; }
  .scroll-top { right: 20px; }
  .side-panel__content { padding: 70px 25px 40px; }
  .search-popup__content { height: 300px; }
  .search-popup__logo { display: none; }
  .search-popup__close { right: 20px; }
  .search-popup__input { font-size: 20px; height: 70px; }
}
@media (max-width: 575px) {
  .hero__title { font-size: 30px; line-height: 38px; }
  .why-reasons__note { margin-left: 0; }
  .work-cta__tags { gap: 15px 30px; padding-left: 0; }
  .blog-item__body { padding: 25px 20px; }
  .post-share { flex-wrap: wrap; justify-content: flex-start; }
}

/* ==========================================================================
   PRODUCTS: single product, spec-sheet library, form states
   ========================================================================== */
.product__category { display: block; margin-top: 6px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); }
.product[data-hidden="true"] { display: none; }
.shop__specs-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 14px; color: var(--color-dark); }
.shop__specs-link:hover { color: var(--color-muted); }
.shop__specs-svg { width: 12px; height: 12px; fill: currentColor; transform: rotate(180deg); }
.shop-widget__text { padding: 20px 25px; font-size: 14px; line-height: 24px; }
.shop-widget__link { color: var(--color-dark); text-decoration: underline; }
.product-cats__link[aria-pressed="true"] { color: var(--color-dark); font-weight: 600; }

.product-detail { padding: 70px 0 100px; }
.product-detail__container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.product-gallery { flex: 0 0 46%; position: sticky; top: 110px; }
.product-gallery__main { background: var(--color-white); border: 1px solid var(--color-border); }
.product-gallery__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.product-gallery__thumb { display: block; width: 110px; border: 2px solid transparent; transition: border-color var(--transition); }
.product-gallery__thumb[aria-pressed="true"], .product-gallery__thumb:hover { border-color: var(--color-accent); }
.product-gallery__thumb-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-detail__body { flex: 1; min-width: 300px; }
.product-detail__category { display: block; font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; }
.product-detail__title { font-size: 40px; line-height: 1.15; margin-bottom: 25px; }
.product-detail__intro { font-size: 17px; line-height: 28px; color: var(--color-heading); margin-bottom: 10px; }
.product-detail__heading { margin: 32px 0 12px; font-size: 20px; }
.product-detail__list { padding-left: 22px; list-style: disc; }
ol.product-detail__list { list-style: decimal; }
.product-detail__item { margin: 6px 0; font-size: 15px; line-height: 25px; }
.product-detail__text { margin: 0 0 12px; font-size: 15px; line-height: 25px; }
.product-detail__note { margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--color-muted); }
.spec-table__wrap { overflow-x: auto; margin-top: 10px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table__head-cell { padding: 10px 12px; background: var(--color-navy); color: var(--color-white); text-align: left; font-family: var(--font-heading); font-weight: 500; }
.spec-table__cell { padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
.spec-table__row:nth-child(even) .spec-table__cell { background: var(--color-white); }
.product-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; margin-top: 40px; }
.product-detail__pdf { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 15px; color: var(--color-dark); border-bottom: 1px solid var(--color-dark); padding-bottom: 2px; }
.product-detail__pdf:hover { color: var(--color-muted); border-color: var(--color-muted); }
.product-detail__pdf-svg { width: 14px; height: 14px; fill: currentColor; transform: rotate(180deg); }
.product-detail__related { max-width: var(--container-narrow); margin: 90px auto 0; padding: 60px var(--gutter) 0; border-top: 1px solid var(--color-border); }
.product-detail__related-title { font-size: 28px; margin-bottom: 40px; }
.product-detail__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.specs { padding: 70px 0 100px; }
.specs__container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.specs__text { max-width: 760px; font-size: 16px; line-height: 27px; margin-bottom: 50px; }
.specs__link { color: var(--color-dark); text-decoration: underline; }
.specs__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; }
.spec-list__title { font-size: 20px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--color-heading); }
.spec-list__item { border-bottom: 1px solid var(--color-border); }
.spec-list__link { display: flex; align-items: center; gap: 14px; padding: 12px 4px; font-size: 15px; color: var(--color-heading); transition: background var(--transition); }
.spec-list__link:hover { background: var(--color-white); }
.spec-list__svg { width: 13px; height: 13px; fill: var(--color-dark); transform: rotate(180deg); flex: 0 0 13px; }
.spec-list__name { flex: 1; }
.spec-list__type { padding: 2px 8px; border-radius: 3px; background: var(--color-accent); font-family: var(--font-heading); font-size: 11px; color: var(--color-dark); }

.contact-form__honeypot, .sidebar-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__message[data-state="error"] { color: #c0392b; }
.form__message[data-state="success"] { color: #2d7a3a; }
.contact-form__submit[data-sending="true"], .sidebar-form__submit[data-sending="true"] { opacity: 0.6; cursor: wait; }

@media (max-width: 991px) {
  .product-gallery { flex-basis: 100%; position: static; }
  .product-detail__related-grid, .specs__groups { grid-template-columns: 1fr; }
  .product-detail__title { font-size: 32px; }
}