/* ==========================================================================
   S&V Decor Design — Design System
   Light, editorial, premium: white/light-silver as the dominant surface,
   black text and black "bookend" sections (header, hero, referral banner,
   final CTA, footer) for drama, metallic silver as the accent throughout.
   Depth comes from soft elevation shadows and alternating tonal bands
   rather than literal 3D renders.
   ========================================================================== */

:root {
  --black: #000000;
  --charcoal: #121111;
  --graphite: #565656; /* mid-gray for readable secondary text on light backgrounds */
  --dark-gray: #222121;
  --silver: #c1c1c1;
  --light-silver: #ededed;
  --white: #ffffff;

  /* Warm metallic accent, carried by the eyebrow labels and rules, the
     hero's emphasised dash, the service numbers and the scroll cue —
     never by body copy. Three tones, because one gold cannot serve every
     ground at a readable contrast:
       --gold       decorative marks on white (3.9:1)
       --gold-light everything on the black bookend sections and over the
                    darkened service photos (10:1 on black)
       --gold-deep  eyebrow *text* on white, dark enough to clear WCAG AA
                    for small type (5.4:1) where --gold would not. */
  --gold: #a8791f;
  --gold-light: #d4af37;
  --gold-deep: #8a6410;

  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1320px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 8rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-soft: 0 20px 50px -30px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 40px 80px -30px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip, not hidden: hidden establishes a scroll container on this axis,
     and per spec that forces the other axis (overflow-y) to compute as
     auto instead of its default visible — which quietly turns html/body
     into their own independent scrolling boxes, decoupled from window
     scroll. That broke position:sticky (see .hero) the moment the site
     got its first sticky element: getBoundingClientRect() and scrollY
     stopped agreeing with each other, so the sticky curtain hero never
     stayed pinned and the video appeared to freeze partway. clip clips
     the same overflow without creating a scroll container, so it keeps
     the mobile nav fix below intact without the side effect. */
  overflow-x: clip;
}

/* The header is fixed, so a same-page anchor jump (nav dropdown links,
   #about, #services, #contact) would otherwise land with its target
   tucked behind it. */
[id] {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The mobile nav panel is position:fixed + transform:translateX(100%)
     while closed (see .main-nav) — combining fixed positioning with a
     transform makes some browsers count its off-screen box toward the
     page's scrollable area, which let visitors drag the whole page
     sideways on mobile. This belongs on both html and body since browsers
     don't agree on which one they'll actually honor here. clip, not
     hidden — see the note on the html rule above. */
  overflow-x: clip;
}

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

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

a, button {
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

.hero :focus-visible,
.referral-banner :focus-visible,
.final-cta :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 46px;
  height: 2px;
  background: var(--gold);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--black);
  max-width: 20ch;
}

.section-lede {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 1.05rem;
  max-width: 52ch;
  margin-top: 1.25rem;
}

/* ---------------------------------- Buttons ---------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-solid {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.45);
}

.btn-solid:hover {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
  box-shadow: none;
}

/* Buttons inside a dark section (hero, referral banner, final CTA) invert
   again: white outline, solid white fill for the primary action — a black
   .btn-solid would vanish against these sections' own dark background. */
.hero .btn,
.referral-banner .btn,
.final-cta .btn {
  border-color: var(--silver);
  color: var(--white);
}

.hero .btn:hover,
.referral-banner .btn:hover,
.final-cta .btn:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.hero .btn-solid,
.referral-banner .btn-solid,
.final-cta .btn-solid {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.6);
}

.hero .btn-solid:hover,
.referral-banner .btn-solid:hover,
.final-cta .btn-solid:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--silver);
}

/* ---------------------------------- Scroll progress ---------------------- */

/* A quiet nudge that there's more to see below — width is set from JS
   (main.js) as a percentage of how far down the page you've scrolled. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--black);
  z-index: 200;
  transition: width 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    transition: none;
  }
}

/* ---------------------------------- Header ------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem clamp(1.25rem, 5vw, 3rem);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
  transition: padding 0.4s var(--ease);
}

/* The "glass" backdrop lives on a pseudo-element behind the header's own
   content, not on .site-header itself. backdrop-filter (like transform or
   filter) makes an element the containing block for any position:fixed
   descendant — and .main-nav, the full-screen mobile menu, is exactly
   that. With the blur directly on .site-header, opening the mobile menu
   after scrolling (so .is-scrolled had already applied it) sized the menu
   against the ~70px-tall header instead of the viewport: confirmed with
   Playwright, the menu rendered at 144px tall instead of covering the
   screen, matching a report of "only seeing Home" with the page visible
   underneath. Moving the blur to ::before keeps .site-header itself free
   of any filter, so .main-nav's position:fixed still resolves against the
   viewport like everywhere else on the site. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  transition: opacity 0.4s var(--ease);
}

.site-header.is-scrolled {
  padding-block: 1rem;
  border-bottom: 1px solid var(--dark-gray);
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.logo img {
  height: 34px;
  width: auto;
}

.logo small {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 400;
  border-left: 1px solid var(--dark-gray);
  padding-left: 0.85rem;
}

.site-footer .logo small {
  border-left: none;
  padding-left: 0;
  display: block;
  margin-top: 0.35rem;
}

.site-footer .logo {
  align-items: flex-start;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
}

.main-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-silver);
  position: relative;
  padding-bottom: 4px;
}

/* Ten items in the bar: on mid-size screens (small laptops, tablets in
   landscape) tighten the spacing and drop the "Decor Design" wordmark
   beside the logo so nothing wraps or overlaps before the mobile menu
   takes over at 980px. */
.main-nav a {
  white-space: nowrap;
}

@media (min-width: 981px) and (max-width: 1240px) {
  .site-header .logo small {
    display: none;
  }
  .main-nav {
    gap: 1.15rem;
  }
  .main-nav a {
    letter-spacing: 0.1em;
  }
  .main-nav a.btn {
    padding-inline: 1.2rem;
  }
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--white);
  transition: width 0.4s var(--ease);
}

.main-nav a:not(.btn):hover::after {
  width: 100%;
}

.main-nav a:not(.btn):hover {
  color: var(--white);
}

/* The header is always dark (it floats over the hero and turns solid
   black on scroll), so its CTA button needs the dark-section button
   colors regardless of the page's light body — pinned explicitly here. */
.main-nav a.btn {
  padding-bottom: 0.95rem;
  border-color: var(--silver);
  color: var(--white);
}

.main-nav a.btn:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.main-nav a.btn-solid {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.main-nav a.btn-solid:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--silver);
}

/* Services mega-menu: a hover/focus dropdown grouping each product line
   with its fabric/style variants, matching the category tree the client
   used on the previous site instead of one flat "Services" link. */
.nav-services {
  position: relative;
}

.services-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1.75rem 2.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 50;
}

.services-menu::before {
  content: "";
  position: absolute;
  inset: 1.5rem -2rem -2rem;
  background: var(--white);
  box-shadow: var(--shadow-lift);
  z-index: -1;
}

.services-menu-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2rem 0 2rem 2rem;
}

.services-menu-col:first-child {
  padding-left: 2rem;
}

.services-menu-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--black) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.services-menu-col a:not(.services-menu-heading) {
  font-size: 0.78rem;
  color: var(--graphite) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-bottom: 0 !important;
}

.services-menu-col a:not(.services-menu-heading):hover {
  color: var(--black) !important;
}

.services-menu a::after {
  display: none;
}

@media (min-width: 981px) {
  .nav-services:hover .services-menu,
  .nav-services:focus-within .services-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav-cta {
  display: none;
}

@media (min-width: 981px) {
  .nav-cta {
    display: inline-flex;
  }
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 210;
}

.menu-toggle span {
  width: 26px;
  height: 1px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6rem clamp(1.5rem, 8vw, 3rem) 3rem;
    background: var(--black);
    gap: 1.6rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.55s var(--ease);
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav a:not(.btn) {
    font-size: 1.6rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .main-nav .nav-cta {
    display: inline-flex;
    margin-top: 1.5rem;
  }

  /* On mobile the mega-menu has nowhere to hover from, so it's just
     shown inline, always expanded, in a smaller compact type — a static
     category list under "Services" rather than a hidden accordion. */
  .nav-services {
    width: 100%;
  }

  .services-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 1.25rem;
  }

  .services-menu::before {
    display: none;
  }

  .services-menu-col {
    padding: 0 0 0 1.25rem;
    border-left: 1px solid var(--dark-gray);
  }

  .services-menu-col:first-child {
    padding-left: 1.25rem;
  }

  .services-menu-heading {
    font-size: 0.95rem;
    color: var(--white) !important;
  }

  .services-menu-col a:not(.services-menu-heading) {
    font-size: 0.85rem;
    color: var(--silver) !important;
  }

  .services-menu-col a:not(.services-menu-heading):hover {
    color: var(--white) !important;
  }

  .menu-toggle {
    display: flex;
  }
}

/* ---------------------------------- Hero -------------------------------- */

/* The scroll runway for the curtain reveal: tall enough (260vh) to give the
   effect room to play out at a cinematic pace without forcing every visitor
   to scroll forever to get past it. .hero below is the sticky viewport-sized
   block that stays pinned while the visitor scrolls through this height —
   see the note above the HTML for how js/main.js ties scroll position in
   here to the video's currentTime. */
.hero-track {
  position: relative;
  height: 260vh;
}

@media (prefers-reduced-motion: reduce) {
  /* No scroll-driven anything: the track collapses to exactly one screen
     and .hero (sticky) has nothing to pin against, so it just sits there
     showing the curtain fully open (see main.js, which sets currentTime
     to the video's duration up front for this case). */
  .hero-track {
    height: 100svh;
  }
}

.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder treatment until a real photograph is supplied — a quiet
   metallic gradient, not a stock photo or AI image. */
.hero-media.is-placeholder {
  background:
    radial-gradient(120% 90% at 15% 15%, rgba(193, 193, 193, 0.14), transparent 55%),
    radial-gradient(140% 100% at 85% 85%, rgba(237, 237, 237, 0.08), transparent 60%),
    linear-gradient(160deg, #050505 0%, #161616 45%, #0a0a0a 100%);
}

.hero-placeholder-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gray);
  border: 1px dashed var(--dark-gray);
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}

/* Scrim over the curtain video: once the curtain finishes opening the
   frame behind it can run bright (the reveal shows a sunlit window view),
   so this needs to hold enough darkness across the whole hero — not just
   the bottom — to keep the text below legible at every scroll position,
   not only over the closed-curtain poster. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3.5rem, 8vw, 6rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-content .eyebrow {
  color: var(--gold-light);
}

.hero-content .eyebrow::before {
  background: var(--gold-light);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  color: var(--white);
  max-width: 16ch;
}

.hero-title em {
  font-style: italic;
  color: var(--gold-light);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--light-silver);
  max-width: 42ch;
  margin-top: 1.4rem;
}

.hero-actions {
  margin-top: 2.5rem;
}

.scroll-cue {
  position: absolute;
  right: clamp(1.25rem, 5vw, 3rem);
  bottom: clamp(2rem, 5vw, 3rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver);
}

.scroll-cue .line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: scroll-cue 2.4s var(--ease) infinite;
}

@keyframes scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------------------------- Media frames / depth ----------------- */

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  border: 1px solid var(--dark-gray);
  box-shadow: var(--shadow-soft);
}

/* Frames that fill their own container edge-to-edge (service cards) carry
   their own shadow on the card itself instead — a shadow on the image
   inside would just double up or get clipped by the card's overflow. */
.service-card .media-frame {
  box-shadow: none;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.media-frame:hover img {
  transform: scale(1.04);
}

.media-frame.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.media-frame.is-placeholder .placeholder-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gray);
  border: 1px dashed var(--dark-gray);
  padding: 0.55rem 1rem;
  text-align: center;
}

/* Elevation for the two floating elements that aren't .media-frame
   instances (which already carry the shadow themselves) — the "depth"
   pass on top of the flat black/white/silver palette. */
.showroom-map {
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------- About -------------------------------- */

.about {
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-media {
  aspect-ratio: 4 / 5;
}

.about-copy .eyebrow {
  margin-bottom: 1.75rem;
}

/* :not(.eyebrow) because this rule outspecifies .eyebrow (0,1,1 vs 0,1,0)
   and was overriding the label's size, weight and colour — the About
   eyebrow was rendering at 20px/300 in graphite while every other eyebrow
   on the site is 12px/500. */
.about-copy p:not(.eyebrow) {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.7;
  max-width: 46ch;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--light-silver);
}

.about-stats div {
  flex: 1 1 130px;
}

.about-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--black);
}

.about-stats div span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-media {
    order: -1;
    aspect-ratio: 16 / 11;
  }
}

/* ---------------------------------- Services ----------------------------- */

.services {
  background: var(--light-silver);
}

.services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: var(--gap);
}

.service-card {
  position: relative;
  grid-column: span 3;
  overflow: hidden;
  border: 1px solid var(--dark-gray);
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

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

.service-card:nth-child(1) { grid-column: span 4; }
.service-card:nth-child(2) { grid-column: span 2; }
.service-card:nth-child(3) { grid-column: span 2; }
.service-card:nth-child(4) { grid-column: span 4; }
.service-card:nth-child(5) { grid-column: span 3; }
.service-card:nth-child(6) { grid-column: span 3; }
.service-card:nth-child(7) { grid-column: span 6; }

@media (max-width: 980px) {
  .service-card,
  .service-card:nth-child(n) {
    grid-column: span 6;
  }
}

.service-card .media-frame {
  position: absolute;
  inset: 0;
  border: none;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.service-body {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  width: 100%;
}

.service-title {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  color: var(--white);
}

.service-copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--light-silver);
  margin-top: 0.75rem;
  max-width: 42ch;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--silver);
  padding-bottom: 3px;
  transition: gap 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.service-card:hover .service-link {
  gap: 0.85rem;
  color: var(--white);
  border-color: var(--white);
}

.service-card:hover .media-frame img {
  transform: scale(1.06);
}

/* ---------------------------------- Why choose us ------------------------ */

.why {
  background: var(--white);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

.why-item {
  padding: 2.25rem 1.75rem;
  background: var(--light-silver);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

.why-item:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.why-item svg {
  width: 30px;
  height: 30px;
  stroke: var(--black);
  fill: none;
  stroke-width: 1;
  margin-bottom: 1.5rem;
}

.why-item h3 {
  font-size: 1.15rem;
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
}

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

@media (max-width: 900px) {
  .why-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------- Steps (referrals) --------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

.step-item {
  text-align: center;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--silver);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--black);
  margin-bottom: 1.25rem;
}

.step-number svg {
  width: 24px;
  height: 24px;
  stroke: var(--black);
  fill: none;
  stroke-width: 1;
}

.step-item p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 0.95rem;
  max-width: 24ch;
  margin-inline: auto;
}

/* ---------------------------------- Referral form -------------------------- */

.referral-form {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 760px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
}

.form-grid label.full-width {
  grid-column: 1 / -1;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--black);
  background: var(--light-silver);
  border: none;
  border-bottom: 1px solid var(--silver);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus {
  outline: none;
  border-bottom-color: var(--black);
  background: var(--white);
}

.form-grid textarea {
  resize: vertical;
}

.form-grid select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) center, calc(100% - 0.9rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.referral-form .btn,
.contact-form .btn {
  margin-top: 2rem;
}

.contact-form {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 560px;
}

/* ---------------------------------- Careers form ------------------------- */

.careers-form {
  max-width: 820px;
}

.form-section {
  border: 0;
  margin: 0 0 clamp(2.25rem, 5vw, 3rem);
  padding: 0;
  min-width: 0;
}

.form-section legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0 0 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--light-silver);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--black);
}

.form-section legend span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: 0.8rem;
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.choice-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
}

.choice-label small {
  font-weight: 400;
  color: var(--graphite);
  margin-left: 0.35rem;
}

.choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
}

.choice-options.is-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

@media (max-width: 700px) {
  .choice-options {
    grid-template-columns: 1fr;
  }
}

/* Same look as the text fields' labels, but laid out inline. Selectors
   are scoped under .form-grid so they win over the column layout that
   .form-grid label applies to every other field. */
.form-grid label.choice,
.consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--dark-gray);
  cursor: pointer;
}

.form-grid .choice input,
.consent input {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--black);
}

.form-grid .file-field input[type="file"] {
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.form-grid .file-field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.field-hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--graphite);
}

.consent {
  display: flex;
  padding: 1.25rem;
  background: var(--light-silver);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Grid items default to min-width:auto, so a wide control (the file
   picker, a long placeholder) would push its column past the screen edge
   on phones. */
.careers-form .form-grid > * {
  min-width: 0;
}

.careers-form .form-grid > .full-width {
  grid-column: 1 / -1;
}

.careers-form .form-grid input:not([type="checkbox"]):not([type="radio"]),
.careers-form .form-grid select,
.careers-form .form-grid textarea {
  width: 100%;
  min-width: 0;
}

.careers-form input.is-invalid,
.careers-form select.is-invalid,
.careers-form textarea.is-invalid {
  border-bottom: 2px solid #a33;
}

.careers-form .consent.is-invalid {
  outline: 1px solid #a33;
}

.careers-form .choice-group.is-invalid .choice-label,
.careers-form .consent.is-invalid span {
  color: #a33;
}

.form-status {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--graphite);
}

.form-status.is-success {
  color: var(--black);
  font-weight: 500;
}

.form-status.is-error {
  color: #a33;
}

.btn-google {
  gap: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.btn-google .icon-google {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  max-width: 560px;
  color: var(--graphite);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.why-item.is-centered {
  text-align: center;
}

.why-item.is-centered svg {
  margin-inline: auto;
}

.hours-card {
  max-width: 420px;
  margin-inline: auto;
}

.hours-card p {
  line-height: 1.6;
}

.why-item p {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--graphite);
  font-weight: 300;
}

.referrals-list {
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.referrals-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
}

.referral-client {
  color: var(--black);
  font-weight: 500;
}

.referral-status {
  text-transform: capitalize;
  color: var(--graphite);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.referral-status-completed {
  color: #2f7a3d;
}

/* ---------------------------------- FAQ (details/summary) ---------------- */

.faq-list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 1.25rem 0;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--black);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--graphite);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* ---------------------------------- Admin referrals table ---------------- */

.admin-referral-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

.admin-referral-row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.admin-referral-client {
  font-weight: 500;
  color: var(--black);
}

.admin-referral-meta {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--graphite);
}

.admin-referral-status {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---------------------------------- Split banners (contractors) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split-media {
  position: relative;
  min-height: 340px;
}

/* A percentage-height img inside a grid-stretched item needs the item
   itself to have a definite height — min-height alone doesn't give the
   <img height:100%> anything concrete to resolve against, so it silently
   collapses to zero. An explicit img wrapper fixes it without depending
   on stretch behavior. */
.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem);
  background: var(--white);
}

.split-copy p.lede {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 1.1rem;
  max-width: 42ch;
  margin-top: 1.5rem;
}

.split-copy .btn-row {
  margin-top: 2.25rem;
}

/* Referral program: a black band punctuating the light page, mirroring
   how the brief uses black for "premium sections." */
.referral-banner {
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.referral-banner .eyebrow {
  justify-content: center;
  color: var(--gold-light);
}

.referral-banner .eyebrow::before {
  background: var(--gold-light);
}

.referral-banner .section-title {
  color: var(--white);
}

/* ---------------------------------- Reviews ------------------------------ */

.reviews {
  background: var(--white);
  text-align: center;
}

.reviews .eyebrow {
  justify-content: center;
}

.reviews .eyebrow::before {
  display: none;
}

.reviews-summary {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.reviews-summary .stars {
  color: var(--black);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
}

.reviews-summary .reviews-count {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: left;
}

@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

.review-card {
  background: var(--light-silver);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.review-card .review-author {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--black);
  margin: 0;
}

.review-card .review-time {
  font-size: 0.72rem;
  color: var(--graphite);
  margin: 0.15rem 0 0;
}

.review-card .review-stars {
  margin-top: 1rem;
  color: var(--black);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.review-card .review-text {
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--dark-gray);
  line-height: 1.6;
}

.reviews-attribution {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--graphite);
}

.reviews-attribution a {
  color: var(--graphite);
  text-decoration: underline;
}

/* ---------------------------------- Final CTA ----------------------------- */

.final-cta {
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
}

.final-cta .service-area {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--silver);
  font-size: 0.95rem;
  max-width: 60ch;
  margin: 0 auto 3rem;
}

/* Dark section, so the eyebrow rule needs the lifted gold like the hero
   and referral banner — the default --gold is tuned for white grounds. */
.final-cta .eyebrow {
  color: var(--gold-light);
}

.final-cta .eyebrow::before {
  background: var(--gold-light);
}

.final-cta .section-title {
  max-width: 22ch;
  margin-inline: auto;
  color: var(--white);
}

.final-cta .btn-row {
  justify-content: center;
  margin-top: 2.5rem;
}

/* ---------------------------------- Showroom ------------------------------ */

/* ---------------------------------- Style/fabric grid (service pages) --- */

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

@media (max-width: 760px) {
  .style-grid {
    grid-template-columns: 1fr;
  }
}

.style-card .media-frame {
  aspect-ratio: 3 / 4;
}

/* Some fabric cards link out to a dedicated sub-page (e.g. Roller Shades'
   Blackout/Light Filtering/Screen); the whole card is clickable rather than
   a separate "Learn more" line, so strip the anchor's default styling. */
a.style-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.style-card h3 {
  margin-top: 1.1rem;
  font-size: 1.1rem;
}

.style-card p {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 0.92rem;
}

/* ---------------------------------- Compare grid (system/style choices) --- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 700px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

.compare-item h3 {
  margin-top: 1.25rem;
  font-size: 1.15rem;
}

.compare-item p {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--graphite);
  font-size: 0.92rem;
}

.showroom {
  background: var(--white);
}

.showroom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

@media (max-width: 860px) {
  .showroom-grid {
    grid-template-columns: 1fr;
  }
}

.showroom-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showroom-address {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--black);
  margin-top: 1.5rem;
  max-width: 30ch;
}

.showroom-map {
  min-height: 340px;
  filter: grayscale(0.85);
}

.showroom-map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

/* ---------------------------------- CTA strip (contractors) --------------- */

.cta-strip {
  background: var(--black);
  text-align: center;
  padding: 2.5rem 0;
}

/* ---------------------------------- Project types grid --------------------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap) 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-item {
  text-align: center;
}

.project-item svg {
  width: 28px;
  height: 28px;
  stroke: var(--black);
  fill: none;
  stroke-width: 1;
  margin-bottom: 1rem;
}

.project-item p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--black);
}

/* ---------------------------------- Footer -------------------------------- */

.site-footer {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.88rem;
  color: var(--light-silver);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-links a.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-whatsapp {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.footer-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--silver);
  font-size: 0.9rem;
  max-width: 34ch;
  margin-top: 1.25rem;
}

.footer-bottom {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--dark-gray);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--silver);
}

.footer-bottom a {
  color: var(--silver);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* ---------------------------------- Reveal-on-scroll ----------------------- */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-delay="1"] { transition-delay: 0.12s; }
[data-animate-delay="2"] { transition-delay: 0.24s; }
[data-animate-delay="3"] { transition-delay: 0.36s; }

/* ---------------------------------- Carousel ------------------------------
   Per-service photo gallery. Every instance is self-contained: the JS keys
   all state off the element, so two carousels on one page never move
   together. Slides are laid out in a flex track that translates by whole
   multiples of 100%, which keeps the transition on the compositor.

   object-fit is `contain`, not `cover`, because the client's photos are a
   mix of portrait and landscape phone shots — cover would crop a vertical
   shot down to a horizontal band and cut the top off the window being
   sold. The charcoal ground behind is the same one .media-frame already
   uses, so the letterboxing reads as the frame rather than as a gap. */

.carousel {
  position: relative;
}

/* 16/8 is deliberate: it's the ratio of the single hero photo each carousel
   replaced, so swapping one for the other leaves every service page's
   vertical rhythm untouched. Phones get a portrait box instead, where most
   of these shots were taken vertically and a letterboxed landscape frame
   would render them postage-stamp size. */
.carousel-viewport {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
}

@media (max-width: 720px) {
  .carousel-viewport {
    aspect-ratio: 4 / 5;
  }
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s var(--ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Overrides .media-frame img's cover, see the note above. */
.carousel-slide img,
.carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.carousel.is-ready .carousel-nav {
  display: flex;
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--gold-light);
}

.carousel-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-nav.prev { left: 0.9rem; }
.carousel-nav.next { right: 0.9rem; }

@media (max-width: 520px) {
  .carousel-nav {
    width: 38px;
    height: 38px;
  }
  .carousel-nav.prev { left: 0.5rem; }
  .carousel-nav.next { right: 0.5rem; }
}

.carousel-count {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  display: none;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--light-silver);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.carousel.is-ready .carousel-count {
  display: block;
}

.carousel-dots {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.carousel.is-ready .carousel-dots {
  display: flex;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dark-gray);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.carousel-dot:hover {
  background: var(--silver);
}

.carousel-dot.is-active {
  background: var(--gold);
  transform: scale(1.35);
}

/* On the black sections the plain gold reads too dark against the ground,
   the same reason the eyebrows there switch tone. */
.on-black .carousel-dot.is-active,
.final-cta .carousel-dot.is-active {
  background: var(--gold-light);
}

/* ---------------------------------- Split section video -------------------
   The contractors split takes a vertical (9:16) clip shot on a phone. In the
   desktop two-column layout it fills the same half-width box the photo used
   to, cropped by object-fit like every other .split-media image.

   On mobile the split collapses to one column, and a 340px-tall band of a
   vertical video shows almost nothing of it — so the cell switches to a
   portrait-friendly box there and lets the clip play close to its own
   shape. */
.split-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .split-media.is-video {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}