/* ==========================================================================
   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;

  --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;
}

/* 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;
}

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;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dark-gray);
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--silver);
}

.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);
}

/* ---------------------------------- 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: background-color 0.4s var(--ease), padding 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  padding-block: 1rem;
  border-bottom: 1px solid var(--dark-gray);
}

.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;
}

.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 -------------------------------- */

.hero {
  position: relative;
  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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blind reveal: ten slats covering the hero photo start fully open (photo
   visible) and tilt closed in 3D as the visitor scrolls past the hero —
   reversible (scroll back up and they open again). Driven entirely by
   main.js setting each slat's transform/opacity per-frame from scroll
   position; the CSS here only sets the open starting state and the 3D
   stage. Decorative only, so it's unclickable, and main.js skips the
   scroll wiring entirely for prefers-reduced-motion, showing the photo
   fully revealed from the start regardless of scroll. */
.blind-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1200px;
}

.blind-slat {
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  background: linear-gradient(180deg, #f4f4f4 0%, #d9d9d9 45%, #bcbcbc 52%, #e8e8e8 100%);
  transform-origin: top center;
  backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transform: rotateX(-110deg);
  opacity: 0;
}

.blind-slat:nth-child(1) { top: 0%; }
.blind-slat:nth-child(2) { top: 10%; }
.blind-slat:nth-child(3) { top: 20%; }
.blind-slat:nth-child(4) { top: 30%; }
.blind-slat:nth-child(5) { top: 40%; }
.blind-slat:nth-child(6) { top: 50%; }
.blind-slat:nth-child(7) { top: 60%; }
.blind-slat:nth-child(8) { top: 70%; }
.blind-slat:nth-child(9) { top: 80%; }
.blind-slat:nth-child(10) { top: 90%; }

/* 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;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.15) 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);
}

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

.hero-content .eyebrow::before {
  background: var(--silver);
}

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

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

.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(--silver), 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;
}

.about-copy p {
  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;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--light-silver);
}

.about-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 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-index {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--silver);
  letter-spacing: 0.1em;
}

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

.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 {
  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 {
  outline: none;
  border-bottom-color: var(--black);
  background: var(--white);
}

.form-grid textarea {
  resize: vertical;
}

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

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

.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;
}

.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;
}

/* ---------------------------------- 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(--light-silver);
}

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

.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;
}

.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;
}

.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; }