/* =============================================================
   STYLES.CSS — Page sections
   Design base: 1440px wide
   ============================================================= */


/* =============================================================
   HEADER
   Design: x:46 y:26, w:1348, fill:#071426b2, pad:12, space_between
   ============================================================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 46px;
  pointer-events: none;
}

.header__inner {
  pointer-events: auto;
  max-width: calc(var(--container-max) - 2 * var(--container-padding));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 20, 38, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  margin-top: 26px;
  padding: 12px;
  gap: 0;
}

/* Logo: Group 114 = circle photo 54×55 + "VAULTGUARD LOCKSMITH INC." Anton 14px #95d4e9
   Exported at ~1.5x → 213×83px → display at height:55px width:auto ≈ 142px */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img {
  height: 55px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Nav: Frame 113 cornerRadius:12, pad:[8,20,8,8] → Frame 46 gap:42 */
.header__nav {
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 8px 20px 8px 8px;
  border-radius: 12px;
}

/* Nav link: Inter 16px / 700 / white / ls:-0.8px */
.header__nav-link {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.8px;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.header__nav-link:hover { opacity: 0.75; }

/* Active "Home": Frame 45 cornerRadius:50, pad:[8,12] */
.header__nav-link--active {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 8px 12px;
  margin: -8px -12px;
}

/* Phone: Group 106, Anton 24px, #e8b64b */
.header__phone {
  font-family: var(--font-heading);
  font-size: 24px;
  color: #e8b64b;
  flex-shrink: 0;
  padding-left: 20px;
  transition: color 0.2s;
}
.header__phone:hover { color: #fff; }

/* Burger — hidden on desktop */
.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  flex-shrink: 0;
  margin-left: 12px;
}
.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.25s;
  transform-origin: center;
}
.header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =============================================================
   HERO
   Design: 1440 × 941 px, fill #071426, clip:true
   Content in max-width:1440px container with exact px positions.
   ============================================================= */

.hero {
  position: relative;
  height: 941px;
  background: #071426;
}

/* --- Background --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* image 26: fill the section, centered */
.hero__bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}



/* --- Content container --- */
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* --- Title frame: x:46 y:228 w:659 gap:34 --- */
.hero__text {
  position: absolute;
  left: 46px;
  top: 228px;
  width: 659px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Inter 20px / 500 / white 70% / lh:1.45 / ls:-0.792px */
.hero__subtitle {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* Anton 82px / #e8b64b / lh:1.1 / w:613px */
.hero__title {
  font-family: var(--font-heading);
  font-size: 82px;
  color: #e8b64b;
  line-height: 1.1;
  max-width: 613px;
  text-transform: uppercase;
}

.hero__title-white {
  color: var(--color-white);
}

/* --- Buttons frame: x:47 y:712 gap:15 --- */
.hero__buttons {
  position: absolute;
  left: 47px;
  top: 712px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Request Service btn: white bg / Anton 16px / ls:0.8px / pad:15.67 40 16.49 / h:50 */
.hero__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #071426;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 1;
  padding: 15.67px 40px 16.49px;
  height: 50px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.hero__btn-primary:hover { background: #e8b64b; }



/* =============================================================
   OUR SERVICES
   Design: 1440 × 1598 px, fill #f8fafc
   Heading: h2 at x:50 y:120 w:613 / desc at x:857 y:132 w:517
   Cards container: y:309, 2×2 grid, col w:664, gap:20
   ============================================================= */

.services {
  position: relative;
  background: var(--color-bg);
  padding: 120px 0;
}

/* Watermark "Services": Anton 300px opacity:0.05, y:-71 within section */
.services__watermark {
  position: absolute;
  top: -71px;
  left: 0;
  font-family: var(--font-heading);
  font-size: 300px;
  line-height: 1.1;
  color: var(--color-dark);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Heading row: h2 left (613px wide) + desc right (517px, 194px gap) */
.services__head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 61px; /* 309px cards start − 120px pad − ~128px content ≈ 61px */
}

/* Anton 62px / lh:1.1 / #071426 / w:613px */
.services__title {
  flex: 0 0 613px;
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: var(--color-dark);
}

/* Inter 20px / 500 / opacity:0.7 / lh:1.45 / ls:-0.792 / w:517px
   gap from heading right: 857−663 = 194px */
.services__desc {
  flex: 0 0 517px;
  margin-left: 194px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* 2×2 grid: 2 cols × 664px + gap:20 = 1348px (container content width) */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:60px 20px ;
}

/* Card column: layout:vertical gap:10 */
.services__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Image area: 664×445.5 → aspect-ratio ≈ 1.49 */
.services__card-img {
  position: relative;
  aspect-ratio: 664 / 445.5;
  overflow: hidden;
}

.services__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 10% dark overlay */
.services__card-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  opacity: 0.10;
  pointer-events: none;
}

/* Title label: x:0 y:0 h:51 fill:#f8fafc — Anton 32px #071426 ls:0.576
   Component 4 (51×51 triangle, rotation:-180°) creates the diagonal cut:
   right edge slants from (100%, 0) → (100%−51px, 100%) = 45° bevel */
.services__card-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 51px;
  padding: 0 calc(8px + 51px) 0 8px; /* extra 51px right pad — keeps text clear of cut */
  display: flex;
  align-items: center;
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-dark);
  letter-spacing: 0.576px;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 51px) 100%, 0 100%);
}

/* Bottom-right corner triangle (Component 2: x:624.5 y:406 w:40 h:40 fill:#f8fafc) */
.services__card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: var(--color-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Card body: layout:vertical gap:20 */
.services__card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inter 20px opacity:0.7 lh:1.45 ls:-0.792 */
.services__card-text {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-dark);
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* LEARN MORE: Anton 20px #a68132 ls:0.8 */
.services__card-link {
  font-family: var(--font-heading);
  font-size: 20px;
  color: #a68132;
  letter-spacing: 0.8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.services__card-link:hover { color: var(--color-gold); }


/* =============================================================
   CTA BANNER
   Design: x:46 y:2539 w:1348 fill:#fdc331 pad:40
   Left: text (Frame 416741) gap:18 / Right: phone button (316×82 #fff)
   Bottom-right: Component 2 triangle 40×40 fill:#f8fafc
   ============================================================= */

.cta-banner {
  background: var(--color-bg);
}

.cta-banner__inner {
  position: relative;
  background: var(--color-yellow); /* #fdc331 */
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
}

/* Corner triangle (Component 2): bottom-right 40×40 fill:#f8fafc */
.cta-banner__inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: var(--color-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Left text: Frame 416741, layout:vertical gap:18, max-width:613 */
.cta-banner__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 613px;
  flex-shrink: 1;
}

/* Anton 62px #071426 lh:1.1 */
.cta-banner__title {
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: var(--color-dark);
}

/* Inter 16px opacity:0.70 lh:1.3 ls:-0.792 */
.cta-banner__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.792px;
  color: var(--color-dark);
  opacity: 0.70;
}

/* Phone button: Group 106
   Shape path (Rectangle 90, 316×82):
   M33.44 0 → (283.29,0) → (283.29,36.02) → (253.33,72.04) → (0,72.04) → (0,36.02) → back
   Scaled to 316×82: top-left cut ~37px, right midpoint 50%, bottom-right cut ~34px from right
   Text at x:81 y:23 → padding-left:81px
   Shadow: drop-shadow 12px 14px 27.65px rgba(123,92,16,0.20) */
.cta-banner__phone {
  display: flex;
  align-items: center;
  width: 316px;
  height: 82px;
  flex-shrink: 0;
  background: #fff;
  padding-left: 81px;
  padding-right: 20px;
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-dark);
  white-space: nowrap;
  clip-path: polygon(
    37px  0,
    100%  0,
    100%  50%,
    calc(100% - 34px) 100%,
    0     100%,
    0     50%
  );
  filter: drop-shadow(12px 14px 27.65px rgba(123, 92, 16, 0.20));
  transition: background 0.2s;
}
.cta-banner__phone:hover { background: #f5f5f5; }


/* =============================================================
   ABOUT US
   Design: x:0 y:2815 w:1440, fill:#f8fafc, pad:[120,46]
   Frame 416742: 1348×795 fill:#071426 (dark card), layout:none
     - IMG_0305 1: (706,0) 642×795 — right photo
     - Frame 416743: (30,40) 589px — heading+desc, layout:vertical gap:33
     - Frame 416746: (42,660) — stats, gap:40
   ============================================================= */

.about {
  background: var(--color-bg);
  padding: 120px 0;
}

/* Dark card: 1348×795, two columns — left content | right photo */
.about__card {
  width: 100%;
  height: 795px;
  background: var(--color-dark);
  overflow: hidden;
  display: flex;
}

/* Left column: padding matches design coords (left:30, top:100) */
.about__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 100px 30px 40px;
}

/* Heading + description: gap:33 */
.about__content {
  display: flex;
  flex-direction: column;
  gap: 33px;
  max-width: 552px;
}

/* Anton 62px white lh:1.1 */
.about__title {
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: #fff;
}

/* Inter 16px white opacity:0.70 lh:1.3 ls:-0.792 */
.about__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.792px;
  color: #fff;
  opacity: 0.70;
}

/* Button: gold, Anton 16px, h:50 — sits below content */
.about__btn {
  margin-top: 32px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  background: #e8b64b;
  color: #071426;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  white-space: nowrap;
  align-self: flex-start;
  transition: background 0.2s;
}
.about__btn:hover { background: #d4a33e; }

/* Stats row: pushed to bottom, gap:40 */
.about__stats {
  margin-top: auto;
  display: flex;
  gap: 40px;
}

/* Each stat: layout:vertical gap:9 */
.about__stat {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Anton 62px white lh:1.1 */
.about__stat-num {
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: #fff;
}

/* Inter 14px white opacity:0.70 lh:1.3 ls:-0.792 */
.about__stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.792px;
  color: #fff;
  opacity: 0.70;
}

/* Right photo: fixed 642px wide, full card height */
.about__image {
  flex: 0 0 642px;
  overflow: hidden;
}
.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* =============================================================
   AREAS
   Design: 1440×910 fill:#f8fafc
   Head: x:46 y:120 w:1348 — h2 w:388 Anton 62px / desc w:517 Inter 20px 500 op:0.70
   Slider: cards x:166 y:356, 396×363 each, gap:20px, 3 cards visible
   Arrows: x:22 & x:82, y:671, 48×48, fill:#f5f1ed 20% opacity
   Caption: x:461 y:761, Inter 20px 500, centered
   ============================================================= */

.areas {
  position: relative;
  background: var(--color-bg);
  padding: 120px 0;
}

/* Watermark "Areas": Anton 300px opacity:0.05, at (23,−76) */
.areas__watermark {
  position: absolute;
  top: -76px;
  left: 23px;
  font-family: var(--font-heading);
  font-size: 300px;
  line-height: 1.1;
  color: var(--color-dark);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Head: h2 left (388px) / desc right (517px), space-between, mb:120px */
.areas__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 120px;
}

/* Anton 62px #071426 lh:1.1 */
.areas__title {
  flex: 0 0 388px;
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: var(--color-dark);
}

/* Inter 20px 500 opacity:0.7 lh:1.45 ls:-0.792 */
.areas__desc {
  flex: 0 0 517px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* Slider wrapper: cards start at x:166 from section left */
.areas__slider-wrap {
  padding-left: 166px;
  overflow: hidden;
  height: 363px; /* design card height — clips any card content below this line */
}

/* Track: flex row, animates on slide */
.areas__track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Card: 396px wide, auto height bg:#ebeef1 */
.areas__card {
  position: relative;
  flex: 0 0 396px;
  height: auto;
  background: #ebeef1;
  overflow: hidden;
  padding: 22px 22px 72px; /* 72px bottom = 50px btn + 22px gap */
  display: flex;
  flex-direction: column;
}

/* Bottom-right corner triangle: (356.16,323) 40×40 fill:#f8fafc */
.areas__card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: var(--color-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 2;
}

/* Anton 32px #071426 */
.areas__card-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 20px;
}

/* Area list: Inter 20px op:0.70 lh:1.45 */
.areas__card-list {
list-style: disc;
margin-left: 40px;
  display: flex;
  flex-direction: column;
	margin-bottom: 6px;
}

.areas__card-list li {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-dark);
  opacity: 0.70;
}

/* Button: absolutely at bottom-left, auto width (content-sized) */
.areas__card-btn {
  position: absolute;
  left: 22px;
  bottom: 22px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  background: var(--color-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  white-space: nowrap;
  z-index: 1;
  transition: background 0.2s;
}
.areas__card-btn:hover { background: #0d2240; }

/* Navigation arrows: absolute at (22,671) and (82,671) in section */
.areas__nav {
  position: absolute;
  top: 655px;
  left: 22px;
  display: flex;
  gap: 12px;
}

/* Arrow buttons: 48×48, fill:#f5f1ed at 20% opacity */
.areas__arrow {
  width: 48px;
  height: 48px;
  background: rgba(245, 241, 237, 0.20);
  border: 1px solid rgba(31, 29, 30, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.areas__arrow:hover   { background: rgba(245, 241, 237, 0.45); }
.areas__arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* Caption: Inter 20px 500 #071426, centered (y:761 = cards end + 42px) */
.areas__caption {
  text-align: center;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  margin-top: 42px;
}
.areas__caption a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =============================================================
   GALLERY
   Design: 1440×1009 fill:#f8fafc
   Head: (46,120) jc:space_between — h2 w:597 / desc w:517 at x:857
   Mosaic Group 266: (63,306) 1314×583, items absolutely positioned
   ============================================================= */

.gallery {
  position: relative;
  background: var(--color-bg);
  padding: 120px 0;
}

/* Watermark "gallery": Anton 300px opacity:0.05 */
.gallery__watermark {
  position: absolute;
  top: -45px;
  left: 0;
  font-family: var(--font-heading);
  font-size: 300px;
  line-height: 1.1;
  color: var(--color-dark);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Head: h2 left (597px) / desc right (517px), space-between, mb:118px */
.gallery__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 118px;
}

/* Anton 62px #071426 lh:1.1 */
.gallery__title {
  flex: 0 0 597px;
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: var(--color-dark);
}

/* Inter 20px 500 opacity:0.7 lh:1.45 ls:-0.792 */
.gallery__desc {
  flex: 0 0 517px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* Mosaic: Group 266 (63,306) 1314×583 — 17px auto-margin inside container */
.gallery__mosaic {
  position: relative;
  width: 1314px;
  height: 583px;
  margin: 0 auto;
}

/* All items: absolute, overflow hidden */
.gallery__item {
  position: absolute;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Item 1: IMG_0313 9 — (0,212) 159×161 */
.gallery__item--1 { left: 0;      top: 212px; width: 159px; height: 161px; }

/* Item 2: IMG_0313 2 — (175,69) 281×304 */
.gallery__item--2 { left: 175px;  top: 69px;  width: 281px; height: 304px; }

/* Dark accent squares */
.gallery__item--dot { background: var(--color-dark); width: 53px; height: 53px; }
.gallery__item--dot1 { left: 192px;  top: 389px; }
.gallery__item--dot2 { left: 1035px; top: 141px; }

/* Item 3: IMG_0313 4 — (261,389) 194×194 */
.gallery__item--3 { left: 261px;  top: 389px; width: 194px; height: 194px; }

/* Item 4: IMG_0313 3 — (472,122) 335×340 */
.gallery__item--4 { left: 472px;  top: 122px; width: 335px; height: 340px; }

/* Item 5: IMG_6758 1 — (823,0) 196×194 */
.gallery__item--5 { left: 823px;  top: 0;     width: 196px; height: 194px; }

/* Item 6: IMG_0313 6 — (823,210) 279×283 */
.gallery__item--6 { left: 823px;  top: 210px; width: 279px; height: 283px; }

/* Item 7: IMG_0313 7 — (1118,210) 196×194 */
.gallery__item--7 { left: 1118px; top: 210px; width: 196px; height: 194px; }

/* Play button: same style as hero play button */
.gallery__play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery__play:hover { background: rgba(255, 255, 255, 0.30); }


/* =============================================================
   FAQ
   Design: 1440×auto fill:#071426
   Watermark "FAQ": Anton 300px #f8f8f8 op:0.05 at (12,−80)
   Heading: Anton 62px #f8fafc
   Accordion: w:760 corner:6, border:1px #363636 top/left/right
     Items: border-bottom:1px #363636
     Question: Anton 32px #f8fafc, pad:24px
     Icon: 10×10 + / – #b8b8b8
     Answer: Inter 16px #fff op:0.70, h:70px, pl:24px
   ============================================================= */

.faq {
  position: relative;
  background: var(--color-dark);
  padding: 120px 0;
}

/* Watermark "FAQ": at (12,−80), Anton 300px, #f8f8f8, op:0.05 */
.faq__watermark {
  position: absolute;
  top: -80px;
  left: 12px;
  font-family: var(--font-heading);
  font-size: 300px;
  line-height: 1.1;
  color: #f8f8f8;
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}

/* Heading: Anton 62px #f8fafc */
.faq__title {
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: #f8fafc;
  text-align: center;
  margin-bottom: 60px;
}

/* Accordion box: w:760 corner:6, border 1px #363636 — top/left/right only */
.faq__accordion {
  width: 760px;
  margin: 0 auto;
  border: 1px solid #363636;
  border-bottom: none;
  border-radius: 6px;
  overflow: hidden;
}

/* Each item: border-bottom closes the box */
.faq__item {
  border-bottom: 1px solid #363636;
}

/* Question button: full width, pad:24px, space-between */
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s;
}
.faq__btn:hover { opacity: 0.80; }

/* Question text: Anton 32px #f8fafc */
.faq__q {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  color: #f8fafc;
}

/* Plus / minus icon: 10×10 CSS-drawn with ::before (vertical) and ::after (horizontal) */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: #b8b8b8;
  transition: opacity 0.25s;
}
/* Vertical bar */
.faq__icon::before {
  width: 2px;
  height: 10px;
  left: 4px;
  top: 0;
}
/* Horizontal bar */
.faq__icon::after {
  width: 10px;
  height: 2px;
  left: 0;
  top: 4px;
}
/* When open → hide vertical bar → becomes minus */
.faq__item.is-open .faq__icon::before { opacity: 0; }

/* Answer panel: h:70px, smooth max-height transition */
.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.faq__item.is-open .faq__panel { max-height: 120px; }

/* Answer text: Inter 16px #fff op:0.70, pl:24px (x:24 in design) */
.faq__ans {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.792px;
  color: #fff;
  opacity: 0.70;
  padding: 0 24px 24px;
}


/* =============================================================
   TESTIMONIALS
   Design: 1440×820 fill:#f8fafc
   Watermark "Testimonials": Anton 300px #071426 op:0.05 at (−640,−50)
   Title: (46,120) space-between — h2 w:388 / desc w:517
   Cards: (46,306) 3×436px gap:20, h:365, fill:#fff shadow op:0.05
     Stars: SVG w:152 h:24 — 5 filled #071426 stars
     Quote: Inter 16px op:0.70 h:185
     Name: Inter 20px fw:700 #666
   Caption: Inter 20px 500 centered below cards
   ============================================================= */

.testimonials {
  position: relative;
  background: var(--color-bg);
  padding: 120px 0;
}

/* Watermark at (−640,−50): only the middle portion visible */
.testimonials__watermark {
  position: absolute;
  top: -50px;
  left: -640px;
  font-family: var(--font-heading);
  font-size: 300px;
  line-height: 1.1;
  color: var(--color-dark);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}

/* Head: h2 left (388px) / desc right (517px), space-between, mb:86px */
.testimonials__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 86px;
}

/* Anton 62px #071426 lh:1.1 */
.testimonials__title {
  flex: 0 0 388px;
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: var(--color-dark);
}

/* Inter 20px 500 op:0.70 lh:1.45 ls:-0.792 */
.testimonials__desc {
  flex: 0 0 517px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.70;
  line-height: 1.45;
  letter-spacing: -0.792px;
}

/* 3-column grid: (1348-40)/3 = 436px each, gap:20 */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 0;
}

/* Card: fill:#fff, shadow rgba(0,0,0,0.05), pad:20 gap:24 */
.testimonials__card {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 323px;
}

/* Stars: SVG w:152 h:24 */
.testimonials__stars { flex-shrink: 0; }

/* Quote: Inter 16px #071426 op:0.70 lh:1.3 ls:-0.792 */
.testimonials__quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.792px;
  color: var(--color-dark);
  opacity: 0.70;
  flex: 1;
}

/* Name: Inter 20px fw:700 #666666 */
.testimonials__name {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: #666666;
  margin-top: auto;
}

/* Caption: Inter 20px 500 #071426, centered, mt:40px below cards */
.testimonials__caption {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark);
  text-align: center;
  margin-top: 40px;
}

.testimonials__review-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-dark);
  transition: opacity 0.2s;
}
.testimonials__review-link:hover { opacity: 0.65; }


/* =============================================================
   CTA SECTION (Contact / Request Form)
   Design: Block 9, y:7889, section 1440px fill:#f8fafc pad:[80,46,120,46]
   Card: Frame 416750, 1348×856 fill:#071426
   Inner: Frame 416753 at (70,62) w:1208, flex-col gap:42
   Row 1: Frame 416752 w:1163 gap:154 — Frame 416751 w:687 (title+desc) | Group 106 (phone Anton 48px #e8b64b)
   Row 2: features 2×2 abs-grid h:480 (2×357×236 gap:8) + gap:32 + form 456px fill:#fff
   ============================================================= */

.cta-section {
  background: var(--color-bg);
  padding: 80px 0 120px;
}

.cta-section__card {
  background: var(--color-dark);
  clip-path: polygon(
    0 0,
    calc(100% - 162px) 0,
    100% 155px,
    100% 100%,
    0 100%
  );
}

.cta-section__inner {
  padding: 62px 70px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* Row 1: Frame 416752 — w:1163 gap:154 (text block 687px | phone number) */
.cta-section__top {
  display: flex;
  align-items: flex-end;
  gap: 154px;
  max-width: 1163px;
}

.cta-section__text {
  flex: 0 0 687px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Anton 62px #f8fafc lh:1.1 */
.cta-section__title {
  font-family: var(--font-heading);
  font-size: 62px;
  line-height: 1.1;
  color: #f8fafc;
}

/* Inter 20px fw:500 op:0.70 lh:1.45 */
.cta-section__desc {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: #f8fafc;
  opacity: 0.70;
  line-height: 1.45;
  max-width: 636px;
}

/* Phone: Group 106 — "619-738-1709" Anton 48px #e8b64b on dark bg (gold text, no button fill) */
.cta-section__phone {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1;
  color: #e8b64b;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.cta-section__phone:hover { opacity: 0.80; }

/* Row 2: features grid + form panel */
.cta-section__bottom {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* 2×2 feature cards grid — cards ~357×236 each, gap:8 */
.cta-section__features {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(236px, 1fr));
  gap: 8px;
}

/* Individual feature card: border:#575656 pad:20 flex-col gap:44 */
.cta-section__feature {
  border: 1px solid #575656;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Number: Anton 16px #fafafa */
.cta-section__feat-num {
  font-family: var(--font-heading);
  font-size: 16px;
  color: #fafafa;
}

.cta-section__feat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 8px;
	margin-top: auto;
}

/* Title: Anton 16px #fafafa */
.cta-section__feat-title {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.2;
  color: #fafafa;
}

/* Desc: Inter 14px #fafafa op:0.70 */
.cta-section__feat-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  color: #fafafa;
  opacity: 0.70;
}

/* Form wrap: outer container — w:519 h:457, border:#575656, pad:12, corner accents */
.cta-section__form-wrap {
  flex: 0 0 519px;
  align-self: stretch;
  border: 1px solid #575656;
  padding: 12px;
  position: relative;
}

/* Corner accent — top-right: white L (12×2 top + 2×12 right) */
.cta-section__form-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* Corner accent — bottom-left: white L (12×2 bottom + 2×12 left) */
.cta-section__form-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}

/* Inner form: fill:#ffffffed, pad:32, gap:32, layout:vertical */
.cta-section__form {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.93);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Inputs section: gap:16 between label groups */
.cta-section__inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Label group: label text (16px) + gap:10 + field (h:56) */
.cta-section__label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Label text: Inter 16px fw:500 #071426 lh:1 */
.cta-section__label-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-dark);
}

/* Field overlay: fill:#07142626 = rgba(7,20,38,0.15), h:56, 1px border #07142608 */
.cta-section__field {
  height: 56px;
  background: rgba(7, 20, 38, 0.15);
  border: 1px solid rgba(7, 20, 38, 0.032);
  position: relative;
}

/* Inputs: Instrument Sans 16px, pad:[18,12] */
.cta-section__field input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 12px;
  font-family: 'Instrument Sans', var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
}
.cta-section__field input::placeholder { color: rgba(7, 20, 38, 0.45); }
.cta-section__field input:focus { outline: 2px solid rgba(232, 182, 75, 0.50); outline-offset: -2px; }

/* Select dropdown: same styling, appearance reset, right padding for chevron */
.cta-section__field--select select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 38px 0 12px;
  font-family: 'Instrument Sans', var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cta-section__field--select select:focus { outline: 2px solid rgba(232, 182, 75, 0.50); outline-offset: -2px; }

/* Chevron arrow: CSS-drawn, matches design Vector (9×4.5 stroke:#999, round) */
.cta-section__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  border-right: 1.5px solid #999;
  border-bottom: 1.5px solid #999;
  pointer-events: none;
}

/* Buttons row: Submit (flex:1) + gap:15 + Call Now */
.cta-section__btns {
  display: flex;
  gap: 15px;
  height: 56px;
}

/* Submit: dark bg, Anton 16px #f8fafc ls:0.8, centered */
.cta-section__submit {
  width: 100%;
  height: 100%;
  background: var(--color-dark);
  color: #f8fafc;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.cta-section__submit:hover { background: #0d2040; }

.cta-section__sms-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.cta-section__sms-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-dark);
  cursor: pointer;
}

.cta-section__sms-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(7, 20, 38, 0.60);
  line-height: 1.4;
}

.cta-section__sms-link {
  color: var(--color-dark);
  text-decoration: underline;
}
.cta-section__sms-link:hover { color: var(--color-gold-dark); }



/* =============================================================
   FOOTER
   Design: y:8945 fill:#090f16 pad:[80,46,16,46]
   Content Wrapper: flex-col gap:29
   Row 1: divider + flex-row (contact | nav cols | social)
   Row 2: "VAULTGUARD" 295px #2d2d2d watermark + copyright
   ============================================================= */

.footer {
  background: #090f16;
  padding: 80px 0 16px;
  overflow: hidden;
}

/* Top horizontal divider line */
.footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: 32px;
}

/* Main content row: contact | nav | social */
.footer__row {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  justify-content: space-between;
  margin-bottom: 29px;
}

/* Column headings: Anton 20px #9e9e9e */
.footer__col-heading {
  font-family: var(--font-heading);
  font-size: 20px;
  color: #9e9e9e;
  margin-bottom: 20px;
}

/* ---- Contact column ---- */
.footer__col--contact {
  flex: 0 0 auto;
  min-width: 276px;
}

/* "Let's Get Started" + separator + CTA button */
.footer__cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Inter 22px white */
.footer__cta-text {
  font-family: var(--font-body);
  font-size: 22px;
  color: #fff;
  white-space: nowrap;
}

/* 1px vertical separator */
.footer__cta-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}

/* "Request A Quote" button: bg:#9e9e9e66 Inter 16px white pad:[9,24] */
.footer__cta-btn {
  font-family: var(--font-body);
  font-size: 16px;
  color: #fff;
  background: rgba(158, 158, 158, 0.40);
  padding: 9px 24px 10px;
  white-space: nowrap;
  transition: background 0.2s;
}
.footer__cta-btn:hover { background: rgba(158, 158, 158, 0.65); }

/* Contact info list */
.footer__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row with icon + text, pad:[4,0] from design */
.footer__info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
  max-width: 284px;
}

.footer__info-item--plain { padding-left: 0; }

.footer__info-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__info-link {
  color: #fff;
  transition: opacity 0.2s;
}
.footer__info-link:hover { opacity: 0.70; }

/* ---- Navigation columns ---- */
.footer__nav {
  display: flex;
  gap: 80px;
  flex-shrink: 0;
}

.footer__nav-col { display: flex; flex-direction: column; }

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Inter 16px white, height:24px, pad:[0,2] */
.footer__nav-link {
  font-family: var(--font-body);
  font-size: 16px;
  color: #fff;
  display: block;
  height: 24px;
  line-height: 24px;
  padding: 0 2px;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.footer__nav-link:hover { opacity: 0.60; }

/* ---- Quick Contact / Social column — below footer__row, right edge ---- */
.footer__social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 24px;
}

.footer__social-col .footer__col-heading {
  margin-bottom: 12px;
}

/* Social icons: 48×48 boxes, gap:4 */
.footer__socials {
  display: flex;
  gap: 4px;
}

.footer__social {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s, border-color 0.2s;
}
.footer__social:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.30);
}

/* ---- Bottom: watermark + copyright ---- */
.footer__bottom {
  position: relative;

  overflow: hidden;
}

/* Anton 295px #2d2d2d — clipped watermark */
.footer__watermark {

  left: 0;
  font-family: var(--font-heading);
  font-size: 295px;
  line-height: 1;
  color: #2d2d2d;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Copyright: Inter 12px #9e9e9e — sits above the watermark */
.footer__copy {
  bottom: 16px;
  left: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: #9e9e9e;
  white-space: nowrap;
	margin-top: 12px;
}


/* =============================================================
   VIDEO MODAL
   ============================================================= */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.video-modal__box {
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.video-modal__close:hover { opacity: 1; }

.video-modal__media {
  width: 100%;
  height: 100%;
}

.video-modal__media iframe,
.video-modal__media video {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}


/* =============================================================
   CHAT WIDGET — fixed bottom-right
   ============================================================= */

.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-widget__btn {
  width: 70px;
  height: 70px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.chat-widget__btn img {
  display: block;
  width: 70px;
  height: 70px;
}

/* "Call Now" popup */
.chat-widget__call {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  outline: 1px solid #e1e1e1;
  border: 1px solid #071426;
  color: #071426;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 1;
  white-space: nowrap;
  padding: 0 16px;
  height: 42px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

.chat-widget.is-open .chat-widget__call {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-widget__call:hover {
  background: #e8b64b;
  border-color: #e8b64b;
  outline-color: #e8b64b;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

/* --- Tablet / small desktop: 768px – 1023px --- */
@media (max-width: 1200px) {
  /* Services: description wraps below heading */
  .services__head { flex-wrap: wrap; }
  .services__title { flex: 0 0 100%; }
  .services__desc  { flex: 0 0 auto; margin-left: 0; max-width: 600px; }
}

@media (max-width: 1023px) {

  /* Header */
  .header { padding: 0 24px; }
  .header__inner { margin-top: 12px; }

  .header__nav {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    background: rgba(7, 20, 38, 0.97);
    border-radius: 0 0 12px 12px;
    padding: 12px;
  }
  .header__nav.is-open { display: flex; }
  .header__nav-link { width: 100%; text-align: center; }
  .header__nav-link--active { margin: 0; }
  .header__phone { display: none; }
  .header__burger { display: flex; }

  /* Hero: switch to flex column, natural height */
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10%;
  }

  .hero__inner {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
  }

  .hero__text {
    position: static;
    width: auto;
    max-width: 100%;
    padding-top: 140px;
    gap: 20px;
  }

  .hero__subtitle { font-size: clamp(14px, 2.5vw, 18px); }
  .hero__title    { font-size: clamp(32px, 5.5vw, 62px); max-width: none; }

  .hero__buttons {
    position: static;
    margin-top: 24px;
    flex-wrap: wrap;
  }

  /* Services */
  .services { padding: 80px 0; }
  .services__grid { gap: 16px; }
  .services__card-label {
    font-size: 24px;
    height: 42px;
    padding-right: calc(8px + 42px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
  }

  /* CTA Banner */
  .cta-banner__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cta-banner__title { font-size: clamp(28px, 4vw, 48px); }
  .cta-banner__phone { width: 260px; font-size: 24px; padding-left: 40px; }

  /* About us */
  .about { padding: 80px 0; }
  .about__card { height: auto; flex-direction: column; }
  .about__left { padding: 40px 30px; }
  .about__image { flex: none; width: 100%; height: 400px; }

  /* Areas */
  .areas { padding: 80px 0; }
  .areas__head { flex-direction: column; gap: 20px; margin-bottom: 60px; }
  .areas__title { flex: none; font-size: clamp(28px, 4.5vw, 48px); }
  .areas__desc  { flex: none; font-size: 16px; }
  .areas__slider-wrap { padding-left: 24px; height: auto; }
  .areas__card  { flex: 0 0 320px; }
  .areas__nav   { top: auto; bottom: 80px; left: 24px; }

  /* Gallery */
  .gallery { padding: 80px 0; }
  .gallery__head { flex-direction: column; gap: 20px; margin-bottom: 60px; }
  .gallery__title { flex: none; font-size: clamp(28px, 4.5vw, 48px); }
  .gallery__desc  { flex: none; font-size: 16px; }
  .gallery__mosaic { width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gallery__item  { position: static; width: auto !important; height: 180px !important; }
  .gallery__item--dot { display: none; }

  /* FAQ */
  .faq { padding: 80px 0; }
  .faq__title { font-size: clamp(28px, 4.5vw, 48px); margin-bottom: 40px; }
  .faq__accordion { width: 100%; }
  .faq__q { font-size: clamp(18px, 2.5vw, 28px); }

  /* Testimonials */
  .testimonials { padding: 80px 0; }
  .testimonials__head { flex-direction: column; gap: 20px; margin-bottom: 48px; }
  .testimonials__title { flex: none; font-size: clamp(28px, 4.5vw, 48px); }
  .testimonials__desc  { flex: none; font-size: 16px; }
  .testimonials__grid  { grid-template-columns: 1fr; }
  .testimonials__card  { height: auto; }

  /* CTA Section */
  .cta-section { padding: 60px 0 80px; }
  .cta-section__inner { padding: 40px 30px; gap: 32px; }
  .cta-section__top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cta-section__text { flex: none; width: 100%; }
  .cta-section__title { font-size: clamp(28px, 4.5vw, 48px); }
  .cta-section__desc { font-size: 16px; max-width: 100%; }
  .cta-section__phone { font-size: 32px; }
  .cta-section__bottom { flex-direction: column; gap: 24px; }
  .cta-section__features { grid-template-columns: repeat(2, 1fr); }
  .cta-section__form-wrap { flex: none; width: 100%; }

  /* Footer */
  .footer__row { flex-wrap: wrap; gap: 40px; }
  .footer__nav { gap: 40px; flex-wrap: wrap; }
  .footer__cta-row { flex-wrap: wrap; gap: 12px; }
  .footer__bottom { height: 160px; }
  .footer__watermark { font-size: 200px; bottom: -40px; }
}

/* --- Mobile: ≤ 767px --- */
@media (max-width: 767px) {

  /* ── Global container padding ── */
  :root { --container-padding: 16px; }

  /* ── Watermarks — 120px on mobile, positions from Figma mobile scan ── */
  .services__watermark    { font-size: 120px; top: -17px; left: -90px; }
  .areas__watermark       { font-size: 120px; top:  -7px; left: -14px; }
  .gallery__watermark     { font-size: 120px; top:   0px; left: -74px; }
  .faq__watermark         { font-size: 120px; top:  -7px; left: -14px; }
  .testimonials__watermark{ font-size: 120px; top: -16px; left: -274px; }

  /* ── Header ── */
  .header { padding: 0 16px; }
  .header__inner { padding: 10px; margin-top: 12px; }
  .header__phone { display: block; font-size: 14px; padding-left: 0; }

  /* ── Hero — h:749, text at (x:15 y:200) w:354 gap:28, title 48px ── */
  .hero {
    min-height: 749px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 60px;
  }
  .hero__inner {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .hero__text {
    position: static;
    width: auto;
    max-width: 354px;
    padding-top: 200px;
    gap: 28px;
  }
  .hero__subtitle { font-size: 20px; }
  .hero__title    { font-size: 48px; max-width: none; }
  .hero__buttons  { position: static; margin-top: 28px; flex-wrap: wrap; }
  .hero__btn-primary { height: 50px; padding: 0 32px; font-size: 16px; }

  /* ── Services — pad-top:53, 1 col gap:32, card img h:358, label h:41 ── */
  .services { padding: 53px 0 60px; }
  .services__head  { flex-direction: column; gap: 16px; margin-bottom: 32px; }
  .services__title { flex: none; font-size: 32px; }
  .services__desc  { flex: none; margin-left: 0; font-size: 16px; max-width: 100%; }
  .services__grid  { grid-template-columns: 1fr; gap: 32px; }
  .services__card-img  { height: 358px; aspect-ratio: auto; }
  .services__card-body { gap: 12px; }
  .services__card-text { font-size: 15px; }
  .services__card-link { font-size: 20px; }
  .services__card-label {
    font-size: 20px;
    height: 41px;
    padding-right: calc(8px + 41px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 41px) 100%, 0 100%);
  }

  /* ── CTA Banner — outer pad:30, inner h:349 pad:[20,16] space-between ── */
  .cta-banner { padding: 30px 0; }
  .cta-banner__inner {
    flex-direction: column;
    height: 349px;
    padding: 20px 16px;
    justify-content: space-between;
    gap: 0;
  }
  .cta-banner__title { font-size: 32px; }
  .cta-banner__desc  { font-size: 16px; }
  .cta-banner__phone {
    width: 316px;
    height: 82px;
    padding-left: 81px;
    padding-right: 20px;
    font-size: 32px;
    color: var(--color-dark);
    clip-path: polygon(37px 0, 100% 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 0 50%);
    align-self: flex-start;
  }

  /* ── About — pad:[70,16], image top h:447, dark card pad:[32,16] gap:52 ── */
  .about { padding: 70px 0; }
  .about__card  { flex-direction: column; height: auto; gap: 0; }
  .about__image { order: 1; flex: none; width: 100%; height: 447px; }
  .about__left  { order: 2; padding: 32px 16px; gap: 52px; }
  /* Reorder: content → stats → btn (HTML: content → btn → stats) */
  .about__content  { order: 1; gap: 16px; max-width: 100%; }
  .about__title    { font-size: 32px; }
  .about__body     { font-size: 16px; }
  .about__btn      { order: 3; width: 164px; height: 50px; margin-top: 0; }
  .about__stats    { order: 2; gap: 12px; justify-content: space-between; flex-wrap: nowrap; margin-top: 0; }
  .about__stat-num { font-size: 32px; }

  /* ── Gallery — pad-top:70, images y:259 w:281 h:285 gap:12 ── */
  .gallery { padding: 70px 0; }
  .gallery__head  { flex-direction: column; gap: 16px; margin-bottom: 40px; }
  .gallery__title { flex: none; font-size: 32px; }
  .gallery__desc  { flex: none; font-size: 16px; }
  .gallery__mosaic {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    height: auto;
    width: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .gallery__mosaic::-webkit-scrollbar { display: none; }
  .gallery__item {
    position: static !important;
    flex: 0 0 281px;
    width: 281px !important;
    height: 285px !important;
    scroll-snap-align: start;
  }
  .gallery__item--dot { display: none; }

  /* ── Areas — pad:[70,16] gap:40, card 347×377, list fs:20 ── */
  .areas { padding: 70px 0; }
  .areas__head  { flex-direction: column; gap: 16px; margin-bottom: 40px; }
  .areas__title { flex: none; font-size: 32px; }
  .areas__desc  { flex: none; font-size: 16px; }
  .areas__track { gap: 12px; }
  .areas__slider-wrap { padding-left: 16px; height: auto; }
  .areas__card  { flex: 0 0 347px; height: 377px; }
  .areas__card-heading { font-size: 32px; }
  .areas__card-list { list-style: none; margin-left: 0; padding-left: 20px; gap: 12px; }
  .areas__card-list li { font-size: 20px; }
  .areas__card-btn     { font-size: 16px; }
  .areas__nav { position: static; margin-top: 24px; padding-left: 16px; }
  .areas__caption { font-size: 16px; margin-top: 20px; }

  /* ── FAQ — pad:[70,16] gap:40, q fs:20, btn gap:4 ── */
  .faq { padding: 70px 0; }
  .faq__title     { font-size: 32px; margin-bottom: 40px; }
  .faq__accordion { width: 100%; }
  .faq__btn { padding: 12px; gap: 4px; }
  .faq__q   { font-size: 20px; }
  .faq__ans { padding: 0 12px 12px; }

  /* ── Testimonials — pad:[70,16] gap:40, cards 347×auto gap:20 ── */
  .testimonials { padding: 70px 0; }
  .testimonials__head  { flex-direction: column; gap: 16px; margin-bottom: 40px; }
  .testimonials__title { flex: none; font-size: 32px; }
  .testimonials__desc  { flex: none; font-size: 16px; }
  .testimonials__grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .testimonials__grid::-webkit-scrollbar { display: none; }
  .testimonials__card {
    flex: 0 0 290px;
    height: auto;
    scroll-snap-align: start;
  }
  .testimonials__caption { font-size: 16px; }

  /* ── CTA Section — pad:[70,16], inner x:11 y:34 gap:32 ── */
  .cta-section { padding: 70px 0; }
  .cta-section__card  { clip-path: none; }
  .cta-section__inner { padding: 34px 11px; gap: 32px; }
  .cta-section__title { font-size: 32px; }
  .cta-section__desc  { font-size: 16px; max-width: 100%; }
  /* Phone: gold text, no background (Rectangle 90 disabled on mobile) */
  .cta-section__phone { font-size: 32px; color: #e8b64b; }
  /* Numbers hidden on mobile */
 

  /* Top: centered (Figma: justifyContent:center, alignItems:center) */
  .cta-section__top {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 100%;
    text-align: center;
  }
  .cta-section__text { flex: none; width: 100%; text-align: center; }

  /* Bottom: form first (order:1), features slider second (order:2) */
  .cta-section__bottom  { flex-direction: column; gap: 32px; }
  .cta-section__form-wrap { order: 1; flex: none; width: 100%; }

  /* Features: 2 per row via flex-wrap, 4 cards × 166×200, gap:8 */
  .cta-section__features {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }

  /* Feature card: exactly half-width minus gap half, fixed 200px height */
  .cta-section__feature {
    flex: 0 0 calc(50% - 4px);
    height: 200px;
    padding: 12px;
    gap: 12px;
    justify-content: flex-start;
    scroll-snap-align: none;
  }
  .cta-section__feat-body { margin-top: 0; }

  /* Form: padding and gaps from Figma mobile */
  .cta-section__form  { padding: 16px 12px; gap: 24px; }
  .cta-section__field { height: 46px; }
  .cta-section__btns  { height: 50px; }

  /* ── Footer — pad:[30,9], columns stack gap:32 ── */
  .footer { padding: 30px 0 16px; }
  .footer .container { padding-inline: 9px; }
  .footer__row       { flex-direction: column; gap: 32px; margin-bottom: 50px; }
  .footer__nav       { flex-direction: column; gap: 32px; flex-wrap: nowrap; }
  .footer__cta-row   { flex-wrap: wrap; }
  .footer__social-col { align-items: flex-start; margin-bottom: 32px; }
  .footer__bottom    { height: auto; }
  .footer__watermark { font-size: 80px; }
}

/* =========================================
   Privacy Policy Page
   ========================================= */
.pp-page {
  background: var(--color-dark);
  min-height: 100vh;
}

/* Desktop: title x:46 y:149 Anton 82px; content x:499 y:289 w:652 */
.pp-layout {
  padding-top: 149px;
  padding-bottom: 120px;
}

.pp-title {
  font-family: var(--font-heading);
  font-size: 82px;
  color: var(--color-white);
  line-height: 1.1;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 50px;
}

/* Content indented to x:499 (453px from container left edge) w:652 */
.pp-content {
  margin-left: 453px;
  width: 652px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.pp-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pp-section__heading {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -0.792px;
  text-transform: none;
}

.pp-section__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.3;
  letter-spacing: -0.792px;
}

.pp-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-list li {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.3;
  letter-spacing: -0.792px;
  list-style: disc;
}

/* Contact rows: label (fw:600) + value side-by-side, gap:20 */
.pp-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-contact-row {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

.pp-contact-row__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -0.792px;
  white-space: nowrap;
}

.pp-contact-row__value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -0.792px;
}

/* Contact Us block: stacked, gap:10 */
.pp-contact-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-contact-block__company {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 1260px) {
.pp-content {
  margin-left: auto;

}
}
/* Mobile ≤767px */
@media (max-width: 767px) {
  .pp-layout {
    padding-top: 111px;
    padding-bottom: 60px;
  }
  .pp-title { font-size: 32px; margin-bottom: 32px; }
  .pp-content { margin-left: 0; width: 100%; }
}