/* ============================================================
   Scale Army — New Home Design
   Page-scoped CSS. Everything is scoped to
   body.sa-new-home-design-active / .sa-new-home-design
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   ============================================================ */
body.sa-new-home-design-active,
.sa-new-home-design {
  /* --- Colors --- */
  --color-navy:         #001629;       /* Primary dark (headings, bg) */
  --color-navy-mid:     #162b3e;       /* Secondary dark (dark buttons) */
  --color-slate-bg:     #f1f5f9;       /* Light slate section background */
  --color-off-white:    #f9f9f9;       /* Page background */
  --color-white:        #ffffff;
  --color-border:       #c3c7cd;       /* Dividers, card borders */
  --color-text-body:    #43474c;       /* Body copy */
  --color-text-muted:   #74777d;       /* De-emphasised labels */
  --color-orange:       #ff6432;       /* Accent / eyebrow labels */
  --color-orange-hover: #ff7d52;       /* CTA hover */
  --color-hero-navy:    #152b3f;       /* MUST match the gradient baked into
                                          hero-image.webp — do not change */
  --color-navy-deep:    #11253a;       /* Tool-logo bar */
  --color-cream:        #f7f4ed;       /* Warm off-white (italic headline) */
  --color-card-navy:    #1c3651;       /* Scorecard body */
  --color-card-navy-foot: #16293e;     /* Scorecard footer strip */
  --color-peach:        #fdeedb;       /* Warm cream section background */
  --color-orange-soft:  #f4907a;       /* Filled "current" step circle */
  --color-orange-dot:   #f0a08c;       /* Step rings + dotted connector */
  --color-orange-halo:  rgba(244, 144, 122, 0.28);
  --color-orange-halo-soft: rgba(244, 144, 122, 0.16);
  --color-navy-panel:   #16293e;       /* Split-panel background */
  --color-navy-muted:   #7d8b99;       /* Closed accordion numbers */
  --color-navy-muted-strong: #9aa7b4;  /* Closed accordion titles */
  --color-ivory:        #fdf6e6;       /* Testimonial section background */
  --color-mist:         #f6f7f9;       /* Case studies background */

  --color-white-80: rgba(255, 255, 255, 0.80);
  --color-white-70: rgba(255, 255, 255, 0.70);
  --color-white-10: rgba(255, 255, 255, 0.10);

  /* --- Typography --- */
  /* Two faces only: EB Garamond for headings, Poppins for everything
     else. --font-sans and --font-display both resolve to Poppins; the
     two names are kept so a separate UI face could be reintroduced in
     one place if ever needed. */
  --font-serif:   'EB Garamond', Georgia, serif;      /* Headings */
  --font-sans:    'Poppins', system-ui, sans-serif;   /* Body copy */
  --font-display: 'Poppins', system-ui, sans-serif;   /* Buttons, labels, UI */

  /* --- Spacing scale (matches Figma 8-pt grid) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Border radii --- */
  --radius-pill: 9999px;
  --radius-card:   8px;
  --radius-card-lg: 18px;

  /* --- Shadows --- */
  --shadow-btn:  0px 14.881px 29.762px -7.143px rgba(0, 0, 0, 0.25);
  --shadow-card: 0px 24px 25px rgba(0, 0, 0, 0.08);

  /* --- Easing --- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
   RESET & BASE
   ============================================================ */
.sa-new-home-design *, .sa-new-home-design *::before, .sa-new-home-design *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.sa-new-home-design-active {
  /* The header is position:fixed, so its height is not in the document flow
     and every top-of-page section has to clear it by hand. Declared here,
     not on .sa-nav, so the nav and the things dodging it cannot drift apart
     — which is exactly how the hero ended up 44px under an 88px header. */
  --nav-h: 68px;
  --nav-pad-y: clamp(10px, 1.4vw, 18px);
  --nav-total: calc(var(--nav-h) + var(--nav-pad-y) * 2);

  /* The browser's default 8px body margin was never reset, so every
     full-bleed section sat inside an 8px gutter. */
  margin: 0;
  padding: 0;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.sa-new-home-design-active {
  font-family: var(--font-sans);
  background-color: var(--color-off-white);
  color: var(--color-navy);
  line-height: 1.5;
}

.sa-new-home-design img {
  display: block;
  max-width: 100%;
}

.sa-new-home-design ul[role="list"] {
  list-style: none;
}

.sa-new-home-design a {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* --- Button --- */
.sa-new-home-design .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  min-width: 245px;          /* matches Figma fixed width (244.908px) */
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-display);
  font-size: 11.905px;
  font-weight: 700;
  letter-spacing: 0.7143px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}

.sa-new-home-design .btn:hover  { background-color: var(--color-orange); color: var(--color-white); }
.sa-new-home-design .btn:active { transform: scale(0.98); }

.sa-new-home-design .btn--white {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.sa-new-home-design .btn--dark {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
}

/* ============================================================
   SECTION 1: HERO — "Transform your business using AI-native talent"
   Navy stage, centered content stack, full-bleed photo band with
   four floating snippets. Photo has its navy gradient baked in at
   the top, so --color-hero-navy MUST stay #152b3f for a clean blend.
   ============================================================ */
.sa-new-home-design .hero {
  position: relative;
  background-color: var(--color-hero-navy);
  /* Clears the fixed header (--nav-total: 104px at desktop, 88px on a
     phone) and still leaves breathing room above the headline. The 112px
     floor is what keeps ~15px of clearance at the 768 and 1024 widths where
     --nav-total peaks at 89.5 / 96.7px. The mobile override below derives
     from --nav-total directly. */
  padding-top: clamp(112px, 9vw, 132px);
  overflow: hidden;
}

/* --- Centered content stack --- */
.sa-new-home-design .hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
}

/* --- Headline (EB Garamond; line 2 italic + warm cream) --- */
.sa-new-home-design .hero__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--color-white);
  text-wrap: balance;
}

.sa-new-home-design .hero__heading-em {
  display: block;
  font-style: italic;
  color: var(--color-cream);
}

/* --- Subtitle --- */
.sa-new-home-design .hero__subtitle {
  max-width: 680px;
  /* Follows the pills now, not the headline. */
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--color-white-80);
}

/* Desktop: let the subtitle run on one line. It needs ~1180px at its 19px
   cap, but .hero__inner only offered 1132px of content box, so it wrapped.
   Widening the column is safe for the headline because .hero__heading-em is
   display:block — its two lines are structural, not a wrap. Deliberately no
   white-space:nowrap: if font metrics ever differ it falls back to wrapping
   rather than overflowing the section. */
@media (min-width: 1025px) {
  .sa-new-home-design .hero__inner {
    max-width: 1280px;
  }

  .sa-new-home-design .hero__subtitle {
    max-width: 100%;
  }
}

/* --- Stat pills --- */
.sa-new-home-design .hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  /* Follows the headline now, so this is the headline-to-body gap. */
  margin: clamp(18px, 2vw, 28px) auto 0;
  list-style: none;
}

.sa-new-home-design .hero__stat {
  padding: 9px 18px;
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.055);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white-80);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.sa-new-home-design .hero__stat:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* --- Primary CTA (design is sentence-case + orange, so it is its own
       component rather than a .btn variant) --- */
.sa-new-home-design .hero__cta-wrap {
  margin-top: clamp(24px, 2.8vw, 38px);
}

/* Visually hidden but announced — used by the comparison table's
   yes/no/varies values and its caption. */
.sa-new-home-design .sa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shared orange pill CTA — used across the page AND by the header, which
   sits outside <main>, so this is scoped to the body class rather than to
   .sa-new-home-design. --cta-focus lets a dark surface swap the focus ring. */
body.sa-new-home-design-active .sa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-orange);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 14px 30px -8px rgba(255, 100, 50, 0.45);
  transition: background-color 0.25s var(--ease-out), transform 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

body.sa-new-home-design-active .sa-cta:hover {
  background-color: var(--color-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -8px rgba(255, 100, 50, 0.55);
}

body.sa-new-home-design-active .sa-cta:active {
  transform: translateY(0) scale(0.985);
}

body.sa-new-home-design-active .sa-cta:focus-visible {
  outline: 2px solid var(--cta-focus, var(--color-navy));
  outline-offset: 3px;
}

/* Arrow modifier */
body.sa-new-home-design-active .sa-cta__arrow {
  transition: transform 0.25s var(--ease-out);
}

body.sa-new-home-design-active .sa-cta:hover .sa-cta__arrow {
  transform: translateX(4px);
}

/* The hero sits on navy, so its focus ring has to be light. */
.sa-new-home-design .hero__cta-wrap .sa-cta {
  --cta-focus: var(--color-white);
}

/* --- Photo band ---------------------------------------------
   .hero__visual is the positioning stage. The photo gives it its
   height, so the snippets' % offsets resolve against the photo.
   ----------------------------------------------------------- */
.sa-new-home-design .hero__visual {
  position: relative;
  z-index: 1;
  /* Fills its container. The old `max-width: 1440px` cap is gone -- that is
     what left the section's navy showing down both sides on a wide screen.
     A 100vw break-out was tried here and made it worse: it only lands
     correctly when the constrained ancestor is centred, and on the live site
     it pushed the band left, so the container there is both narrower than the
     viewport and not centred. Fix the overflow that causes that rather than
     compensating for it here. */
  width: 100%;
  margin: clamp(40px, 6vw, 88px) auto 0;
}

.sa-new-home-design .hero__picture,
.sa-new-home-design .hero__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Floating snippets --- */
.sa-new-home-design .hero__snippet {
  position: absolute;
  height: auto;
  will-change: transform;
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.sa-new-home-design .hero__snippet:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
  z-index: 3;
}

/* Positions are % of the 1440x457 photo box, so they scale with it. */
.sa-new-home-design .hero__snippet--tl { left: 18.75%;  top: -3.5%;   width: 23.40%; }
.sa-new-home-design .hero__snippet--bl { left:  8.19%;  top: 34.79%;  width: 23.40%; }
.sa-new-home-design .hero__snippet--tr { left: 65.28%;  top: -10.07%; width: 13.68%; }
.sa-new-home-design .hero__snippet--br { left: 68.89%;  top: 44.86%;  width: 23.40%; }



/* The shortcode init only exists to load the HubSpot/Calendly form
   assets; the visible trigger is the hero CTA. */
body.sa-new-home-design-active .sa-new-home-design-shortcode-init {
  display: none !important;
}


/* --- sa_hs_calendly_form_v2 inline form ---------------------
   On click the shortcode hides the CTA and inserts its form shell right after
   it, as a sibling inside the same wrapper. That shell is
   `width:100%; max-width:460px; margin:0` -- a block with a capped width and
   no auto margins -- so in the centred hero it sat hard against the left edge
   while the headline above it stayed centred.

   inline-block rather than `margin-inline:auto` so the surrounding text-align
   decides: centred under the hero copy, still flush left in the sections whose
   CTA column is left-aligned. Specificity (0,2,0) beats the shortcode's own
   `.sa-native-hs-inline-shell` (0,1,0) whichever stylesheet lands last, and
   its `.is-hidden { display:none !important }` still wins over this.
   ---------------------------------------------------------- */
body.sa-new-home-design-active .sa-native-hs-inline-shell {
  display: inline-block;
  vertical-align: top;
}

/* text-align inherits into the form controls, so a centred container would
   centre the placeholder and the address as it is typed. */
body.sa-new-home-design-active .sa-native-hs-form,
body.sa-new-home-design-active .sa-native-hs-email {
  text-align: left;
}


/* ============================================================
   SECTION 1b: "FLUENT IN" TOOL LOGO BAR
   ============================================================ */
.sa-new-home-design .tools {
  position: relative;
  z-index: 2;
  background-color: var(--color-navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sa-new-home-design .tools__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: 1440px;
  margin: 0 auto;
  padding: 15px clamp(20px, 2.8vw, 40px);
}

.sa-new-home-design .tools__label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white-70);
}

.sa-new-home-design .tools__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sa-new-home-design .tools__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.9vw, 28px);
  list-style: none;
}

.sa-new-home-design .tools__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.sa-new-home-design .tools__logo {
  width: auto;
  height: 23px;
  opacity: 0.92;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.sa-new-home-design .tools__item:hover .tools__logo {
  opacity: 1;
  transform: scale(1.14);
}

/* Marquee mode — JS adds .is-marquee once the track overflows. */
.sa-new-home-design .tools__viewport.is-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

.sa-new-home-design .tools__viewport.is-marquee .tools__track {
  justify-content: flex-start;
  width: max-content;
  animation: sa-nhd-marquee 34s linear infinite;
}

.sa-new-home-design .tools__viewport.is-marquee:hover .tools__track,
.sa-new-home-design .tools__viewport.is-marquee:focus-within .tools__track {
  animation-play-state: paused;
}

@keyframes sa-nhd-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ============================================================
   HERO ENTRANCE — JS adds .is-ready to <main> on first paint
   ============================================================ */
.sa-new-home-design .hero__heading,
.sa-new-home-design .hero__subtitle,
.sa-new-home-design .hero__stats,
.sa-new-home-design .hero__cta-wrap,
.sa-new-home-design .hero__visual {
  opacity: 1;
}

.sa-new-home-design.is-animated .hero__heading,
.sa-new-home-design.is-animated .hero__subtitle,
.sa-new-home-design.is-animated .hero__stats,
.sa-new-home-design.is-animated .hero__cta-wrap,
.sa-new-home-design.is-animated .hero__visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-animated.is-ready .hero__heading,
.sa-new-home-design.is-animated.is-ready .hero__subtitle,
.sa-new-home-design.is-animated.is-ready .hero__stats,
.sa-new-home-design.is-animated.is-ready .hero__cta-wrap,
.sa-new-home-design.is-animated.is-ready .hero__visual {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-animated .hero__stats     { transition-delay: 0.10s; }
.sa-new-home-design.is-animated .hero__subtitle  { transition-delay: 0.20s; }
.sa-new-home-design.is-animated .hero__cta-wrap  { transition-delay: 0.30s; }
.sa-new-home-design.is-animated .hero__visual    { transition-delay: 0.38s; }

/* Idle float, started only after the entrance settles. */
.sa-new-home-design.is-animated.is-ready .hero__snippet {
  animation: sa-nhd-float 7s ease-in-out 1.2s infinite;
}

.sa-new-home-design.is-animated.is-ready .hero__snippet--bl { animation-duration: 8.5s; animation-delay: 1.5s; }
.sa-new-home-design.is-animated.is-ready .hero__snippet--tr { animation-duration: 6.4s; animation-delay: 1.7s; }
.sa-new-home-design.is-animated.is-ready .hero__snippet--br { animation-duration: 9.2s; animation-delay: 1.35s; }

.sa-new-home-design .hero__snippet:hover { animation-play-state: paused; }

@keyframes sa-nhd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}


/* ============================================================
   SECTION 1 — RESPONSIVE
   ============================================================ */

/* Tablet — pull the snippets in toward the photo edges. */
@media (max-width: 1024px) {
  .sa-new-home-design .hero__snippet--tl { left: 12%;    top: -6%;    width: 27%; }
  .sa-new-home-design .hero__snippet--bl { left:  3%;    top: 33%;    width: 27%; }
  .sa-new-home-design .hero__snippet--tr { left: 68%;    top: -13%;   width: 16%; }
  .sa-new-home-design .hero__snippet--br { left: 71%;    top: 44%;    width: 27%; }
}

/* Mobile — only the two top snippets survive, and the photo is
   cropped taller so the subject does not become a sliver. */
@media (max-width: 767px) {
  .sa-new-home-design .hero {
    /* Must clear the 88px the fixed header occupies on a phone — a flat
       value here once put the H1 behind the nav pill, so it is derived. */
    padding-top: calc(var(--nav-total) + 10px);
  }

  .sa-new-home-design .hero__heading {
    line-height: 1.12;
  }

  .sa-new-home-design .hero__stat {
    padding: 8px 14px;
    font-size: 12px;
  }

  body.sa-new-home-design-active .sa-cta {
    padding: 16px 28px;
  }

  .sa-new-home-design .hero__visual {
    margin-top: 34px;
  }

  .sa-new-home-design .hero__photo {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 0;
  }

  .sa-new-home-design .hero__snippet--bl,
  .sa-new-home-design .hero__snippet--br {
    display: none;
  }

  /* 18% smaller than the previous pass; --tl keeps its visible left edge,
     --tr is re-anchored to the right so it cannot drift. */
  .sa-new-home-design .hero__snippet--tl {
    left: -1.9%;
    top: 7%;
    width: 42.6%;
  }

  .sa-new-home-design .hero__snippet--tr {
    left: auto;
    right: 6%;
    top: 3%;
    width: 26.2%;
  }

  .sa-new-home-design .tools__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 16px 0 18px;
  }

  .sa-new-home-design .tools__label {
    padding: 0 var(--space-6);
  }

  .sa-new-home-design .tools__viewport {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sa-new-home-design .hero__stats {
    gap: var(--space-2);
  }

  .sa-new-home-design .hero__snippet--tl { left: -1.8%; width: 47.6%; }
  .sa-new-home-design .hero__snippet--tr { width: 28.7%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design .hero__snippet,
  .sa-new-home-design .tools__viewport.is-marquee .tools__track {
    animation: none !important;
  }

  .sa-new-home-design.is-animated .hero__heading,
  .sa-new-home-design.is-animated .hero__subtitle,
  .sa-new-home-design.is-animated .hero__stats,
  .sa-new-home-design.is-animated .hero__cta-wrap,
  .sa-new-home-design.is-animated .hero__visual {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.sa-new-home-design-active .sa-cta,
  body.sa-new-home-design-active .sa-cta__arrow,
  .sa-new-home-design .hero__snippet,
  .sa-new-home-design .tools__logo {
    transition: none;
  }
}



/* ============================================================
   SECTION 2a: CLIENT PROOF STRIP — "600+ happy clients"
   ============================================================ */
.sa-new-home-design .clients {
  background-color: var(--color-white);
}

.sa-new-home-design .clients__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.4vw, 48px);
  /* max-width and the horizontal padding mirror .tools__inner so
     "600+ HAPPY CLIENTS" starts on the same x as "FLUENT IN". The vertical
     padding stays larger — this strip is not a compact bar. */
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(32px, 3.6vw, 52px) clamp(20px, 2.8vw, 40px);
}

/* Typographically a twin of .tools__label — same size, weight, tracking and
   uppercase treatment — so the two strip labels read as one system. Only the
   colour differs: navy on white here, white-70 on navy there. */
.sa-new-home-design .clients__count {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
}

.sa-new-home-design .clients__count strong {
  font-family: var(--font-display);
  font-weight: 700;
  /* Inherits the 0.12em tracking; the old -0.01em was tuned for 30px type
     and would pinch the digits shut at 11px. */
}

.sa-new-home-design .clients__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sa-new-home-design .clients__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 44px);
  list-style: none;
}

.sa-new-home-design .clients__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.sa-new-home-design .clients__logo {
  width: auto;
  height: 53px;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.sa-new-home-design .clients__item:hover .clients__logo {
  opacity: 1;
  transform: scale(1.05);
}

/* Marquee mode — shared behaviour with the section 1 tools bar. */
.sa-new-home-design .clients__viewport.is-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

.sa-new-home-design .clients__viewport.is-marquee .clients__track {
  justify-content: flex-start;
  width: max-content;
  animation: sa-nhd-marquee 30s linear infinite;
}

.sa-new-home-design .clients__viewport.is-marquee:hover .clients__track,
.sa-new-home-design .clients__viewport.is-marquee:focus-within .clients__track {
  animation-play-state: paused;
}


/* ============================================================
   SECTION 2b: CANDIDATES VETTING
   ============================================================ */
.sa-new-home-design .vetting {
  background-color: var(--color-white);
}

.sa-new-home-design .vetting__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(40px, 5.8vw, 84px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 6.4vw, 92px) var(--space-6) clamp(64px, 7vw, 100px);
}

/* --- Copy column --- */
.sa-new-home-design .vetting__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-orange);
}

.sa-new-home-design .vetting__heading {
  margin-top: var(--space-6);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(46px, 5.1vw, 74px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  color: var(--color-navy);
}

.sa-new-home-design .vetting__heading-em {
  display: block;
  font-style: italic;
  color: var(--color-orange);
}

.sa-new-home-design .vetting__lead {
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--color-text-body);
}

.sa-new-home-design .vetting__cta-wrap {
  margin-top: clamp(26px, 3.1vw, 44px);
}



/* ============================================================
   SECTION 2b: SCORECARD
   ============================================================ */
.sa-new-home-design .scorecard {
  overflow: hidden;
  border-radius: var(--radius-card-lg);
  background-color: var(--color-card-navy);
  box-shadow: 0 34px 64px -24px rgba(0, 22, 41, 0.42);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.sa-new-home-design .scorecard:hover {
  transform: translateY(-4px);
  box-shadow: 0 42px 74px -24px rgba(0, 22, 41, 0.5);
}

/* --- Card header --- */
.sa-new-home-design .scorecard__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px) 0;
}

.sa-new-home-design .scorecard__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.sa-new-home-design .scorecard__name {
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-white);
}

.sa-new-home-design .scorecard__role {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.35;
  color: var(--color-white-70);
}

.sa-new-home-design .scorecard__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 100, 50, 0.55);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-orange);
}

.sa-new-home-design .scorecard__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.sa-new-home-design .scorecard__overall {
  text-align: right;
  white-space: nowrap;
}

.sa-new-home-design .scorecard__score {
  display: block;
  font-family: var(--font-serif);
  color: var(--color-white);
}

.sa-new-home-design .scorecard__score-value {
  font-size: clamp(28px, 2.5vw, 35px);
  line-height: 1;
  /* Keeps the count-up from reflowing the header as digits change. */
  font-variant-numeric: tabular-nums;
}

.sa-new-home-design .scorecard__score-max {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-white-70);
}

.sa-new-home-design .scorecard__overall-label {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Card body --- */
.sa-new-home-design .scorecard__body {
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.2vw, 28px);
}

.sa-new-home-design .scorecard__section-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.sa-new-home-design .scorecard__tools {
  margin-top: var(--space-4);
  list-style: none;
}

.sa-new-home-design .scorecard__tool {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-card);
  transition: background-color 0.25s var(--ease-out);
}

.sa-new-home-design .scorecard__tool:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.sa-new-home-design .scorecard__tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.09);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
}

.sa-new-home-design .scorecard__tool-label {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.3;
  color: var(--color-white-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-new-home-design .scorecard__tool-label strong {
  font-weight: 600;
  color: var(--color-white);
}

/* --- Segmented meter --- */
.sa-new-home-design .scorecard__meter {
  display: flex;
  gap: 2px;
}

.sa-new-home-design .scorecard__meter i {
  width: 7px;
  height: 13px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.15);
}

.sa-new-home-design .scorecard__meter i.is-on {
  background-color: var(--color-orange);
}

.sa-new-home-design .scorecard__tool-score {
  min-width: 2.2ch;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

/* --- Card footer --- */
.sa-new-home-design .scorecard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: clamp(15px, 1.5vw, 19px) clamp(20px, 2.4vw, 34px);
  background-color: var(--color-card-navy-foot);
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.3;
}

.sa-new-home-design .scorecard__meta {
  color: rgba(255, 255, 255, 0.55);
}

.sa-new-home-design .scorecard__approved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--color-orange);
}


/* ============================================================
   SECTION 2 — REVEAL ON SCROLL
   .is-reveal-armed is added by JS, so without JS every element
   stays visible instead of being stuck hidden.
   ============================================================ */
.sa-new-home-design.is-reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-reveal-armed .scorecard {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
  transition-delay: 0.12s;
}

/* Meters stay empty until the card is scored; JS sets per-segment delays. */
.sa-new-home-design.is-reveal-armed .scorecard__meter i.is-on {
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color 0.3s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .scorecard.is-scored .scorecard__meter i.is-on {
  background-color: var(--color-orange);
}


/* ============================================================
   SECTION 2 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .vetting__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 5vw, 52px);
    align-items: start;
  }

  .sa-new-home-design .vetting__lead {
    max-width: 46ch;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .clients__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5, 20px);
    padding: 30px 0 34px;
  }

  .sa-new-home-design .clients__count {
    padding: 0 var(--space-6);
  }

  .sa-new-home-design .clients__logo {
    height: 44px;
  }

  .sa-new-home-design .vetting__inner {
    padding: 46px var(--space-6) 56px;
  }

  /* Card sits underneath the copy block on mobile. */
  .sa-new-home-design .scorecard {
    border-radius: var(--radius-card-lg);
  }

  .sa-new-home-design .scorecard__head {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  /* Overall score moves under the identity block rather than
     squeezing the role text into two words per line. */
  .sa-new-home-design .scorecard__overall {
    grid-column: 2;
    text-align: left;
  }

  .sa-new-home-design .scorecard__tool {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
  }

  /* The number carries the score on small screens; the meter is
     decorative and the first to go. */
  .sa-new-home-design .scorecard__meter {
    display: none;
  }

  .sa-new-home-design .scorecard__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design .clients__viewport.is-marquee .clients__track {
    animation: none !important;
  }

  .sa-new-home-design.is-reveal-armed [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design.is-reveal-armed .scorecard__meter i.is-on {
    background-color: var(--color-orange);
    transition: none;
  }

  .sa-new-home-design .scorecard,
  .sa-new-home-design .scorecard__tool,
  .sa-new-home-design .clients__logo {
    transition: none;
  }
}




/* ============================================================
   SECTION 3: HOW IT WORKS — 3-step timeline on cream
   ============================================================ */
.sa-new-home-design .steps {
  --steps-gap: clamp(24px, 3vw, 44px);
  --step-circle: 80px;
  background-color: var(--color-peach);
}

.sa-new-home-design .steps__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 118px) clamp(20px, 4.4vw, 64px) clamp(72px, 9vw, 130px);
}

/* --- Centered header --- */
.sa-new-home-design .steps__head {
  text-align: center;
}

.sa-new-home-design .steps__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-navy);
}

.sa-new-home-design .steps__heading {
  margin-top: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 55px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

.sa-new-home-design .steps__heading-em {
  display: block;
  font-style: italic;
  color: var(--color-orange);
}

.sa-new-home-design .steps__rule {
  height: 1px;
  margin: clamp(34px, 4.3vw, 58px) 0 0;
  border: 0;
  background-color: rgba(0, 22, 41, 0.1);
  transform-origin: center;
}

/* --- Step grid ---------------------------------------------
   .steps__list is the positioning context for the horizontal
   dotted connector, which runs between the first and last
   circle centres. With N equal columns and gap G, that centre
   sits at (100% - (N-1)*G) / (2N) from each edge.
   ---------------------------------------------------------- */
.sa-new-home-design .steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);
  margin-top: clamp(44px, 5.4vw, 74px);
  list-style: none;
}

.sa-new-home-design .steps__list::before {
  content: "";
  position: absolute;
  top: calc(var(--step-circle) / 2 - 1.5px);
  left: calc((100% - 2 * var(--steps-gap)) / 6);
  right: calc((100% - 2 * var(--steps-gap)) / 6);
  height: 3px;
  /* Round dots — a `dotted` border renders as squares in Blink. */
  background-image: radial-gradient(
    circle,
    var(--color-orange-dot) 1.1px,
    transparent 1.4px
  );
  background-size: 9px 3px;
  background-repeat: repeat-x;
  transform-origin: left center;
}

/* --- Individual step --- */
.sa-new-home-design .step {
  position: relative;
  text-align: center;
}

.sa-new-home-design .step__circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-circle);
  height: var(--step-circle);
  margin: 0 auto;
  border: 1.5px solid var(--color-orange-dot);
  border-radius: 50%;
  /* Opaque so it masks the dotted connector behind it. */
  background-color: var(--color-white);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.sa-new-home-design .step__num {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  line-height: 1;
  color: var(--color-orange);
}

/* Current step — filled, with a soft halo. */
.sa-new-home-design .step--current .step__circle {
  border-color: transparent;
  background-color: var(--color-orange-soft);
  box-shadow: 0 0 0 14px var(--color-orange-halo);
}

.sa-new-home-design .step--current .step__num {
  color: var(--color-white);
}

.sa-new-home-design .step:hover .step__circle {
  transform: translateY(-3px);
}

.sa-new-home-design .step--current:hover .step__circle {
  box-shadow: 0 0 0 18px var(--color-orange-halo);
}

.sa-new-home-design .step__day {
  margin-top: clamp(20px, 2.3vw, 30px);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-orange);
}

.sa-new-home-design .step__title {
  margin-top: clamp(12px, 1.5vw, 20px);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-navy);
}

.sa-new-home-design .step__copy {
  max-width: 27ch;
  margin: clamp(12px, 1.4vw, 18px) auto 0;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.55;
  color: var(--color-text-body);
}

.sa-new-home-design .steps__cta-wrap {
  margin-top: clamp(38px, 4.4vw, 60px);
  text-align: center;
}


/* ============================================================
   SECTION 3 — REVEAL
   The rule and the dotted connector draw out from the centre /
   left rather than just fading, so the timeline reads as a path.
   ============================================================ */
.sa-new-home-design.is-reveal-armed .steps__rule {
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out), opacity 0.5s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .steps__rule.is-in {
  transform: scaleX(1);
}

.sa-new-home-design.is-reveal-armed .steps__list::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.25s;
}

.sa-new-home-design.is-reveal-armed .steps__list.is-in::before {
  transform: scaleX(1);
}

.sa-new-home-design.is-reveal-armed .step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .steps__list.is-in .step {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-reveal-armed .steps__list.is-in .step:nth-child(2) { transition-delay: 0.14s; }
.sa-new-home-design.is-reveal-armed .steps__list.is-in .step:nth-child(3) { transition-delay: 0.28s; }

/* Gentle pulse on the current step, once it has arrived. */
.sa-new-home-design .steps__list.is-in .step--current .step__circle,
.sa-new-home-design:not(.is-reveal-armed) .step--current .step__circle {
  animation: sa-nhd-halo 3.4s var(--ease-out) 1s infinite;
}

@keyframes sa-nhd-halo {
  0%, 100% { box-shadow: 0 0 0 14px var(--color-orange-halo); }
  50%      { box-shadow: 0 0 0 19px var(--color-orange-halo-soft); }
}


/* ============================================================
   SECTION 3 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .steps {
    --step-circle: 68px;
  }

  .sa-new-home-design .step__copy {
    max-width: 30ch;
  }
}

/* Below 768 the row becomes a left-aligned vertical timeline: the
   circle moves into a left gutter and the connector runs down it,
   which keeps the copy readable instead of centring three narrow
   columns of text. */
@media (max-width: 767px) {
  .sa-new-home-design .steps {
    --step-circle: 56px;
    --steps-gap: 34px;
  }

  .sa-new-home-design .steps__list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  /* The single horizontal connector is replaced by per-step
     vertical ones. */
  .sa-new-home-design .steps__list::before {
    display: none;
  }

  .sa-new-home-design .step {
    display: grid;
    grid-template-columns: var(--step-circle) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    text-align: left;
  }

  .sa-new-home-design .step__circle {
    grid-row: 1 / span 3;
    margin: 0;
  }

  .sa-new-home-design .step__day,
  .sa-new-home-design .step__title,
  .sa-new-home-design .step__copy {
    grid-column: 2;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .sa-new-home-design .step__day {
    margin-top: 4px;
  }

  .sa-new-home-design .step__title {
    margin-top: 6px;
  }

  .sa-new-home-design .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--step-circle);
    left: calc(var(--step-circle) / 2 - 1.5px);
    height: calc(100% - var(--step-circle) + var(--steps-gap));
    width: 3px;
    background-image: radial-gradient(
      circle,
      var(--color-orange-dot) 1.1px,
      transparent 1.4px
    );
    background-size: 3px 9px;
    background-repeat: repeat-y;
    transform-origin: center top;
  }

  .sa-new-home-design.is-reveal-armed .steps__list.is-in .step::after {
    animation: sa-nhd-draw-down 0.7s var(--ease-out) 0.3s both;
  }

  .sa-new-home-design .step--current .step__circle {
    box-shadow: 0 0 0 10px var(--color-orange-halo);
  }

  @keyframes sa-nhd-draw-down {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design .step--current .step__circle,
  .sa-new-home-design .steps__list.is-in .step--current .step__circle,
  .sa-new-home-design.is-reveal-armed .steps__list.is-in .step::after {
    animation: none !important;
  }

  .sa-new-home-design.is-reveal-armed .steps__rule,
  .sa-new-home-design.is-reveal-armed .steps__list::before,
  .sa-new-home-design.is-reveal-armed .step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design .step__circle {
    transition: none;
  }
}




/* ============================================================
   SECTION 4: THE SCALE ARMY SOLUTION — split image + accordion
   ============================================================ */
.sa-new-home-design .solution {
  --sol-gutter: 42px;   /* left gutter holding the open item's rule */
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--color-navy-panel);
}

/* Photo is second in the DOM but first on the desktop grid. */
.sa-new-home-design .solution__media {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
}

.sa-new-home-design .solution__photo {
  width: 100%;
  height: 100%;
  /* Source is 3:4; the mobile slot is 1:1, so ~127px is cropped
     vertically. A higher second value slides the visible window down
     the source, which lifts the subject up in the frame and trims the
     ceiling above her. On desktop the slot is already 3:4, so there is
     no vertical crop and this has no effect there. */
  object-fit: cover;
  object-position: 50% 45%;
}

.sa-new-home-design .solution__content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: clamp(56px, 6.6vw, 96px) clamp(24px, 4.6vw, 96px);
}

.sa-new-home-design .solution__content-inner {
  width: 100%;
  max-width: 560px;
}

/* --- Header --- */
.sa-new-home-design .solution__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
}

.sa-new-home-design .solution__heading {
  margin-top: clamp(22px, 2.6vw, 36px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-white);
}

.sa-new-home-design .solution__heading-em {
  display: block;
  font-style: italic;
  color: var(--color-orange);
}

/* --- Accordion --- */
.sa-new-home-design .solution__list {
  margin-top: clamp(38px, 5.2vw, 74px);
  list-style: none;
}

.sa-new-home-design .solution__item {
  position: relative;
  padding-left: var(--sol-gutter);
}

/* Orange rule in the gutter, only while the item is open. */
.sa-new-home-design .solution__item::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background-color: var(--color-orange);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: top center;
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}

.sa-new-home-design .solution__item.is-open::before {
  opacity: 1;
  transform: scaleY(1);
}

.sa-new-home-design .solution__item-head {
  font: inherit;
}

.sa-new-home-design .solution__trigger {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.8vw, 26px);
  width: 100%;
  padding: clamp(14px, 1.5vw, 19px) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sa-new-home-design .solution__trigger:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
  border-radius: 4px;
}

.sa-new-home-design .solution__num {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-navy-muted);
  transition: color 0.3s var(--ease-out);
}

.sa-new-home-design .solution__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-navy-muted-strong);
  transition: color 0.3s var(--ease-out);
}

.sa-new-home-design .solution__item.is-open .solution__num {
  color: var(--color-orange);
}

.sa-new-home-design .solution__item.is-open .solution__title {
  color: var(--color-white);
}

.sa-new-home-design .solution__trigger:hover .solution__title,
.sa-new-home-design .solution__trigger:focus-visible .solution__title {
  color: var(--color-white);
}

.sa-new-home-design .solution__trigger:hover .solution__num,
.sa-new-home-design .solution__trigger:focus-visible .solution__num {
  color: var(--color-orange);
}

/* --- Panel ---------------------------------------------------
   Open by default. JS adds .is-accordion to the list to enable
   collapsing, so with no JS all four panels stay readable.
   ------------------------------------------------------------ */
.sa-new-home-design .solution__panel-inner {
  padding: 0 0 clamp(20px, 2.4vw, 32px) clamp(16px, 1.8vw, 26px);
}

.sa-new-home-design .solution__copy {
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.sa-new-home-design .solution__cta-wrap {
  margin-top: clamp(22px, 2.6vw, 34px);
}

.sa-new-home-design .solution__cta-wrap .sa-cta {
  --cta-focus: var(--color-white);
}

.sa-new-home-design .solution__list.is-accordion .solution__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s var(--ease-out), opacity 0.3s var(--ease-out);
}

.sa-new-home-design .solution__list.is-accordion .solution__item.is-open .solution__panel {
  opacity: 1;
  transition: max-height 0.45s var(--ease-out), opacity 0.4s var(--ease-out) 0.1s;
}


/* ============================================================
   SECTION 4 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .solution__content-inner {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .solution__content-inner.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* The clip lives on the <img>, never on .solution__media itself:
   a clip-path zeroes the observed element's IntersectionObserver
   rect, so the wipe would stop the observer that removes it. */
.sa-new-home-design.is-reveal-armed .solution__photo {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .solution__media.is-in .solution__photo {
  clip-path: inset(0 0 0 0);
}


/* ============================================================
   SECTION 4 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .solution {
    --sol-gutter: 34px;
  }
}

/* Panel above the photo, matching the mobile layout. */
@media (max-width: 900px) {
  .sa-new-home-design .solution {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-new-home-design .solution__content {
    grid-column: 1;
    grid-row: 1;
    padding: clamp(44px, 8vw, 72px) var(--space-6) clamp(52px, 9vw, 80px);
  }

  .sa-new-home-design .solution__content-inner {
    max-width: 620px;
    margin: 0 auto;
  }

  .sa-new-home-design .solution__media {
    grid-column: 1;
    grid-row: 2;
    /* The source is 3:4; a shorter box keeps the stack from becoming
       one enormous photo on a phone. */
    aspect-ratio: 1 / 1;
  }

  /* Wipes read as horizontal on desktop; vertical once stacked. */
  .sa-new-home-design.is-reveal-armed .solution__photo {
    clip-path: inset(0 0 100% 0);
  }

  .sa-new-home-design.is-reveal-armed .solution__media.is-in .solution__photo {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .solution {
    --sol-gutter: 26px;
  }

  .sa-new-home-design .solution__panel-inner {
    padding-left: 14px;
  }

  .sa-new-home-design .solution__media {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .solution__content-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design.is-reveal-armed .solution__photo,
  .sa-new-home-design.is-reveal-armed .solution__media.is-in .solution__photo {
    clip-path: none;
    transition: none;
  }

  .sa-new-home-design .solution__item::before {
    transition: none;
  }

  .sa-new-home-design .solution__num,
  .sa-new-home-design .solution__title {
    transition: none;
  }

  /* Collapsing still works; it just snaps instead of sliding. */
  .sa-new-home-design .solution__list.is-accordion .solution__panel,
  .sa-new-home-design .solution__list.is-accordion .solution__item.is-open .solution__panel {
    transition: none;
  }
}




/* ============================================================
   SECTION 5: TESTIMONIAL — single quote card on ivory
   ============================================================ */
.sa-new-home-design .quote {
  background-color: var(--color-ivory);
}

.sa-new-home-design .quote__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 7.7vw, 111px) clamp(20px, 6.7vw, 96px)
    clamp(64px, 8.3vw, 120px);
}

.sa-new-home-design .quote__card {
  padding: clamp(34px, 3.8vw, 54px) clamp(24px, 3.4vw, 48px)
    clamp(30px, 3.2vw, 44px);
  border-radius: 22px;
  background-color: var(--color-white);
  box-shadow: 0 26px 50px -22px rgba(0, 22, 41, 0.16),
    0 4px 12px -6px rgba(0, 22, 41, 0.06);
  text-align: center;
}

.sa-new-home-design .quote__text p {
  font-family: var(--font-serif);
  font-weight: 400;
  /* 44px is what reproduces the mockup's four-line break, with line 1
     ending after "excellent." Verified in-browser at 1440. */
  font-size: clamp(20px, 3.05vw, 44px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-navy);
  text-wrap: pretty;
}

/* Opening sentence carries a little more weight. EB Garamond 500 is
   already in the enqueued font URL, so this loads no extra face. */
.sa-new-home-design .quote__lede {
  font-weight: 500;
}


/* --- Attribution --- */
.sa-new-home-design .quote__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.6vw, 34px);
  margin-top: clamp(28px, 3.4vw, 48px);
}

.sa-new-home-design .quote__person {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.sa-new-home-design .quote__avatar {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.sa-new-home-design .quote__person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-new-home-design .quote__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
}

.sa-new-home-design .quote__role {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy-muted);
}

.sa-new-home-design .quote__logo {
  width: 160px;
  height: auto;
}


/* ============================================================
   SECTION 5 — REVEAL
   The card rises as one piece, then the attribution follows, so
   the quote lands before the credit.
   ============================================================ */
.sa-new-home-design.is-reveal-armed .quote__card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .quote__card.is-in {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-reveal-armed .quote__attribution {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.35s;
}

.sa-new-home-design.is-reveal-armed .quote__card.is-in .quote__attribution {
  opacity: 1;
}


/* ============================================================
   SECTION 5 — RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  /* Eight lines of centred serif is hard to read on a phone, so the
     quote goes flush left — and the attribution follows it, rather
     than sitting centred under left-aligned text. */
  .sa-new-home-design .quote__card {
    border-radius: 16px;
    text-align: left;
  }

  .sa-new-home-design .quote__text p {
    line-height: 1.45;
  }

  .sa-new-home-design .quote__attribution {
    align-items: flex-start;
  }

  .sa-new-home-design .quote__logo {
    width: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .quote__card,
  .sa-new-home-design.is-reveal-armed .quote__attribution {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* ============================================================
   SECTION 6: NEARBY TIME ZONES — copy + live world-clock map
   Adapted from the standalone artifact. Every rule is scoped and
   every generic id/class is namespaced; the artifact's global
   `body{}` and `*{box-sizing}` resets are dropped, since the page
   reset at the top of this file already covers the section.
   ============================================================ */
/* NOT `.tz` — do not rename this back. The booking widget's third-party
   widget.css ships an unscoped `.tz { display: inline-flex; border: 1px solid;
   padding: 5px 9px; font-size: 13px }` rule for its own timezone chip. That
   selector matched this whole section and shrink-wrapped it to its content,
   leaving the page background exposed to the right of it on wide screens.
   The child classes below still use the tz__ / tz- prefixes, which do not
   collide — only the bare class did. */
.sa-new-home-design .tzones {
  background-color: var(--color-white);
}

.sa-new-home-design .tz__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(20px, 4.2vw, 60px);
}

/* --- Copy column --- */
.sa-new-home-design .tz__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--color-navy);
}

.sa-new-home-design .tz__heading-em {
  font-style: italic;
  color: var(--color-orange);
}

.sa-new-home-design .tz__lead {
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 32ch;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--color-text-body);
}

.sa-new-home-design .tz__cta-wrap {
  margin-top: clamp(26px, 3.2vw, 44px);
}

/* ============================================================
   SECTION 6: MAP WIDGET
   ============================================================ */
.sa-new-home-design .tz__widget {
  --tz-land: #f5e2c0;
  --tz-land-border: rgba(138, 138, 138, 0.55);
  --tz-hl: var(--color-orange);
  --tz-sibling: #ffa284;
  --tz-ref: #162b3e;
  min-width: 0;
}

/* --- Panel above the map --- */
.sa-new-home-design .tz-panel {
  /* Container query context for the clock cards, exactly as the
     artifact had it — the cards respond to the panel, not the page. */
  container-type: inline-size;
  container-name: tzpanel;
  padding: 0 clamp(8px, 1.4vw, 20px);
}

.sa-new-home-design .tz-panel__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.sa-new-home-design .tz-panel__date {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background-color: rgba(0, 22, 41, 0.05);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  color: #6b6f76;
}

.sa-new-home-design .tz-panel__utc {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tz-ref);
  font-variant-numeric: tabular-nums;
}

.sa-new-home-design .tz-panel__diff {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 100, 50, 0.12);
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: var(--color-orange);
  text-align: center;
}

/* --- Clock cards --- */
.sa-new-home-design .tz-clocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 2cqi, 14px);
  margin-top: clamp(12px, 1.8vw, 18px);
}

.sa-new-home-design .tz-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1.5cqi, 12px);
  min-width: 0;
  overflow: hidden;
  padding: clamp(8px, 2.4cqi, 16px) clamp(8px, 2.4cqi, 18px) clamp(8px, 2.4cqi, 16px)
    clamp(10px, 2.8cqi, 20px);
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 16px rgba(20, 20, 30, 0.05);
}

.sa-new-home-design .tz-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}

.sa-new-home-design .tz-card--est::before {
  background-color: var(--tz-ref);
}

.sa-new-home-design .tz-card--local::before {
  background-color: var(--tz-hl);
}

.sa-new-home-design .tz-card__main {
  flex: 1 1 120px;
  min-width: 0;
}

.sa-new-home-design .tz-card__label,
.sa-new-home-design .tz-card__time,
.sa-new-home-design .tz-card__zone {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-new-home-design .tz-card__label {
  margin-bottom: clamp(3px, 1cqi, 8px);
  font-family: var(--font-display);
  /* Poppins runs wider than the face this was set in, and
     "EASTERN TIME (REFERENCE)" needed 181px in a 159px box. Tighter
     tracking and a slightly smaller cap keep it on one line. */
  font-size: clamp(8.5px, 2cqi, 10.5px);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.3;
  text-transform: uppercase;
}

.sa-new-home-design .tz-card--est .tz-card__label {
  color: var(--tz-ref);
}

.sa-new-home-design .tz-card--local .tz-card__label {
  color: var(--tz-hl);
}

.sa-new-home-design .tz-card__time {
  font-family: var(--font-display);
  font-size: clamp(13px, 4cqi, 22px);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.25;
  color: var(--tz-ref);
  font-variant-numeric: tabular-nums;
}

.sa-new-home-design .tz-card__zone {
  margin-top: clamp(3px, 1cqi, 7px);
  font-family: var(--font-sans);
  font-size: clamp(8.5px, 2cqi, 12.5px);
  line-height: 1.3;
  color: #7d828d;
}

.sa-new-home-design .tz-card__pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(3px, 1cqi, 6px);
  padding: clamp(5px, 1.6cqi, 8px) clamp(8px, 2.6cqi, 16px);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(8.5px, 2cqi, 12.5px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.sa-new-home-design .tz-card--est .tz-card__pill {
  background-color: rgba(22, 43, 62, 0.1);
  color: var(--tz-ref);
}

.sa-new-home-design .tz-card--local .tz-card__pill {
  background-color: rgba(255, 100, 50, 0.16);
  color: var(--tz-hl);
}

.sa-new-home-design .tz-card__pill svg {
  width: clamp(10px, 2.6cqi, 13px);
  height: clamp(10px, 2.6cqi, 13px);
  flex-shrink: 0;
}

/* --- Map --- */
.sa-new-home-design .tz-stage {
  padding: clamp(10px, 1.8vw, 22px) 0 0;
}

.sa-new-home-design .tz-map {
  display: block;
  width: 100%;
  height: auto;
  /* Reserves the box before the paths are injected, so nothing shifts. */
  aspect-ratio: 960 / 500;
}

.sa-new-home-design .tz-country {
  fill: var(--tz-land);
  stroke: var(--tz-land-border);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

/* The map is presentational: it animates through the offsets on its
   own, so nothing here is clickable or focusable. */
.sa-new-home-design .tz-country.is-tz {
  fill: var(--tz-hl);
  transition: fill 350ms var(--ease-out);
}

.sa-new-home-design .tz-country.is-sibling {
  fill: var(--tz-sibling);
}

.sa-new-home-design .tz-country.is-ref {
  fill: var(--tz-ref);
}


/* ============================================================
   SECTION 6 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .tz__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .sa-new-home-design .tz__lead {
    max-width: 46ch;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .tz__inner {
    padding: 46px var(--space-6) 56px;
  }

  .sa-new-home-design .tz-panel {
    padding: 0;
  }
}

/* The artifact's container queries, kept as-is: the cards react to
   the panel's own width, which is what makes the widget survive
   being dropped into a narrow column. */
@container tzpanel (max-width: 520px) {
  .sa-new-home-design .tz-card {
    padding: 12px 12px 12px 16px;
  }

  /* "(Reference)" would ellipsis away here anyway, and the pill
     beside it already says Reference. */
  .sa-new-home-design .tz-card__label-extra {
    display: none;
  }
}

@container tzpanel (max-width: 400px) {
  .sa-new-home-design .tz-card {
    padding: 10px 10px 10px 14px;
    gap: 6px;
  }

  .sa-new-home-design .tz-card__label {
    letter-spacing: 0.6px;
  }
}

@container tzpanel (max-width: 300px) {
  .sa-new-home-design .tz-card__main {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design .tz-country.is-tz {
    transition: none;
  }
}




/* ============================================================
   SECTION 7: BENTO — proof stats + team photography
   ============================================================ */
.sa-new-home-design .bento {
  --bento-radius: 14px;
  background-color: var(--color-white);
}

.sa-new-home-design .bento__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
  /* 1320 = the design's 1240 content width + 2x40 padding, so the
     columns land at 600 and the stat cards at 285 as drawn. */
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 5.6vw, 80px) clamp(20px, 3vw, 40px)
    clamp(56px, 6.4vw, 92px);
}

/* --- Desktop seam: section 6 -> section 7 ---
   Both sections are white, so their stacked paddings read as one empty
   band rather than two edges. At 1440 that was 95px (tz) + 80px (bento),
   and the map's stage adds ~46px of blank canvas below the last drawn
   country, so the perceived gap was ~220px. Tighten both sides above the
   1024 breakpoint only; the <=1024 clamps already bottom out near their
   minimums, so mobile and tablet spacing is untouched. */
@media (min-width: 1025px) {
  .sa-new-home-design .tz__inner {
    padding-bottom: clamp(40px, 3.4vw, 52px);
  }

  .sa-new-home-design .bento__inner {
    padding-top: clamp(36px, 3vw, 44px);
  }
}

.sa-new-home-design .bento__col {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.9vw, 26px);
  min-width: 0;
}

/* --- Stat pair --- */
.sa-new-home-design .bento__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
}

.sa-new-home-design .bento-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.4vw, 18px);
  min-height: 104px;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.9vw, 26px);
  border-radius: var(--bento-radius);
  box-shadow: 0 10px 24px -14px rgba(0, 22, 41, 0.18);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.sa-new-home-design .bento-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(0, 22, 41, 0.24);
}

.sa-new-home-design .bento-stat--navy {
  background-color: var(--color-card-navy);
}

.sa-new-home-design .bento-stat--cream {
  background-color: var(--color-peach);
}

.sa-new-home-design .bento-stat__label {
  font-family: var(--font-display);
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.002em;
  max-width: 17ch;
}

.sa-new-home-design .bento-stat--navy .bento-stat__label {
  color: var(--color-white);
}

.sa-new-home-design .bento-stat--cream .bento-stat__label {
  color: var(--color-navy);
}

.sa-new-home-design .bento-stat__value {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.95vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sa-new-home-design .bento-stat--navy .bento-stat__value {
  color: var(--color-white);
}

.sa-new-home-design .bento-stat--cream .bento-stat__value {
  color: var(--color-navy);
}

/* Keeps the digits from reflowing the card as the count-up runs. */
.sa-new-home-design .bento-stat__num {
  font-variant-numeric: tabular-nums;
}

.sa-new-home-design .bento-stat__unit {
  font-size: 0.68em;
  letter-spacing: -0.01em;
}

.sa-new-home-design .bento-stat__unit--tight {
  font-size: 0.9em;
}

.sa-new-home-design .bento-stat__unit--word {
  margin-left: 0.22em;
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0;
}

/* --- Photography --- */
.sa-new-home-design .bento__media {
  flex: 1 1 auto;
  /* The slot sets its own ratio (the design's 600x480). Without this the
     box takes the image's intrinsic height, and bento_01 is portrait --
     560px wide / 0.747 = 750px tall, which dragged the whole section
     ~260px past the design. flex-grow can still stretch it so both
     columns finish flush. */
  aspect-ratio: 5 / 4;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--bento-radius);
  box-shadow: 0 14px 30px -16px rgba(0, 22, 41, 0.22);
}

.sa-new-home-design .bento__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Landscape source, so only a sliver comes off the sides. */
  object-position: 50% 38%;
  transition: transform 0.6s var(--ease-out);
}

/* Portrait source dropped into a landscape slot — the crop is deep,
   so the subject has to be pinned high or the face is lost. */
.sa-new-home-design .bento__photo--portrait {
  object-position: 50% 26%;
}

.sa-new-home-design .bento__media:hover .bento__photo {
  transform: scale(1.03);
}


/* ============================================================
   SECTION 7 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .bento-stat,
.sa-new-home-design.is-reveal-armed .bento__media {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .bento-stat.is-in,
.sa-new-home-design.is-reveal-armed .bento__media.is-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SECTION 7 — RESPONSIVE
   ============================================================ */
/* One column, but the stat pairs stay 2-up while there's room. */
@media (max-width: 1024px) {
  .sa-new-home-design .bento__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-new-home-design .bento__media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .bento__inner {
    padding: 40px var(--space-6) 52px;
  }

  /* Two large portraits back to back is a lot of scrolling on a phone;
     the second column's photo goes and its stats close up. */
  .sa-new-home-design .bento__col + .bento__col .bento__media {
    display: none;
  }

  /* Full-width cards: "Average Savings Compared to U.S Hire" has no
     business wrapping to five lines in a 160px column. */
  .sa-new-home-design .bento__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-new-home-design .bento-stat {
    min-height: 0;
  }

  .sa-new-home-design .bento-stat__label {
    max-width: 22ch;
  }

  .sa-new-home-design .bento__media {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .bento-stat,
  .sa-new-home-design.is-reveal-armed .bento__media {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design .bento-stat,
  .sa-new-home-design .bento__photo,
  .sa-new-home-design .bento__media:hover .bento__photo {
    transform: none;
    transition: none;
  }
}




/* ============================================================
   SECTION 8: CLIENT TESTIMONIALS — scroll-snap carousel
   ============================================================ */
.sa-new-home-design .quotes {
  --q-gap: clamp(20px, 3.5vw, 50px);
  --q-per-view: 3;
  background-color: var(--color-hero-navy);
}

.sa-new-home-design .quotes__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(16px, 1.6vw, 24px)
    clamp(48px, 5.4vw, 76px);
}

/* --- Header --- */
.sa-new-home-design .quotes__head {
  text-align: center;
}

.sa-new-home-design .quotes__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-white);
}

.sa-new-home-design .quotes__lead {
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--color-white-70);
}

/* --- Carousel shell: arrows sit in flow, so they can never
       overflow the viewport the way absolute offsets would --- */
.sa-new-home-design .quotes__carousel {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 26px);
  margin-top: clamp(38px, 4.6vw, 62px);
}

.sa-new-home-design .quotes__nav {
  /* Revealed only once JS is running. */
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 62px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}

.sa-new-home-design .quotes__nav svg {
  width: 24px;
  height: 44px;
  /* Held in CSS so the weight can be tuned per breakpoint, and so
     shrinking the glyph on small screens doesn't thin the stroke. */
  stroke-width: 3.4;
}

.sa-new-home-design .quotes__carousel.is-enhanced .quotes__nav {
  display: flex;
}

.sa-new-home-design .quotes__nav:hover {
  opacity: 1;
}

.sa-new-home-design .quotes__nav--prev:hover {
  transform: translateX(-3px);
}

.sa-new-home-design .quotes__nav--next:hover {
  transform: translateX(3px);
}

.sa-new-home-design .quotes__nav:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
  border-radius: 6px;
  opacity: 1;
}

/* --- Track --- */
.sa-new-home-design .quotes__track {
  flex: 1 1 auto;
  display: flex;
  gap: var(--q-gap);
  min-width: 0;
  padding: 4px;
  margin: -4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sa-new-home-design .quotes__track::-webkit-scrollbar {
  display: none;
}

.sa-new-home-design .quotes__track:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: 14px;
}

.sa-new-home-design .quote-card {
  flex: 0 0
    calc(
      (100% - (var(--q-per-view) - 1) * var(--q-gap)) / var(--q-per-view)
    );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 28px);
  min-width: 0;
  /* Cards share a height, so the longest quote sets it. Tighter
     padding + type keeps that box near-square on desktop instead of
     the tall 3:4 it fell into. */
  padding: clamp(24px, 2.3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.045);
  scroll-snap-align: start;
  transition: background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.sa-new-home-design .quote-card:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.sa-new-home-design .quote-card__quote p {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 14.5px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.86);
}

.sa-new-home-design .quote-card__logo {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  /* Logos range from 2.85:1 to 5.23:1, so they are matched on width
     with a height cap rather than stretched to a common box. */
  max-width: 110px;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
  align-self: flex-start;
}

/* --- Dots --- */
.sa-new-home-design .quotes__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(30px, 3.6vw, 48px);
  /* Empty until JS builds it, so it takes no space without JS. */
  min-height: 0;
}

.sa-new-home-design .quotes__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: width 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.sa-new-home-design .quotes__dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sa-new-home-design .quotes__dot[aria-current="true"] {
  width: 26px;
  background-color: var(--color-white);
}

.sa-new-home-design .quotes__dot:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}


/* ============================================================
   SECTION 8 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .quotes__head,
.sa-new-home-design.is-reveal-armed .quotes__carousel {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .quotes__head.is-in,
.sa-new-home-design.is-reveal-armed .quotes__carousel.is-in {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-reveal-armed .quotes__carousel {
  transition-delay: 0.12s;
}


/* ============================================================
   SECTION 8 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .quotes {
    --q-per-view: 2;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .quotes {
    --q-per-view: 1;
  }

  .sa-new-home-design .quote-card__quote p {
    line-height: 1.62;
  }

  /* Arrows in flow take width from the card, so the gutter tightens to
     give the quote it back. */
  .sa-new-home-design .quote-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Arrows stay in flow here as everywhere else, so they never sit on
     top of the quote. They cost horizontal room, so the page padding
     and the button box are both kept tight to leave the card as wide
     as possible. 36x56 stays well above the 24x24 minimum target. */
  .sa-new-home-design .quotes__inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sa-new-home-design .quotes__carousel {
    gap: 3px;
  }

  .sa-new-home-design .quotes__carousel.is-enhanced .quotes__nav {
    width: 36px;
    height: 56px;
  }

  .sa-new-home-design .quotes__nav svg {
    width: 17px;
    height: 30px;
    /* Held up as the glyph shrinks, so the line stays as heavy as
       it looks on desktop. */
    stroke-width: 3.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .quotes__head,
  .sa-new-home-design.is-reveal-armed .quotes__carousel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design .quotes__nav,
  .sa-new-home-design .quotes__nav:hover,
  .sa-new-home-design .quote-card,
  .sa-new-home-design .quotes__dot {
    transform: none;
    transition: none;
  }
}




/* ============================================================
   SECTION 9: PRICING — three role groups on cream
   ============================================================ */
.sa-new-home-design .pricing {
  --price-gap: clamp(28px, 4.4vw, 64px);
  --price-rule: rgba(0, 22, 41, 0.13);
  background-color: var(--color-peach);
}

.sa-new-home-design .pricing__inner {
  /* 1200 - 2x56 = the design's 1088 content width at 1440. */
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(20px, 3.9vw, 56px)
    clamp(64px, 7.6vw, 110px);
}

.sa-new-home-design .pricing__head {
  text-align: center;
}

.sa-new-home-design .pricing__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-navy);
}

/* --- Grid + dividers --- */
.sa-new-home-design .pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--price-gap);
  margin-top: clamp(44px, 6.6vw, 100px);
}

.sa-new-home-design .price-col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Hairline sits at the midpoint of the gap, so it stays centred
   between the columns however the gap scales. */
.sa-new-home-design .price-col + .price-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--price-gap) / -2);
  width: 1px;
  background-color: var(--price-rule);
}

/* --- Column head --- */
.sa-new-home-design .price-col__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sa-new-home-design .price-col__icon {
  display: block;
  color: var(--color-navy);
}

.sa-new-home-design .price-col__icon svg {
  width: 25px;
  height: 25px;
}

.sa-new-home-design .price-col__title {
  margin-top: clamp(28px, 3.6vw, 52px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--color-navy);
}

/* --- Role rows --- */
.sa-new-home-design .price-col__list {
  margin-top: clamp(22px, 2.6vw, 36px);
  list-style: none;
}

.sa-new-home-design .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 1.3vw, 17px) 0;
  border-bottom: 1px solid var(--price-rule);
}

.sa-new-home-design .price-row__role {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.35;
  color: var(--color-navy);
}

.sa-new-home-design .price-row__amount {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
  /* Keeps the column of prices optically aligned. */
  font-variant-numeric: tabular-nums;
}

/* --- CTA pinned to the bottom so all three align --- */
.sa-new-home-design .price-col__cta-wrap {
  margin-top: auto;
  padding-top: clamp(28px, 4vw, 58px);
}


/* ============================================================
   SECTION 9 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .pricing__head,
.sa-new-home-design.is-reveal-armed .price-col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .pricing__head.is-in,
.sa-new-home-design.is-reveal-armed .price-col.is-in {
  opacity: 1;
  transform: translateY(0);
}

.sa-new-home-design.is-reveal-armed .price-col:nth-child(2) { transition-delay: 0.1s; }
.sa-new-home-design.is-reveal-armed .price-col:nth-child(3) { transition-delay: 0.2s; }


/* ============================================================
   SECTION 9 — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .pricing {
    --price-gap: 30px;
  }
}

/* Stacked: the dividers rotate to sit between the rows instead. */
@media (max-width: 767px) {
  .sa-new-home-design .pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Icon and title share one centred line once the columns stack. */
  .sa-new-home-design .price-col__head {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .sa-new-home-design .price-col__title {
    margin-top: 0;
  }

  .sa-new-home-design .price-col + .price-col {
    margin-top: 40px;
    padding-top: 40px;
  }

  .sa-new-home-design .price-col + .price-col::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .sa-new-home-design .price-col__cta-wrap {
    padding-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .pricing__head,
  .sa-new-home-design.is-reveal-armed .price-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Full-width CTA variant, used by the pricing columns. */
body.sa-new-home-design-active .sa-cta--block {
  display: flex;
  width: 100%;
  padding: 15px 22px;
  font-size: clamp(12.5px, 1vw, 13.5px);
  letter-spacing: 0.02em;
}




/* ============================================================
   SECTION 10: TALENT COMPARISON
   ============================================================ */
.sa-new-home-design .cmp {
  /* The sticky column paints this exact colour, so it must stay in
     step with the section background or scrolled cells will show. */
  --cmp-bg: var(--color-hero-navy);
  --cmp-rule: rgba(255, 255, 255, 0.13);
  /* Same value pre-blended over --cmp-bg. The pinned column sits over the
     cream panel, and a translucent rule there would pick up the cream and
     read as a tan hairline. */
  --cmp-rule-solid: #334758;
  --cmp-muted: rgba(255, 255, 255, 0.4);
  background-color: var(--cmp-bg);
}

.sa-new-home-design .cmp__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(16px, 3.9vw, 56px)
    clamp(60px, 7vw, 100px);
}

.sa-new-home-design .cmp__head {
  text-align: center;
}

.sa-new-home-design .cmp__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-white);
}

.sa-new-home-design .cmp__lead {
  margin: clamp(14px, 1.7vw, 24px) auto 0;
  max-width: 54ch;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--color-white-70);
}

/* --- Scroll container --- */
.sa-new-home-design .cmp__scroll {
  margin-top: clamp(36px, 4.6vw, 64px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sa-new-home-design .cmp__scroll::-webkit-scrollbar {
  display: none;
}

.sa-new-home-design .cmp__scroll:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
  border-radius: 8px;
}

/* separate (not collapse) so sticky cells keep their borders and
   backgrounds in every engine */
.sa-new-home-design .cmp__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* --- Header row --- */
.sa-new-home-design .cmp__col {
  padding: clamp(16px, 1.8vw, 24px) clamp(8px, 1.1vw, 16px);
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: var(--color-white);
  border-bottom: 1px solid var(--cmp-rule);
  vertical-align: bottom;
}

.sa-new-home-design .cmp__corner {
  border-bottom: 1px solid var(--cmp-rule);
}

/* --- Row labels --- */
.sa-new-home-design .cmp__label {
  padding: clamp(16px, 1.7vw, 22px) clamp(14px, 1.6vw, 22px)
    clamp(16px, 1.7vw, 22px) 0;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: var(--color-white);
  border-bottom: 1px solid var(--cmp-rule);
}

/* --- Value cells --- */
.sa-new-home-design .cmp__cell {
  padding: clamp(14px, 1.5vw, 20px) clamp(8px, 1.1vw, 16px);
  text-align: center;
  border-bottom: 1px solid var(--cmp-rule);
}

/* The label column and the header row are <th> elements. Nothing here used
   to paint them — they just let the section's navy show through — so any
   stylesheet on the site with a plain `th { background: ... }` rule (WP
   block styles, a theme reset, a plugin) lands on top and turns them into
   the white band you'd see over white text. Declare the background on our
   own cells so no outside rule can win by default. Kept on one selector
   list with .cmp__cell so a future colour change can't split them apart. */
.sa-new-home-design .cmp__table,
.sa-new-home-design .cmp__table thead,
.sa-new-home-design .cmp__table tbody,
.sa-new-home-design .cmp__table tr {
  background-color: transparent;
}

.sa-new-home-design .cmp__corner,
.sa-new-home-design .cmp__col,
.sa-new-home-design .cmp__label,
.sa-new-home-design .cmp__cell {
  background-color: var(--cmp-bg);
}

/* Re-stated after the block above: these two carry the cream panel and must
   outrank the navy default regardless of source order. */
.sa-new-home-design .cmp__col--featured,
.sa-new-home-design .cmp__cell--featured {
  background-color: var(--color-ivory);
}

.sa-new-home-design .cmp-mark {
  display: inline-block;
  width: clamp(19px, 1.6vw, 22px);
  height: clamp(19px, 1.6vw, 22px);
  vertical-align: middle;
}

.sa-new-home-design .cmp-mark--yes {
  color: var(--color-white);
}

.sa-new-home-design .cmp-mark--no,
.sa-new-home-design .cmp-mark--part {
  color: var(--cmp-muted);
}

/* --- Featured (Scale Army) column ---------------------------
   The cream panel is built from the cells themselves: rounded at the
   top on the header cell and at the bottom on the last row, which
   avoids measuring the column's position with JS. Dropping the
   border-bottom is what makes the row rules break across it, exactly
   as they do in the design.
   ---------------------------------------------------------- */
.sa-new-home-design .cmp__col--featured,
.sa-new-home-design .cmp__cell--featured {
  position: relative;
  z-index: 1;
  background-color: var(--color-ivory);
  border-bottom: 0;
}

.sa-new-home-design .cmp__col--featured {
  padding-top: clamp(20px, 2.2vw, 30px);
  border-radius: 16px 16px 0 0;
  color: var(--color-navy);
  font-weight: 500;
}

.sa-new-home-design tbody tr:last-child .cmp__cell--featured {
  padding-bottom: clamp(22px, 2.4vw, 32px);
  border-radius: 0 0 16px 16px;
}

.sa-new-home-design .cmp__cell--featured .cmp-mark--yes {
  color: var(--color-navy);
}

.sa-new-home-design .cmp__cta-wrap {
  margin-top: clamp(40px, 5vw, 72px);
  text-align: center;
}


/* ============================================================
   SECTION 10 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .cmp__head,
.sa-new-home-design.is-reveal-armed .cmp__scroll,
.sa-new-home-design.is-reveal-armed .cmp__cta-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .cmp__head.is-in,
.sa-new-home-design.is-reveal-armed .cmp__scroll.is-in,
.sa-new-home-design.is-reveal-armed .cmp__cta-wrap.is-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SECTION 10 — RESPONSIVE
   Below 900 the table stops fitting, so the label column pins to the
   left and the comparison columns scroll under it.
   ============================================================ */
@media (max-width: 900px) {
  .sa-new-home-design .cmp {
    /* Width of the pinned label column. Drives the sticky cells AND the
       scroll padding below, so the snap line always sits exactly at the
       column's right edge. */
    --cmp-anchor: 172px;
  }

  .sa-new-home-design .cmp__table {
    width: auto;
    min-width: 100%;
  }

  /* Snap to column boundaries, offset by the pinned column. Without
     this the scroll can rest anywhere and a comparison column ends up
     sliced in half behind the labels; with it every column is either
     fully in view or fully hidden. */
  .sa-new-home-design .cmp__scroll {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--cmp-anchor);
  }

  .sa-new-home-design .cmp__col {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Sticky column. The opaque background is the whole point: without
     it the scrolled cells would read straight through the labels. */
  .sa-new-home-design .cmp__label,
  .sa-new-home-design .cmp__corner {
    position: sticky;
    left: 0;
    /* Above the featured column, which is also positioned. */
    z-index: 3;
    width: var(--cmp-anchor);
    min-width: var(--cmp-anchor);
    max-width: var(--cmp-anchor);
    padding-right: 16px;
    background-color: var(--cmp-bg);
    /* Row heights land on fractions (70.78px), so consecutive pinned
       cells can fail to meet by a sub-pixel and the cream panel behind
       shows through as a hairline. A 1px spread of the background colour
       -- no offset, no blur, so not a visible shadow -- closes the seam
       and carries the navy 1px over the panel edge. */
    box-shadow: 0 0 0 1px var(--cmp-bg);
    border-bottom-color: var(--cmp-rule-solid);
  }

  /* Comparison columns keep a usable width instead of squashing. */
  .sa-new-home-design .cmp__col,
  .sa-new-home-design .cmp__cell {
    min-width: 118px;
  }

  .sa-new-home-design .cmp__label {
    font-size: 13.5px;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .cmp {
    --cmp-anchor: 150px;
    --cmp-col: 104px;
  }

  .sa-new-home-design .cmp__label,
  .sa-new-home-design .cmp__corner {
    padding-right: 12px;
  }

  .sa-new-home-design .cmp__col,
  .sa-new-home-design .cmp__cell {
    min-width: var(--cmp-col);
  }

  /* Trailing scroll room, so the LAST column can also reach the snap
     line. Without it the scroll bottoms out early and the third column
     is left sliced behind the labels at maximum scroll.
     32px = the section's own left+right padding at this breakpoint.
     Only applied here, where the table always overflows -- adding it
     where the table already fits would invent a scrollbar. */
  .sa-new-home-design .cmp__scroll {
    padding-right: max(
      0px,
      calc(100vw - 32px - var(--cmp-anchor) - var(--cmp-col))
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .cmp__head,
  .sa-new-home-design.is-reveal-armed .cmp__scroll,
  .sa-new-home-design.is-reveal-armed .cmp__cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* ============================================================
   SECTION 11: CASE STUDIES
   ============================================================ */
.sa-new-home-design .cases {
  --case-radius: 10px;
  background-color: var(--color-mist);
}

.sa-new-home-design .cases__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(16px, 3vw, 44px)
    clamp(56px, 6.6vw, 96px);
}

.sa-new-home-design .cases__head {
  text-align: center;
}

.sa-new-home-design .cases__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-navy);
}

.sa-new-home-design .cases__lead {
  margin: clamp(8px, 1vw, 14px) auto 0;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--color-text-body);
}

/* --- Carousel shell (controls only appear below 1025) --- */
.sa-new-home-design .cases__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 18px);
  margin-top: clamp(36px, 4.4vw, 60px);
}

.sa-new-home-design .cases__nav {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 2px 10px -2px rgba(0, 22, 41, 0.2);
  color: var(--color-navy);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.sa-new-home-design .cases__nav svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

.sa-new-home-design .cases__carousel.is-enhanced .cases__nav {
  display: flex;
}

.sa-new-home-design .cases__nav:hover {
  box-shadow: 0 4px 16px -2px rgba(0, 22, 41, 0.28);
}

.sa-new-home-design .cases__nav--prev:hover { transform: translateX(-2px); }
.sa-new-home-design .cases__nav--next:hover { transform: translateX(2px); }

.sa-new-home-design .cases__nav:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

/* --- Track: a stacked list on desktop --- */
.sa-new-home-design .cases__track {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 46px);
  min-width: 0;
  list-style: none;
}

/* --- Card --- */
.sa-new-home-design .case-card {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--case-radius);
  background-color: var(--color-white);
  box-shadow: 0 2px 4px -2px rgba(0, 22, 41, 0.08),
    0 14px 30px -18px rgba(0, 22, 41, 0.16);
}

/* Every other card leads with the photo. */
.sa-new-home-design .case-card--flip .case-card__media {
  order: -1;
}

.sa-new-home-design .case-card__body {
  padding: clamp(26px, 2.8vw, 40px);
}

.sa-new-home-design .case-card__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

/* --- Tags --- */
.sa-new-home-design .case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: clamp(14px, 1.6vw, 20px);
  list-style: none;
}

.sa-new-home-design .case-tag {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background-color: #eceef1;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
  white-space: nowrap;
}

.sa-new-home-design .case-tag--primary {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Copy --- */
.sa-new-home-design .case-card__text {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--color-text-body);
}

.sa-new-home-design .case-card__text strong {
  font-weight: 600;
  color: var(--color-navy);
}

.sa-new-home-design .case-card__quote {
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-left: clamp(14px, 1.5vw, 18px);
  border-left: 3px solid var(--color-navy);
}

.sa-new-home-design .case-card__quote p {
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* --- Media half --- */
.sa-new-home-design .case-card__media {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background-color: var(--color-navy);
}

.sa-new-home-design .case-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Scrim, so the stat stays legible over any photo. */
.sa-new-home-design .case-card__media::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 12, 24, 0) 0%,
    rgba(0, 12, 24, 0.72) 100%
  );
}

.sa-new-home-design .case-card__logo {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: auto;
  max-width: 62%;
  max-height: 46px;
  object-fit: contain;
}

.sa-new-home-design .case-card__stat {
  position: absolute;
  z-index: 2;
  inset: auto clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 28px);
  text-align: center;
  color: var(--color-white);
}

.sa-new-home-design .case-card__stat-num,
.sa-new-home-design .case-card__stat-unit {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sa-new-home-design .case-card__stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Dots (carousel only) --- */
.sa-new-home-design .cases__dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

.sa-new-home-design .cases__dots.is-enhanced {
  display: flex;
}

.sa-new-home-design .cases__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 22, 41, 0.18);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out);
}

.sa-new-home-design .cases__dot:hover {
  background-color: rgba(0, 22, 41, 0.4);
}

.sa-new-home-design .cases__dot[aria-current="true"] {
  background-color: var(--color-navy);
}

.sa-new-home-design .cases__dot:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

.sa-new-home-design .cases__cta-wrap {
  margin-top: clamp(30px, 3.6vw, 46px);
  text-align: center;
}


/* ============================================================
   SECTION 11 — REVEAL
   ============================================================ */
.sa-new-home-design.is-reveal-armed .cases__head,
.sa-new-home-design.is-reveal-armed .case-card,
.sa-new-home-design.is-reveal-armed .cases__cta-wrap {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .cases__head.is-in,
.sa-new-home-design.is-reveal-armed .case-card.is-in,
.sa-new-home-design.is-reveal-armed .cases__cta-wrap.is-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SECTION 11 — RESPONSIVE
   Below 1025 the stacked list turns into a snap carousel. Same
   markup; only the track's axis and the controls change.
   ============================================================ */
@media (max-width: 1024px) {
  .sa-new-home-design .cases__track {
    flex-direction: row;
    gap: clamp(14px, 2vw, 24px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Room for the card shadow, which would otherwise be clipped. */
    padding: 6px;
    margin: -6px;
  }

  .sa-new-home-design .cases__track::-webkit-scrollbar {
    display: none;
  }

  .sa-new-home-design .case-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  /* Alternating sides would shuffle as you swipe, so every card in
     carousel mode leads with the copy. */
  .sa-new-home-design .case-card--flip .case-card__media {
    order: 0;
  }

  /* Reveal is per-card on desktop; in the carousel the off-screen
     cards would never trigger, so they stay visible. */
  .sa-new-home-design.is-reveal-armed .case-card {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .sa-new-home-design .cases__inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Arrows drop below the card rather than flanking it. Kept in the
     row they cost 92px of a 375 screen and the copy wrapped to
     four-word lines; below, the card keeps the full width. */
  .sa-new-home-design .cases__carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .sa-new-home-design .cases__track {
    flex: 1 1 100%;
    order: -1;
  }

  .sa-new-home-design .cases__carousel.is-enhanced .cases__nav {
    margin-top: 22px;
  }

  .sa-new-home-design .cases__carousel.is-enhanced .cases__nav--prev {
    margin-right: 14px;
  }

  .sa-new-home-design .case-card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Photo on top on a phone, whichever card it is. */
  .sa-new-home-design .case-card__media,
  .sa-new-home-design .case-card--flip .case-card__media {
    order: -1;
    min-height: 0;
    /* 3:2 rather than 4:3 -- the logo sits at the top and the stat at
       the bottom, and a shorter box made them collide. */
    aspect-ratio: 3 / 2;
  }

  .sa-new-home-design .case-card__photo {
    position: static;
    height: 100%;
  }

  .sa-new-home-design .case-card__media::after {
    inset: 35% 0 0;
  }

  .sa-new-home-design .case-card__logo {
    max-height: 32px;
    max-width: 48%;
  }

  .sa-new-home-design .case-card__stat-num,
  .sa-new-home-design .case-card__stat-unit {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .cases__head,
  .sa-new-home-design.is-reveal-armed .case-card,
  .sa-new-home-design.is-reveal-armed .cases__cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design .cases__nav,
  .sa-new-home-design .cases__nav:hover {
    transform: none;
    transition: none;
  }
}




/* ============================================================
   SECTION 12: FAQ
   ============================================================ */
.sa-new-home-design .faq {
  background-color: var(--color-peach);
}

.sa-new-home-design .faq__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(56px, 6.6vw, 96px) clamp(16px, 3vw, 44px)
    clamp(56px, 6.6vw, 92px);
}

.sa-new-home-design .faq__head {
  text-align: center;
}

.sa-new-home-design .faq__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--color-navy);
}

/* --- List --- */
.sa-new-home-design .faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 14px);
  margin-top: clamp(34px, 4.4vw, 62px);
  list-style: none;
}

.sa-new-home-design .faq-item {
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 22, 41, 0.05),
    0 8px 18px -12px rgba(0, 22, 41, 0.12);
}

.sa-new-home-design .faq-item__head {
  font: inherit;
}

.sa-new-home-design .faq-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 1.8vw, 24px);
  width: 100%;
  padding: clamp(16px, 1.7vw, 21px) clamp(16px, 1.8vw, 24px);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sa-new-home-design .faq-item__trigger:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: -3px;
  border-radius: 10px;
}

.sa-new-home-design .faq-item__q {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.15vw, 15.5px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-navy);
}

.sa-new-home-design .faq-item__num {
  font-variant-numeric: tabular-nums;
}

/* Icon is a single plus; rotating it 45deg makes the close cross,
   so there is only one glyph to keep in sync. */
.sa-new-home-design .faq-item__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
  color: var(--color-navy);
  transition: transform 0.3s var(--ease-out);
}

.sa-new-home-design .faq-item__icon svg {
  width: 17px;
  height: 17px;
}

.sa-new-home-design .faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

/* --- Panel: open by default, JS opts into collapsing --- */
.sa-new-home-design .faq-item__panel-inner {
  padding: 0 clamp(20px, 3.4vw, 46px) clamp(16px, 1.8vw, 22px)
    clamp(30px, 4.4vw, 58px);
}

.sa-new-home-design .faq-item__a {
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--color-text-body);
}

.sa-new-home-design .faq__list.is-accordion .faq-item__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease-out), opacity 0.25s var(--ease-out);
}

.sa-new-home-design .faq__list.is-accordion .faq-item.is-open .faq-item__panel {
  opacity: 1;
  transition: max-height 0.4s var(--ease-out),
    opacity 0.35s var(--ease-out) 0.08s;
}

.sa-new-home-design .faq__cta-wrap {
  margin-top: clamp(30px, 3.6vw, 46px);
  text-align: center;
}


/* ============================================================
   SECTION 12 — REVEAL
   The list itself is not revealed: 23 staggered cards would be a lot
   of motion, and a collapsed panel plus a transform is a recipe for
   janky height measurement.
   ============================================================ */
.sa-new-home-design.is-reveal-armed .faq__head,
.sa-new-home-design.is-reveal-armed .faq__cta-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-new-home-design.is-reveal-armed .faq__head.is-in,
.sa-new-home-design.is-reveal-armed .faq__cta-wrap.is-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SECTION 12 — RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .sa-new-home-design .faq__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The design's deep answer indent eats too much of a phone screen. */
  .sa-new-home-design .faq-item__panel-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-new-home-design.is-reveal-armed .faq__head,
  .sa-new-home-design.is-reveal-armed .faq__cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-new-home-design .faq-item__icon,
  .sa-new-home-design .faq__list.is-accordion .faq-item__panel,
  .sa-new-home-design .faq__list.is-accordion .faq-item.is-open .faq-item__panel {
    transition: none;
  }
}



/* ============================================================
   MEETING MODAL
   Black scrim + navy panel. The panel colour matches the
   background_color passed to Calendly (162b3e) so the embedded
   iframe blends into it rather than sitting on it as a block.
   ============================================================ */
body.sa-new-home-design-active .sa-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

body.sa-new-home-design-active .sa-modal[hidden] {
  display: none;
}

body.sa-new-home-design-active .sa-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  animation: sa-modal-fade 0.25s var(--ease-out);
}

body.sa-new-home-design-active .sa-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(92vh, 900px);
  padding: clamp(24px, 3.4vw, 40px) clamp(14px, 2vw, 26px) clamp(14px, 2vw, 22px);
  background-color: #162b3e;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sa-modal-rise 0.3s var(--ease-out);
}

@keyframes sa-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sa-modal-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.sa-new-home-design-active .sa-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-ivory);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}

body.sa-new-home-design-active .sa-modal__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

body.sa-new-home-design-active .sa-modal__close:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

body.sa-new-home-design-active .sa-modal__title {
  margin-bottom: clamp(14px, 2vw, 24px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-ivory);
}

body.sa-new-home-design-active .sa-modal__embed {
  flex: 0 0 auto;
  /* Calendly sizes its iframe from the parent's resolved height, so
     this has to be `height`, not `min-height` -- with min-height the
     iframe came out 150px tall inside a 620px box. Matches the
     height:600px in Calendly's own embed snippet. */
  min-width: 320px;
  height: 640px;
}

body.sa-new-home-design-active .sa-modal__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.sa-new-home-design-active .sa-modal__loading {
  padding: 40px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: center;
  color: rgba(254, 242, 222, 0.6);
}

@media (max-width: 767px) {
  body.sa-new-home-design-active .sa-modal {
    padding: 0;
  }

  body.sa-new-home-design-active .sa-modal__panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
  }

  body.sa-new-home-design-active .sa-modal__embed {
    height: 600px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sa-new-home-design-active .sa-modal__overlay,
  body.sa-new-home-design-active .sa-modal__panel {
    animation: none;
  }

  body.sa-new-home-design-active .sa-modal__close {
    transition: none;
  }
}

/* ============================================================
   HEADER, FOOTER & SHORTCODE INIT
   ============================================================ */
body.sa-new-home-design-active .sa-nav,
body.sa-new-home-design-active .sa-footer {
  --navy-950: #0b1520;
  --navy-800: #1a2b3d;
}

body.sa-new-home-design-active .sa-nav *,
body.sa-new-home-design-active .sa-footer * {
  box-sizing: border-box;
}

/* The page reset is scoped to .sa-new-home-design (the <main>), and the
   header sits outside it -- so its own reset has to be stated here. */
/* Only the underline is reset here. `color: inherit` would out-specify
   .sa-cta and repaint both header buttons' text in the body colour --
   navy on navy in the drawer. Each nav class sets its own colour. */
body.sa-new-home-design-active .sa-nav a {
  text-decoration: none;
}

body.sa-new-home-design-active .sa-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No blanket button reset here. `font`/`color: inherit` on this
   selector out-specifies .sa-nav__top and .sa-nav__m-top, which made
   the <button> triggers render at a different size, weight and colour
   from the two plain <a> items (From Our Clients, Pricing). Every nav
   control sets its own font and colour instead. */

/* ============================================================
   HEADER — floating pill nav
   Two states: translucent over the hero, solid white once scrolled
   past it (JS adds .is-solid). Sticky, and hides on scroll-down /
   returns on scroll-up (.is-hidden).
   ============================================================ */
body.sa-new-home-design-active .sa-nav {
  /* --nav-h / --nav-pad-y / --nav-total are inherited from the body. */
  --nav-orange: #e8623a;
  --nav-navy: #16293e;
  --nav-cream: #fdf6e6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--nav-pad-y) clamp(10px, 2vw, 28px);
  transition: transform 0.35s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav.is-hidden {
  transform: translateY(calc(-100% - 10px));
}

body.sa-new-home-design-active .sa-nav__bar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  max-width: 1480px;
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 clamp(12px, 1.4vw, 20px) 0 clamp(16px, 2vw, 30px);
  border-radius: var(--radius-pill);
  background-color: rgba(12, 28, 45, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav.is-solid .sa-nav__bar {
  background-color: var(--color-white);
  box-shadow: 0 10px 30px -12px rgba(0, 22, 41, 0.28);
}

/* --- Logo --- */
body.sa-new-home-design-active .sa-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

body.sa-new-home-design-active .sa-nav__logo img {
  display: block;
  width: auto;
  height: clamp(22px, 2vw, 28px);
}

/* One asset for both states. A dedicated navy SVG would be sharper,
   but this guarantees the mark stays legible on the white pill. */
body.sa-new-home-design-active .sa-nav.is-solid .sa-nav__logo img {
  filter: brightness(0) saturate(100%);
}

/* --- Desktop list --- */
body.sa-new-home-design-active .sa-nav__desktop {
  flex: 1 1 auto;
  min-width: 0;
}

body.sa-new-home-design-active .sa-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.1vw, 18px);
  list-style: none;
}

body.sa-new-home-design-active .sa-nav__item {
  position: relative;
}

body.sa-new-home-design-active .sa-nav__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Generous hit area: the pointer has to be able to travel from the
     label to the panel without falling into a dead zone. */
  padding: 14px 12px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-white);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav.is-solid .sa-nav__top {
  color: var(--color-navy);
}

body.sa-new-home-design-active .sa-nav__top:hover,
body.sa-new-home-design-active .sa-nav__item.is-open .sa-nav__top {
  color: var(--color-orange);
}

body.sa-new-home-design-active .sa-nav__top:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: 6px;
}

body.sa-new-home-design-active .sa-nav__caret {
  width: 10px;
  height: 7px;
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav__item.is-open .sa-nav__caret {
  transform: rotate(180deg);
}

/* --- Desktop panels --- */
body.sa-new-home-design-active .sa-nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  /* see the ::before bridge below */
  z-index: 2;
  display: none;
  min-width: 250px;
  padding: 10px;
  border-radius: 14px;
  background-color: var(--nav-orange);
  box-shadow: 0 20px 44px -16px rgba(0, 22, 41, 0.45);
}

body.sa-new-home-design-active .sa-nav__item.is-open .sa-nav__panel {
  display: flex;
}

/* The panel floats 10px below the trigger, so the pointer crosses a gap
   where it is over neither -- which fired pointerleave and shut the menu
   before it could be reached. This transparent strip is a child of the
   panel, so the gap still counts as "inside". */
body.sa-new-home-design-active .sa-nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

body.sa-new-home-design-active .sa-nav__panel--mega {
  gap: 10px;
}

body.sa-new-home-design-active .sa-nav__groups {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  list-style: none;
}

body.sa-new-home-design-active .sa-nav__group,
body.sa-new-home-design-active .sa-nav__leaf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav__group[aria-expanded="true"] {
  background-color: var(--nav-navy);
}

body.sa-new-home-design-active .sa-nav__leaf:hover,
body.sa-new-home-design-active .sa-nav__group:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

body.sa-new-home-design-active .sa-nav__group:focus-visible,
body.sa-new-home-design-active .sa-nav__leaf:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -3px;
}

body.sa-new-home-design-active .sa-nav__arrow {
  width: 7px;
  height: 11px;
  flex: 0 0 auto;
}

body.sa-new-home-design-active .sa-nav__leaf--overview {
  font-weight: 700;
}

body.sa-new-home-design-active .sa-nav__group-panels {
  flex: 1 1 auto;
  min-width: 300px;
}

body.sa-new-home-design-active .sa-nav__sublist {
  display: none;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

body.sa-new-home-design-active .sa-nav__sublist.is-active {
  display: flex;
}

body.sa-new-home-design-active .sa-nav__panel--mega .sa-nav__sublist {
  padding: 4px;
  border-radius: 12px;
  background-color: var(--nav-orange);
  /* Long lists (Marketing has 14) must not run off the viewport. */
  max-height: min(62vh, 560px);
  overflow-y: auto;
}

/* Panels near the right edge open leftwards instead of overflowing. */
body.sa-new-home-design-active .sa-nav__item--align-end .sa-nav__panel {
  left: auto;
  right: 0;
}

/* --- CTA + burger --- */
body.sa-new-home-design-active .sa-nav__cta {
  flex: 0 0 auto;
  padding: 13px 24px;
  font-size: 13.5px;
}

body.sa-new-home-design-active .sa-nav__burger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-orange);
  cursor: pointer;
}

body.sa-new-home-design-active .sa-nav__burger-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 19px;
  height: 15px;
}

body.sa-new-home-design-active .sa-nav__burger-box span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-white);
  transition: transform 0.28s var(--ease-out), opacity 0.2s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav__burger[aria-expanded="true"] .sa-nav__burger-box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.sa-new-home-design-active .sa-nav__burger[aria-expanded="true"] .sa-nav__burger-box span:nth-child(2) {
  opacity: 0;
}

body.sa-new-home-design-active .sa-nav__burger[aria-expanded="true"] .sa-nav__burger-box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

body.sa-new-home-design-active .sa-nav__burger:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* --- Mobile drawer --- */
body.sa-new-home-design-active .sa-nav__drawer {
  display: none;
  max-width: 1480px;
  margin: 10px auto 0;
  border-radius: 18px;
  background-color: var(--nav-orange);
  box-shadow: 0 24px 50px -18px rgba(0, 22, 41, 0.5);
  overflow: hidden;
}

body.sa-new-home-design-active .sa-nav__drawer[hidden] {
  display: none;
}

body.sa-new-home-design-active .sa-nav.is-open .sa-nav__drawer {
  display: block;
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.sa-new-home-design-active .sa-nav__m-list {
  list-style: none;
}

body.sa-new-home-design-active .sa-nav__m-top,
body.sa-new-home-design-active .sa-nav__m-group,
body.sa-new-home-design-active .sa-nav__m-leaf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  font-family: var(--font-display);
  text-align: center;
  color: var(--color-white);
  cursor: pointer;
}

body.sa-new-home-design-active .sa-nav__m-top {
  padding: 18px 20px;
  font-size: 19px;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

body.sa-new-home-design-active .sa-nav__m-item:first-child .sa-nav__m-top {
  border-top: 0;
}

/* Open branch turns navy, as in the reference. */
body.sa-new-home-design-active .sa-nav__m-top[aria-expanded="true"] {
  background-color: var(--nav-navy);
}

body.sa-new-home-design-active .sa-nav__m-group {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 500;
}

body.sa-new-home-design-active .sa-nav__m-leaf {
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

body.sa-new-home-design-active .sa-nav__m-leaf:hover,
body.sa-new-home-design-active .sa-nav__m-group:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

body.sa-new-home-design-active .sa-nav__m-top:focus-visible,
body.sa-new-home-design-active .sa-nav__m-group:focus-visible,
body.sa-new-home-design-active .sa-nav__m-leaf:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -3px;
}

body.sa-new-home-design-active .sa-nav__m-panel,
body.sa-new-home-design-active .sa-nav__m-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease-out);
}

body.sa-new-home-design-active .sa-nav__m-panel-inner {
  padding: 6px 0 12px;
}

body.sa-new-home-design-active .sa-nav__m-sub-inner {
  padding: 2px 0 10px;
}

body.sa-new-home-design-active .sa-nav__m-groups {
  list-style: none;
}

body.sa-new-home-design-active .sa-nav__m-cta {
  padding: 16px 20px 22px;
}

/* The drawer is already orange, so the standard orange pill would
   vanish into it. Navy keeps it reading as a button. */
body.sa-new-home-design-active .sa-nav__m-cta .sa-cta {
  --cta-focus: var(--color-white);
  background-color: var(--nav-navy);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}

body.sa-new-home-design-active .sa-nav__m-cta .sa-cta:hover {
  background-color: var(--color-navy);
}

/* --- Breakpoint --- */
@media (max-width: 1200px) {
  body.sa-new-home-design-active .sa-nav__desktop,
  body.sa-new-home-design-active .sa-nav__cta {
    display: none;
  }

  body.sa-new-home-design-active .sa-nav__burger {
    display: flex;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sa-new-home-design-active .sa-nav,
  body.sa-new-home-design-active .sa-nav__bar,
  body.sa-new-home-design-active .sa-nav__caret,
  body.sa-new-home-design-active .sa-nav__m-panel,
  body.sa-new-home-design-active .sa-nav__m-sub,
  body.sa-new-home-design-active .sa-nav__burger-box span {
    transition: none;
  }
}


body.sa-new-home-design-active .sa-footer {
  width: 100%;
  background: var(--navy-800);
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
}

body.sa-new-home-design-active .sa-footer__inner {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr 1.4fr;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 112px 80px 86px;
  gap: 70px;
}

body.sa-new-home-design-active .sa-footer__logo {
  display: block;
  width: 235px;
  max-width: 100%;
  height: auto;
  margin-bottom: 55px;
}

body.sa-new-home-design-active .sa-footer__tagline {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.3px;
}

body.sa-new-home-design-active .sa-footer__col h3 {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4px;
}

body.sa-new-home-design-active .sa-footer__col a,
body.sa-new-home-design-active .sa-footer__col p {
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none;
  letter-spacing: 0.2px;
}

body.sa-new-home-design-active .sa-footer__col a {
  display: block;
  margin-bottom: 22px;
  transition: opacity 0.2s ease;
}

body.sa-new-home-design-active .sa-footer__col a:hover {
  opacity: 0.7;
}

body.sa-new-home-design-active .sa-footer__contact p {
  margin: 0 0 20px;
}

body.sa-new-home-design-active .sa-footer__contact strong {
  font-weight: 700;
}

body.sa-new-home-design-active .sa-footer__contact p a {
  display: inline-block;
  margin: 10px 0 0;
}

body.sa-new-home-design-active .sa-footer__socials {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 28px;
}

body.sa-new-home-design-active .sa-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #ffffff;
}

body.sa-new-home-design-active .sa-footer__socials svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

body.sa-new-home-design-active .sa-footer__socials a:nth-child(2) svg,
body.sa-new-home-design-active .sa-footer__socials a:nth-child(3) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  body.sa-new-home-design-active .sa-footer__inner {
    grid-template-columns: repeat(2, 1fr);
    padding: 80px 40px;
    gap: 55px 70px;
  }
}

@media (max-width: 767px) {
  body.sa-new-home-design-active .sa-footer__inner {
    grid-template-columns: 1fr;
    padding: 60px 24px;
    gap: 42px;
  }

  body.sa-new-home-design-active .sa-footer__logo {
    width: 210px;
    margin-bottom: 32px;
  }

  body.sa-new-home-design-active .sa-footer__tagline {
    font-size: 18px;
  }

  body.sa-new-home-design-active .sa-footer__col h3 {
    margin-bottom: 18px;
    font-size: 22px;
  }

  body.sa-new-home-design-active .sa-footer__col a,
  body.sa-new-home-design-active .sa-footer__col p {
    font-size: 16px;
  }

  body.sa-new-home-design-active .sa-footer__socials {
    gap: 28px;
  }
}