/* ============================================================
   BEXSAM Builders — Main Stylesheet
   Author:  BEXSAM Dev Team
   Version: 1.0.0

   TABLE OF CONTENTS
   -----------------
   1.  Design Tokens (CSS Custom Properties)
   2.  CSS Reset & Base
   3.  Typography Utilities
   4.  Layout Utilities
   5.  Buttons
   6.  Header & Navigation
   7.  Hero Section
   8.  Trust Bar
   9.  Locations Bar
   10. Why Us Section
   11. Services Section
   12. How It Works (Process) Section
   13. Our Approach Section
   14. Reviews Section
   15. Footer
   16. Back to Top Button
   17. Animations & Transitions
   18. Responsive Overrides
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colours */
  --color-brand-orange:   #E87722;   /* Primary CTA / accent */
  --color-brand-navy:     #1B2B3A;   /* Dark headings / footer background */
  --color-brand-orange-hover: #d06716;

  /* Neutral palette */
  --color-white:          #FFFFFF;
  --color-off-white:      #F8F7F4;
  --color-light-grey:     #F2F1EE;
  --color-mid-grey:       #9CA3AF;
  --color-border:         #E5E4E0;
  --color-text:           #2D2D2D;
  --color-text-muted:     #6B7280;

  /* Typography */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout */
  --container-max:   1200px;
  --container-gutter: 1.5rem;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Header height (used for scroll offset) */
  --header-height: 88px;
}


/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--color-brand-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */

/* Eyebrow label — small uppercase label above headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
  margin-bottom: var(--space-3);
}

/* Accent colour span */
.text--accent {
  color: var(--color-brand-orange);
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

/* Centred container with max-width and responsive padding */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Generic section header (title + subtitle) */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-brand-navy);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.section-header__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 540px;
  margin-inline: auto;
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Primary — filled orange */
.btn--primary {
  background-color: var(--color-brand-orange);
  color: var(--color-white);
  border-color: var(--color-brand-orange);
}

.btn--primary:hover {
  background-color: var(--color-brand-orange-hover);
  border-color: var(--color-brand-orange-hover);
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.35);
}

/* Outline — transparent with dark border */
.btn--outline {
  background-color: transparent;
  color: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}

.btn--outline:hover {
  background-color: var(--color-brand-navy);
  color: var(--color-white);
}

/* Small size modifier */
.btn--sm {
  font-size: var(--text-sm);
  padding: 0.625rem 1.25rem;
}


/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  transition: box-shadow var(--transition-base);
}

/* Scrolled state — added via JS */
.header--scrolled {
  box-shadow: var(--shadow-md);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 100%;
}

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

.header__logo img {
  height: 58px;
  width: auto;
}

/* Navigation list */
.nav {
  flex: 1;
}

.nav__list {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}

/* Animated underline on hover / active */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-brand-orange);
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-brand-orange);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

/* Header actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 0;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-navy);
  transition: color var(--transition-fast);
}

.header__phone:hover {
  color: var(--color-brand-orange);
}

.header__phone-icon {
  flex-shrink: 0;
}

/* Mobile hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-brand-navy);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animated X state */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   7. HERO SECTION
   Two-column grid on desktop: text left, image right.
   Image column bleeds flush to the right viewport edge.
   Falls back to stacked layout on tablet / mobile.
   ============================================================ */
.hero {
  background-color: var(--color-off-white);
  padding-top: var(--header-height);
  /* Full viewport width — no container constraint at this level */
  width: 100%;
  overflow: hidden;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: stretch;
}

/* Grid wrapper — full viewport width.
   Text column has its own max-width so it doesn't stretch too wide.
   Image column fills all remaining space to the right viewport edge. */
.hero__inner {
  display: grid;
  /* Text col: min 340px, max 600px. Image col: takes the rest. */
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  gap: var(--space-12);
  min-height: calc(100svh - var(--header-height));
}

/* ---- Left column: text content ---- */
.hero__content {
  /* Left gutter via padding — mirrors the site-wide container gutter */
  padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  padding-right: var(--space-4);
  padding-block: var(--space-16);
  align-self: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Inherits .eyebrow for colour/font; line decoration added below */
}

.hero__eyebrow::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background-color: var(--color-brand-orange);
  flex-shrink: 0;
}

.hero__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
  font-weight: 800;
  line-height: 1.08;
  color: var(--color-brand-navy);
  margin-bottom: var(--space-6);
}

.hero__heading--accent {
  color: var(--color-brand-orange);
}

.hero__body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 460px;
  margin-bottom: var(--space-8);
  line-height: 1.75;
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Right column: image ---- */
.hero__media {
  /* Stretch to fill the full column height */
  align-self: stretch;
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

/* Feather/fade from the off-white background into the image on the left edge */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--color-off-white) 0%,
    rgba(248, 247, 244, 0.55) 18%,
    rgba(248, 247, 244, 0.0) 42%
  );
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* The overlay is no longer needed in split layout */
.hero__overlay {
  display: none;
}


/* ============================================================
   8. TRUST BAR
   ============================================================ */
.trust-bar {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.trust-bar__icon {
  flex-shrink: 0;
  color: var(--color-brand-orange);
  margin-top: 2px;
}

.trust-bar__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: var(--space-1);
}

.trust-bar__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}


/* ============================================================
   9. LOCATIONS BAR
   ============================================================ */
.locations-bar {
  background-color: var(--color-brand-navy);
  padding-block: var(--space-3);
  overflow: hidden;
}

.locations-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.locations-bar__tagline {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.locations-bar__list {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.locations-bar__list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.75);
}

.locations-bar__list svg {
  color: var(--color-brand-orange);
  flex-shrink: 0;
}


/* ============================================================
   10. WHY US SECTION
   ============================================================ */
.why-us {
  padding-block: var(--space-24);
  background-color: var(--color-off-white);
}

.why-us__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.why-us__media {
  position: relative;
}

.why-us__image {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.why-us__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-brand-navy);
  line-height: 1.2;
  margin-bottom: var(--space-6);
}

.why-us__body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 480px;
}

/* Checklist */
.why-us__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.why-us__check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.check-icon {
  flex-shrink: 0;
  color: var(--color-brand-orange);
}


/* ============================================================
   11. SERVICES SECTION
   ============================================================ */
.services {
  padding-block: var(--space-24);
  background-color: var(--color-white);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Service Card */
.service-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-card__image {
  transform: scale(1.05);
}

/* Card body — relative so the icon circle can be centred at the top */
.service-card__body {
  position: relative;
  padding: var(--space-10) var(--space-5) var(--space-6);
  text-align: center;
}

/* Circular icon — sits at the very top of __body, centred, fully visible */
.service-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-border);
  margin: 0 auto var(--space-4);
}

.service-card__icon {
  color: var(--color-brand-orange);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: var(--space-2);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ============================================================
   12. HOW IT WORKS (PROCESS) SECTION
   ============================================================ */
.process {
  padding-block: var(--space-24);
  background-color: var(--color-off-white);
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  counter-reset: process-step;
}

.process__step {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  position: relative;
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
  cursor: default;
}

.process__step:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand-orange);
  transform: translateY(-3px);
}

/* Connector line between steps */
.process__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 38px;
  right: calc(-1 * var(--space-6) / 2 - 8px);
  width: 16px;
  height: 2px;
  background-color: var(--color-border);
}

.process__step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-brand-navy);
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

/* Circle turns orange and scales up on card hover */
.process__step:hover .process__step-number {
  background-color: var(--color-brand-orange);
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.4);
}

/* Highlighted / accent step — already orange, darken on hover */
.process__step--accent .process__step-number {
  background-color: var(--color-brand-orange);
}

.process__step--accent:hover .process__step-number {
  background-color: var(--color-brand-orange-hover);
}

.process__step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: var(--space-3);
}

.process__step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}


/* ============================================================
   13. OUR APPROACH SECTION
   ============================================================ */
.approach {
  padding-block: var(--space-24);
  background-color: var(--color-white);
  overflow: hidden;
}

/* Top row: heading left (1/3) | image right (2/3) */
.approach__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: center;
  margin-bottom: var(--space-8);
}

.approach__content {
  /* no sticky needed now that values are full-width below */
}

.approach__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-brand-navy);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.approach__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Image — clean, no border, no shadow */
.approach__media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.approach__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Full-width row of 4 cards */
.approach__values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  list-style: none;
}

/* Each card — vertical: icon, title, desc */
.approach__value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  background-color: var(--color-off-white);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-brand-orange);
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

.approach__value:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Icon circle — fills with orange on hover */
.approach__value-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-orange);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.approach__value:hover .approach__value-icon {
  background-color: var(--color-brand-orange);
  border-color: var(--color-brand-orange);
  color: var(--color-white);
}

.approach__value-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.approach__value-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-brand-navy);
  line-height: 1.3;
}

.approach__value-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ============================================================
   14. REVIEWS SECTION
   ============================================================ */
.reviews {
  padding-block: var(--space-24);
  background-color: var(--color-off-white);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Review Card */
.review-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.review-card__stars {
  color: var(--color-brand-orange);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  letter-spacing: 2px;
}

/* Service type label beneath stars */
.review-card__service {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand-orange);
  margin-bottom: var(--space-3);
}

.review-card__quote {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.review-card__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-card__author strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-brand-navy);
}

.review-card__author span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Decorative large quotation mark */
.review-card__quotemark {
  position: absolute;
  bottom: -8px;
  right: 16px;
  font-size: 7rem;
  line-height: 1;
  color: var(--color-brand-orange);
  opacity: 0.10;
  font-family: Georgia, serif;
  pointer-events: none;
  user-select: none;
}


/* ============================================================
   15. CONTACT US SECTION
   ============================================================ */
.contact {
  padding-block: var(--space-24);
  background-color: var(--color-brand-navy);
}

/* Two-column layout: copy left, form right */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-16);
  align-items: start;
}

/* Left column */
.contact__content .eyebrow {
  color: var(--color-brand-orange);
}

.contact__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

.contact__body {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.contact__body strong {
  color: var(--color-white);
  font-weight: 600;
}

/* Reassurance bullet list */
.contact__reassurances {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__reassurances li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgba(255,255,255,.80);
  font-weight: 500;
}

.contact__reassurances svg {
  flex-shrink: 0;
  color: var(--color-brand-orange);
}

/* Right column — form card */
.contact__form-wrap {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10);
  box-shadow: var(--shadow-lg);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-navy);
}

.contact__label--optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.contact__input,
.contact__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-off-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  outline: none;
}

.contact__input:focus,
.contact__textarea:focus {
  border-color: var(--color-brand-orange);
  box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.15);
  background-color: var(--color-white);
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: var(--color-mid-grey);
}

.contact__textarea {
  resize: vertical;
  min-height: 130px;
}

.contact__submit {
  width: 100%;
  justify-content: center;
  padding-block: 1rem;
  font-size: var(--text-base);
}

.contact__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-brand-navy);
  color: rgba(255,255,255,.75);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-block: var(--space-16);
}

/* Brand column */
.footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--space-5);
  /* Transparent PNG — renders cleanly on the dark footer without any filter */
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  max-width: 300px;
  margin-bottom: var(--space-6);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.12);
  color: var(--color-white);
  transition: background-color var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-brand-orange);
}

/* Footer nav columns */
.footer__nav-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  transition: color var(--transition-fast);
}

.footer__nav-link:hover {
  color: var(--color-brand-orange);
}

/* Contact column */
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
}

.footer__contact-list svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-brand-orange);
}

.footer__contact-link {
  color: rgba(255,255,255,.65);
  transition: color var(--transition-fast);
}

.footer__contact-link:hover {
  color: var(--color-brand-orange);
}

.footer__address {
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}

/* Footer bottom bar */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--space-5);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
}

.footer__legal {
  display: flex;
  gap: var(--space-5);
}

.footer__legal-link {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-brand-orange);
}


/* ============================================================
   16. BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-brand-orange);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-fast),
              transform var(--transition-base),
              opacity var(--transition-base);
  opacity: 0;
}

.back-to-top:not([hidden]) {
  opacity: 1;
}

.back-to-top:hover {
  background-color: var(--color-brand-orange-hover);
  transform: translateY(-2px);
}


/* ============================================================
   17. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Fade-up reveal — applied via JS intersection observer */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers */
.reveal--delay-1 { transition-delay: 0.10s; }
.reveal--delay-2 { transition-delay: 0.20s; }
.reveal--delay-3 { transition-delay: 0.30s; }
.reveal--delay-4 { transition-delay: 0.40s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   18. RESPONSIVE OVERRIDES
   ============================================================ */

/* ---- Laptop / Large Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  :root {
    --container-gutter: 1.25rem;
  }

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

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

  /* Hide the connector line pseudo-elements on 2-col layout */
  .process__step::after {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

/* ---- Tablet (≤768px) ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  /* Scale logo down to fit */
  .header__logo img {
    height: 46px;
  }

  /* Remove gap so logo sits flush, actions pushed right by margin-left:auto */
  .header__inner {
    gap: 0;
  }

  /* Pull nav COMPLETELY out of the header flex row */
  .nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--container-gutter) var(--space-8);
    z-index: 999;
    box-shadow: var(--shadow-lg);
    /* Reset flex-child properties from desktop */
    flex: none;
    width: 100%;
  }

  /* Show nav drawer when toggled open */
  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .nav__link {
    font-size: var(--text-base);
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex;
    flex-shrink: 0;
    margin-left: var(--space-3);
  }

  /* Actions: phone + hamburger, pushed to the right */
  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Keep phone number visible */
  .header__phone {
    display: flex;
    font-size: var(--text-xs);
  }

  /* Hide the CTA button — no room */
  .header__actions .btn--sm {
    display: none;
  }

  /* Hero — stack to single column */
  .hero {
    align-items: flex-start;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: unset;
    padding-block: 0;
    /* Restore symmetric padding when stacked */
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    gap: 0;
  }

  .hero__content {
    padding-block: var(--space-12) var(--space-10);
    max-width: 100%;
  }

  .hero__media {
    clip-path: none;
    min-height: 340px;
    width: 100%;
    /* Bleed to both edges on mobile */
    margin-inline: calc(-1 * var(--container-gutter));
    width: calc(100% + 2 * var(--container-gutter));
    position: relative;
    align-self: auto;
  }

  /* Trust bar */
  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Locations bar */
  .locations-bar__tagline {
    display: none;
  }

  /* Why us */
  .why-us__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .why-us__media {
    order: -1;
  }

  /* Services */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* Process */
  .process__steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Approach */
  .approach__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .approach__content {
    position: static;
  }

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

  /* Contact */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact__form-wrap {
    padding: var(--space-8) var(--space-6);
  }

  /* Reviews */
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Back to top */
  .back-to-top {
    bottom: var(--space-5);
    right: var(--space-5);
  }
}

/* ---- Mobile (≤480px) ---- */
@media (max-width: 480px) {
  .trust-bar__grid {
    grid-template-columns: 1fr;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

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

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

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

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

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}