/* ============================================================
   STRONG ARM MOVERS — Main Stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   1. Font — Space Grotesk v1.1.6 (self-hosted, matches Figma)
   ------------------------------------------------------------ */
/* Variable font — supports any weight 300–700 incl. 550 */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGroteskVariable.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   2. CSS Reset & Box Sizing
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 0,
    "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0,
    "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0,
    "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0;
  font-variant-numeric: normal;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Keyboard focus ring — visible for keyboard users, hidden for mouse */
:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------
   3. Design Tokens — CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  /* Colors — Light Theme (primary) */
  --bg-primary:    #fdfdfd;
  --bg-secondary:  #f2f2f2;
  --bg-tertiary:   #dadada;
  --bg-inverse:    #ffffff;

  --text-primary:   #000000;
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-disabled:  rgba(0, 0, 0, 0.40);
  --text-inverse:   #212121;   /* always dark — used for text on green buttons */
  --text-on-dark:   #ffffff;   /* always white — used in always-dark sections (hero, footer, offer bar) */

  --border-primary: rgba(0, 0, 0, 0.1);
  --border-active:  #000000;

  --accent-green:      #00e012;
  --accent-green-text: #00890b;

  /* Colors — Dark Theme overrides (used in always-dark sections) */
  --dark-bg-primary:    #212121;
  --dark-bg-secondary:  #2b2b2b;
  --dark-bg-tertiary:   #464646;
  --dark-text-primary:  #ffffff;
  --dark-text-secondary: rgba(255, 255, 255, 0.6);
  --dark-border-primary: rgba(255, 255, 255, 0.1);
  --dark-border-active:  #ffffff;
  --dark-accent-green-text: #00cb10;

  /* Spacing */
  --spacing-xxs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  6px;
  --spacing-md:  8px;
  --spacing-lg:  12px;
  --spacing-xl:  16px;
  --spacing-3xl: 24px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;

  /* Shadows */
  --shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  --shadow-lg:
    0px 2px 2px -1px rgba(10, 13, 18, 0.04),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 12px 16px -4px rgba(10, 13, 18, 0.08);

  /* Responsive type scale — overridden at tablet and mobile breakpoints */
  --h1:    80px;
  --h4:    36px;
  --body1: 20px;
}

/* ------------------------------------------------------------
   4. Typography System — Utility Classes
   ------------------------------------------------------------ */

/* H1 — responsive via --h1 variable */
.text-h1-desktop {
  font-weight: 600;
  font-size: var(--h1);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

/* H4 — responsive via --h4 variable */
.text-h4 {
  font-weight: 550;
  font-size: var(--h4);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

/* Section Label — 16px Medium Uppercase */
.text-section-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent-green-text);
}

/* Body/1 Regular — responsive via --body1 variable */
.text-body-1-reg {
  font-weight: 400;
  font-size: var(--body1);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Body/1 SemiBold — responsive via --body1 variable */
.text-body-1-sb {
  font-weight: 600;
  font-size: var(--body1);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Body/2 Regular — 16px */
.text-body-2-reg {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.48px;
}

/* Body/2 SemiBold — 16px */
.text-body-2-sb {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.48px;
}

/* Button/L — 16px SemiBold */
.text-btn-l {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.16px;
}

/* Button/S — 14px SemiBold */
.text-btn-s {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.0;
  letter-spacing: -0.14px;
}

/* Caption Regular — 12px */
.text-caption-reg {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: 0;
}

/* Caption SemiBold — 12px */
.text-caption-sb {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   5. Button Components
   ------------------------------------------------------------ */

/* Primary Button — Large (56px height) */
.btn-primary-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  background-color: var(--accent-green);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.16px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.btn-primary-l:hover {
  filter: brightness(1.1);
}

/* Primary Button — Small (44px height) */
.btn-primary-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 14px;
  background-color: var(--accent-green);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.0;
  letter-spacing: -0.14px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.btn-primary-s:hover {
  filter: brightness(1.1);
}

/* Link Button (text only, green) */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent-green-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.48px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}

.btn-link:hover {
  opacity: 0.8;
}

/* ------------------------------------------------------------
   6. Global Layout Utilities
   ------------------------------------------------------------ */

/* Content wrapper: centers content at 1700px with 32px side padding */
.content-wrap {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Full-bleed wrapper: stretches edge-to-edge */
.full-bleed {
  width: 100%;
}

/* Flex utilities */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Text color helpers */
.text-white     { color: var(--text-primary); }   /* = primary text color (dark in light mode) */
.text-secondary { color: var(--text-secondary); }
.text-green     { color: var(--accent-green-text); }

/* Section divider — always aligned with content-wrap (max-width 1700px, padding 32px) */
.section-divider {
  height: 1px;
  background-color: var(--border-primary);
  margin-left: max(32px, calc(50vw - 818px));
  margin-right: max(32px, calc(50vw - 818px));
}

/* ============================================================
   SECTION STYLES
   ============================================================ */

/* ------------------------------------------------------------
   3.1 OFFER BAR — always dark
   ------------------------------------------------------------ */
.offer-bar {
  background-color: var(--bg-inverse);
  border-top: 1px solid #000000;
  border-bottom: 1px solid var(--border-primary);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}

.offer-bar__track {
  display: inline-flex;
  animation: marquee 35s linear infinite;
}

.offer-bar__text {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.0;
  color: var(--text-primary);
  padding-right: 0;
}

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

/* ------------------------------------------------------------
   3.2 HEADER — transparent, overlays hero
   ------------------------------------------------------------ */
.header {
  position: fixed;
  top: var(--header-dynamic-top, var(--offer-bar-h, 33px));
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--dark-text-primary);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.header--scrolled {
  background-color: var(--bg-inverse);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}

.header--scrolled .header__logo,
.header--scrolled .header__nav-link,
.header--scrolled .header__phone {
  color: var(--text-primary);
}

.header--scrolled .header__logo-img {
  filter: invert(1);
}

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

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__nav-link {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.0;
  color: var(--dark-text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.header__nav-link:hover {
  opacity: 0.7;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header__phone {
  font-weight: 400;
  font-size: 16px;
  color: var(--dark-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   3.3 HERO — dark photo section
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 900px;
  overflow: hidden;
  background-color: var(--dark-bg-primary);
}

.hero__images {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5)  0%,
    rgba(0, 0, 0, 0.0)  30%,
    rgba(0, 0, 0, 0.0)  55%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /* Mirror content-wrap: center at 1700px with 32px padding each side */
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px 32px;
}

.hero__heading {
  max-width: 595px;
  color: var(--dark-text-primary);
}

.hero__subtext {
  max-width: 595px;
  margin-top: 16px;
  color: var(--dark-text-secondary);
}

.hero__cta {
  margin-top: 32px;
}

/* ------------------------------------------------------------
   3.4 TRUST BAR — light theme
   ------------------------------------------------------------ */
.trust-bar {
  background-color: var(--bg-primary);
}

.trust-bar__inner {
  /* content-wrap handles max-width + 32px padding */
}

.trust-bar__row {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
}

.trust-bar__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
}

.trust-bar__item:first-child {
  padding-left: 0;
}

.trust-bar__item:not(:last-child) {
  border-right: 1px solid var(--border-primary);
}

.trust-bar__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-bar__icon svg path {
  fill: var(--text-primary);
}

.trust-bar__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trust-bar__title {
  color: var(--text-primary);
}

.trust-bar__subtitle {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   3.5 SERVICES SECTION — light theme
   ------------------------------------------------------------ */
.services {
  background-color: var(--bg-primary);
  padding: 120px 0 80px;
}

.services__inner {
  display: flex;
  flex-direction: column;
}

.services__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
}

.services__heading {
  max-width: 595px;
  color: var(--text-primary);
}

.services__content {
  display: flex;
  gap: 128px;
  align-items: flex-start;
}

/* Left column: progress bar + cards */
.services__left {
  flex: 0 1 595px;
  max-width: 595px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
}

.services__progress-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: calc(100% - 88px); /* subtract CTA button area */
  background-color: rgba(0, 0, 0, 0.1);
}

.services__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  background-color: transparent;
  transition: top 0.35s ease, height 0.35s ease;
  overflow: hidden;
}

.services__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: var(--border-active);
}

.services__progress-fill.animating {
  animation: services-fill 10s linear forwards;
}

@keyframes services-fill {
  from { height: 0%; }
  to   { height: 100%; }
}

.services__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

.services__card {
  padding: 24px 0;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
}


.services__card.active {
  opacity: 1;
}

.services__card:hover:not(.active) {
  opacity: 0.7;
}

.services__card-title {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.services__card-desc {
  color: var(--text-secondary);
}

.services__card.active .services__card-desc {
  color: var(--text-primary);
}

.services__cta {
  align-self: flex-start;
}

/* Right column: image — max 716×595px, min 280×240px, proportional resize */
.services__right {
  flex: 0 1 716px;
  min-width: 280px;
  max-width: 716px;
  min-height: 240px;
  margin-left: auto;
  position: relative;
  aspect-ratio: 716 / 595;
}

.services__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.services__image--active {
  opacity: 1;
}

/* Mobile services — hidden on desktop, revealed at ≤768px */
.services__mobile {
  display: none;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.services__mobile-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services__mobile-image {
  width: 100%;
  aspect-ratio: 716 / 595;
  overflow: hidden;
}

.services__mobile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.services__mobile-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.services__mobile-text .services__card-title {
  margin-bottom: 0;
}

.services__mobile-cta {
  width: fit-content;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   3.6 ABOUT SECTION — bg-secondary (#f2f2f2)
   ------------------------------------------------------------ */
.about {
  /* anchor wrapper */
}

.about__bg {
  background-color: var(--bg-secondary);
}

.about__inner {
  display: flex;
  align-items: flex-start;
  gap: 128px;
}

/* Left column: heading + Roman Bold photo (independent flex column) */
.about__left-col {
  width: 595px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-top: 120px;
  padding-bottom: 60px;
}

.about__top-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 40px;
  padding-bottom: 128px;
}

.about__heading {
  max-width: 595px;
  color: var(--text-primary);
}

.about__founder {
  padding-right: 40px;
}

.about__founder-img {
  width: 100%;
  max-width: 354px;
  aspect-ratio: 354 / 311;
  height: auto;
  object-fit: cover;
  display: block;
}

.about__founder-caption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about__founder-caption .text-body-2-reg {
  color: var(--text-primary);
}

.about__founder-caption .text-caption-reg {
  color: var(--text-secondary);
}

/* Right column: paragraphs + Nick photo (independent flex column) */
.about__right-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-top: 152px;
  padding-bottom: 120px;
  max-width: 716px;
  margin-left: auto;
}

.about__top-right {
  /* wrapper, no extra styles */
}

.about__paragraphs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 24px;
  color: var(--text-primary);
}

.about__interior {
  /* sits inside right-col as flex child */
}

.about__interior-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  object-position: center;
}

/* ------------------------------------------------------------
   3.7 HOW IT WORKS — light theme
   ------------------------------------------------------------ */
.how-it-works {
  background-color: var(--bg-primary);
  padding: 120px 0 60px;
}

.how-it-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.how-it-works__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 64px;
}

.how-it-works__heading {
  max-width: 716px;
  text-align: center;
  color: var(--text-primary);
}

.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border: 1px solid var(--border-primary);
}

.how-it-works__card {
  padding: 24px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-primary);
}

.how-it-works__card:last-child {
  border-right: none;
}

.how-it-works__number {
  color: var(--text-primary);
  font-weight: 550;
  display: block;
}

.how-it-works__desc {
  color: var(--text-primary);
}

.how-it-works__cta-wrap {
  margin-top: 40px;
}

/* ------------------------------------------------------------
   3.8 PRICING SECTION — light theme
   ------------------------------------------------------------ */
.pricing {
  background-color: var(--bg-primary);
  padding: 60px 0;
}

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

.pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 64px;
}

.pricing__heading {
  max-width: 716px;
  color: var(--text-primary);
  text-align: center;
}

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border: 1px solid var(--border-primary);
}

.pricing__card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  border-right: 1px solid var(--border-primary);
  background-color: var(--bg-primary);
}

.pricing__card:last-child {
  border-right: none;
}

.pricing__card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing__card-title {
  color: var(--text-primary);
}

.pricing__card-subtitle {
  color: var(--text-secondary);
}

.pricing__card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing__amount {
  color: var(--text-primary);
}

.pricing__per-hr {
  color: var(--text-secondary);
  font-size: 16px;
}

.pricing__book-btn {
  width: 100%;
}

/* All Plans Include block */
.pricing__includes {
  width: 100%;
  background-color: var(--bg-secondary);
  padding: 24px;
  margin-top: 0;
  border: 1px solid var(--border-primary);
  border-top: none;
}

.pricing__includes-title {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.pricing__includes-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
}

.pricing__includes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.pricing__includes-item .check-icon {
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   3.9 REVIEWS SECTION — light theme, masonry columns
   ------------------------------------------------------------ */
.reviews {
  background-color: var(--bg-primary);
  padding: 60px 0 0;
}

.reviews__inner {
  display: flex;
  flex-direction: column;
}

.reviews__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
}

.reviews__heading {
  max-width: 595px;
  color: var(--text-primary);
}

.reviews__grid {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.reviews__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Masonry effect is natural from align-items: flex-end + different column heights */

/* Individual review card */
.review-card {
  border: 1px solid var(--border-primary);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background-color: var(--bg-primary);
}

.review-card__quote {
  color: var(--text-primary);
  font-style: normal;
  line-height: 1.5;
}

.review-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-card__name {
  color: var(--text-primary);
}

.review-card__source {
  color: var(--text-secondary);
}


/* Reviews show-more toggle (mobile only — hidden on desktop/tablet) */
.reviews__toggle {
  display: none;
}

/* ------------------------------------------------------------
   3.10 SERVICE AREA SECTION — light theme
   ------------------------------------------------------------ */
.service-area {
  background-color: var(--bg-primary);
  overflow: hidden;
}

.service-area__inner {
  display: flex;
  align-items: stretch;
  min-height: 600px;
}

.service-area__content {
  width: 716px;
  flex-shrink: 0;
  /* Dynamic left padding: matches content-wrap centering on any viewport width */
  padding-left: max(32px, calc((100vw - 1700px) / 2 + 32px));
  padding-top: 120px;
  padding-bottom: 180px;
  display: flex;
  flex-direction: column;
}

.service-area__content .text-section-label {
  margin-bottom: 16px;
}

.service-area__heading {
  max-width: 595px;
  color: var(--text-primary);
  margin-bottom: 44px;
}

.service-area__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 8px;
}

.service-area__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.service-area__list-item .check-icon {
  flex-shrink: 0;
}

.service-area__long-distance {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
  margin-top: 24px;
}

/* Right: map — fills remaining viewport space */
.service-area__map {
  flex: 1;
  min-width: 0;
  height: 738px;
  position: relative;
  overflow: hidden;
}

.service-area__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay blends map into light bg */
.service-area__map-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 20%,
    var(--bg-primary) 72%
  );
  pointer-events: none;
}

/* Green branding badge centered on map */
.service-area__map-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 270px;
  background-color: var(--accent-green);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-inverse);
  text-align: center;
  padding: 24px;
}

.service-area__map-badge .text-body-2-sb {
  color: var(--text-inverse);
  text-align: center;
}

/* ------------------------------------------------------------
   3.11 FAQ SECTION — light theme, centered
   ------------------------------------------------------------ */
.faq {
  background-color: var(--bg-primary);
}

.faq .section-divider {
  margin-top: 0;
  margin-bottom: 0;
}

.faq__inner {
  padding: 120px 32px 120px;
  max-width: 716px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 64px;
}

.faq__heading {
  max-width: 716px;
  text-align: center;
  color: var(--text-primary);
}

.faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--border-primary);
  padding: 24px 0;
}

.faq__item:first-child {
  border-top: 1px solid var(--border-primary);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 0;
}

.faq__question span {
  flex: 1;
}

/* Override SVG white fill to secondary color for light theme */
.faq__icon path {
  fill: var(--text-secondary);
}

/* Toggle icons: show plus by default, minus when active */
.faq__icon--minus { display: none; }
.faq__icon--plus  { display: block; flex-shrink: 0; }

.faq__item.active .faq__icon--minus { display: block; flex-shrink: 0; }
.faq__item.active .faq__icon--plus  { display: none; }

.faq__answer {
  display: none;
  padding-top: 16px;
}

.faq__answer p {
  color: var(--text-secondary);
}

.faq__item.active .faq__answer {
  display: block;
}

/* ------------------------------------------------------------
   3.12 CTA BANNER — bg-secondary, contained
   ------------------------------------------------------------ */
.cta-banner {
  padding: 40px 32px 0;
  background-color: var(--bg-primary);
}

.cta-banner__inner {
  background-color: var(--bg-secondary);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-banner__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cta-banner__title {
  color: var(--text-primary);
}

.cta-banner__subtitle {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   3.13 FOOTER
   ------------------------------------------------------------ */
.footer {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.footer__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Left column */
.footer__left {
  width: 716px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-primary);
  padding: 60px 32px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 117px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__contact-label {
  color: var(--accent-green-text);
}

.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__address p,
.footer__address a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--text-primary);
  text-decoration: none;
}

.footer__address a:hover {
  opacity: 0.75;
}

.footer__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
  filter: invert(1);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer__legal a {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.0;
  color: var(--text-secondary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer__legal a:hover {
  opacity: 0.75;
}

/* Right column */
.footer__right {
  flex: 1;
  padding: 60px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 109px;
}

.footer__right-top {
  display: flex;
  gap: 8px;
  padding-left: 24px;
}

.footer__right-label {
  color: var(--accent-green-text);
  margin-bottom: 16px;
  display: block;
}

.footer__license {
  width: 330px;
  flex-shrink: 0;
}

.footer__license-text {
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.48px;
}

.footer__links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links-list a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer__links-list a:hover {
  opacity: 0.75;
}

.footer__right-bottom {
  display: flex;
  align-items: flex-end;
  gap: 44px;
  padding-left: 24px;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer__social-link:hover {
  opacity: 0.75;
}

.footer__social-link svg path {
  fill: var(--text-primary);
}

.footer__copyright {
  color: var(--text-secondary);
}

.footer__divider {
  display: none;
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: 0;
  width: 100%;
}

/* ============================================================
   CHECK ICON — shared component
   ============================================================ */
.check-icon {
  display: block;
  flex-shrink: 0;
}

/* Apply design color for light theme */
.check-icon path {
  fill: var(--accent-green-text); /* #00890b */
}

/* ============================================================
   QUOTE FORM MODAL
   ============================================================ */

.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.quote-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quote-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.quote-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background-color: var(--bg-inverse);
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.quote-modal.is-open .quote-modal__panel {
  transform: translateY(0);
}

.quote-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 24px;
  flex-shrink: 0;
}

.quote-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quote-modal__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.0;
  letter-spacing: -0.66px;
  color: var(--text-primary);
}

.quote-modal__subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.0;
  color: var(--text-secondary);
}

.quote-modal__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-right: -8px;
  margin-top: -8px;
  color: var(--text-primary);
  transition: opacity 0.15s ease;
}

.quote-modal__close:hover {
  opacity: 0.5;
}

.quote-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 32px;
}

/* Form layout */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.quote-form__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-form__section-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #00890B;
}

.quote-form__divider {
  display: none;
}

.quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quote-form__row--full {
  grid-template-columns: 1fr;
}

/* Field */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-width: 0;
}

/* Floating label — default: centered inside the field, acts as placeholder */
.form-label {
  position: absolute;
  left: 14px;
  top: 24px;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.45px;
  color: var(--text-disabled);
  pointer-events: none;
  background-color: transparent;
  padding: 0;
  z-index: 1;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    top 0.18s ease,
    transform 0.18s ease,
    font-size 0.18s ease,
    letter-spacing 0.18s ease,
    font-weight 0.18s ease,
    color 0.18s ease,
    left 0.18s ease,
    padding 0.18s ease;
}

/* Textarea: label aligns with the first line of text, not the vertical center */
.form-field:has(.form-textarea) .form-label {
  top: 22px;
}

/* Floated state — inputs/textareas use CSS; selects use .has-value/.is-focused via JS */
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-textarea:focus ~ .form-label,
.form-textarea:not(:placeholder-shown) ~ .form-label,
.form-field.has-value .form-label,
.form-field.is-focused .form-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--text-secondary);
  left: 11px;
  padding: 0 3px;
  background-color: var(--bg-inverse);
}

.form-label-optional {
  font-weight: 400;
  color: var(--text-disabled);
}

/* Inputs */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-primary);
  background-color: var(--bg-inverse);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  letter-spacing: -0.45px;
  color: var(--text-primary);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}

/* Placeholder hidden by default so the label acts as placeholder; revealed on focus */
.form-input::placeholder,
.form-textarea::placeholder {
  color: transparent;
  transition: color 0.15s ease;
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
  color: var(--text-disabled);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--border-active);
}

/* Date input — always float label; mask (mm/dd/yyyy) stays visible as a format hint */
.form-input[type="date"] ~ .form-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--text-secondary);
  left: 11px;
  padding: 0 3px;
  background-color: var(--bg-inverse);
}

.form-input[type="date"] {
  color: var(--text-disabled);
}

.form-input[type="date"]:valid {
  color: var(--text-primary);
}

/* Hide number spinners */
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input[type="number"] {
  -moz-appearance: textfield;
}

/* Textarea */
.form-textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.45;
}

/* Select wrapper — custom arrow */
.form-select-wrap {
  position: relative;
}

.form-select {
  cursor: pointer;
  padding-right: 40px;
  color: transparent;
}

.form-field.is-focused .form-select {
  color: var(--text-disabled);
}

.form-field.has-value .form-select {
  color: var(--text-primary);
}

.form-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23212121' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* Validation error state */
.form-field.is-error .form-input,
.form-field.is-error .form-select,
.form-field.is-error .form-textarea {
  border-color: #c0392b;
  background-color: #fff5f5;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0;
  color: #c0392b;
}

.quote-modal__footer {
  flex-shrink: 0;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border-primary);
  background-color: var(--bg-inverse);
}

.quote-form__submit {
  width: 100%;
}

.quote-form__consent {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
}

/* Trust bar */
.quote-modal__trust {
  margin-bottom: 24px;
}

.quote-modal__trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-primary);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.0;
  color: var(--text-primary);
}

.trust-badge + .trust-badge {
  border-left: 1px solid var(--border-primary);
}

/* Thank-you state */
.quote-form__thanks {
  padding: 48px 0;
  text-align: center;
}

.quote-form__thanks p + p {
  margin-top: 8px;
  color: var(--text-secondary);
}

/* Body lock when modal open */
html:has(body.modal-open),
body.modal-open {
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE — Phase 1: Global Utilities + Typography Scale
   ============================================================ */

/* ------------------------------------------------------------
   R0. Burger Button + Mobile Menu — base (hidden on desktop)
   ------------------------------------------------------------ */

/* Burger icon button — hidden on desktop */
.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
}

.header__burger:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* Mobile menu overlay — fades in below offer bar */
.mobile-menu {
  position: fixed;
  top: var(--offer-bar-h, 33px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* Nav list with border-separated items */
.mobile-menu__nav {
  flex: 1;
  padding: 0 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu__nav-list {
  display: flex;
  flex-direction: column;
}

.mobile-menu__nav-item {
  border-bottom: 1px solid var(--border-primary);
}

.mobile-menu__nav-item:first-child {
  border-top: 1px solid var(--border-primary);
}

.mobile-menu__nav-item:last-child {
  border-bottom: none;
}

.mobile-menu__nav-link {
  display: block;
  font-weight: 400;
  font-size: var(--body1);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-decoration: none;
  padding: 16px 0;
  transition: opacity 0.15s ease;
}

.mobile-menu__nav-link:hover {
  opacity: 0.5;
}

/* Footer: phone + CTA */
.mobile-menu__footer {
  border-top: 1px solid var(--border-primary);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
}

.mobile-menu__phone {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.mobile-menu__phone:hover {
  opacity: 0.7;
}

.mobile-menu__cta {
  width: 100%;
}

/* Burger → X animation via rotating CSS bars */
.burger-icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
}

.burger-bar {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.burger-bar--top { top: calc(50% - 8px); }
.burger-bar--mid { top: calc(50% - 1px); }
.burger-bar--bot { top: calc(50% + 6px); }

.header__burger[aria-expanded="true"] .burger-bar--top {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.header__burger[aria-expanded="true"] .burger-bar--mid {
  opacity: 0;
}

.header__burger[aria-expanded="true"] .burger-bar--bot {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   R1. Tablet — ≤1024px
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Header: tighter nav gap */
  .header__nav-list {
    gap: 20px;
  }

  /* Type scale — tablet */
  :root {
    --h1:    56px;
    --h4:    28px;
    --body1: 20px;
  }
}

/* ------------------------------------------------------------
   R2. Mobile Large — ≤768px
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Header: hide desktop nav and phone, show burger */
  .header__nav,
  .header__phone {
    display: none;
  }

  .header__burger {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: inherit;
  }

  /* Side padding: 32px → 20px */
  .content-wrap {
    padding: 0 20px;
  }

  /* Restore header vertical padding overridden by .content-wrap shorthand */
  .header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Section divider aligns with content-wrap */
  .section-divider {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* Body: prevent horizontal scroll */
  body.menu-open {
    overflow: hidden;
  }

  /* Menu covers full screen on mobile */
  .mobile-menu {
    top: 0;
    padding-top: var(--header-h, 72px);
  }

  /* Header stays fixed on top of menu with dark colors */
  body.menu-open .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  body.menu-open .header__logo {
    color: var(--text-primary);
  }

  body.menu-open .header__logo-img {
    filter: invert(1);
  }

  body.menu-open .header__burger {
    background-color: transparent;
    color: var(--text-primary);
  }

  /* Type scale — mobile */
  :root {
    --h1:    48px;
    --h4:    24px;
    --body1: 18px;
  }
}

/* Quote modal — full screen on mobile */
@media (max-width: 600px) {
  .quote-modal {
    padding: 0;
    align-items: stretch;
  }

  .quote-modal__overlay {
    display: none;
  }

  .quote-modal__panel {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
  }

  .quote-modal__header {
    padding: 14px 16px 12px;
  }

  .quote-modal__body {
    padding: 16px 16px 20px;
  }

  .quote-modal__footer {
    padding: 12px 16px 20px;
  }

  .quote-modal__trust-badges {
    grid-template-columns: 1fr;
  }

  .trust-badge + .trust-badge {
    border-left: none;
    border-top: 1px solid var(--border-primary);
  }

  .quote-form__row {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   R3. Mobile Small — ≤480px
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  /* Mobile menu nav link size */
  .mobile-menu__nav-link {
    font-size: 18px;
  }

  /* Side padding: 20px → 16px */
  .content-wrap {
    padding: 0 16px;
  }

  .header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .section-divider {
    margin-left: 16px;
    margin-right: 16px;
  }

}

/* ============================================================
   RESPONSIVE — Phase 3: Section-by-Section
   ============================================================ */

/* ------------------------------------------------------------
   OFFER BAR
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .offer-bar {
    padding: 8px 0;
  }

  .offer-bar__text {
    font-size: 10px;
  }
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Subtract offer bar + 60px so the trust bar peeks below the fold */
  .hero {
    height: calc(100svh - 93px);
  }

  .header__cta {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Subtract mobile offer bar + 60px so the trust bar peeks below the fold */
  .hero {
    height: calc(100svh - 87px);
  }

  .hero__content {
    padding: 0 16px 16px;
  }

  .hero__heading {
    max-width: 100%;
  }

  .hero__subtext {
    max-width: 100%;
  }

  .hero__img {
    object-position: left center;
  }
}

/* ------------------------------------------------------------
   TRUST BAR
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .trust-bar {
    padding-bottom: 40px;
  }

  .trust-bar__row {
    flex-direction: column;
  }

  /* Remove right borders; add bottom borders between items; no horizontal padding — content-wrap handles that */
  .trust-bar__item,
  .trust-bar__item:not(:last-child),
  .trust-bar__item:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
    padding: 16px 0;
    gap: 12px;
  }

  .trust-bar__icon,
  .trust-bar__icon svg {
    width: 40px;
    height: 40px;
  }

  /* Last item: no extra bottom border — row's own border serves as section separator */
  .trust-bar__item:last-child {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .services__header {
    gap: 12px;
    margin-bottom: 32px;
  }

  .services__content {
    gap: 48px;
  }

  .services__left {
    width: auto;
    flex: 1;
  }

  .services__right {
    flex: 1;
    max-width: none;
    aspect-ratio: 716 / 595;
    min-height: 240px;
  }
}

@media (max-width: 768px) {
  .services {
    padding: 40px 0 80px;
  }

  .services__header {
    margin-bottom: 32px;
  }

  /* Hide desktop accordion — mobile layout takes over */
  .services__content {
    display: none;
  }

  .services__mobile {
    display: flex;
  }
}

@media (max-width: 480px) {
  .services {
    padding: 40px 0 80px;
  }
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */

/* Intermediate: both columns shrink at 40/60 proportion */
@media (max-width: 1439px) and (min-width: 1025px) {
  .about__inner {
    gap: 64px;
  }

  .about__left-col {
    width: auto;
    flex: 2;
    padding-top: 80px;
  }

  .about__top-left {
    padding-right: 0;
    padding-bottom: 80px;
  }

  .about__founder {
    padding-right: 0;
  }

  .about__founder-img {
    max-width: 65%;
  }

  .about__right-col {
    flex: 3;
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 100%;
    margin-left: 0;
  }

  .about__interior-img {
    max-width: 100%;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .about__inner {
    gap: 40px;
  }

  .about__left-col {
    width: auto;
    flex: 2;
  }

  .about__top-left {
    gap: 12px;
    padding-right: 0;
    padding-bottom: 60px;
  }

  .about__founder {
    padding-right: 0;
  }

  .about__founder-img {
    max-width: 65%;
  }

  .about__right-col {
    flex: 3;
    max-width: 100%;
    margin-left: 0;
    padding-bottom: 60px;
  }

  .about__interior-img {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Flatten columns — photos reorder into a side-by-side row */
  .about__inner {
    flex-wrap: wrap;
    gap: 0;
    column-gap: 8px;
  }

  .about__left-col,
  .about__right-col {
    display: contents;
  }

  .about__top-left {
    width: 100%;
    order: 1;
    padding-top: 80px;
    padding-right: 0;
    padding-bottom: 32px;
  }

  .about__top-right {
    width: 100%;
    order: 2;
    padding-bottom: 32px;
  }

  .about__paragraphs {
    grid-template-columns: 1fr;
  }

  .about__interior {
    width: 100%;
    order: 3;
    padding-bottom: 32px;
  }

  .about__founder {
    width: auto;
    order: 4;
    padding-right: 0;
    padding-bottom: 80px;
  }

  .about__founder-img {
    max-width: 200px;
  }

  .about__interior-img {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .about__top-left {
    padding-top: 80px;
  }
}

/* ------------------------------------------------------------
   HOW IT WORKS
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .how-it-works__header {
    gap: 12px;
    margin-bottom: 32px;
  }

  .how-it-works__cta-wrap {
    margin-top: 32px;
  }

  .how-it-works__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-it-works__card {
    padding: 16px;
    min-height: 250px;
  }

  /* 2nd card is now at right edge — remove its right border */
  .how-it-works__card:nth-child(2) {
    border-right: none;
  }

  /* Add bottom border between the two rows */
  .how-it-works__card:nth-child(-n+2) {
    border-bottom: 1px solid var(--border-primary);
  }
}

@media (max-width: 768px) {
  .how-it-works {
    padding: 80px 0 40px;
  }

  .how-it-works__header {
    margin-bottom: 32px;
  }

  .how-it-works__cta-wrap {
    margin-top: 32px;
  }

  .how-it-works__card {
    padding: 16px;
    min-height: 200px;
  }
}

@media (max-width: 480px) {
  .how-it-works {
    padding: 80px 0 40px;
  }

  /* Single column: all cards stack */
  .how-it-works__grid {
    grid-template-columns: 1fr;
  }

  .how-it-works__card {
    min-height: auto;
    justify-content: flex-start;
    gap: 44px;
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }

  .how-it-works__card:last-child {
    border-bottom: none;
  }

  .how-it-works__cta-wrap .btn-primary-l {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   PRICING
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pricing__header {
    gap: 12px;
    margin-bottom: 32px;
  }

  .pricing__card {
    padding: 16px;
  }

  .pricing__includes-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pricing {
    padding: 40px 0;
  }

  .pricing__header {
    margin-bottom: 32px;
  }

  /* Stack cards vertically */
  .pricing__cards {
    grid-template-columns: 1fr;
  }

  .pricing__card {
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }

  .pricing__card:last-child {
    border-bottom: none;
  }

  /* All Plans Include: 2-column grid */
  .pricing__includes-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pricing {
    padding: 40px 0;
  }

  .pricing__card {
    padding: 16px;
    gap: 32px;
  }

  .pricing__includes {
    padding: 16px;
  }

  /* All Plans Include: single column */
  .pricing__includes-list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   REVIEWS
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .reviews__header {
    gap: 12px;
    margin-bottom: 32px;
  }

  /* Remove masonry vertical offset — align all columns to top */
  .reviews__grid {
    align-items: flex-start;
  }

  .review-card {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .reviews {
    padding: 40px 0 40px;
  }

  .reviews__header {
    margin-bottom: 32px;
  }

  /* Single column */
  .reviews__grid {
    flex-direction: column;
    gap: 12px;
  }

  .reviews__col {
    width: 100%;
  }

  /* Hide columns 2 and 3 until expanded */
  .reviews__col:not(:first-child) {
    display: none;
  }

  .reviews__grid.is-expanded .reviews__col {
    display: flex;
  }

  /* Show more / Show less button — DS Secondary S */
  .reviews__toggle {
    display: block;
    margin: 20px auto 0;
    background-color: rgba(0, 0, 0, 0.06);
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.14px;
    padding: 0 14px;
    height: 44px;
    cursor: pointer;
    transition: background-color 0.15s;
  }

  .reviews__toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 480px) {
  .reviews {
    padding: 40px 0 40px;
  }

  .review-card {
    padding: 16px;
    gap: 24px;
  }

  .review-card__avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   SERVICE AREA
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .service-area__content {
    width: 50%;
    padding-top: 120px;
    padding-bottom: 180px;
  }

  .service-area__content .text-section-label {
    margin-bottom: 12px;
  }

  .service-area__heading {
    margin-bottom: 32px;
  }

  .service-area__map {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  /* Stack: checklist on top, map below */
  .service-area__inner {
    flex-direction: column;
  }

  .service-area__content {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .service-area__heading {
    margin-bottom: 32px;
  }

  .service-area__list {
    grid-template-columns: 1fr 1fr;
  }

  .service-area__map {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 400px;
  }

  .service-area__map-badge {
    width: 200px;
    height: 194px;
  }
}

@media (max-width: 480px) {
  .service-area__content {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .service-area__map {
    max-height: 320px;
  }

  .service-area__map-badge {
    width: 160px;
    height: 155px;
  }
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .faq__header {
    gap: 12px;
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  /* Remove centered narrow column — full content-wrap width */
  .faq__inner {
    max-width: none;
    padding: 80px 20px;
  }

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

@media (max-width: 480px) {
  .faq__inner {
    padding: 80px 16px;
  }

  .faq__item {
    padding: 16px 0;
  }
}

/* ------------------------------------------------------------
   CTA BANNER
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cta-banner__inner {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  /* Stack text and button vertically */
  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 16px;
  }

  .cta-banner__inner .btn-primary-l {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cta-banner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
@media (max-width: 1280px) {
  /* Left column: release fixed 716px so both halves share space equally */
  .footer__left {
    width: auto;
    flex: 1;
  }

  /* License block: release fixed 330px so it shares space with quick links */
  .footer__license {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 32px;
  }

  /* Flatten column wrappers so children participate directly in the flex reorder */
  .footer__left,
  .footer__bottom-left,
  .footer__right,
  .footer__right-top,
  .footer__right-bottom {
    display: contents;
  }

  /* Mobile order: logo → contacts → quick links → divider → socials → legal → copyright */
  .footer__logo      { order: 1; margin-bottom: 32px; }
  .footer__contact   { order: 2; margin-bottom: 32px; }
  .footer__links     { order: 3; margin-bottom: 32px; }
  .footer__socials   { order: 4; margin-bottom: 32px; }
  .footer__divider   { order: 5; display: block; width: 100%; margin-bottom: 32px; }
  .footer__legal     { order: 6; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .footer__legal a   { font-size: 16px; line-height: 1.3; letter-spacing: -0.48px; color: var(--text-primary); }
  .footer__copyright { order: 7; }
}

@media (max-width: 480px) {
  .footer__links-list a,
  .footer__legal a {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   Google Places Autocomplete dropdown
   ------------------------------------------------------------ */
.pac-container {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: none;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 9999;
  margin-top: 0;
}

.pac-item {
  padding: 10px 14px;
  color: #000000;
  cursor: pointer;
  line-height: 1.4;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pac-item:first-child {
  border-top: none;
}

.pac-item:hover,
.pac-item-selected {
  background-color: rgba(0, 0, 0, 0.04);
}

.pac-item-query {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

.pac-matched {
  font-weight: 700;
}

.pac-icon {
  display: none;
}

.pac-logo::after {
  padding: 4px 14px 6px;
}

/* ------------------------------------------------------------
   R4. Mobile Minimum — ≤360px
   ------------------------------------------------------------ */

/* ============================================================
   LEGAL PAGES — standalone header + content layout
   ============================================================ */

/* Standalone header: fixed, light bg, dark text — for legal/inner pages */
.header--standalone {
  color: var(--text-primary);
  background-color: var(--bg-inverse);
  border-bottom: 1px solid var(--border-primary);
}

.header--standalone .header__logo,
.header--standalone .header__nav-link,
.header--standalone .header__phone {
  color: var(--text-primary);
}

.header--standalone .header__logo-img {
  filter: invert(1);
}

/* Legal page layout — top padding accounts for fixed header + offer bar */
.legal-page {
  background-color: var(--bg-primary);
  padding: calc(var(--offer-bar-h, 33px) + var(--header-h, 56px) + 64px) 32px 64px;
  min-height: 60vh;
}

.legal-page__inner {
  max-width: 800px;
  margin: 0 auto;
}

.legal-page__title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: left;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.legal-page__date {
  text-align: left;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-primary);
}

.legal-page__content h2 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.legal-page__content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.legal-page__content ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-page__content ul li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.legal-page__content a {
  color: var(--accent-green-text);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .legal-page {
    padding: calc(var(--offer-bar-h, 0px) + var(--header-h, 64px) + 32px) 16px 32px;
  }

  .legal-page__title {
    font-size: 28px;
  }
}