/* ==========================================================================
   AKS CURTAIN STUDIO - PREMIUM LUXURY DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Syne:wght@500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   MODERN MINIMAL LUXURY
   Warm white ground, charcoal ink, a single soft-tan accent.
   Variable names are kept from the previous emerald/gold system so every
   existing rule inherits the new palette without being rewritten.
   -------------------------------------------------------------------------- */
:root {
  /* Ink — the old "green" ramp now carries charcoal */
  --primary-deep: #1C1B19;      /* Charcoal — primary ink & solid buttons */
  --primary-green: #2A2825;     /* Softened charcoal — hover state */
  --primary-light: #3D3A35;     /* Warm graphite */

  /* Accent — the old "gold" ramp now carries tan, in three legible steps.
     One tan cannot serve every job: the mid tone is decorative only (~2.9:1
     on the warm ground), so text and inverted surfaces each get their own. */
  --gold-primary: #B08D5C;      /* Soft tan — borders, rules, decorative fills */
  --gold-accent: #F5C542;       /* Bright golden amber — text on dark surfaces */
  --gold-dark: #8A6C42;         /* Deep tan — accent text on warm white (4.7:1) */

  /* Ground & surfaces */
  --cream-bg: #FAF9F6;          /* Warm white page ground */
  --cream-card: #FFFFFF;        /* Card surface */
  --charcoal-heading: #1C1B19;  /* Headings */
  --body-text: #2C2B28;         /* Rich dark body copy */
  --muted-text: #4A4742;        /* High-contrast secondary text */
  --border-light: #E6E3DC;      /* Hairline */
  --border-gold: rgba(176, 141, 92, 0.35);

  /* Elevation — hairline-led, near-flat */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.04);
  --shadow-md: 0 1px 2px rgba(28, 27, 25, 0.04), 0 8px 24px rgba(28, 27, 25, 0.05);
  --shadow-lg: 0 1px 2px rgba(28, 27, 25, 0.04), 0 16px 40px rgba(28, 27, 25, 0.07);
  --shadow-gold: 0 8px 24px rgba(176, 141, 92, 0.18);
  --glass-bg: rgba(250, 249, 246, 0.85);
  --glass-border: rgba(230, 227, 220, 0.7);

  /* Shape — calm, consistent radii */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* Typography — Syne (architectural bold display) + Plus Jakarta Sans (clean geometric text) */
  --font-serif: 'Syne', sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Smooth Scroll */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The [hidden] attribute is only display:none via the browser's UA
   stylesheet, which any author rule that sets display (e.g. .btn's
   display:flex) silently overrides — an element can carry hidden="" and
   still render. This makes hidden authoritative site-wide, which the
   step-by-step booking form (formSubmitBtn/formPrevBtn, .btn.btn-block)
   depends on: without it, the "Submit" button stayed visible and occupied
   flex space on step 1, alongside "Next". */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--cream-bg);
  /* Jost's x-height sits below Inter's, so 16px read a size small; 17px
     restores the intended text colour without changing the layout scale. */
  font-size: 1.0625rem;
  color: var(--body-text);
  line-height: 1.6;
  position: relative;
}

@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }
}

/* Note: `overflow-x: hidden` was removed from body here. It forces overflow-y
   to compute as `auto`, which makes body its own scroll container and stops
   `position: sticky` on the header from ever pinning. The horizontal overflow
   it was hiding is fixed at source (see the min-width:0 rules above), so the
   mask is no longer needed — and if spill ever returns it should be visible
   rather than silently clipped. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--charcoal-heading);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Grid items default to min-width:auto, so they refuse to shrink below their
   content's intrinsic width. On mobile that pushed the calculator column to
   384px inside a 278px track, which cascaded outward and stretched the whole
   document (and the fixed header with it) to 433px against a 375px viewport.
   body{overflow-x:hidden} was only masking the spill. */
.hero-grid > *,
.calc-grid > *,
.visualizer-container > *,
.contact-grid > *,
.footer-grid > *,
.services-grid > *,
.reviews-grid > *,
.features-grid > *,
.gallery-grid > * {
  min-width: 0;
}

/* Inputs carry their own intrinsic size, which survives the fix above */
.form-input,
.form-select {
  min-width: 0;
}

/* Nested content inside the calculator and visualizer keeps its own intrinsic
   floor, so the shrink fix has to reach descendants, not just grid children. */
.calc-result-box,
.calc-result-box *,
.calc-breakdown-item > *,
.visualizer-controls-panel *,
.option-buttons-grid > * {
  min-width: 0;
}

.calc-breakdown-item > * {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   UTILITY LAYER
   The markup was authored using Tailwind-style class names, but this site does
   not load Tailwind — so every one of these resolved to nothing. That is why
   footer copy all rendered at the inherited body size regardless of its
   text-xs / text-sm class. Defining them here makes the existing markup behave
   as written, here and everywhere else they appear.
   -------------------------------------------------------------------------- */
.text-2xl { font-size: 1.5rem; }
.text-sm  { font-size: 0.875rem; }
.text-xs  { font-size: 0.78rem; }

.text-gold         { color: var(--gold-dark); }
.text-muted        { color: var(--muted-text); }
.text-white        { color: #FFFFFF; }
.text-charcoal     { color: var(--charcoal-heading); }
.text-primary-deep { color: var(--primary-deep); }

/* On charcoal surfaces the accent inverts — the deep tan drops to ~3:1 there.
   The visualizer and contact panels are no longer dark, so they are not listed
   here; the info tag inside the visualizer's dark preview box still is. */
.site-footer .text-gold,
.visualizer-info-tag .text-gold { color: var(--gold-accent); }

/* Required alongside .text-primary-deep: the Call Studio button pairs the two,
   and with only the text colour defined its charcoal label sat on the charcoal
   action bar at 1:1 — invisible. */
.bg-white { background: #FFFFFF; }

.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-serif    { font-family: var(--font-serif); }
.leading-relaxed { line-height: 1.65; }

.block { display: block; }

.mr-1 { margin-right: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2rem; }

/* Badge Styles */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge i {
  font-size: 0.8rem;
}

.badge-gold {
  background: rgba(176, 141, 92, 0.10);
  color: var(--gold-dark);
  border: 1px solid var(--border-gold);
}

.badge-green {
  background: rgba(28, 27, 25, 0.05);
  color: var(--primary-deep);
  border: 1px solid rgba(28, 27, 25, 0.15);
}

/* Section Common Styling */
.section,
section {
  padding: 3.5rem 0;
  position: relative;
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  .section,
  section {
    padding: 2.5rem 0;
    scroll-margin-top: 80px;
  }
}

.section-title-wrap {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem 1rem;
}

.section-subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.22rem 0.75rem;
  border-radius: 9999px;
  background: rgba(176, 141, 92, 0.12);
  color: var(--gold-dark);
  border: 1px solid rgba(176, 141, 92, 0.3);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.03);
  transition: var(--transition-fast);
}

.section-subtitle:hover {
  background: rgba(176, 141, 92, 0.18);
  border-color: rgba(176, 141, 92, 0.45);
}

.section-title {
  font-size: 2.0625rem;
  color: var(--charcoal-heading);
  margin-bottom: 0.65rem;
  line-height: 1.25;
  padding: 0.05em 0;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.53rem;
    line-height: 1.25;
  }

  .section-subtitle {
    font-size: 0.64rem;
    padding: 0.18rem 0.6rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
  }
}

.section-desc {
  font-size: 1.05rem;
  color: var(--muted-text);
  line-height: 1.7;
  padding-bottom: 0.25em;
}

@media (max-width: 768px) {
  .section-desc {
    font-size: 0.95rem;
  }
}

/* Buttons & UI Controls
   All variants now share one look — solid black (charcoal) with white text —
   at the user's request, rather than each CTA carrying its own accent colour.
   The colour classes (.btn-gold/.btn-green/.btn-whatsapp) are kept only so
   the existing markup and JS hooks (which target them) still work; they no
   longer differ visually. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
  background: var(--primary-deep);
  color: #FFFFFF;
  box-shadow: none;
}

.btn:hover {
  background: var(--primary-green);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-gold,
.btn-green,
.btn-outline,
.btn-whatsapp {
  background: var(--primary-deep);
  color: #FFFFFF;
}

.btn-gold:hover,
.btn-green:hover,
.btn-outline:hover,
.btn-whatsapp:hover {
  background: var(--primary-green);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Full-width CTA inside a card/panel (calculator result, visualizer, contact,
   form) — was undefined in the markup, so these buttons fell back to inline
   sizing and wrapped their long labels to two lines inside narrow columns. */
.btn-block {
  display: flex;
  width: 100%;
}

.style-btn {
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   TOP ANNOUNCEMENT BAR
   Was a single inline-styled div whose sentence wrapped to three lines on a
   phone. Now a flex row with the location clause dropped on small screens, so
   it holds one line at every width.
   ========================================================================== */
.announcement-bar {
  background: var(--primary-deep);
  border-bottom: 1px solid rgba(245, 197, 66, 0.35);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.announcement-text {
  color: #FFFFFF;
  font-weight: 500;
}

.announcement-phone {
  color: #F5C542;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.announcement-phone:hover {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

@media (max-width: 900px) {
  /* Trim the location clause rather than let the bar grow to two lines */
  .announcement-extra {
    display: none;
  }
}

@media (max-width: 576px) {
  /* Drop the swatch-count clause too, so the bar holds a single line at 375px
     instead of wrapping to two */
  .announcement-mid {
    display: none;
  }

  .announcement-bar {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }

  .announcement-inner {
    gap: 0.5rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .announcement-phone {
    padding-left: 0.5rem;
  }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
/* Static header — it scrolls away with the page rather than following it.
   (No sticky/fixed, so no z-index race with the announcement bar above and no
   top offset to keep in sync with that bar's wrapped height.) */
.site-header {
  position: relative;
  width: 100%;
  z-index: 10;
  padding: 1rem 0;
  background: var(--cream-bg);
  border-bottom: 1px solid var(--border-light);
}

/* The scroll handler in app.js still toggles .scrolled; with a static header
   there is nothing to restyle, so it is intentionally inert. */
.site-header.scrolled {
  padding: 1rem 0;
  box-shadow: none;
  background: var(--cream-bg);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.logo-img {
  height: 82px;
  width: auto;
  transition: var(--transition-fast);
}

.logo-wrap:hover .logo-img {
  opacity: 0.82;
}

@media (max-width: 768px) {
  .site-header,
  .site-header.scrolled {
    padding: 0.5rem 0;
  }

  .logo-img {
    height: 48px;
  }

  .header-actions {
    gap: 0.75rem;
  }

  .header-actions .btn-gold {
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
  }

  .mobile-nav-toggle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  /* Trimmed from 1.15rem: the larger logo pushed this row 12px past 1265px at
     desktop width, and eight links leave little slack to give back elsewhere. */
  gap: 0.9rem;
  list-style: none;
}

/* Quiet, evenly-tracked links; the accent is carried by a hairline rule that
   draws in from the left, not by weight or colour shouting. */
.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--muted-text);
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--charcoal-heading);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--gold-primary);
  transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* Phone call action button in header */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal-heading);
  background: #FFFFFF;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.header-phone i {
  color: var(--gold-dark);
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.header-phone:hover {
  background: var(--primary-deep);
  color: #FFFFFF;
  border-color: var(--primary-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.header-phone:hover i {
  color: #F5C542;
}

/* Quote button — same black/white treatment as every other button now,
   just sized down to sit comfortably next to the logo. */
.header-actions .btn-gold {
  background: var(--primary-deep);
  color: #FFFFFF;
  border: 1px solid var(--primary-deep);
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.header-actions .btn-gold:hover {
  background: var(--primary-green);
  border-color: var(--primary-green);
  color: #FFFFFF;
  transform: none;
  box-shadow: none;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  line-height: 1;
  font-size: 1.15rem;
  color: var(--charcoal-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}

.mobile-nav-toggle:hover {
  border-color: var(--gold-primary);
  color: var(--gold-dark);
}

/* Nav collapses at 1250px, not 992px (or the 1150px this used to be): eight
   uppercase links plus the logo, phone and Quote button need more room now
   that the logo is bigger, and 1150–1250 was overflowing by up to 45px. */
@media (max-width: 1250px) {
  /* Anchored to the header itself (which is position:relative) instead of the
     old `fixed; top:70px`. That offset assumed a fixed header pinned to the
     viewport — with a static header it would have detached on scroll. */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--cream-card);
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1.5rem 1rem;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    /* Fade/lift rather than translateY(-150%): the old slide parked the panel
       above the header where it could show over the announcement bar. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 999;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu li {
    border-bottom: 1px solid var(--border-light);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-link {
    display: block;
    padding: 0.85rem 0;
    font-size: 0.8rem;
  }

  /* The sliding underline reads oddly on stacked full-width rows */
  .nav-link::after {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .header-phone span {
    display: none;
  }

  .header-phone {
    padding: 0.55rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .header-phone {
    display: none;
  }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  padding-top: 2.25rem;
  padding-bottom: 2.75rem;
  background: radial-gradient(circle at 80% 20%, rgba(176, 141, 92, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(28, 27, 25, 0.06) 0%, transparent 50%),
              var(--cream-bg);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .hero-badge {
    font-size: 0.6rem;
    padding: 0.28rem 0.65rem;
  }
}

.hero-title {
  font-size: 3.125rem;
  font-weight: 600;
  color: var(--primary-deep);
  margin-bottom: 1.25rem;
  line-height: 1.08;
  text-align: center;
}

/* Solid tan accent — the gradient-clipped text rendered at ~2.9:1 and could
   not be darkened, since clipped fills ignore the text colour. */
.hero-title span {
  color: var(--gold-dark);
  font-style: italic;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.25rem;
  }
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--body-text);
  margin-bottom: 2rem;
  max-width: 580px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  margin-left: auto;
  margin-right: auto;
}

/* Nested inside .hero-visual-card now (after the <img>), not a sibling of
   .hero-content — mobile keeps it as a plain bar in normal flow below the
   photo (still inside the card's border); desktop turns it into a
   translucent overlay bar pinned to the bottom of the photo itself. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background: var(--cream-card);
}

@media (min-width: 993px) {
  .hero-stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: none;
    padding: 1.75rem 1.75rem 1.25rem;
    background: linear-gradient(to top, hsl(40 6% 10% / 0.85) 0%, hsl(40 6% 10% / 0.5) 65%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Dark photo overlay needs light text — the default dark-on-cream values
     below are for the plain mobile bar. */
  .hero-stats .stat-number {
    color: #FFFFFF;
  }

  .hero-stats .stat-label {
    color: rgba(255, 255, 255, 0.75);
  }
}

/* Cormorant ships up to 700; 800 would synthesise a faux-bold and smear the
   thin strokes. Size carries the emphasis instead. */
.stat-number {
  font-family: var(--font-serif);
  font-size: 2.15rem;
  font-weight: 600;
  color: var(--primary-deep);
}

.stat-label {
  font-size: 0.825rem;
  color: var(--muted-text);
  font-weight: 500;
}

/* Hero Visual Card Showcase */
.hero-visual-wrap {
  position: relative;
}

.hero-visual-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  background: var(--cream-card);
}

.hero-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hero-visual-card:hover .hero-img {
  transform: scale(1.03);
}

/* Floating Feature Badges */
.floating-badge {
  position: absolute;
  background: var(--cream-card);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-deep);
  z-index: 2;
  animation: float 4s ease-in-out infinite;
}

.floating-badge-1 {
  top: -1.2rem;
  right: -1rem;
}

/* Raised from 4rem: the hero-stats bar now overlays the bottom ~124px of the
   photo (it used to sit below the image entirely), and 4rem left this badge
   overlapping it by ~58px. */
.floating-badge-2 {
  bottom: 9rem;
  left: -1.5rem;
  animation-delay: 2s;
}

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

@media (max-width: 576px) {
  .floating-badge {
    display: none;
  }
}

/* ==========================================================================
   SERVICES & PRODUCTS GRID
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.service-card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-primary);
}

.service-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(28, 27, 25, 0.06);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  transition: var(--transition-fast);
}

.service-card:hover .service-icon-wrap {
  background: var(--primary-deep);
  color: var(--gold-primary);
}

.service-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--charcoal-heading);
}

.service-desc {
  font-size: 0.9rem;
  color: var(--body-text);
  margin-bottom: 1rem;
  flex-grow: 1;
}

.service-list {
  list-style: none;
  margin-bottom: 1rem;
}

.service-list li {
  font-size: 0.85rem;
  color: var(--muted-text);
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-list li::before {
  content: '✓';
  color: var(--gold-dark);
  font-weight: 700;
}

/* .service-card is a column flex container, so this link is a flex item that
   gets stretched to the card's full width by the parent's default
   align-items:stretch — "inline-flex" also computes to "flex" once blockified
   as a flex item, and its icon+text then hug the left edge of that stretched
   box by default. Desktop keeps that default (flex-start) since the card
   title/description are left-aligned there too; the mobile centering block
   below sets justify-content:center to match the card's own text-align. */
.service-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.service-card:hover .service-link {
  color: var(--gold-dark);
}

/* ==========================================================================
   INTERACTIVE ROOM & CURTAIN VISUALIZER
   ========================================================================== */
/* Light panel (was solid charcoal). Every descendant colour below is flipped
   with it — the previous values were all tuned for a dark ground. */
.visualizer-section {
  background: var(--cream-card);
  color: var(--body-text);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  margin: 0.75rem 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.visualizer-section .section-subtitle {
  color: var(--gold-dark);
}

.visualizer-section .section-title {
  color: var(--charcoal-heading);
}

.visualizer-section .section-desc {
  color: var(--muted-text);
}

.visualizer-container {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (max-width: 992px) {
  .visualizer-container {
    grid-template-columns: 1fr;
  }
}

.visualizer-preview-box {
  position: relative;
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  background: #111;
  border: 1px solid rgba(176, 141, 92, 0.3);
}

.room-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

/* Curtain Color Overlay Canvas / Layer */
.curtain-overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.65;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

.visualizer-info-tag {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-gold);
}

/* This badge sits on the dark preview box, so it inverts to the light tan —
   the light-surface badge colour reads at only ~3.9:1 here. */
.visualizer-info-tag .badge-gold {
  background: rgba(176, 141, 92, 0.18);
  color: var(--gold-accent);
  border-color: rgba(176, 141, 92, 0.45);
}

.visualizer-controls-panel {
  background: var(--cream-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.control-group {
  margin-bottom: 1.15rem;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-group-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: 0.85rem;
}

.option-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.opt-btn {
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  color: var(--body-text);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: var(--transition-fast);
}

/* Selected state goes solid charcoal: on the light panel the tan fill no
   longer reads as "chosen" against its neighbours. */
.opt-btn:hover {
  border-color: var(--gold-primary);
  color: var(--charcoal-heading);
}

.opt-btn.active {
  background: var(--primary-deep);
  color: var(--cream-bg);
  border-color: var(--primary-deep);
}

/* Color Swatch Picker */
.swatch-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.swatch-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  position: relative;
}

/* Charcoal ring, not white — a white ring vanished on the light panel */
.swatch-item.active {
  border-color: var(--primary-deep);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--cream-card), 0 0 0 3px var(--primary-deep);
}

/* ==========================================================================
   INSTANT WINDOW PRICE ESTIMATOR
   ========================================================================== */
.calculator-card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

@media (max-width: 768px) {
  .calculator-card {
    padding: 1.35rem;
  }
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 992px) {
  .calc-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   BOOKING FORM — STEP INDICATOR & NAVIGATION
   Splits the doorstep-consultation form into 3 short steps instead of one
   long scroll of fields.
   -------------------------------------------------------------------------- */
.form-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.form-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cream-bg);
  border: 1px solid var(--border-light);
  color: var(--muted-text);
  font-size: 0.8rem;
  transition: var(--transition-fast);
}

.form-step-dot.active {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #FFFFFF;
}

.form-step-line {
  width: 32px;
  height: 1px;
  background: var(--border-light);
  flex-shrink: 0;
}

.form-step-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-bottom: 1.25rem;
}

.form-step-label span {
  color: var(--charcoal-heading);
  font-weight: 600;
}

/* Each step's fields are shown one at a time; a fixed min-height keeps the
   card from resizing as steps with different field counts swap in. */
.form-step {
  min-height: 140px;
}

.form-step-nav {
  display: flex;
  gap: 0.75rem;
}

/* Overrides .btn-block's width:100% (which would overflow next to Back) so
   the primary action instead grows to fill whatever room Back doesn't use. */
.form-step-nav .btn-block {
  width: auto;
  flex: 1;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--charcoal-heading);
  margin-bottom: 0.35rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--cream-bg);
  color: var(--charcoal-heading);
  outline: none;
  transition: var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(176, 141, 92, 0.15);
}

/* Light panel (was a dark radial gradient) — a warm tint keeps it distinct
   from the white calculator card it sits inside. */
.calc-result-box {
  background: var(--cream-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: var(--body-text);
  text-align: center;
  box-shadow: none;
  border: 1px solid var(--gold-primary);
}

/* The "Estimated Investment" label carries opacity-90 from the markup, which
   was fine over charcoal but drops the tan to 3.8:1 on this light ground. */
.calc-result-box .opacity-90 {
  opacity: 1;
}

.calc-price-amount {
  font-family: var(--font-serif);
  font-size: 2.35rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0.6rem 0;
}

.calc-breakdown-list {
  text-align: left;
  background: rgba(28, 27, 25, 0.04);
  padding: 0.9rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 0.825rem;
}

.calc-breakdown-item {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-light);
}

.calc-breakdown-item:last-child {
  border-bottom: none;
}

/* ==========================================================================
   PORTFOLIO GALLERY & LIGHTBOX
   ========================================================================== */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.gallery-tab-btn {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--cream-card);
  border: 1px solid var(--border-light);
  color: var(--body-text);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gallery-tab-btn:hover, .gallery-tab-btn.active {
  background: var(--primary-deep);
  color: #FFFFFF;
  border-color: var(--primary-deep);
}

/* Explicit 5 columns on desktop rather than auto-fill(280px), which only
   produced 4 at typical desktop widths. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  height: 320px;
  background: var(--cream-card);
}

/* At 5 narrow columns the 320px base height (tuned for wider tiles) made each
   photo tall and narrow; shorter keeps the tiles closer to their source
   aspect ratio. Placed after the base rule above (same specificity, so the
   later one wins) rather than before it, which is why an earlier attempt at
   this override had no effect. */
@media (min-width: 1201px) {
  .gallery-item {
    height: 240px;
  }
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.9) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay-title {
  font-size: 1.15rem;
  color: var(--gold-accent);
  margin-bottom: 0.2rem;
}

.gallery-overlay-tag {
  font-size: 0.8rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-content {
  max-width: 900px;
  max-height: 85vh;
  position: relative;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #FFFFFF;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   WHY CHOOSE US / LEGACY & REVIEWS
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.feature-box {
  background: var(--cream-card);
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  text-align: center;
}

.feature-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.review-card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* Stars carry rating meaning, so they take the legible tan, not the
   decorative one (which sits at ~3.1:1 on a white card). */
.review-stars {
  color: var(--gold-dark);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.review-text {
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--body-text);
}

.review-author {
  font-weight: 700;
  color: var(--primary-deep);
  font-size: 0.9rem;
}

.review-location {
  font-size: 0.8rem;
  color: var(--muted-text);
}

/* ==========================================================================
   CONTACT & LOCATION SECTION
   ========================================================================== */
/* align-items:start rather than the grid default (stretch): the info box and
   the form card have different amounts of content, and stretch was forcing
   the shorter one (info box) to match the taller one's height, leaving a
   216px gap of empty space below its last item. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

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

/* Light panel (was solid charcoal) */
.contact-info-box {
  background: var(--cream-card);
  color: var(--body-text);
  padding: 1.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-info-title {
  color: var(--gold-dark);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.contact-detail-item {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.contact-detail-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(176, 141, 92, 0.14);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-detail-content h5 {
  color: var(--charcoal-heading);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.contact-detail-content p {
  color: var(--muted-text);
  font-size: 0.925rem;
}

/* ==========================================================================
   FOOTER & MOBILE FLOATING QUICK BAR
   ========================================================================== */
.site-footer {
  background: #11100D;
  color: #FFFFFF;
  padding: 2.75rem 0 1.5rem 0;
  border-top: 1px solid rgba(245, 197, 66, 0.35);
}

.site-footer .opacity-80 {
  opacity: 1 !important;
}

/* Explicit tracks per breakpoint rather than auto-fit */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

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

/* Two-up on phones instead of four stacked full-width blocks */
@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-grid > :last-child {
    grid-column: 1 / -1;
  }
}

/* Long unbroken strings (emails, phone numbers) must not set a floor width */
.site-footer {
  overflow-wrap: break-word;
}

/* --- Footer type scale --- */
.site-footer,
.site-footer p,
.site-footer a,
.site-footer span,
.site-footer div {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #FFFFFF;
}

.site-footer .text-sm { font-size: 0.85rem; }
.site-footer .text-xs { font-size: 0.8rem; }

.footer-brand p {
  color: #FFFFFF;
  margin-top: 0.75rem;
  max-width: 34ch;
  opacity: 1;
}

.footer-title {
  color: #F5C542;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.85rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

.footer-links a {
  color: #FFFFFF;
  font-weight: 400;
  opacity: 0.95;
}

.footer-links a:hover {
  color: #F5C542;
  opacity: 1;
}

.site-footer .text-gold {
  color: #F5C542 !important;
}

.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.footer-bottom-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
}

.footer-credit {
  font-size: 0.75rem;
  color: #F1F5F9;
}

.footer-credit a {
  color: #F5C542;
  font-weight: 700;
}

.footer-credit a:hover {
  color: #FFFFFF;
}

/* Stacked on mobile — the copyright line alone is long enough that forcing
   the credit onto the same row would crowd or wrap awkwardly at 375px. The
   divider only makes sense between two things sharing a line. */
@media (max-width: 640px) {
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 0.4rem;
  }

  .footer-bottom-divider {
    display: none;
  }
}

.site-footer .logo-img {
  height: 68px;
}

/* --- Mobile: centre the whole footer -------------------------------------
   Block-level children (the logo, the brand paragraph's max-width) need their
   own auto margins; text-align alone would leave them hugging the left. */
@media (max-width: 768px) {
  .site-footer {
    text-align: center;
  }

  .site-footer .logo-img {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-brand p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links {
    padding-left: 0;
  }
}

/* The mobile sticky action bar (Call / WhatsApp / Quote) was removed, along
   with the 70px body padding that reserved room for it — that padding would
   otherwise leave dead space at the bottom of every phone page. */

/* ==========================================================================
   MOBILE CENTER ALIGNMENT
   Section titles/descriptions and a few cards (feature-box, process steps,
   gallery, footer) were already centred on mobile; this brings the rest of
   the page's text blocks in line with them. Left out on purpose: form fields
   (.form-label/.form-input — a centred form is harder to scan and fill), and
   the price breakdown row (.calc-breakdown-item, a label/value pair that
   relies on space-between to stay readable).
   ========================================================================== */
@media (max-width: 768px) {
  .hero-content,
  .hero-stats {
    text-align: center;
  }

  .service-card,
  .review-card {
    text-align: center;
  }

  .service-icon-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .service-link {
    justify-content: center;
  }

  /* A checkmark list reads oddly with text-align alone (the bullets stay put
     while the text shifts) — centering each row as a flex unit keeps the
     check and its label moving together. */
  .service-list li {
    justify-content: center;
  }

  .contact-detail-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE FINE-TUNING (320px - 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.75rem;
  }

  /* The header row (wide logo + Get Quote + hamburger) once measured 434px
     against a 375px viewport, which is what forced the logo down in the first
     place. The mobile action bar is gone now and Get Quote is hidden below
     576px, so there is headroom again — re-verified against the 375px
     viewport at this larger size below. */
  .logo-img {
    height: 70px;
  }

  /* Long CTA labels wrap instead of forcing their row past the viewport */
  .btn {
    white-space: normal;
  }

  .header-actions {
    gap: 0.6rem;
  }

  .header-actions .btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }


  .hero-title {
    font-size: 2.25rem;
    line-height: 1.12;
  }

  .hero-subtitle {
    font-size: 0.975rem;
    margin-bottom: 1.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

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

  .hero-stats {
    gap: 0.75rem;
    padding-top: 1.25rem;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .hero-img {
    height: 320px;
  }

  .visualizer-section {
    padding: 2.5rem 1.25rem;
    border-radius: var(--radius-lg);
  }

  .visualizer-preview-box {
    height: 300px;
  }

  .visualizer-controls-panel {
    padding: 1.25rem;
  }

  .option-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .opt-btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }

  .calculator-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .calc-result-box {
    padding: 1.75rem 1.25rem;
  }

  .calc-price-amount {
    font-size: 2.35rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }

  .gallery-item {
    height: 185px;
  }

  .gallery-overlay {
    padding: 0.85rem;
  }

  .gallery-overlay-title {
    font-size: 0.95rem;
  }

  .gallery-overlay-tag {
    font-size: 0.7rem;
  }

  .contact-info-box {
    padding: 1.75rem;
    border-radius: var(--radius-lg);
  }

  /* Column gap deliberately left to the rule above: a 2rem gap here pushed two
     150px tracks to 332px against 327px of available width, so auto-fit fell
     back to a single column and the footer stacked into four full-width rows. */
  .footer-grid {
    row-gap: 1.5rem;
  }
}

@media (max-width: 576px) {
  /* On the narrowest screens the header "Get Quote" is dropped — Price
     Estimator in the hero and the footer/contact CTAs already cover it, and
     dropping it here is what keeps the row comfortably inside 375px even at
     the larger logo size below. */
  .header-actions .btn-gold {
    display: none;
  }

  .logo-img {
    height: 72px;
  }
}

@media (max-width: 480px) {
  /* Kept at two columns: a single column made the gallery alone ~2,600px of
     scroll on a phone. Two up reads fine at this tile size and halves it. */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .gallery-item {
    height: 165px;
  }
}